mirror of
https://github.com/nasa/openmct.git
synced 2024-12-27 16:38:51 +00:00
76 lines
3.5 KiB
HTML
76 lines
3.5 KiB
HTML
<!--
|
|
Open MCT, Copyright (c) 2014-2016, United States Government
|
|
as represented by the Administrator of the National Aeronautics and Space
|
|
Administration. All rights reserved.
|
|
|
|
Open MCT is licensed under the Apache License, Version 2.0 (the
|
|
"License"); you may not use this file except in compliance with the License.
|
|
You may obtain a copy of the License at
|
|
http://www.apache.org/licenses/LICENSE-2.0.
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
License for the specific language governing permissions and limitations
|
|
under the License.
|
|
|
|
Open MCT includes source code licensed under additional open source
|
|
licenses. See the Open Source Licenses file (LICENSES.md) included with
|
|
this source code distribution or the Licensing information page available
|
|
at runtime from the About dialog for additional information.
|
|
-->
|
|
<div class="l-style-guide s-text">
|
|
<p class="doc-title">Open MCT Style Guide</p>
|
|
<h1>Text Input</h1>
|
|
<div class="l-section">
|
|
<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>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" />
|
|
<br /><br />
|
|
<input type="text" placeholder="Enter a value" value="An entered value" />
|
|
<br /><br />
|
|
<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="lg" value="A large input" />
|
|
<br /><br />
|
|
<input type="text" placeholder="Enter a value" class="sm numeric" value="10.9" />
|
|
</mct-example>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="l-section">
|
|
<h2>Textareas</h2>
|
|
<div class="cols cols1-1">
|
|
<div class="col">
|
|
<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">
|
|
<textarea placeholder="Enter a value"></textarea>
|
|
</div>
|
|
<br />
|
|
<div style="position: relative; height: 100px">
|
|
<textarea placeholder="Enter a value">An entered value</textarea>
|
|
</div>
|
|
<br /><br />
|
|
<textarea placeholder="Enter a value" class="sm">A small textarea</textarea>
|
|
<br /><br />
|
|
<textarea placeholder="Enter a value" class="med">A medium textarea</textarea>
|
|
<br /><br />
|
|
<textarea placeholder="Enter a value" class="lg">A large textarea</textarea>
|
|
</mct-example>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|