ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-23 17:53:28 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
More content
This commit is contained in:
Charles Hacskaylo
2017-02-06 11:42:39 -08:00
parent f306180ab6
commit 10dcb3a667
7 changed files with 204 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,14 +23,14 @@
<p class="doc-title">Open MCT Style Guide</p>
<h1>Text Input</h1>
<div class="l-section">
<p>Intro about text input elements.</p>
<p>Text inputs and textareas have a consistent look-and-feel across the application. The input's <code>placeholder</code> attribute is styled to appear visually different from an entered value.</p>
</div>
<div class="l-section">
<h2>Text Inputs</h2>
<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>Use a text input where the user should enter relatively short text entries.</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" placeholder="Enter a value" />
@ -52,7 +52,7 @@
<h2>Textareas</h2>
<div class="cols cols1-1">
<div class="col">
<p>Textareas are styled in a similar fashion to text inputs. The textarea's <code>placeholder</code> is styled to appear visually different from an entered value.</p>
<p>Use a textarea where the user should enter relatively longer or multi-line text entries.</p>
<p>By default, textareas are styled to expand to 100% of the width and height of their container; additionally there are three size styles available that control the height of the element: <code>.lg</code>, <code>.med</code> and <code>.sm</code>.</p>
</div>
<mct-example><div style="position: relative; height: 100px">