[Frontend] Time Controller Markup and Styling

open #1515
open #117
Changed slider elements layout from relative to
absolute positioning;
Refined layout in input-holder;
Tweaks to hover classes;

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

@@ -1,12 +1,9 @@
 .l-time-controller {
 	$timeRangeSliderLROffset: 125px;
-	//$sliderKnobW: 9px;
-	$r1H: 20px;
+	$r1H: 33px;
 	$r2H: 20px;
-	$r3H: 10px;
+	$r3H: 20px;
 
-	position: relative;
-	margin: $interiorMarginLg 0;
 	min-width: 400px;
 
 	.l-time-range-inputs-holder,
@@ -18,8 +15,10 @@
 	.l-time-range-slider-holder,
 	.l-time-range-ticks-holder
 	{
-		margin-bottom: $interiorMargin;
-		position: relative;
+		//@include test();
+		@include absPosDefault(0, visible);
+		@include box-sizing(border-box);
+		top: auto;
 	}
 	.l-time-range-slider,
 	.l-time-range-ticks {
@@ -29,10 +28,19 @@
 
 	.l-time-range-inputs-holder {
 		//@include test(red);
-		height: $r1H;
-		.l-time-range-input {
-			//display: inline-block;
-			margin-right: $interiorMarginLg;
+		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;
@@ -48,35 +56,36 @@
 
 	.l-time-range-slider-holder {
 		//@include test(green);
-		height: $r2H;
+		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
 		.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;
+			border-top: 1px solid $colorTick;
 			.tick {
-				background-color: $colorInteriorBorder;
+				background-color: $colorTick;
 				border:none;
+				height: 5px;
 				width: 1px;
 				margin-left: -1px;
+				position: absolute;
 				&:first-child {
 					margin-left: 0;
 				}
 				.l-time-range-tick-label {
-					color: lighten($colorInteriorBorder, 20%);
+					@include webkitProp(transform, translateX(-50%));
+					color: $colorPlotLabelFg;
+					display: inline-block;
 					font-size: 0.7em;
 					position: absolute;
-					margin-left: -0.5 * $tickLblW;
-					text-align: center;
-					top: $r3H;
-					width: $tickLblW;
+					top: 8px;
+					white-space: nowrap;
 					z-index: 2;
 				}
 			}
@@ -86,19 +95,13 @@
 	.knob {
 		width: $sliderKnobW;
 		.range-value {
-			//$w: 75px;
-			//@include test();
-			//@include verticalCenter();
 			position: absolute;
 			height: $r2H;
 			line-height: $r2H;
-			//top: 50%;
-			//margin-top: -7px; // Label is 13px high
 			white-space: nowrap;
-			//width: $w;
 		}
 		&:hover .range-value {
-			color: $colorKey;
+			color: $sliderColorKnobHov;
 		}
 		&.knob-l {
 			//margin-left: $sliderKnobW / -2;
@@ -116,6 +119,9 @@
 	}
 }
 
+//.slot.range-holder {
+//	background-color: $sliderColorRangeHolder;
+//}
 
 .s-time-range-val {
 	//@include test();