ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-05 02:29:21 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Fixed colors

Browse Source 
Fixes #1047
WIP: fixed colors  and style defs related to clickable
icons
This commit is contained in:
Charles Hacskaylo 2016-07-21 17:07:49 -07:00
parent c2db6f8805
commit d43bff1445
6 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
platform/commonUI/general/res/sass/controls/_controls.scss
View File

@ -74,16 +74,14 @@
.s-clickable-icon { .s-clickable-icon {
// Clickable icon elements that have hover // Clickable icon elements that have hover
// .s-toggles means the element is capable of having .active applied to it
@extend .ui-symbol; @extend .ui-symbol;
color: $colorClickIcon; color: $colorClickIcon;
&.active { &:hover { color: $colorClickIconHov; }
color: $colorClickIconActive; &.s-toggles {
//&:hover { color: rgba($colorClickIcon, 0.5) !important;
// color: rgba($colorClickIconActive, 0.7); &.active { color: $colorClickIconActive !important; }
//} &:hover { color: rgba($colorClickIconHov, 0.5) !important; }
}
&:hover {
color: $colorClickIconHov;
} }
} }

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

@ -29,9 +29,9 @@ $colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent); $colorBtnMajorBgHov: pullForward($colorBtnMajorBg, $hoverRatioPercent);
$colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent); $colorBtnMajorFgHov: pullForward($colorBtnMajorFg, $hoverRatioPercent);
$colorClickIcon: pullForward($colorBodyBg, 10%); $colorClickIcon: $colorBodyFg;
$colorClickIconActive: $colorKey; $colorClickIconActive: $colorKey;
$colorClickIconHov: rgba($colorClickIconActive, 0.4); $colorClickIconHov: $colorClickIconActive;
$colorInvokeMenu: #fff; $colorInvokeMenu: #fff;
$contrastInvokeMenuPercent: 20%; $contrastInvokeMenuPercent: 20%;
$shdwBtns: rgba(black, 0.2) 0 1px 2px; $shdwBtns: rgba(black, 0.2) 0 1px 2px;

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

@ -29,9 +29,9 @@ $colorBtnMajorBg: $colorKey;
$colorBtnMajorBgHov: #007fbc; $colorBtnMajorBgHov: #007fbc;
$colorBtnMajorFg: $colorKeyFg; $colorBtnMajorFg: $colorKeyFg;
$colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent); $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, $hoverRatioPercent);
$colorClickIcon: pullForward($colorBodyBg, 10%); $colorClickIcon: $colorBodyFg;
$colorClickIconActive: $colorKey; $colorClickIconActive: $colorKey;
$colorClickIconHov: rgba($colorClickIconActive, 0.4); $colorClickIconHov: $colorClickIconActive;
$colorInvokeMenu: #000; $colorInvokeMenu: #000;
$contrastInvokeMenuPercent: 40%; $contrastInvokeMenuPercent: 40%;
$shdwBtns: none; $shdwBtns: none;

2
platform/features/clock/res/templates/timer.html
View File

@ -23,7 +23,7 @@
<div class="l-elem-wrapper l-flex-row"> <div class="l-elem-wrapper l-flex-row">
<a ng-click="timer.clickButton()" <a ng-click="timer.clickButton()"
title="{{timer.buttonText()}}" title="{{timer.buttonText()}}"
class="flex-elem control {{timer.buttonCssClass()}}"></a> class="flex-elem control s-clickable-icon {{timer.buttonCssClass()}}"></a>
<span class="flex-elem l-value {{timer.signClass()}}"> <span class="flex-elem l-value {{timer.signClass()}}">
<span class="value" <span class="value"
ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}} ng-class="{ active:timer.text() }">{{timer.text() || "--:--:--"}}

5
platform/features/timeline/res/sass/_timelines.scss
View File

@ -302,12 +302,9 @@
.l-swimlanes-holder .l-cols { .l-swimlanes-holder .l-cols {
.l-col-icon, .l-col-icon,
.l-col-icon a { .l-col-icon a:not(.s-toggles) {
color: $colorKey; color: $colorKey;
} }
.t-toggle .inactive {
color: $colorBtnBg;
}
} }
.l-pane-l { .l-pane-l {

4
platform/features/timeline/res/templates/tabular-swimlane-cols-tree.html
View File

@ -28,10 +28,10 @@
'drop-after': ngModel.highlightBottom() 'drop-after': ngModel.highlightBottom()
}"> }">
<div class="l-cols"> <div class="l-cols">
<span class="l-col l-col-icon l-plot-resource t-toggle" <span class="l-col l-col-icon l-plot-resource"
ng-click="ngModel.toggleGraph(); parameters.commit()" ng-click="ngModel.toggleGraph(); parameters.commit()"
title="Click to enable or disable inclusion in Resource Graphing"> title="Click to enable or disable inclusion in Resource Graphing">
<span class="icon-plot-resource s-clickable-icon" <span class="icon-plot-resource s-clickable-icon s-toggles"
ng-class="{ active: ngModel.graph() }"> ng-class="{ active: ngModel.graph() }">
</span> </span>
</span> </span>