ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-19 05:07:52 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Frontend] Normalize color constants

Browse Source 
Fixes #1047
Normalize color constant values for themes; consolidated
and cleaned up btn-related mixins; fixed hover color issues
This commit is contained in:
Charles Hacskaylo 2016-07-21 15:11:28 -07:00
parent 421286c7e4
commit 2704640b94
6 changed files with 28 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
platform/commonUI/general/res/sass/_mixins.scss
View File

@ -308,22 +308,31 @@
display: inline-block;
}
@mixin btnBase($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@mixin btnBase($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
@include user-select(none);
.icon {
color: $fg;
.icon,
&:before {
color: $ic;
}
@if $bgHovColor != none {
@if $bgHov != none {
&:not(.disabled):hover {
background: $bgHovColor; // was just background, and background-image before that
background: $bgHov;
color: $fgHov;
>.icon,
&:before {
color: pullForward($ic, $ltGamma);
color: $icHov;
}
}
}
}
@mixin btnSubtle($bg: $colorBtnBg, $bgHov: $colorBtnBgHov, $fg: $colorBtnFg, $fgHov: $colorBtnFgHov, $ic: $colorBtnIcon, $icHov: $colorBtnIconHov) {
@include containerSubtle($bg, $fg);
@include btnBase($bgHov: $bgHov, $fg: $fg, $fgHov: $fgHov, $ic: $ic, $icHov: $icHov);
text-shadow: $shdwItemText;
}
@mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
@include appearance(none);
border-radius: $controlCr;

4
platform/commonUI/general/res/sass/controls/_buttons.scss
View File

@ -55,9 +55,7 @@ $pad: $interiorMargin * $baseRatio;
}
&.major {
$bg: $colorBtnMajorBg;
$hc: pullForward($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
@include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
}
&.no-label {

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

@ -23,9 +23,12 @@ $colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: $colorBodyFg;
$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
$colorBtnIcon: $colorBtnFg;
$colorBtnIconHov: $colorBtnFgHov;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
$colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
$colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px;

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

@ -1,15 +1,9 @@
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg, $hover: false) {
@mixin containerSubtle($bg: $colorBodyBg, $fg: $colorBodyFg) {
@include containerBase($bg, $fg);
@include background-image(linear-gradient(lighten($bg, 5%), $bg));
@include boxShdw($shdwBtns);
}
@mixin btnSubtle($bg: $colorBodyBg, $bgHovColor: none, $fg: $colorBodyFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg);
@include btnBase($bg, $bgHovColor, $fg, $ic);
text-shadow: $shdwItemText;
}
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces
@return lighten($c, $p);

11
platform/commonUI/themes/snow/res/sass/_constants.scss
View File

@ -8,7 +8,7 @@ $colorKeySelectedBg: $colorKey;
$colorKeyFg: #fff;
$colorKeyHov: pullForward($colorKey, 20%);
$colorEditAreaBg: #eafaff;
$colorEditAreaFg: #4bb1c7; //587ab5;
$colorEditAreaFg: #4bb1c7;
$colorInteriorBorder: rgba($colorBodyFg, 0.2);
$colorA: #999;
$colorAHov: $colorKey;
@ -22,10 +22,13 @@ $smallCr: 3px;
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: #fff;
$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
$colorBtnFgHov: $colorBtnFg;
$colorBtnIcon: #eee;
$colorBtnIconHov: $colorBtnFgHov;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: #007fbc;
$colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
$colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 40%;
$shdwBtns: none;

6
platform/commonUI/themes/snow/res/sass/_mixins.scss
View File

@ -3,12 +3,6 @@
@include boxShdw($shdwBtns);
}
@mixin btnSubtle($bg: $colorBtnBg, $bgHovColor: none, $fg: $colorBtnFg, $ic: $colorBtnIcon) {
@include containerSubtle($bg, $fg);
@include btnBase($bg, $bgHovColor, $fg, $ic);
text-shadow: $shdwItemText;
}
@function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces
@return darken($c, $p);