openmct/platform/features/timeline/style/sass/_activities.scss

.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);
		}
	}
}