openmct/platform/features/timeline/res/sass/_timelines.scss

//*************************************************************** 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;
		}
	}
}