ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-01 00:45:41 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

[Frontend] Time Controller Markup and Styling

Browse Source 
open #1515
open #117
Animation added to .knob and .range;
This commit is contained in:
Charles Hacskaylo 2015-09-27 16:24:43 -07:00
parent badaca53d3
commit 23de3917bb
3 changed files with 102 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

78
platform/commonUI/themes/espresso/res/css/theme-espresso.css
View File

@ -2370,11 +2370,11 @@ label.checkbox.custom {
right: 0; right: 0;
width: auto; } 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-inputs-holder,
.l-time-controller .l-time-range-slider { .l-time-controller .l-time-range-slider {
font-size: 0.8em; } 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-inputs-holder,
.l-time-controller .l-time-range-slider-holder, .l-time-controller .l-time-range-slider-holder,
.l-time-controller .l-time-range-ticks-holder { .l-time-controller .l-time-range-ticks-holder {
@ -2391,7 +2391,7 @@ label.checkbox.custom {
box-sizing: border-box; box-sizing: border-box;
min-width: 400px; min-width: 400px;
top: auto; } 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-slider,
.l-time-controller .l-time-range-ticks { .l-time-controller .l-time-range-ticks {
overflow: visible; overflow: visible;
@ -2401,49 +2401,46 @@ label.checkbox.custom {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto;
/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */ left: 150px;
right: 150px; }
/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder { .l-time-controller .l-time-range-inputs-holder {
height: 33px; height: 33px;
bottom: 46px; bottom: 46px;
padding-top: 5px; padding-top: 5px;
border-top: 1px solid rgba(153, 153, 153, 0.1); } 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 { .l-time-controller .l-time-range-inputs-holder .type-icon {
font-size: 120%; font-size: 120%;
vertical-align: middle; } 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-input,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
margin-right: 5px; } 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-input .lbl,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
color: #666666; } 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-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 .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-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 { .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; font-size: 11px;
width: 11px; } width: 11px; }
/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 67, ../../../../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 */
.l-time-controller .l-time-range-slider-holder { .l-time-controller .l-time-range-slider-holder {
height: 20px; height: 20px;
bottom: 23px; } 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 { .l-time-controller .l-time-range-slider-holder .range-holder {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: none; background: none;
border: 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 { .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
-moz-transform: translateX(50%); -moz-transform: translateX(50%);
-ms-transform: translateX(50%); -ms-transform: translateX(50%);
@ -2457,19 +2454,19 @@ label.checkbox.custom {
width: 8px; width: 8px;
height: auto; height: auto;
z-index: 2; } 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 { .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; background-color: #00c2ff;
content: ""; content: "";
position: absolute; } 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 { .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
top: 0; top: 0;
right: auto; right: auto;
bottom: -10px; bottom: -10px;
left: 3px; left: 3px;
width: 2px; } 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 { .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
-moz-border-radius: 8px; -moz-border-radius: 8px;
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
@ -2487,13 +2484,28 @@ label.checkbox.custom {
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ /* 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 { .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; } 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 { .l-time-controller .l-time-range-ticks-holder {
height: 20px; } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
border-top: 1px solid rgba(255, 255, 255, 0.2); } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
background-color: rgba(255, 255, 255, 0.2); background-color: rgba(255, 255, 255, 0.2);
border: none; border: none;
@ -2501,10 +2513,10 @@ label.checkbox.custom {
width: 1px; width: 1px;
margin-left: -1px; margin-left: -1px;
position: absolute; } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
margin-left: 0; } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
transform: translateX(-50%); transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
@ -2515,10 +2527,10 @@ label.checkbox.custom {
top: 8px; top: 8px;
white-space: nowrap; white-space: nowrap;
z-index: 2; } 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 { .l-time-controller .knob {
z-index: 2; } 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 { .l-time-controller .knob .range-value {
-moz-transition-property: visibility, opacity, background-color, border-color; -moz-transition-property: visibility, opacity, background-color, border-color;
-o-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; height: 20px;
line-height: 20px; line-height: 20px;
white-space: nowrap; } 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 { .l-time-controller .knob:hover .range-value {
color: #0099cc; } 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 { .l-time-controller .knob.knob-l {
margin-left: -10px; } 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 { .l-time-controller .knob.knob-l .range-value {
text-align: right; text-align: right;
right: 10px; } 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 { .l-time-controller .knob.knob-r {
margin-right: -10px; } 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 { .l-time-controller .knob.knob-r .range-value {
left: 10px; } left: 10px; }
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ /* 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 { .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; } 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 { .s-time-range-val {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;

78
platform/commonUI/themes/snow/res/css/theme-snow.css
View File

@ -2334,11 +2334,11 @@ label.checkbox.custom {
right: 0; right: 0;
width: auto; } 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-inputs-holder,
.l-time-controller .l-time-range-slider { .l-time-controller .l-time-range-slider {
font-size: 0.8em; } 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-inputs-holder,
.l-time-controller .l-time-range-slider-holder, .l-time-controller .l-time-range-slider-holder,
.l-time-controller .l-time-range-ticks-holder { .l-time-controller .l-time-range-ticks-holder {
@ -2355,7 +2355,7 @@ label.checkbox.custom {
box-sizing: border-box; box-sizing: border-box;
min-width: 400px; min-width: 400px;
top: auto; } 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-slider,
.l-time-controller .l-time-range-ticks { .l-time-controller .l-time-range-ticks {
overflow: visible; overflow: visible;
@ -2365,49 +2365,46 @@ label.checkbox.custom {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: auto; width: auto;
height: auto; } height: auto;
/* line 42, ../../../../general/res/sass/controls/_time-controller.scss */ left: 150px;
right: 150px; }
/* line 45, ../../../../general/res/sass/controls/_time-controller.scss */
.l-time-controller .l-time-range-inputs-holder { .l-time-controller .l-time-range-inputs-holder {
height: 33px; height: 33px;
bottom: 46px; bottom: 46px;
padding-top: 5px; padding-top: 5px;
border-top: 1px solid rgba(102, 102, 102, 0.2); } 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 { .l-time-controller .l-time-range-inputs-holder .type-icon {
font-size: 120%; font-size: 120%;
vertical-align: middle; } 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-input,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem {
margin-right: 5px; } 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-input .lbl,
.l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl { .l-time-controller .l-time-range-inputs-holder .l-time-range-inputs-elem .lbl {
color: #999999; } 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-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 .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-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 { .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; font-size: 11px;
width: 11px; } width: 11px; }
/* line 64, ../../../../general/res/sass/controls/_time-controller.scss */ /* line 67, ../../../../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 */
.l-time-controller .l-time-range-slider-holder { .l-time-controller .l-time-range-slider-holder {
height: 20px; height: 20px;
bottom: 23px; } 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 { .l-time-controller .l-time-range-slider-holder .range-holder {
-moz-box-shadow: none; -moz-box-shadow: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
background: none; background: none;
border: 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 { .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line {
-moz-transform: translateX(50%); -moz-transform: translateX(50%);
-ms-transform: translateX(50%); -ms-transform: translateX(50%);
@ -2421,19 +2418,19 @@ label.checkbox.custom {
width: 8px; width: 8px;
height: auto; height: auto;
z-index: 2; } 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 { .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; background-color: #666;
content: ""; content: "";
position: absolute; } 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 { .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:before {
top: 0; top: 0;
right: auto; right: auto;
bottom: -10px; bottom: -10px;
left: 3px; left: 3px;
width: 2px; } 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 { .l-time-controller .l-time-range-slider-holder .range-holder .range .toi-line:after {
-moz-border-radius: 8px; -moz-border-radius: 8px;
-webkit-border-radius: 8px; -webkit-border-radius: 8px;
@ -2451,13 +2448,28 @@ label.checkbox.custom {
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ /* 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 { .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; } 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 { .l-time-controller .l-time-range-ticks-holder {
height: 20px; } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks {
border-top: 1px solid rgba(0, 0, 0, 0.2); } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border: none; border: none;
@ -2465,10 +2477,10 @@ label.checkbox.custom {
width: 1px; width: 1px;
margin-left: -1px; margin-left: -1px;
position: absolute; } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick:first-child {
margin-left: 0; } 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 { .l-time-controller .l-time-range-ticks-holder .l-time-range-ticks .tick .l-time-range-tick-label {
transform: translateX(-50%); transform: translateX(-50%);
-webkit-transform: translateX(-50%); -webkit-transform: translateX(-50%);
@ -2479,10 +2491,10 @@ label.checkbox.custom {
top: 8px; top: 8px;
white-space: nowrap; white-space: nowrap;
z-index: 2; } 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 { .l-time-controller .knob {
z-index: 2; } 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 { .l-time-controller .knob .range-value {
-moz-transition-property: visibility, opacity, background-color, border-color; -moz-transition-property: visibility, opacity, background-color, border-color;
-o-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; height: 20px;
line-height: 20px; line-height: 20px;
white-space: nowrap; } 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 { .l-time-controller .knob:hover .range-value {
color: rgba(0, 153, 204, 0.7); } 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 { .l-time-controller .knob.knob-l {
margin-left: -10px; } 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 { .l-time-controller .knob.knob-l .range-value {
text-align: right; text-align: right;
right: 10px; } 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 { .l-time-controller .knob.knob-r {
margin-right: -10px; } 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 { .l-time-controller .knob.knob-r .range-value {
left: 10px; } left: 10px; }
/* line 3, ../../../../general/res/sass/controls/_time-controller.scss */ /* 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 { .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; } 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 { .s-time-range-val {
-moz-border-radius: 4px; -moz-border-radius: 4px;
-webkit-border-radius: 4px; -webkit-border-radius: 4px;