alihan/openmct
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Frontend] WIP Style Guide

Browse Source 
Fixes #1233
Mods to core CSS for consistency
This commit is contained in:
Charles Hacskaylo
2017-01-31 16:09:24 -08:00
parent 43117a7ebe
commit caa489f58a
2 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -212,14 +212,20 @@ label.form-control.checkbox {
} }
} }
/******************************************************** INPUTS */ /******************************************************** PLACEHOLDERS */
input[type="text"], input[type="text"],
input[type="search"] { input[type="search"],
@include nice-input(); textarea {
@include placeholder { @include placeholder {
color: rgba($colorInputFg, 0.4); color: rgba($colorInputFg, 0.4);
font-style: italic; font-style: italic;
} }
}
/******************************************************** INPUTS */
input[type="text"],
input[type="search"] {
@include nice-input();
&.numeric { &.numeric {
text-align: right; text-align: right;
} }
@@ -231,11 +237,16 @@ input[type="text"].lg { width: 100% !important; }
input[type="text"].med { width: 200px !important; } input[type="text"].med { width: 200px !important; }
.l-input-sm input[type="text"], .l-input-sm input[type="text"],
input[type="text"].sm { width: 50px !important; } input[type="text"].sm { width: 50px !important; }
.l-textarea-sm textarea,
textarea.sm { position: relative; height: 50px; }
.l-numeric input[type="text"], .l-numeric input[type="text"],
input[type="text"].numeric { text-align: right; } input[type="text"].numeric { text-align: right; }
.l-textarea-sm textarea,
textarea.sm { position: relative; height: 50px; }
.l-textarea-med textarea,
textarea.med { position: relative; height: 150px; }
.l-textarea-lg textarea,
textarea.lg { position: relative; height: 300px; }
.input-labeled { .input-labeled {
// Used in toolbar // Used in toolbar
margin-left: $interiorMargin; margin-left: $interiorMargin;

22
platform/commonUI/general/res/sass/items/_item.scss
View File

@@ -26,20 +26,20 @@
top: 0; top: 0;
} }
.item { .item {
$d: $ueBrowseGridItemLg;
$iconMargin: 40px;
$iconD: ($d - ($iconMargin * 2)) * 0.85;
box-sizing: border-box;
float: left;
height: $d;
width: $d;
margin-bottom: $interiorMarginSm;
margin-right: $interiorMarginSm;
position: relative;
&.grid-item { &.grid-item {
$d: $ueBrowseGridItemLg;
$iconMargin: 40px;
$iconD: ($d - ($iconMargin * 2)) * 0.85;
$transTime: 200ms; $transTime: 200ms;
@include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc); @include btnSubtle($bg: $colorItemBg, $bgHov: $colorItemBgHov, $fg: $colorItemFg, $fgHov: pullForward($colorItemFg, $hoverRatioPercent), $ic: $colorItemIc);
box-sizing: border-box;
cursor: pointer; cursor: pointer;
float: left;
height: $d;
width: $d;
margin-bottom: $interiorMarginSm;
margin-right: $interiorMarginSm;
position: relative;
&:hover .item-main { &:hover .item-main {
.item-type { .item-type {
color: lighten($colorKey, 10%); color: lighten($colorKey, 10%);
@@ -51,7 +51,7 @@
opacity: 1; opacity: 1;
} }
} }
.contents { .abs.contents {
$m: $interiorMarginLg; $m: $interiorMarginLg;
top: $m; right: $m; bottom: $m; left: $m; top: $m; right: $m; bottom: $m; left: $m;
} }