alihan/openmct
1
0
Fork 0
Code Issues Pull Requests 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
Download Patch File Download Diff File Expand all files Collapse all files

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%);