openmct/platform/commonUI/general/res/sass/controls/_time-controller.scss

.l-time-controller {
	$inputTxtW: 90px;
	$knobW: 9px;
	$r1H: 20px;
	$r2H: 30px;
	$r3H: 10px;

	position: relative;
	margin: $interiorMarginLg 0;
	min-width: 400px;

	.l-time-range-inputs-holder,
	.l-time-range-slider {
		font-size: 0.8em;
	}

	.l-time-range-inputs-holder,
	.l-time-range-slider-holder,
	.l-time-range-ticks-holder
	{
		margin-bottom: $interiorMargin;
		position: relative;
	}
	.l-time-range-slider,
	.l-time-range-ticks {
		//@include test(red, 0.1);
		@include absPosDefault(0, visible);
	}

	.l-time-range-inputs-holder {
		height: $r1H;
	}

	.l-time-range-slider,
	.l-time-range-ticks {
		left: $inputTxtW; right: $inputTxtW;

	}

	.l-time-range-slider-holder {
		height: $r2H;
		.range-holder {
			@include box-shadow(none);
			background: none;
			border: none;
			height: 75%;
		}
	}

	.l-time-range-ticks-holder {
		height: $r3H;
		.l-time-range-ticks {
			border-top: 1px solid $colorInteriorBorder;
			.tick {
				background-color: $colorInteriorBorder;
				border:none;
				width: 1px;
				margin-left: -1px;
				&:first-child {
					margin-left: 0;
				}
				.l-time-range-tick-label {
					color: lighten($colorInteriorBorder, 20%);
					font-size: 0.7em;
					position: absolute;
					margin-left: -0.5 * $tickLblW;
					text-align: center;
					top: $r3H;
					width: $tickLblW;
					z-index: 2;
				}
			}
		}
	}

	.knob {
		width: $knobW;
		.range-value {
			$w: 75px;
			//@include test();
			position: absolute;
			top: 50%;
			margin-top: -7px; // Label is 13px high
			white-space: nowrap;
			width: $w;
		}
		&:hover .range-value {
			color: $colorKey;
		}
		&.knob-l {
			margin-left: $knobW / -2;
			.range-value {
				text-align: right;
				right: $knobW + $interiorMargin;
			}
		}
		&.knob-r {
			margin-right: $knobW / -2;
			.range-value {
				left: $knobW + $interiorMargin;
			}
		}
	}
}