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] Styling for TOI element in TC

Browse Source 
Fixes #933
Fixes #1193
WIP, tweaking TOI in TC
This commit is contained in:
Charles Hacskaylo 2016-09-22 10:33:05 -07:00
parent 27e6caf69b
commit c0a96b3c5f
4 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
platform/commonUI/general/res/sass/plots/_plots-main.scss
View File

@ -90,10 +90,9 @@
.l-toi-holder {
//@include test(green);
$cBg: #666 ;
$cBg: $toiColorBg;
$cBgPinnedOpacity: 0.3;
$cBgPinned: rgba($colorKey, 0.4);
//@include transform(translateX(-50%));
$cBgPinned: $toiColorBgPinned;
pointer-events: none;
position: absolute;
top: 0;
@ -103,42 +102,34 @@
width: 20%; // Needs to be an even number to avoid sub-pixel antialiasing of the vertical line
&:before {
// Vertical line
//background-color: $cBg;
border-left: 1px dashed $cBg;
content:'';
display: block;
left: 50%;
//@include transform(translateX(-50%));
position: absolute;
top: 0; bottom: 0;
width: 1px;
}
.l-toi-val {
//@include test(green);
background-color: $cBg;
color: #fff;
color: $toiColorFg;
box-sizing: border-box;
//display: inline-block;
padding: $interiorMarginSm $interiorMarginSm;
position: absolute;
text-align: center;
//white-space: nowrap;
width: 100%;
bottom: -2px;
border-radius: $controlCr;
.val {
@include reverseEllipsis();
//display: inline-block;
}
.t-unpin-button {
//display: inline-block;
margin-left: $interiorMarginSm;
pointer-events: auto;
}
}
&.pinned {
//opacity: 0.4;
&:before {
border-left-color: $cBgPinned;
border-left-style: solid;

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

@ -103,6 +103,14 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: $colorFormSectionHeader;
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Time of Interest
$toiColorBg: #666;
$toiColorBgHov: #999;
$toiColorFg: #fff;
$toiColorBgPinned: rgba($colorKey, 0.4);
$toiColorFgPinned: #fff;
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusFg: #ccc;
$colorStatusDefault: #ccc;

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

@ -103,6 +103,13 @@ $colorInspectorPropVal: pullForward($colorInspectorFg, 15%);
$colorInspectorSectionHeaderBg: pullForward($colorInspectorBg, 5%);
$colorInspectorSectionHeaderFg: pullForward($colorInspectorBg, 40%);
// Time of Interest
$toiColorBg: #666;
$toiColorBgHov: #999;
$toiColorFg: #fff;
$toiColorBgPinned: rgba($colorKey, 0.4);
$toiColorFgPinned: #fff;
// Status colors, mainly used for messaging and item ancillary symbols
$colorStatusFg: #fff;
$colorStatusDefault: #ccc;

6
platform/features/conductor-v2/conductor/res/sass/_time-conductor-base.scss
View File

@ -254,8 +254,8 @@
}
.l-toi-holder {
$c: $colorClickIcon;
$cHov: $colorClickIconHov;
$c: $toiColorBg;
$cHov: $toiColorBgHov;
$linesVOffset: 2px;
@include transform(translateX(-50%));
top: 0px; bottom: 0px;
@ -283,7 +283,7 @@
}
.l-toi {
$d: $timeCondTOIIconD; //$r2H * 0.65;
$d: $timeCondTOIIconD;
@include transform(translate(-50%, -50%));
color: $c;
font-size: $d;