alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
Adds to text inputs content;
Mods to MCTExample to allow a padded
wrapper around <pre> element;
Fixed snow theme css file reference;
This commit is contained in:
Charles Hacskaylo
2017-01-31 17:21:22 -08:00
parent 3c81398865
commit 7543faa577
7 changed files with 36 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
example/styleguide/res/templates/input.html
View File

@@ -31,21 +31,19 @@
<div class="cols cols1-1">
<div class="col">
<p>Text inputs have a consistent look-and-feel across the application. The input's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
<p>A variety of size styles are available: <code>.lg</code>, <code>.med</code> and <code>.sm</code>. <code>.lg</code> text inputs dynamically scale their width to 100% of their container's width. Numeric inputs that benefit from right-alignment can be styled by adding <code>.numeric</code>.</p>
</div>
<mct-example><input type="text" />
<mct-example><input type="text" placeholder="Enter a value" />
<br /><br />
<input type="text" placeholder="Enter a value" />
<input type="text" placeholder="Enter a value" value="An entered value" />
<br /><br />
<input type="text" placeholder="Enter a value" value="A previously entered value" />
<br /><br />
<input type="text" placeholder="Enter a value" class="numeric" value="Numeric" />
<br /><br />
<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
<input type="text" placeholder="Enter a value" class="sm" value="Small" />
<br /><br />
<input type="text" placeholder="Enter a value" class="med" value="A medium input" />
<br /><br />
<input type="text" placeholder="Enter a value" class="sm" value="Small" />
<input type="text" placeholder="Enter a value" class="lg" value="A large input" />
<br /><br />
<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
</mct-example>
</div>
</div>
@@ -62,14 +60,14 @@
</div>
<br />
<div style="position: relative; height: 100px">
<textarea placeholder="Enter a value">A previously entered value</textarea>
<textarea placeholder="Enter a value">An entered value</textarea>
</div>
<br /><br />
<textarea placeholder="Enter a value" class="sm">A sm textarea</textarea>
<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
<br /><br />
<textarea placeholder="Enter a value" class="med">A med textarea</textarea>
<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
<br /><br />
<textarea placeholder="Enter a value" class="lg">A lg textarea</textarea>
<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
</mct-example>
</div>
</div>

10
example/styleguide/res/templates/mct-example.html
View File

@@ -1,6 +1,8 @@
<div class="col">
<h3>Markup</h3>
<pre><code></code></pre>
<h3>Example</h3>
<div></div>
<h3>Markup</h3>
<span class="w-markup">
<pre></pre>
</span>
<h3>Example</h3>
<div></div>
</div>