[Frontend] Time Controller Markup and Styling

open #1515
open #117
Animation added to .knob and .range;

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

@@ -18,6 +18,8 @@
 	$r2H: $sliderH;
 	$r3H: 20px;
 
+	//height: $r1H + $r2H + $r3H + ($interiorMargin * 2);
+
 	.l-time-range-inputs-holder,
 	.l-time-range-slider {
 		font-size: 0.8em;
@@ -37,6 +39,7 @@
 	.l-time-range-ticks {
 		//@include test(red, 0.1);
 		@include absPosDefault(0, visible);
+		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
 	}
 
 	.l-time-range-inputs-holder {
@@ -61,12 +64,6 @@
 		}
 	}
 
-	.l-time-range-slider,
-	.l-time-range-ticks {
-		left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
-
-	}
-
 	.l-time-range-slider-holder {
 		//@include test(green);
 		height: $r2H; bottom: $r3H + ($interiorMarginSm * 1);
@@ -111,6 +108,15 @@
 				}
 			}
 		}
+		&: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 {