mirror of
https://github.com/nasa/openmct.git
synced 2025-06-01 23:20:50 +00:00
[Frontend] IN-PROGRESS stubbing in files ported from /warp
open #208 Moving files from /warp; stuff will NOT compile at this point;
This commit is contained in:
Charles Hacskaylo
parent
20cb2ff239
commit
37f466705a
12
platform/features/timeline/style/bundle.json
Normal file
12
platform/features/timeline/style/bundle.json
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
{
|
||||||
|
"name": "Timeline Styling",
|
||||||
|
"description": "CSS for Timelines. Ported from /warp",
|
||||||
|
"extensions": {
|
||||||
|
"stylesheets": [
|
||||||
|
{
|
||||||
|
"stylesheetUrl": "css/timeline.css",
|
||||||
|
"priority": "10"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
26
platform/features/timeline/style/config.rb
Executable file
26
platform/features/timeline/style/config.rb
Executable file
@ -0,0 +1,26 @@
|
|||||||
|
# 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
|
||||||
103
platform/features/timeline/style/sass/_activities.scss
Normal file
103
platform/features/timeline/style/sass/_activities.scss
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
.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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
56
platform/features/timeline/style/sass/_constants.scss
Normal file
56
platform/features/timeline/style/sass/_constants.scss
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
$dirImgs: '../images/'; //Relative to warp.css
|
||||||
|
/*$interiorMargin: 5px;
|
||||||
|
$interiorMarginLg: $interiorMargin * 2;
|
||||||
|
$interiorMarginSm: 3px;*/
|
||||||
|
$logoAspect: .17;
|
||||||
|
|
||||||
|
// Timeline constants
|
||||||
|
$activityBarH: 17px;
|
||||||
|
$timelinePaneLeftW: 30%;
|
||||||
|
$timelinePaneBtmH: 30%;
|
||||||
|
$timelineResourceGraphYLabelsMargin: 70px;
|
||||||
|
$timelineTopPaneHeaderH: 30px;
|
||||||
|
$timelineHeaderColorBg: lighten($colorBodyBg, 5%);
|
||||||
|
$timelineColorAlt1: lighten($timelineHeaderColorBg, 10%);
|
||||||
|
$timelineSwimlaneGanttVM: 2px; // The vertical space above and below the gantt bars
|
||||||
|
$timelineSwimlaneH: $activityBarH + ($timelineSwimlaneGanttVM * 2);
|
||||||
|
$timelineTopPaneHeaderElemMargin: $interiorMargin;
|
||||||
|
$activityTypeFg: #fff;
|
||||||
|
$activityTypeBg: #5555aa;
|
||||||
|
$activityTypeTabularFgIcon: #8594ff;
|
||||||
|
|
||||||
|
|
||||||
|
// Swimlane colors
|
||||||
|
$colorDropTarg: rgba($activityTypeBg, 0.4);
|
||||||
|
$colorSwimlaneSelectedBg: #222;
|
||||||
|
$colorSwimlaneSelectedFg: #ccc;
|
||||||
|
$colorSwimlaneSelectedGanttBg: #ccc;
|
||||||
|
$colorSwimlaneSelectedGanttFg: #333;
|
||||||
|
|
||||||
|
// Timeline Tabular constants
|
||||||
|
$timelineColIconW: 16px;
|
||||||
|
$timelineColResourcePlotW: $timelineColIconW;
|
||||||
|
$timelineColTitleW: 250px;
|
||||||
|
$timelineColDatetimeW: 110px;
|
||||||
|
$timelineColDurationW: 70px;
|
||||||
|
$timelineColActivityModesW: $timelineColTitleW;
|
||||||
|
$timelineColPadR: 50px;
|
||||||
|
$timelineTabularTitleW: $timelineColResourcePlotW + $timelineColTitleW;
|
||||||
|
$timelineTabularDataW: ($timelineColDatetimeW * 2) + $timelineColDurationW + $timelineColActivityModesW + $timelineColPadR;
|
||||||
|
|
||||||
|
|
||||||
|
// // Ported from legacy timelines SASS
|
||||||
|
$activitiesHolderM: 30px;
|
||||||
|
$scenarioTopPad: 25px;
|
||||||
|
$swimlaneVM: 2px;
|
||||||
|
$timelineVM: 10px;
|
||||||
|
$timelineBPad: $interiorMargin * 2;
|
||||||
|
$graphResourceSummaryH: 200px;
|
||||||
|
$graphResourceSummaryLegendH: 20px;
|
||||||
|
$scenarioTimelineSummaryH: 20px;
|
||||||
|
$scenarioTimelineSummaryHExpanded: $graphResourceSummaryH + 30px;
|
||||||
|
$scenarioPanZoomSliderH: 16px;
|
||||||
|
$scenarioTicksH: 7px;
|
||||||
|
$scenarioTickLabelsH: 10px;
|
||||||
|
|
||||||
|
|
||||||
401
platform/features/timeline/style/sass/_timelines.scss
Normal file
401
platform/features/timeline/style/sass/_timelines.scss
Normal file
@ -0,0 +1,401 @@
|
|||||||
|
//*************************************************************** 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
11
platform/features/timeline/style/sass/timeline-espresso.scss
Normal file
11
platform/features/timeline/style/sass/timeline-espresso.scss
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
@import "compass";
|
||||||
|
@import "compass/css3";
|
||||||
|
@import "compass/utilities";
|
||||||
|
|
||||||
|
@import "../../../../platform/commonUI/general/res/sass/constants";
|
||||||
|
@import "../../../../platform/commonUI/general/res/sass/mixins";
|
||||||
|
@import "mixins";
|
||||||
|
@import "constants";
|
||||||
|
@import "about";
|
||||||
|
@import "activities";
|
||||||
|
@import "timelines";
|
||||||
15
platform/features/timeline/style/timeline-sass.sh
Normal file
15
platform/features/timeline/style/timeline-sass.sh
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# echo "* Compiling all sass in wtd-dev"
|
||||||
|
|
||||||
|
# echo "Compiling general"
|
||||||
|
# cd ~/dev/wtd-dev/platform/commonUI/general/res/
|
||||||
|
# compass compile --force
|
||||||
|
|
||||||
|
echo "*** Compiling themes/espresso"
|
||||||
|
cd ~/dev/wtd-dev/platform/commonUI/themes/espresso/res/
|
||||||
|
compass compile --force
|
||||||
|
|
||||||
|
echo "** Compiling themes/snow"
|
||||||
|
cd ~/dev/wtd-dev/platform/commonUI/themes/snow/res/
|
||||||
|
compass compile --force
|
||||||
|
|
||||||
|
echo "**** All wtd-dev sass compiled"
|
||||||
Loading…
x
Reference in New Issue
Block a user