125 lines
2.3 KiB
SCSS
125 lines
2.3 KiB
SCSS
.l-time-controller {
|
|
$timeRangeSliderLROffset: 125px;
|
|
//$sliderKnobW: 9px;
|
|
$r1H: 20px;
|
|
$r2H: 20px;
|
|
$r3H: 10px;
|
|
|
|
position: relative;
|
|
margin: $interiorMarginLg 0;
|
|
min-width: 400px;
|
|
|
|
.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
|
|
{
|
|
margin-bottom: $interiorMargin;
|
|
position: relative;
|
|
}
|
|
.l-time-range-slider,
|
|
.l-time-range-ticks {
|
|
//@include test(red, 0.1);
|
|
@include absPosDefault(0, visible);
|
|
}
|
|
|
|
.l-time-range-inputs-holder {
|
|
//@include test(red);
|
|
height: $r1H;
|
|
.l-time-range-input {
|
|
//display: inline-block;
|
|
margin-right: $interiorMarginLg;
|
|
.ui-symbol.icon {
|
|
font-size: 11px;
|
|
width: 11px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.l-time-range-slider,
|
|
.l-time-range-ticks {
|
|
left: $timeRangeSliderLROffset; right: $timeRangeSliderLROffset;
|
|
|
|
}
|
|
|
|
.l-time-range-slider-holder {
|
|
//@include test(green);
|
|
height: $r2H;
|
|
.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;
|
|
.tick {
|
|
background-color: $colorInteriorBorder;
|
|
border:none;
|
|
width: 1px;
|
|
margin-left: -1px;
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
.l-time-range-tick-label {
|
|
color: lighten($colorInteriorBorder, 20%);
|
|
font-size: 0.7em;
|
|
position: absolute;
|
|
margin-left: -0.5 * $tickLblW;
|
|
text-align: center;
|
|
top: $r3H;
|
|
width: $tickLblW;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
&.knob-l {
|
|
//margin-left: $sliderKnobW / -2;
|
|
.range-value {
|
|
text-align: right;
|
|
right: $sliderKnobW + $interiorMargin;
|
|
}
|
|
}
|
|
&.knob-r {
|
|
//margin-right: $sliderKnobW / -2;
|
|
.range-value {
|
|
left: $sliderKnobW + $interiorMargin;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.s-time-range-val {
|
|
//@include test();
|
|
@include border-radius($controlCr);
|
|
background-color: $colorInputBg;
|
|
padding: 1px 1px 0 $interiorMargin;
|
|
} |