openmct/platform/features/timeline/res/sass/_timelines.scss
2017-04-05 14:52:46 -07:00

334 lines
8.8 KiB
SCSS

/*****************************************************************************
* Open MCT, Copyright (c) 2014-2017, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
//*************************************************************** LAYOUT
.l-timeline-holder {
@include absPosDefault();
&.split-layout {
>.splitter {
// Top of splitter within Timelines should be 0
top: 0;
}
}
.l-header {
@include user-select(none);
cursor: default;
}
.l-timeline-pane {
@include absPosDefault();
.l-width-control {
position: relative;
}
.l-swimlanes-holder {
@include absPosDefault();
top: $timelineTopPaneHeaderH + 1;
.l-col.l-plot-resource {
cursor: pointer;
}
}
// 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-swimlanes-holder {
bottom: $scrollbarTrackSize;
}
}
&.l-tabular-r {
// Start, end, duration, activity modes columns
@include scrollH(scroll);
left: $timelineTabularTitleW;
.l-width {
@include absPosDefault(0, visible);
min-width: $timelineTabularDataW;
width: 100%;
}
}
}
&.l-timeline-gantt {
.l-swimlanes-holder {
@include scrollV(scroll);
bottom: $scrollbarTrackSize;
}
}
&.l-timeline-resource-legend {
box-sizing: border-box;
padding: $interiorMargin 0;
white-space: nowrap;
.l-legend-items {
@include absPosDefault();
@include scrollV();
top: 25px;
}
.legend-item {
// Inherits from /platform/commonUI/general/res/sass/plots/_plots-main.scss
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 absPosDefault();
bottom: $scrollbarTrackSize;
.l-graphs {
@include absPosDefault();
@include scrollV(scroll);
}
.l-graph-labels-holder {
@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;
margin-bottom: $interiorMarginSm;
position: relative;
}
.l-title {
@include ellipsize();
top: $m; left: $m;
position: absolute;
}
.l-graph {
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();
@include justify-content(space-between);
left: $m;
.t-resource-graph-tick-label {
font-size: 0.9em;
&.tick-label-y {
text-align: left;
}
}
}
}
}
}
&.l-pane-l {
right: auto;
min-width: 50px;
max-width: 90%;
width: $timelinePaneLeftW;
}
&.l-pane-r {
left: 0;
&:hover {
.l-hover-btns-holder {
@include trans-prop-nice-fade(100ms);
opacity: 1;
}
}
}
&.l-pane-top {
bottom: $timelinePaneBtmH;
}
&.l-pane-btm {
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 absPosDefault(0, visible);
bottom: auto; height: $timelineTopPaneHeaderH;
.l-header-elem {
@include absPosDefault($timelineTopPaneHeaderElemMargin, visible);
display: block;
&.l-labels {
.l-label {
position: absolute;
width: 140px;
margin-left: -70px;
text-align: center;
}
}
}
}
.l-hover-btns-holder {
@include absPosDefault();
box-sizing: border-box;
@include trans-prop-nice-fade(500ms);
opacity: 0;
height: $timelineTopPaneHeaderH;
left: auto;
padding: $interiorMargin $interiorMargin $interiorMargin $interiorMargin * 10;
text-align: right;
z-index: 10;
}
// Tabular Columns
.l-cols {
@include absPosDefault(0, visible);
text-wrap: none;
white-space: nowrap;
.l-col {
box-sizing: border-box;
@include ellipsize();
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;
}
&.l-plot-resource {
border-left: none !important;
padding-left: 0;
}
&.l-title {
width: $timelineColTitleW;
.rep-object-label {
border-radius: $basicCr;
display: inline-block;
padding: 0 $interiorMargin;
}
}
&.l-start,
&.l-end,
&.l-duration {
width: $timelineColDatetimeW;
}
&.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-pane-l {
// Left pane of the tabular area
.l-cols {
left: $timelineTopPaneHeaderElemMargin;
}
}
}
// Ticks
.l-ticks,
.l-subticks {
@include absPosDefault();
top: auto; bottom: $interiorMarginSm;
}
.l-ticks {
height: 10px
}
.l-subticks {
height: 5px
}
}
.s-status-editing .l-title .rep-object-label[draggable="true"] {
@include transition(background-color, 0.25s);
cursor: pointer;
&:hover {
background-color: $colorItemTreeHoverBg;
}
}