mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +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…
Reference in New Issue
Block a user