ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 00:23:54 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Styling complete on Follow Line

Browse Source 
Fixes #1688
This commit is contained in:
Charles Hacskaylo 2017-09-20 10:09:19 -07:00
parent 563a86b69f
commit cff85fbbde
4 changed files with 60 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
platform/features/timeline/res/sass/_timeline-thematic.scss
View File

@ -29,6 +29,44 @@
}
}
}
// Follow Line
.l-follow-line {
// TODO: move before and after into l-timeline-gantt so those only render in that pane
pointer-events: none;
position: absolute;
top: 0; bottom: 0;
width: 1px;
z-index: 9; // Just below .l-hover-btns-holder
}
}
.l-timeline-gantt {
.l-follow-line {
$d: 0.8rem;
top: $interiorMargin;
&:before,
&:after {
content: '';
display: block;
height: $d;
width: $d;
position: absolute;
top: 0;
@include transform(translateX(-50%));
}
&:before {
// Icon blocker
width: 2 * $d;
}
&:after {
// Icon
font-size: $d;
line-height: $d;
text-align: center;
}
}
}
.s-timeline-gantt {
@ -108,10 +146,9 @@
}
.s-hover-btns-holder {
$bg: $timelineHeaderColorBg;
$bga: 1;
$l: 5%;
@include user-select(none);
@include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
@include background-image(linear-gradient(-90deg, rgba($bg, 1), rgba($bg, 1) 70%, rgba($bg, 0) 100%));
.s-button {
height: 16px;
line-height: 16px;
@ -131,8 +168,25 @@
}
.s-follow-line {
&:before {
background: $timelineHeaderColorBg;
background: rgba($timeControllerToiLineColor, 0.5);
}
.s-timeline-gantt {
.s-follow-line {
&:after {
// Icon
color: $timeControllerToiLineColor;
content: $glyph-icon-timer;
font-family: symbolsfont;
text-shadow: $shdwItemText;
}
&:before {
// Blocker
$bg: $timelineHeaderColorBg;
$l: 30%;
@include background-image(linear-gradient(90deg, rgba($bg, 0), rgba($bg, 1) $l, rgba($bg, 1) 100% - $l, rgba($bg, 0)));
}
}
}
}

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

@ -83,9 +83,6 @@
@include scrollV(scroll);
bottom: $scrollbarTrackSize;
}
.l-follow-line {
}
}
&.l-timeline-resource-legend {
box-sizing: border-box;
@ -329,49 +326,6 @@
.l-subticks {
height: 5px
}
// Follow Line
.l-follow-line {
// TODO: move before and after into l-timeline-gantt so those only render in that pane
$d: 0.8rem;
$t: $interiorMargin;
pointer-events: none;
position: absolute;
top: 0; bottom: 0;
width: 1px;
z-index: 9; // Just below .l-hover-btns-holder
&:before,
&:after {
display: block;
height: $d;
width: $d;
position: absolute;
top: $t;
@include transform(translateX(-50%));
}
&:before {
// Icon blocker
content: '';
width: 1.25 * $d;
}
&:after {
// Icon
font-size: $d;
line-height: $d;
text-align: center;
}
}
.s-follow-line {
background: rgba($timeControllerToiLineColor, 0.5);
&:after {
// Icon
color: $timeControllerToiLineColor;
content: $glyph-icon-timer;
font-family: symbolsfont;
text-shadow: $shdwItemText;
}
}
}
.s-status-editing .l-title .rep-object-label[draggable="true"] {

1
platform/features/timeline/res/sass/timeline-espresso.scss
View File

@ -24,6 +24,7 @@ $output-bourbon-deprecation-warnings: false;
@import "../../../../commonUI/general/res/sass/constants";
@import "../../../../commonUI/general/res/sass/mixins";
@import "../../../../commonUI/general/res/sass/glyphs";
@import "../../../../commonUI/themes/espresso/res/sass/constants";
@import "../../../../commonUI/themes/espresso/res/sass/mixins";
@import "constants";

1
platform/features/timeline/res/sass/timeline-snow.scss
View File

@ -24,6 +24,7 @@ $output-bourbon-deprecation-warnings: false;
@import "../../../../commonUI/general/res/sass/constants";
@import "../../../../commonUI/general/res/sass/mixins";
@import "../../../../commonUI/general/res/sass/glyphs";
@import "../../../../commonUI/themes/snow/res/sass/constants";
@import "../../../../commonUI/themes/snow/res/sass/mixins";
@import "constants";