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:46:10 -08:00
parent 57a9ffe6ab
commit 754a2c16bd
1 changed files with 70 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -93,4 +93,74 @@
</div>
</div>
</div>
<div class="l-section">
<h2>Checkboxes</h2>
<div class="cols cols1-1">
<div class="col">
<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>
</div>
<div class="col">
<h3>Markup</h3>
<pre>
</pre>
<h3>Example</h3>
<label class="checkbox custom no-text">
<input type="checkbox" />
<em></em>
</label>
<br />
<label class="checkbox custom no-text">
<input type="checkbox" checked />
<em></em>
</label>
<br />
<label class="checkbox custom">Here's one with a label
<input type="checkbox" />
<em></em>
</label>
</div>
</div>
</div>
<div class="l-section">
<h2>Radio Buttons</h2>
<div class="cols cols1-1">
<div class="col">
<p>Radio buttons use the same technique as checkboxes above.</p>
</div>
<div class="col">
<h3>Markup</h3>
<pre>
</pre>
<h3>Example</h3>
<label class="checkbox custom no-text">
<input type="radio" />
<em></em>
</label>
<br />
<label class="checkbox custom no-text">
<input type="radio" checked />
<em></em>
</label>
<br />
<label class="checkbox custom">Here's one with a label
<input type="radio" />
<em></em>
</label>
</div>
</div>
</div>
</div>