ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 16:36:13 +00:00
Code Issues Actions 4 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
Show Stats 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="search"] {
@include nice-input();
input[type="search"],
textarea {
@include placeholder {
color: rgba($colorInputFg, 0.4);
font-style: italic;
}
}
/******************************************************** INPUTS */
input[type="text"],
input[type="search"] {
@include nice-input();
&.numeric {
text-align: right;
}
@ -231,11 +237,16 @@ input[type="text"].lg { width: 100% !important; }
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; }
.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 {
// Used in toolbar
margin-left: $interiorMargin;

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

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