mirror of
https://github.com/nasa/openmct.git
synced 2025-01-03 20:04:09 +00:00
[Frontend] Refactoring Timeline glyphs, s-btn fixes
Fixes #1047 WIP: Timeline-related glyph refactoring; s-btn styles and hover color fixes
This commit is contained in:
parent
883f999215
commit
a4111f3855
platform
commonUI
general/res/sass
themes
features/timeline/res/sass
@ -316,8 +316,9 @@
|
|||||||
@if $bgHovColor != none {
|
@if $bgHovColor != none {
|
||||||
&:not(.disabled):hover {
|
&:not(.disabled):hover {
|
||||||
background: $bgHovColor; // was just background, and background-image before that
|
background: $bgHovColor; // was just background, and background-image before that
|
||||||
>.icon {
|
>.icon,
|
||||||
color: lighten($ic, $ltGamma);
|
&:before {
|
||||||
|
color: pullForward($ic, $ltGamma);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -75,8 +75,8 @@
|
|||||||
.s-clickable-icon {
|
.s-clickable-icon {
|
||||||
// Clickable icon elements that have hover
|
// Clickable icon elements that have hover
|
||||||
@extend .ui-symbol;
|
@extend .ui-symbol;
|
||||||
&:hover {
|
&.inactive:hover {
|
||||||
color: $colorKeyHov;
|
color: $colorBtnBgHov !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -22,9 +22,10 @@ $smallCr: 2px;
|
|||||||
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
$colorBtnBg: pullForward($colorBodyBg, $contrastRatioPercent);
|
||||||
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
$colorBtnBgHov: pullForward($colorBtnBg, $hoverRatioPercent);
|
||||||
$colorBtnFg: $colorBodyFg;
|
$colorBtnFg: $colorBodyFg;
|
||||||
|
$colorBtnFgHov: pullForward($colorBtnFg, $hoverRatioPercent);
|
||||||
$colorBtnMajorBg: $colorKey;
|
$colorBtnMajorBg: $colorKey;
|
||||||
$colorBtnMajorFg: $colorKeyFg;
|
$colorBtnMajorFg: $colorKeyFg;
|
||||||
$colorBtnIcon: $colorKey;
|
$colorBtnIcon: $colorBtnFg;
|
||||||
$colorInvokeMenu: #fff;
|
$colorInvokeMenu: #fff;
|
||||||
$contrastInvokeMenuPercent: 20%;
|
$contrastInvokeMenuPercent: 20%;
|
||||||
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
|
$shdwBtns: rgba(black, 0.2) 0 1px 2px;
|
||||||
|
@ -22,6 +22,7 @@ $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);
|
||||||
$colorBtnMajorBg: $colorKey;
|
$colorBtnMajorBg: $colorKey;
|
||||||
$colorBtnMajorFg: $colorKeyFg;
|
$colorBtnMajorFg: $colorKeyFg;
|
||||||
$colorBtnIcon: #eee;
|
$colorBtnIcon: #eee;
|
||||||
|
@ -306,7 +306,7 @@
|
|||||||
color: $colorKey;
|
color: $colorKey;
|
||||||
}
|
}
|
||||||
.t-toggle .inactive {
|
.t-toggle .inactive {
|
||||||
color: pullForward(rgba($colorBodyFg, 0.2));
|
color: $colorBtnBg;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user