ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 09:26:45 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

[Docs] WIP Style Guide

Browse Source 
Fixes #1233
This commit is contained in:
Charles Hacskaylo 2017-01-30 13:15:35 -08:00
parent f00182968b
commit 57a9ffe6ab
1 changed files with 21 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
example/styleguide/res/templates/controls.html
View File

@ -31,7 +31,7 @@
<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>
<p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
</div>
<div class="col">
<h3>Markup</h3>
@ -51,11 +51,30 @@
</div>
</div>
<div class="l-section">
<h2>&quot;Major&quot; Buttons</h2>
<div class="cols cols1-1">
<div class="col">
<p>Major buttons allow emphasis to be placed on a button. Use this on a single button when the user has a small number of choices, and one choice is a normal default. Just add <code>.major</code> to any element that uses <code>.s-button</code>.</p>
</div>
<div class="col">
<h3>Markup</h3>
<pre>
&lt;a class="s-button major"&gt;Ok&lt;/a&gt;
&lt;a class="s-button"&gt;Cancel&lt;/a&gt;</pre>
<h3>Example</h3>
<a class="s-button major">Ok</a>
<a class="s-button">Cancel</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>
<p>Use button sets to connect buttons that have related purpose or functionality. Buttons in a set round the outer corners of only the first and last buttons, any other buttons in the middle simply get division spacers.</p>
<p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
</div>
<div class="col">
<h3>Markup</h3>