mirror of
https://github.com/nasa/openmct.git
synced 2025-03-11 15:04:10 +00:00
Charles Hacskaylo
parent
eabde6b2d0
commit
7cd255670e
@ -1,26 +0,0 @@
|
|||||||
# Require any additional compass plugins here.
|
|
||||||
# require "compass-growl"
|
|
||||||
|
|
||||||
# Set this to the root of your project when deployed:
|
|
||||||
http_path = "/"
|
|
||||||
css_dir = "css"
|
|
||||||
sass_dir = "sass"
|
|
||||||
images_dir = "images"
|
|
||||||
javascripts_dir = "js"
|
|
||||||
|
|
||||||
# You can select your preferred output style here (can be overridden via the command line):
|
|
||||||
# :expanded, :compressed, :nested
|
|
||||||
output_style = :nested
|
|
||||||
|
|
||||||
# To enable relative paths to assets via compass helper functions. Uncomment:
|
|
||||||
# relative_assets = true
|
|
||||||
|
|
||||||
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
|
||||||
# line_comments = false
|
|
||||||
|
|
||||||
|
|
||||||
# If you prefer the indented syntax, you might want to regenerate this
|
|
||||||
# project again passing --syntax sass, or you can uncomment this:
|
|
||||||
# preferred_syntax = :sass
|
|
||||||
# and then run:
|
|
||||||
# sass-convert -R --from scss --to sass vfn_platform/static/sass scss && rm -rf sass && mv scss sass
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
.l-timeline-gantt {
|
|
||||||
position: absolute;
|
|
||||||
top: $timelineSwimlaneGanttVM; bottom: $timelineSwimlaneGanttVM;
|
|
||||||
|
|
||||||
.bar {
|
|
||||||
@include ellipsize();
|
|
||||||
height: $activityBarH;
|
|
||||||
line-height: $activityBarH + 2;
|
|
||||||
padding: 0 $interiorMargin;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: inline;
|
|
||||||
&.s-activity-type {
|
|
||||||
&.timeline {
|
|
||||||
&:before {
|
|
||||||
content:"S";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.activity {
|
|
||||||
&:before {
|
|
||||||
content:"A";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.s-title {
|
|
||||||
@include text-shadow(rgba(black, 0.1) 0 1px 2px);
|
|
||||||
// right: 5px;
|
|
||||||
// width: 50%;
|
|
||||||
}
|
|
||||||
&.duration {
|
|
||||||
left: auto;
|
|
||||||
opacity: 0.75;
|
|
||||||
right: 0;
|
|
||||||
text-align: right;
|
|
||||||
width: 60px;
|
|
||||||
}
|
|
||||||
&.handle {
|
|
||||||
//background: rgba(red, 0.2);
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
height: auto;
|
|
||||||
width: 15px;
|
|
||||||
&.left {
|
|
||||||
right: auto;
|
|
||||||
}
|
|
||||||
&.middle {
|
|
||||||
right: 15px;
|
|
||||||
left: 15px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
&.right {
|
|
||||||
right: 0;
|
|
||||||
left: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-timeline-gantt {
|
|
||||||
$br: $controlCr;
|
|
||||||
.bar {
|
|
||||||
color: $activityTypeFg;
|
|
||||||
// opacity: 0.9;
|
|
||||||
// @include background-image(linear-gradient(lighten($activityTypeBg, 10), $activityTypeBg));
|
|
||||||
@include activityBg($activityTypeBg);
|
|
||||||
@include border-radius($br);
|
|
||||||
@include box-shadow(rgba(black, 0.4) 0 1px 3px);
|
|
||||||
&.expanded {
|
|
||||||
@include border-top-radius($br);
|
|
||||||
@include border-bottom-radius(0);
|
|
||||||
}
|
|
||||||
&.leaf {
|
|
||||||
@include border-top-radius(0);
|
|
||||||
@include border-bottom-radius($br);
|
|
||||||
}
|
|
||||||
.s-toggle {
|
|
||||||
color: $colorKey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-mode .s-timeline-gantt {
|
|
||||||
.bar {
|
|
||||||
&:hover {
|
|
||||||
@include background-image(linear-gradient(lighten($activityTypeBg, 20), lighten($activityTypeBg, 10)));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.handle {
|
|
||||||
cursor: col-resize;
|
|
||||||
&.start {
|
|
||||||
// @include test(red);
|
|
||||||
}
|
|
||||||
&.mid {
|
|
||||||
// @include test(green);
|
|
||||||
cursor: ew-resize;
|
|
||||||
}
|
|
||||||
&.end {
|
|
||||||
// @include test(blue);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,401 +0,0 @@
|
|||||||
//*************************************************************** LAYOUT
|
|
||||||
.l-timeline-holder {
|
|
||||||
// @include test();
|
|
||||||
@include absPosDefault();
|
|
||||||
|
|
||||||
.l-timeline-pane {
|
|
||||||
@include absPosDefault();
|
|
||||||
|
|
||||||
.l-width-control {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-swimlanes-holder {
|
|
||||||
@include absPosDefault();
|
|
||||||
top: $timelineTopPaneHeaderH + 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Overall layout
|
|
||||||
&.t-pane-h {
|
|
||||||
&.s-timeline-tabular .t-pane-v {
|
|
||||||
// Vertical panes within tabular area
|
|
||||||
@include absPosDefault();
|
|
||||||
&.l-tabular-l {
|
|
||||||
// Tree area with item title
|
|
||||||
right: auto; // Set this to auto and uncomment width below when additional tabular columns are added
|
|
||||||
width: $timelineTabularTitleW;
|
|
||||||
}
|
|
||||||
&.l-tabular-r {
|
|
||||||
// Start, end, duration, activity modes columns
|
|
||||||
@include scrollH();
|
|
||||||
left: $timelineTabularTitleW;
|
|
||||||
.l-width {
|
|
||||||
@include absPosDefault(0, visible);
|
|
||||||
min-width: $timelineTabularDataW;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.l-timeline-gantt {
|
|
||||||
// @include testObj();
|
|
||||||
|
|
||||||
.l-swimlanes-holder {
|
|
||||||
@include scrollV(scroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
&.l-timeline-resource-legend {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
padding: $interiorMargin 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
.l-title {
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-legend-items {
|
|
||||||
@include absPosDefault();
|
|
||||||
@include scrollV();
|
|
||||||
top: 25px;
|
|
||||||
color: lighten($timelineColorAlt1, 10%);
|
|
||||||
// margin-top: $interiorMargin;
|
|
||||||
}
|
|
||||||
.legend-item {
|
|
||||||
// Inherits from /platform/commonUI/general/res/sass/plots/_plots-main.scss
|
|
||||||
// border-bottom: 1px solid $colorInteriorBorder;
|
|
||||||
display: block;
|
|
||||||
margin-bottom: $interiorMarginSm;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
.color-swatch {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
.title-label {
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-timeline-resource-graph {
|
|
||||||
$m: $interiorMargin;
|
|
||||||
|
|
||||||
.l-graphs-holder {
|
|
||||||
// @include test(blue);
|
|
||||||
@include absPosDefault();
|
|
||||||
bottom: $scrollbarTrackSize;
|
|
||||||
|
|
||||||
.l-graphs {
|
|
||||||
@include absPosDefault();
|
|
||||||
@include scrollV(scroll);
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-graph-labels-holder {
|
|
||||||
// @include test(red);
|
|
||||||
@include absPosDefault();
|
|
||||||
overflow: hidden;
|
|
||||||
right: auto;
|
|
||||||
width: 400px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-scroll-control {
|
|
||||||
@include absPosDefault();
|
|
||||||
overflow-x: scroll;
|
|
||||||
overflow-y: hidden;
|
|
||||||
top: auto; right: $scrollbarTrackSize;
|
|
||||||
height: $scrollbarTrackSize;
|
|
||||||
.l-width-control {
|
|
||||||
height: 10px; // Need to add height to force scrollbar to appear
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-graph,
|
|
||||||
.l-graph-labels {
|
|
||||||
height: 80px; //was 120px
|
|
||||||
margin-bottom: $interiorMarginSm;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-title {
|
|
||||||
@include ellipsize();
|
|
||||||
color: rgba(#fff, 0.4);
|
|
||||||
top: $m; left: $m;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-graph {
|
|
||||||
background: rgba(black, 0.3);
|
|
||||||
width: 100%;
|
|
||||||
.l-graph-area {
|
|
||||||
canvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-graph-labels {
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-graph-area {
|
|
||||||
@include absPosDefault();
|
|
||||||
top: 20px; bottom: 5px;
|
|
||||||
.l-labels-holder {
|
|
||||||
@include absPosDefault();
|
|
||||||
left: $m;
|
|
||||||
.tick-label.tick-label-y {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-pane-l {
|
|
||||||
// @include test(red);
|
|
||||||
right: auto;
|
|
||||||
min-width: 50px;
|
|
||||||
max-width: 90%;
|
|
||||||
width: $timelinePaneLeftW;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-pane-r {
|
|
||||||
// @include test(blue);
|
|
||||||
left: 0;
|
|
||||||
&:hover {
|
|
||||||
.l-hover-btns-holder {
|
|
||||||
@include trans-prop-nice-fade(100ms);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-pane-top {
|
|
||||||
// @include test(green);
|
|
||||||
bottom: $timelinePaneBtmH;
|
|
||||||
}
|
|
||||||
&.l-pane-btm {
|
|
||||||
// @include test(orange);
|
|
||||||
top: auto;
|
|
||||||
min-height: 20px;
|
|
||||||
max-height: 80%;
|
|
||||||
height: $timelinePaneBtmH;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-swimlane {
|
|
||||||
height: $timelineSwimlaneH;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Header
|
|
||||||
.s-timeline-tabular .l-header,
|
|
||||||
.s-timeline-gantt .l-header {
|
|
||||||
// @include test(white,0.05);
|
|
||||||
@include absPosDefault(0, visible);
|
|
||||||
bottom: auto; height: $timelineTopPaneHeaderH;
|
|
||||||
|
|
||||||
.l-header-elem {
|
|
||||||
@include absPosDefault($timelineTopPaneHeaderElemMargin, visible);
|
|
||||||
// bottom: auto; height: 15px;
|
|
||||||
display: block;
|
|
||||||
&.l-labels {
|
|
||||||
.l-label {
|
|
||||||
position: absolute;
|
|
||||||
width: 140px;
|
|
||||||
margin-left: -70px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-hover-btns-holder {
|
|
||||||
@include absPosDefault();
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
@include trans-prop-nice-fade(500ms);
|
|
||||||
opacity: 0;
|
|
||||||
height: $timelineTopPaneHeaderH;
|
|
||||||
width: 100px; left: auto;
|
|
||||||
padding: $interiorMargin;
|
|
||||||
text-align: right;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tabular Columns
|
|
||||||
.l-cols {
|
|
||||||
// @include test(#66ff66, 0.1);
|
|
||||||
@include absPosDefault(0, visible);
|
|
||||||
text-wrap: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
.l-col {
|
|
||||||
@include box-sizing(border-box);
|
|
||||||
@include ellipsize();
|
|
||||||
// @include test(red, 0.05);
|
|
||||||
display: inline-block;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0 $interiorMargin;
|
|
||||||
position: relative;
|
|
||||||
text-wrap: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
|
|
||||||
&.l-col-icon {
|
|
||||||
width: $timelineColIconW;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0;
|
|
||||||
.ui-symbol {
|
|
||||||
color: $colorKey;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-plot-resource {
|
|
||||||
border-left: none !important;
|
|
||||||
cursor: pointer;
|
|
||||||
padding-left: 0;
|
|
||||||
// .ui-symbol {
|
|
||||||
// color: $colorFormValid;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-title {
|
|
||||||
width: $timelineColTitleW;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.l-start,
|
|
||||||
&.l-end,
|
|
||||||
&.l-duration {
|
|
||||||
width: $timelineColDatetimeW;
|
|
||||||
}
|
|
||||||
|
|
||||||
//&.l-duration {
|
|
||||||
// width: $timelineColDurationW;
|
|
||||||
//}
|
|
||||||
|
|
||||||
&.l-activity-modes {
|
|
||||||
display: none; // Temp, until modes can be displayed
|
|
||||||
width: $timelineColActivityModesW;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-timeline-tabular {
|
|
||||||
.l-header .l-cols {
|
|
||||||
top: $timelineTopPaneHeaderElemMargin; bottom: $timelineTopPaneHeaderElemMargin;
|
|
||||||
.l-col {
|
|
||||||
border-left: 1px solid rgba(#fff, 0.1);
|
|
||||||
// height: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-pane-l {
|
|
||||||
// Left pane of the tabular area
|
|
||||||
.l-cols {
|
|
||||||
left: $timelineTopPaneHeaderElemMargin;
|
|
||||||
.s-label .ui-symbol.icon {
|
|
||||||
//color: $colorKeyFg;
|
|
||||||
color: $activityTypeTabularFgIcon;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-pane-r {
|
|
||||||
// Right pane of the tabular area
|
|
||||||
// @include test(red, 0.05);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.splitter {
|
|
||||||
// Top of splitter within Timelines should be 0
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Ticks
|
|
||||||
.l-ticks,
|
|
||||||
.l-subticks {
|
|
||||||
@include absPosDefault();
|
|
||||||
top: auto; bottom: $interiorMarginSm;
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-ticks {
|
|
||||||
height: 10px
|
|
||||||
}
|
|
||||||
|
|
||||||
.l-subticks {
|
|
||||||
height: 5px
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//*************************************************************** STYLING
|
|
||||||
.s-timeline {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
.s-header {
|
|
||||||
background-color: $timelineHeaderColorBg;
|
|
||||||
}
|
|
||||||
.s-swimlane {
|
|
||||||
// @include transition-property(background-color);
|
|
||||||
// @include transition-duration(0.2s);
|
|
||||||
// @include transition-timing-function(ease-out);
|
|
||||||
// border-top: 1px solid rgba(black, 0.2);
|
|
||||||
border-bottom: 1px solid rgba(white, 0.1);
|
|
||||||
line-height: $activityBarH + 2 + 1;
|
|
||||||
/* &:hover {
|
|
||||||
background: rgba(white, 0.1);
|
|
||||||
}*/
|
|
||||||
&.exceeded {
|
|
||||||
@include bgDiagonalStripes(#fff, 0.05, $timelineSwimlaneH + 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
|
||||||
$bg: $colorSwimlaneSelectedBg;
|
|
||||||
background-color: $bg;
|
|
||||||
color: #fff;
|
|
||||||
// @include background-image(linear-gradient(darken($bg, 5), $bg));
|
|
||||||
|
|
||||||
.s-timeline-gantt .bar {
|
|
||||||
@include activityBg($colorSwimlaneSelectedGanttBg, 10);
|
|
||||||
color: $colorSwimlaneSelectedGanttFg;
|
|
||||||
// background-color: red;
|
|
||||||
// background-image: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.drop-into {
|
|
||||||
background-color: rgba($colorDropTarg, 0.7);
|
|
||||||
.s-timeline-gantt {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.drop-after {
|
|
||||||
background-color: rgba(#000, 0.2);
|
|
||||||
border-bottom-color: rgba($colorDropTarg, 1.0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.s-ticks {
|
|
||||||
@include bgTicks($timelineColorAlt1);
|
|
||||||
}
|
|
||||||
.s-hover-btns-holder {
|
|
||||||
$bg: $timelineHeaderColorBg;
|
|
||||||
$bga: 1;
|
|
||||||
$l: 5%;
|
|
||||||
@include background-image(linear-gradient(-90deg, rgba($bg, $bga), rgba($bg, $bga) 70%, rgba($bg, 0) 100%));
|
|
||||||
.s-btn {
|
|
||||||
@include containerSubtle(lighten($colorBodyBg, $l), lighten($colorBodyFg, $l), true);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit-mode .s-swimlane {
|
|
||||||
cursor: pointer;
|
|
||||||
.s-label {
|
|
||||||
@include border-radius($controlCr);
|
|
||||||
padding: 2px 5px;
|
|
||||||
&:hover {
|
|
||||||
background: rgba(#fff, 0.1);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user