ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 08:25:31 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Docs] WIP Style Guide

Browse Source 
Fixes #1233
Additional content; adding size classes to
input[type="text"] to allow direct application to
the input; added placeholder styling and related
thematic constants.
This commit is contained in:
Charles Hacskaylo 2017-01-30 15:57:55 -08:00
parent 93aa6a18f2
commit 563b02bb1d
4 changed files with 41 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -104,12 +104,12 @@
<input name="Alarm Status" type="radio" />
<em></em>
</label>
<br>
<br />
<label class="radio custom">Orange
<input name="Alarm Status" type="radio" checked />
<em></em>
</label>
<br>
<br />
<label class="radio custom">Yellow
<input name="Alarm Status" type="radio" />
<em></em>
@ -137,5 +137,28 @@
</div>
</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" value="A previously entered value" />
<br /><br />
<input type="text" class="numeric" value="Numeric" />
<br /><br />
<input type="text" class="lg" value="A large input" />
<br /><br />
<input type="text" class="med" value="A medium input" />
<br /><br />
<input type="text" class="sm" value="Small" />
</mct-example>
</div>
</div>
</div>

19
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -216,16 +216,25 @@ label.form-control.checkbox {
input[type="text"],
input[type="search"] {
@include nice-input();
@include placeholder {
color: rgba($colorInputFg, 0.4);
font-style: italic;
}
&.numeric {
text-align: right;
}
}
.l-input-lg input[type="text"] { width: 100% !important; }
.l-input-med input[type="text"] { width: 200px !important; }
.l-input-sm input[type="text"] { width: 50px !important; }
.l-textarea-sm textarea { position: relative; height: 50px; }
.l-numeric input[type="text"] { text-align: right; }
.l-input-lg input[type="text"],
input[type="text"].lg { width: 100% !important; }
.l-input-med input[type="text"],
input[type="text"].med { width: 200px !important; }
.l-input-sm input[type="text"],
input[type="text"].sm { width: 50px !important; }
.l-textarea-sm textarea,
textarea.sm { position: relative; height: 50px; }
.l-numeric input[type="text"],
input[type="text"].numeric { text-align: right; }
.input-labeled {
// Used in toolbar

1
platform/commonUI/themes/espresso/res/sass/_constants.scss
View File

@ -92,6 +92,7 @@ $colorFormLines: rgba(#fff, 0.1);
$colorFormSectionHeader: rgba(#fff, 0.1);
$colorInputBg: rgba(#000, 0.1);
$colorInputFg: pullForward($colorBodyFg, 20%);
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
$colorFormText: rgba(#fff, 0.5);
$colorInputIcon: pushBack($colorBodyFg, 15%);
$colorFieldHint: pullForward($colorBodyFg, 20%);

1
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -92,6 +92,7 @@ $colorFormLines: rgba(#000, 0.1);
$colorFormSectionHeader: rgba(#000, 0.05);
$colorInputBg: $colorGenBg;
$colorInputFg: $colorBodyFg;
$colorInputPlaceholder: pushBack($colorBodyFg, 20%);
$colorFormText: pushBack($colorBodyFg, 10%);
$colorInputIcon: pushBack($colorBodyFg, 25%);
$colorFieldHint: pullForward($colorBodyFg, 40%);