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

@mixin toiLineHovEffects() {
	//@include pulse(.25s);
	&:before,
	&:after {
		background-color: $timeControllerToiLineColorHov;
	}
}

// Question for Charles: I believe this mct-include is unnecessary here.  It
// adds more specificity to the selector and makes the later override for
// mobile styling also require more specificity. Without knowing whether or
// not there is a specific reason this specifier is used, I won't remove it.
mct-include.l-time-controller {
	$minW: 500px;
	$knobHOffset: 0px;
	$knobM: ($sliderKnobW + $knobHOffset) * -1;
	$rangeValPad: $interiorMargin;
	$rangeValOffset: $sliderKnobW;
	//$knobCr: $sliderKnobW;
	$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
	$r1H: nth($ueTimeControlH,1);
	$r2H: nth($ueTimeControlH,2);
	$r3H: nth($ueTimeControlH,3);

    //@include absPosDefault();
    //@include test();
    display: block;
    //top: auto;
	height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
    min-width: $minW;
    font-size: 0.8rem;

	.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
	{
		//@include test();
		@include absPosDefault(0, visible);
		box-sizing: border-box;
		top: auto;
	}
	.l-time-range-slider,
	.l-time-range-ticks {
		//@include test(red, 0.1);
		@include absPosDefault(0, visible);
		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
	}

	.l-time-range-inputs-holder {
		//@include test(red);
		height: $r1H; bottom: $r2H + $r3H + ($interiorMarginSm * 2);
		padding-top: $interiorMargin;
		border-top: 1px solid $colorInteriorBorder;
		.type-icon {
			font-size: 120%;
			vertical-align: middle;
		}
		.l-time-range-input,
		.l-time-range-inputs-elem {
			margin-right: $interiorMargin;
			.lbl {
				color: $colorPlotLabelFg;
			}
			.ui-symbol.icon {
				font-size: 11px;
				width: 11px;
			}
		}
	}

	.l-time-range-slider-holder {
		//@include test(green);
		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
		.range-holder {
			box-shadow: none;
			background: none;
			border: none;
			.range {
				.toi-line {
					$myC: $timeControllerToiLineColor;
					$myW: 8px;
					@include transform(translateX(50%));
					position: absolute;
					//@include test();
					top: 0; right: 0; bottom: 0px; left: auto;
					width: $myW;
					height: auto;
					z-index: 2;
					&:before,
					&:after {
						background-color: $myC;
						content: "";
						position: absolute;
					}
					&:before {
						// Vert line
						top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
						width: 2px;
						//top: 0; right: 3px; bottom: 0; left: 3px;
					}
					&:after {
						// Circle element
						border-radius: $myW;
						@include transform(translateY(-50%));
						top: 50%; right: 0; bottom: auto; left: 0;
						width: auto;
						height: $myW;
					}
				}
				&:hover .toi-line {
					@include toiLineHovEffects;
				}
			}
		}
		&:not(:active) {
			//@include test(#ff00cc);
			.knob,
			.range {
				@include transition-property(left, right);
				@include transition-duration(500ms);
				@include transition-timing-function(ease-in-out);
			}
		}
	}

	.l-time-range-ticks-holder {
		height: $r3H;
		.l-time-range-ticks {
			border-top: 1px solid $colorTick;
			.tick {
				background-color: $colorTick;
				border:none;
				height: 5px;
				width: 1px;
				margin-left: -1px;
				position: absolute;
				&:first-child {
					margin-left: 0;
				}
				.l-time-range-tick-label {
					@include webkitProp(transform, translateX(-50%));
					color: $colorPlotLabelFg;
					display: inline-block;
					font-size: 0.9em;
					position: absolute;
					top: 8px;
					white-space: nowrap;
					z-index: 2;
				}
			}
		}
	}

	.knob {
		z-index: 2;
		.range-value {
			//@include test($sliderColorRange);
			@include trans-prop-nice-fade(.25s);
			padding: 0 $rangeValOffset;
			position: absolute;
			height: $r2H;
			line-height: $r2H;
			white-space: nowrap;
		}
		&:hover .range-value {
			color: $sliderColorKnobHov;
		}
		&.knob-l {
			//border-bottom-left-radius: $knobCr; // MOVED TO _CONTROLS.SCSS
			margin-left: $knobM;
			.range-value {
				text-align: right;
				right: $rangeValOffset;
			}
		}
		&.knob-r {
			//border-bottom-right-radius: $knobCr;
			margin-right: $knobM;
			.range-value {
				left: $rangeValOffset;
			}
			&:hover + .range-holder .range .toi-line {
				@include toiLineHovEffects;
			}
		}
	}

	.l-time-domain-selector {
		position: absolute;
		right: 0px;
		bottom: 46px;
	}

}

//.slot.range-holder {
//	background-color: $sliderColorRangeHolder;
//}

.s-time-range-val {
	//@include test();
	border-radius: $controlCr;
	background-color: $colorInputBg;
	padding: 1px 1px 0 $interiorMargin;
}

@include phoneandtablet {
	mct-include.l-time-controller, mct-include.l-time-range-inputs-holder {
		min-width: 0px;
	}

	mct-include.l-time-controller {
		height: 48px;

		.l-time-range-inputs-holder {
			bottom: 24px;
		}

		.l-time-domain-selector {
			width: 33%;
			bottom: -9px;
			select {
				height: 25px;
				margin-bottom: 0px;
			}
		}

		.l-time-range-slider-holder, .l-time-range-ticks-holder {
			display: none;
		}

		.time-range-start, .time-range-end, {
			width: 100%;
		}

		.l-time-range-inputs-holder {
			.l-time-range-input {
				display: block;
				margin-bottom: 5px;
				.s-btn {
					width: 66%;
					padding-right: 18px;
					white-space: nowrap;
					input {
						width: 100%;
					}
				}
			}
			.l-time-range-inputs-elem {
				display: none;
				&.lbl {
					display: block;
					height: 25px;
					width: 33%;
					right: 0px;
					margin: 0;
					top: 5px;
					line-height: 25px;
					position: absolute;
				}
			}
		}
	}
}