ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2024-12-21 22:17:49 +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; 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); @include user-select(none);
.icon { color: $fg;
.icon,
&:before {
color: $ic; color: $ic;
} }
@if $bgHovColor != none { @if $bgHov != none {
&:not(.disabled):hover { &:not(.disabled):hover {
background: $bgHovColor; // was just background, and background-image before that background: $bgHov;
color: $fgHov;
>.icon, >.icon,
&:before { &: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) { @mixin input-base($bg: $colorInputBg, $fg: $colorInputFg, $shdw: rgba(black, 0.6) 0 1px 3px) {
@include appearance(none); @include appearance(none);
border-radius: $controlCr; border-radius: $controlCr;

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

@ -55,9 +55,7 @@ $pad: $interiorMargin * $baseRatio;
} }
&.major { &.major {
$bg: $colorBtnMajorBg; @include btnSubtle($bg: $colorBtnMajorBg, $bgHov: $colorBtnMajorBgHov, $fg: $colorBtnMajorFg, $fgHov: $colorBtnMajorFgHov, $ic: $colorBtnMajorFg, $icHov: $colorBtnMajorFgHov);
$hc: pullForward($bg, 10%);
@include btnSubtle($bg, $hc, $colorBtnMajorFg, $colorBtnMajorFg);
} }
&.no-label { &.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); $colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
$colorBtnFg: $colorBodyFg; $colorBtnFg: $colorBodyFg;
$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent); $colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
$colorBtnMajorBg: $colorKey;
$colorBtnMajorFg: $colorKeyFg;
$colorBtnIcon: $colorBtnFg; $colorBtnIcon: $colorBtnFg;
$colorBtnIconHov: $colorBtnFgHov;
$colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
$colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%; $contrastInvokeMenuPercent: 20%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px; $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 containerBase($bg, $fg);
@include background-image(linear-gradient(lighten($bg, 5%), $bg)); @include background-image(linear-gradient(lighten($bg, 5%), $bg));
@include boxShdw($shdwBtns); @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%) { @function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces // For dark interfaces, lighter things come forward - opposite for light interfaces
@return lighten($c, $p); @return lighten($c, $p);

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

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

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

@ -3,12 +3,6 @@
@include boxShdw($shdwBtns); @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%) { @function pullForward($c: $colorBodyBg, $p: 20%) {
// For dark interfaces, lighter things come forward - opposite for light interfaces // For dark interfaces, lighter things come forward - opposite for light interfaces
@return darken($c, $p); @return darken($c, $p);