mirror of
https://github.com/nasa/openmct.git
synced 2025-01-10 23:12:57 +00:00
f00182968b
Fixes #1233 Theme-based styling added; significant mods to layout; Content for controls page;
77 lines
3.1 KiB
HTML
77 lines
3.1 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2016, United States Government
|
|
as represented by the Administrator of the National Aeronautics and Space
|
|
Administration. All rights reserved.
|
|
|
|
Open MCT is licensed under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
http://www.apache.org/licenses/LICENSE-2.0.
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
License for the specific language governing permissions and limitations
|
|
under the License.
|
|
|
|
Open MCT includes source code licensed under additional open source
|
|
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
this source code distribution or the Licensing information page available
|
|
at runtime from the About dialog for additional information.
|
|
-->
|
|
<div class="l-style-guide s-text">
|
|
<p class="doc-title">Open MCT Style Guide: Controls</p>
|
|
<h1>Controls</h1>
|
|
<div class="l-section">
|
|
<p>Intro about controls</p>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Standard Buttons</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
|
|
<p>Use an icon whenever possible to aid the user's recognition and recall. If text is to be included, it must be within a <code>span</code> with class <code>title-label</code>.</p>
|
|
</div>
|
|
<div class="col">
|
|
<h3>Markup</h3>
|
|
<pre>
|
|
<a class="s-button icon-pencil"></a>
|
|
<a class="s-button">Edit</a>
|
|
<a class="s-button icon-pencil">
|
|
<span class="title-label">Edit</span>
|
|
</a></pre>
|
|
<h3>Examples</h3>
|
|
<a class="s-button icon-pencil"></a>
|
|
<a class="s-button">Edit</a>
|
|
<a class="s-button icon-pencil">
|
|
<span class="title-label">Edit</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Button Sets</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<p>Notes about button sets</p>
|
|
</div>
|
|
<div class="col">
|
|
<h3>Markup</h3>
|
|
<pre>
|
|
<span class="l-btn-set">
|
|
<a class="s-button icon-magnify"></a>
|
|
<a class="s-button icon-magnify-in"></a>
|
|
<a class="s-button icon-magnify-out"></a>
|
|
</span></pre>
|
|
<h3>Example</h3>
|
|
<span class="l-btn-set">
|
|
<a class="s-button icon-magnify"></a>
|
|
<a class="s-button icon-magnify-in"></a>
|
|
<a class="s-button icon-magnify-out"></a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |