ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-02 16:53:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Docs] WIP Style Guide

Browse Source 
Fixes #1233
Additional content; tweak to H3 margins
This commit is contained in:
Charles Hacskaylo 2017-01-30 14:42:28 -08:00
parent bd397c869e
commit e010dbb324
2 changed files with 62 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
example/styleguide/res/sass/_style-guide-base.scss
View File

@ -37,7 +37,7 @@
//border-bottom: 1px solid $colorInteriorBorder; //border-bottom: 1px solid $colorInteriorBorder;
font-size: 0.9em; font-size: 0.9em;
margin: $interiorMargin 0; margin: $interiorMargin 0;
&:not(first-child) { margin-top: $interiorMargin * 2; } &:not(:first-child) { margin-top: $interiorMarginLg * 2; }
text-transform: uppercase; text-transform: uppercase;
} }
@ -45,7 +45,7 @@
pre { pre {
background-color: pushBack($colorBodyBg, 20%); background-color: pushBack($colorBodyBg, 20%);
display: inline-block; display: inline-block;
font-size: 0.8em; font-size: 0.8rem;
} }
code { code {
@ -55,8 +55,11 @@
pre { pre {
border-radius: $interiorMargin; border-radius: $interiorMargin;
display: block;
margin: 0; margin: 0;
overflow: auto;
padding: $interiorMargin $interiorMarginLg; padding: $interiorMargin $interiorMarginLg;
white-space: pre;
} }
.doc-title { .doc-title {

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

@ -37,7 +37,8 @@
<a class="s-button">Edit</a> <a class="s-button">Edit</a>
<a class="s-button icon-pencil"> <a class="s-button icon-pencil">
<span class="title-label">Edit</span> <span class="title-label">Edit</span>
</a></mct-example> </a>
</mct-example>
</div> </div>
</div> </div>
@ -47,15 +48,9 @@
<div class="col"> <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> <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>
<div class="col"> <mct-example><a class="s-button major">Ok</a>
<h3>Markup</h3> <a class="s-button">Cancel</a>
<pre> </mct-example>
&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> </div>
@ -66,21 +61,12 @@
<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>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> <p>To use, simply wrap two or more <code>.s-button</code> elements within <code>.l-btn-set</code>.</p>
</div> </div>
<div class="col"> <mct-example><span class="l-btn-set">
<h3>Markup</h3>
<pre>
&lt;span class="l-btn-set"&gt;
&lt;a class="s-button icon-magnify"&gt;&lt;/a&gt;
&lt;a class="s-button icon-magnify-in"&gt;&lt;/a&gt;
&lt;a class="s-button icon-magnify-out"&gt;&lt;/a&gt;
&lt;/span&gt;</pre>
<h3>Example</h3>
<span class="l-btn-set">
<a class="s-button icon-magnify"></a> <a class="s-button icon-magnify"></a>
<a class="s-button icon-magnify-in"></a> <a class="s-button icon-magnify-in"></a>
<a class="s-button icon-magnify-out"></a> <a class="s-button icon-magnify-out"></a>
</span> </span>
</div> </mct-example>
</div> </div>
</div> </div>
@ -91,28 +77,20 @@
<p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p> <p>Checkboxes use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
<p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p> <p>The basic structure is a <code>label</code> with a checkbox-type input and an <code>em</code> element inside. The <code>em</code> is needed as the holder of the custom element; the input itself is hidden. Putting everything inside the <code>label</code> allows the label itself to act as a clickable element.</p>
</div> </div>
<div class="col"> <mct-example><label class="checkbox custom no-text">
<h3>Markup</h3>
<pre>
</pre>
<h3>Example</h3>
<label class="checkbox custom no-text">
<input type="checkbox" /> <input type="checkbox" />
<em></em> <em></em>
</label> </label>
<br /> <br />
<label class="checkbox custom no-text"> <label class="checkbox custom no-text">
<input type="checkbox" checked /> <input type="checkbox" checked />
<em></em> <em></em>
</label> </label>
<br /> <br />
<label class="checkbox custom">Here's one with a label <label class="checkbox custom">Checkbox with a text in the label
<input type="checkbox" /> <input type="checkbox" />
<em></em> <em></em>
</label> </label></mct-example>
</div>
</div> </div>
</div> </div>
@ -122,29 +100,41 @@
<div class="col"> <div class="col">
<p>Radio buttons use the same technique as checkboxes above.</p> <p>Radio buttons use the same technique as checkboxes above.</p>
</div> </div>
<div class="col"> <mct-example><label class="radio custom">Red
<h3>Markup</h3> <input name="Alarm Status" type="radio" />
<pre>
</pre>
<h3>Example</h3>
<label class="checkbox custom no-text">
<input type="radio" />
<em></em> <em></em>
</label> </label>
<br /> <br>
<label class="checkbox custom no-text"> <label class="radio custom">Orange
<input type="radio" checked /> <input name="Alarm Status" type="radio" checked />
<em></em> <em></em>
</label> </label>
<br /> <br>
<label class="checkbox custom">Here's one with a label <label class="radio custom">Yellow
<input type="radio" /> <input name="Alarm Status" type="radio" />
<em></em> <em></em>
</label> </label>
</mct-example>
</div> </div>
</div> </div>
<div class="l-section">
<h2>Selects</h2>
<div class="cols cols1-1">
<div class="col">
<p>Similar to checkboxes and radio buttons, selects use a combination of minimal additional markup with CSS to present a custom and common look-and-feel across platforms.</p>
</div>
<mct-example><div class="select">
<select>
<option value="" selected="selected">- Select One -</option>
<option value="Colussus">Colussus</option>
<option value="HAL 9000">HAL 9000</option>
<option value="Mother">Mother</option>
<option value="Skynet">Skynet</option>
</select>
</div>
</mct-example>
</div>
</div> </div>
</div> </div>