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

[Frontend] Markup and CSS related to indicators; hover styles

Browse Source 
open #442
https://github.jpl.nasa.gov/MissionControl/vista/issues/293

s-btn hover styling cleaned up;
Spacing, styles, etc. for indicators refined;
Constants, colors added to, cleaned up and normalized;
Animation code in _effects refactored;
This commit is contained in:
Charles Hacskaylo
2016-02-19 17:59:32 -08:00
parent b0b2db24e0
commit ebf501ce71
10 changed files with 402 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.1);
$colorA: #ccc;
$colorAHov: #fff;
$contrastRatioPercent: 7%;
$hoverRatioPercent: 10%;
$basicCr: 3px;
$controlCr: 3px;
$smallCr: 2px;
// Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent); //
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: $colorBodyFg;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
@@ -54,7 +56,7 @@ $colorTick: rgba(white, 0.2);
$colorMenuBg: pullForward($colorBodyBg, 23%);
$colorMenuFg: pullForward($colorMenuBg, 70%);
$colorMenuIc: pullForward($colorKey, 17%);
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
$colorMenuHovFg: #fff;
$colorMenuHovIc: $colorMenuHovFg;
$shdwMenu: none;
@@ -89,6 +91,7 @@ $colorStatusDefault: #ccc;
$colorStatusInfo: #62ba72;
$colorStatusAlert: #ffa66d;
$colorStatusError: #d4585c;
$colorStatusBtnBg: $colorBtnBg;
$colorProgressBarOuter: rgba(#000, 0.1);
$colorProgressBarAmt: $colorKey;
$progressBarHOverlay: 15px;
@@ -123,7 +126,7 @@ $colorOvrBtnFg: #fff;
// Items
$colorItemBg: lighten($colorBodyBg, 5%);
$colorItemBgHov: pullForward($colorItemBg, 15%);
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
$colorItemFg: lighten($colorItemBg, 50%);
$colorItemFgDetails: lighten($colorItemBg, 30%);
$colorItemIc: $colorKey;
@@ -149,8 +152,8 @@ $colorPlotAreaBorder: $colorInteriorBorder;
$colorPlotLabelFg: pushBack($colorPlotFg, 20%);
// Tree
$colorItemTreeHoverBg: rgba($colorBodyFg, 0.1);
$colorItemTreeHoverFg: pullForward($colorBodyFg, 20%);
$colorItemTreeHoverBg: pullForward($colorBodyBg, $hoverRatioPercent);
$colorItemTreeHoverFg: pullForward($colorBodyFg, $hoverRatioPercent);
$colorItemTreeIcon: $colorKey;
$colorItemTreeIconHover: lighten($colorItemTreeIcon, 20%);
$colorItemTreeVCHover: $colorAlt1;
@@ -165,10 +168,10 @@ $shdwItemTreeIcon: 0.6;
// Scrollbar
$scrollbarTrackSize: 10px;
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
$scrollbarTrackColorBg: rgba(#000, 0.4);
$scrollbarThumbColor: lighten($colorBodyBg, 10%);
$scrollbarThumbColorHov: lighten($scrollbarThumbColor, 2%);
$scrollbarTrackShdw: rgba(#000, 0.7) 0 1px 5px;
// Splitter
$splitterD: 25px; // splitterD and HandleD should both be odd, or even

4
platform/commonUI/themes/espresso/res/sass/_mixins.scss
View File

@@ -4,9 +4,9 @@
@include boxShdw($shdwBtns);
}
@mixin btnSubtle($bg: $colorBodyBg, $bgHov: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@mixin btnSubtle($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg);
@include btnBase($bg, linear-gradient(lighten($bg, 15%), lighten($bg, 10%)), $fg, $ic);
@include btnBase($bg, $bgHovColor, $fg, $ic);
@include text-shadow($shdwItemText);
}