mirror of
https://github.com/nasa/openmct.git
synced 2024-12-23 15:02:23 +00:00
78 lines
3.5 KiB
HTML
78 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: Text Input</p>
|
||
|
<h1>Text Input</h1>
|
||
|
<div class="l-section">
|
||
|
<p>Intro about text input elements.</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>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>
|
||
|
</div>
|
||
|
<mct-example><input type="text" />
|
||
|
<br /><br />
|
||
|
<input type="text" placeholder="Enter a 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" />
|
||
|
<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" />
|
||
|
</mct-example>
|
||
|
</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="l-section">
|
||
|
<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>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">A previously entered value</textarea>
|
||
|
</div>
|
||
|
<br /><br />
|
||
|
<textarea placeholder="Enter a value" class="sm">A sm textarea</textarea>
|
||
|
<br /><br />
|
||
|
<textarea placeholder="Enter a value" class="med">A med textarea</textarea>
|
||
|
<br /><br />
|
||
|
<textarea placeholder="Enter a value" class="lg">A lg textarea</textarea>
|
||
|
</mct-example>
|
||
|
</div>
|
||
|
</div>
|
||
|
</div>
|
||
|
|