From 23de3917bb1042abfe3e6fcc24bbdc1945a36526 Mon Sep 17 00:00:00 2001
From: Charles Hacskaylo <charlesh88@gmail.com>
Date: Sun, 27 Sep 2015 16:24:43 -0700
Subject: [PATCH] [Frontend] Time Controller Markup and Styling

open #1515
open #117
Animation added to .knob and .range;
---
 .../res/sass/controls/_time-controller.scss   | 18 +++--
 .../espresso/res/css/theme-espresso.css       | 78 +++++++++++--------
 .../themes/snow/res/css/theme-snow.css        | 78 +++++++++++--------
 3 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/platform/commonUI/general/res/sass/controls/_time-controller.scss b/platform/commonUI/general/res/sass/controls/_time-controller.scss
index 96cfa1f7ab..6942b8b57a 100644
--- a/platform/commonUI/general/res/sass/controls/_time-controller.scss
+++ b/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 {
diff --git a/platform/commonUI/themes/espresso/res/css/theme-espresso.css b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
index aeb8d6cee8..346af1ba45 100644
--- a/platform/commonUI/themes/espresso/res/css/theme-espresso.css
+++ b/platform/commonUI/themes/espresso/res/css/theme-espresso.css
@@ -2370,11 +2370,11 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 21, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider {
   font-size: 0.8em; }
-/* line 26, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 28, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider-holder,
 .l-time-controller .l-time-range-ticks-holder {
@@ -2391,7 +2391,7 @@ label.checkbox.custom {
   box-sizing: border-box;
   min-width: 400px;
   top: auto; }
-/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider,
 .l-time-controller .l-time-range-ticks {
   overflow: visible;
@@ -2401,49 +2401,46 @@ label.checkbox.custom {
   bottom: 0;
   left: 0;
   width: auto;
-  height: auto; }
-/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
+  height: auto;
+  left: 150px;
+  right: 150px; }
+/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder {
   height: 33px;
   bottom: 46px;
   padding-top: 5px;
   border-top: 1px solid rgba(153, 153, 153, 0.1); }
-  /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .type-icon {
     font-size: 120%;
     vertical-align: middle; }
-  /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
   .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
     margin-right: 5px; }
-    /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
       color: #666666; }
-    /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
     .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
       font-size: 11px;
       width: 11px; }
-/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
-.l-time-controller .l-time-range-slider,
-.l-time-controller .l-time-range-ticks {
-  left: 150px;
-  right: 150px; }
-/* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider-holder {
   height: 20px;
   bottom: 23px; }
-  /* line 73, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder .range-holder {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background: none;
     border: none; }
-    /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
       -moz-transform: translateX(50%);
       -ms-transform: translateX(50%);
@@ -2457,19 +2454,19 @@ label.checkbox.custom {
       width: 8px;
       height: auto;
       z-index: 2; }
-      /* line 88, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         background-color: #00c2ff;
         content: "";
         position: absolute; }
-      /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
         top: 0;
         right: auto;
         bottom: -10px;
         left: 3px;
         width: 2px; }
-      /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         -moz-border-radius: 8px;
         -webkit-border-radius: 8px;
@@ -2487,13 +2484,28 @@ label.checkbox.custom {
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
       background-color: #fff; }
-/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder:not(:active) .knob,
+  .l-time-controller .l-time-range-slider-holder:not(:active) .range {
+    -moz-transition-property: left, right;
+    -o-transition-property: left, right;
+    -webkit-transition-property: left, right;
+    transition-property: left, right;
+    -moz-transition-duration: 500ms;
+    -o-transition-duration: 500ms;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out; }
+/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-ticks-holder {
   height: 20px; }
-  /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
     border-top: 1px solid rgba(255, 255, 255, 0.2); }
-    /* line 120, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
       background-color: rgba(255, 255, 255, 0.2);
       border: none;
@@ -2501,10 +2513,10 @@ label.checkbox.custom {
       width: 1px;
       margin-left: -1px;
       position: absolute; }
-      /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
         margin-left: 0; }
-      /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
         transform: translateX(-50%);
         -webkit-transform: translateX(-50%);
@@ -2515,10 +2527,10 @@ label.checkbox.custom {
         top: 8px;
         white-space: nowrap;
         z-index: 2; }
-/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .knob {
   z-index: 2; }
-  /* line 146, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob .range-value {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2537,27 +2549,27 @@ label.checkbox.custom {
     height: 20px;
     line-height: 20px;
     white-space: nowrap; }
-  /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob:hover .range-value {
     color: #0099cc; }
-  /* line 158, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-l {
     margin-left: -10px; }
-    /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-l .range-value {
       text-align: right;
       right: 10px; }
-  /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-r {
     margin-right: -10px; }
-    /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r .range-value {
       left: 10px; }
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
       background-color: #fff; }
 
-/* line 183, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */
 .s-time-range-val {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
diff --git a/platform/commonUI/themes/snow/res/css/theme-snow.css b/platform/commonUI/themes/snow/res/css/theme-snow.css
index e057283563..f9c179231c 100644
--- a/platform/commonUI/themes/snow/res/css/theme-snow.css
+++ b/platform/commonUI/themes/snow/res/css/theme-snow.css
@@ -2334,11 +2334,11 @@ label.checkbox.custom {
   right: 0;
   width: auto; }
 
-/* line 21, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 23, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider {
   font-size: 0.8em; }
-/* line 26, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 28, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder,
 .l-time-controller .l-time-range-slider-holder,
 .l-time-controller .l-time-range-ticks-holder {
@@ -2355,7 +2355,7 @@ label.checkbox.custom {
   box-sizing: border-box;
   min-width: 400px;
   top: auto; }
-/* line 36, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 38, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider,
 .l-time-controller .l-time-range-ticks {
   overflow: visible;
@@ -2365,49 +2365,46 @@ label.checkbox.custom {
   bottom: 0;
   left: 0;
   width: auto;
-  height: auto; }
-/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */
+  height: auto;
+  left: 150px;
+  right: 150px; }
+/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-inputs-holder {
   height: 33px;
   bottom: 46px;
   padding-top: 5px;
   border-top: 1px solid rgba(102, 102, 102, 0.2); }
-  /* line 47, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 50, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .type-icon {
     font-size: 120%;
     vertical-align: middle; }
-  /* line 51, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-inputs-holder .l-time-range-input,
   .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
     margin-right: 5px; }
-    /* line 54, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .lbl,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
       color: #999999; }
-    /* line 57, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 60, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-inputs-holder .l-time-range-input .ui-symbol.icon, .l-time-controller .l-time-range-inputs-holder .l-time-range-input .l-datetime-picker .l-month-year-pager .icon.pager, .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-input .icon.pager,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .ui-symbol.icon,
     .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .l-datetime-picker .l-month-year-pager .icon.pager,
     .l-datetime-picker .l-month-year-pager .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .icon.pager {
       font-size: 11px;
       width: 11px; }
-/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */
-.l-time-controller .l-time-range-slider,
-.l-time-controller .l-time-range-ticks {
-  left: 150px;
-  right: 150px; }
-/* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 67, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-slider-holder {
   height: 20px;
   bottom: 23px; }
-  /* line 73, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 70, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-slider-holder .range-holder {
     -moz-box-shadow: none;
     -webkit-box-shadow: none;
     box-shadow: none;
     background: none;
     border: none; }
-    /* line 78, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 75, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
       -moz-transform: translateX(50%);
       -ms-transform: translateX(50%);
@@ -2421,19 +2418,19 @@ label.checkbox.custom {
       width: 8px;
       height: auto;
       z-index: 2; }
-      /* line 88, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 85, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         background-color: #666;
         content: "";
         position: absolute; }
-      /* line 94, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 91, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
         top: 0;
         right: auto;
         bottom: -10px;
         left: 3px;
         width: 2px; }
-      /* line 100, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 97, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
         -moz-border-radius: 8px;
         -webkit-border-radius: 8px;
@@ -2451,13 +2448,28 @@ label.checkbox.custom {
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:before, .l-time-controller .l-time-range-slider-holder .range-holder .range:hover .toi-line:after {
       background-color: #0052b5; }
-/* line 116, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 113, ../../../../general/res/sass/controls/_time-controller.scss */
+  .l-time-controller .l-time-range-slider-holder:not(:active) .knob,
+  .l-time-controller .l-time-range-slider-holder:not(:active) .range {
+    -moz-transition-property: left, right;
+    -o-transition-property: left, right;
+    -webkit-transition-property: left, right;
+    transition-property: left, right;
+    -moz-transition-duration: 500ms;
+    -o-transition-duration: 500ms;
+    -webkit-transition-duration: 500ms;
+    transition-duration: 500ms;
+    -moz-transition-timing-function: ease-in-out;
+    -o-transition-timing-function: ease-in-out;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out; }
+/* line 122, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .l-time-range-ticks-holder {
   height: 20px; }
-  /* line 118, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 124, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
     border-top: 1px solid rgba(0, 0, 0, 0.2); }
-    /* line 120, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 126, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
       background-color: rgba(0, 0, 0, 0.2);
       border: none;
@@ -2465,10 +2477,10 @@ label.checkbox.custom {
       width: 1px;
       margin-left: -1px;
       position: absolute; }
-      /* line 127, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 133, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
         margin-left: 0; }
-      /* line 130, ../../../../general/res/sass/controls/_time-controller.scss */
+      /* line 136, ../../../../general/res/sass/controls/_time-controller.scss */
       .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
         transform: translateX(-50%);
         -webkit-transform: translateX(-50%);
@@ -2479,10 +2491,10 @@ label.checkbox.custom {
         top: 8px;
         white-space: nowrap;
         z-index: 2; }
-/* line 144, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 150, ../../../../general/res/sass/controls/_time-controller.scss */
 .l-time-controller .knob {
   z-index: 2; }
-  /* line 146, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 152, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob .range-value {
     -moz-transition-property: visibility, opacity, background-color, border-color;
     -o-transition-property: visibility, opacity, background-color, border-color;
@@ -2501,27 +2513,27 @@ label.checkbox.custom {
     height: 20px;
     line-height: 20px;
     white-space: nowrap; }
-  /* line 155, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob:hover .range-value {
     color: rgba(0, 153, 204, 0.7); }
-  /* line 158, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 164, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-l {
     margin-left: -10px; }
-    /* line 161, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 167, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-l .range-value {
       text-align: right;
       right: 10px; }
-  /* line 166, ../../../../general/res/sass/controls/_time-controller.scss */
+  /* line 172, ../../../../general/res/sass/controls/_time-controller.scss */
   .l-time-controller .knob.knob-r {
     margin-right: -10px; }
-    /* line 169, ../../../../general/res/sass/controls/_time-controller.scss */
+    /* line 175, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r .range-value {
       left: 10px; }
     /* line 3, ../../../../general/res/sass/controls/_time-controller.scss */
     .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:before, .l-time-controller .knob.knob-r:hover + .range-holder .range .toi-line:after {
       background-color: #0052b5; }
 
-/* line 183, ../../../../general/res/sass/controls/_time-controller.scss */
+/* line 189, ../../../../general/res/sass/controls/_time-controller.scss */
 .s-time-range-val {
   -moz-border-radius: 4px;
   -webkit-border-radius: 4px;