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/snow/res/sass/_constants.scss
View File

@@ -12,12 +12,14 @@ $colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
$contrastRatioPercent: 40%;
$hoverRatioPercent: 10%;
$basicCr: 4px;
$controlCr: $basicCr;
$smallCr: 3px;
// Buttons and Controls
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: #fff;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
@@ -54,7 +56,7 @@ $colorTick: rgba(black, 0.2);
$colorMenuBg: pushBack($colorBodyBg, 10%);
$colorMenuFg: pullForward($colorMenuBg, 70%);
$colorMenuIc: $colorKey;
$colorMenuHovBg: pullForward($colorMenuBg, 10%);
$colorMenuHovBg: pullForward($colorMenuBg, $hoverRatioPercent);
$colorMenuHovFg: $colorMenuFg;
$colorMenuHovIc: $colorMenuIc;
$shdwMenu: rgba(black, 0.5) 0 1px 5px;
@@ -89,6 +91,7 @@ $colorStatusDefault: #ccc;
$colorStatusInfo: #60ba7b;
$colorStatusAlert: #ffb66c;
$colorStatusError: #c96b68;
$colorStatusBtnBg: #666;
$colorProgressBarOuter: rgba(#000, 0.1);
$colorProgressBarAmt: #0a0;
$progressBarHOverlay: 15px;
@@ -123,7 +126,7 @@ $colorOvrBtnFg: #fff;
// Items
$colorItemBg: #ddd;
$colorItemBgHov: pullForward($colorItemBg, 5%);
$colorItemBgHov: pullForward($colorItemBg, $hoverRatioPercent);
$colorItemFg: $colorBodyFg;
$colorItemFgDetails: pushBack($colorItemFg, 15%);
$colorItemIc: $colorKey;
@@ -149,15 +152,15 @@ $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: $colorItemTreeIcon; //pushBack($colorItemTreeIcon, 20%);
$colorItemTreeIconHover: $colorItemTreeIcon;
$colorItemTreeVCHover: $colorKey;
$colorItemTreeFg: $colorBodyFg;
$colorItemTreeSelectedBg: pushBack($colorKey, 15%);
$colorItemTreeSelectedFg: $colorBodyBg;
$colorItemTreeEditingBg: #caf1ff; //#c6e3ff;
$colorItemTreeEditingBg: #caf1ff;
$colorItemTreeEditingFg: $colorEditAreaFg;
$colorItemTreeVC: $colorBodyFg;
$colorItemTreeSelectedVC: $colorBodyBg;