[Frontend] Time Controller Markup and Styling
open #1515 open #117 Significant mods to slider scss; Added toi-line element and hover styles;
This commit is contained in:
Charles Hacskaylo
@@ -295,15 +295,11 @@ label.checkbox.custom {
|
||||
|
||||
.slider {
|
||||
$knobH: 100%; //14px;
|
||||
$knobW: 12px;
|
||||
$slotH: 50%;
|
||||
.slot {
|
||||
// @include border-radius($basicCr * .75);
|
||||
//@include sliderTrack();
|
||||
//height: $slotH;
|
||||
width: auto;
|
||||
position: absolute;
|
||||
//top: ($knobH - $slotH) / 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
@@ -317,30 +313,30 @@ label.checkbox.custom {
|
||||
&:hover {
|
||||
background-color: $sliderColorKnobHov;
|
||||
}
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
height: $knobH;
|
||||
width: $knobW;
|
||||
width: $sliderKnobW;
|
||||
top: 0;
|
||||
auto: 0;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
//&:before {
|
||||
// top: 1px;
|
||||
// bottom: 3px;
|
||||
// left: ($knobW / 2) - 1;
|
||||
//}
|
||||
|
||||
}
|
||||
.knob-l {
|
||||
@include border-left-radius($sliderKnobW);
|
||||
cursor: w-resize;
|
||||
}
|
||||
.knob-r {
|
||||
@include border-right-radius($sliderKnobW);
|
||||
cursor: e-resize;
|
||||
}
|
||||
.range {
|
||||
$tbOffset: 2px;
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
background-color: $sliderColorRange;
|
||||
cursor: ew-resize;
|
||||
position: absolute;
|
||||
top: 0; //$tbOffset;
|
||||
right: auto;
|
||||
bottom: $tbOffset;
|
||||
bottom: 0;
|
||||
left: auto;
|
||||
height: auto;
|
||||
width: auto;
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
@mixin toiLineHovEffects() {
|
||||
//@include pulse(.25s);
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: $timeControllerToiLineColorHov;
|
||||
}
|
||||
}
|
||||
|
||||
.l-time-controller {
|
||||
$minW: 400px;
|
||||
$knobM: ($sliderKnobW + 1) * -1;
|
||||
$rangeValOffset: $interiorMargin + $sliderKnobW;
|
||||
$knobCr: $sliderKnobW;
|
||||
//@if $sliderKnobW > 3 {
|
||||
// $knobCr: $sliderKnobW / 2;
|
||||
//}
|
||||
$timeRangeSliderLROffset: 130px + $sliderKnobW;
|
||||
$knobHOffset: 0px;
|
||||
$knobM: ($sliderKnobW + $knobHOffset) * -1;
|
||||
$rangeValPad: $interiorMargin;
|
||||
$rangeValOffset: $sliderKnobW;
|
||||
//$knobCr: $sliderKnobW;
|
||||
$timeRangeSliderLROffset: 130px + $sliderKnobW + $rangeValOffset;
|
||||
$r1H: 33px;
|
||||
$r2H: 20px;
|
||||
$r2H: $sliderH;
|
||||
$r3H: 20px;
|
||||
|
||||
.l-time-range-inputs-holder,
|
||||
@@ -67,6 +74,42 @@
|
||||
@include box-shadow(none);
|
||||
background: none;
|
||||
border: none;
|
||||
.range {
|
||||
.toi-line {
|
||||
$myC: $timeControllerToiLineColor;
|
||||
$myW: 8px;
|
||||
@include transform(translateX(50%));
|
||||
position: absolute;
|
||||
//@include test();
|
||||
top: 0; right: 0; bottom: 0px; left: auto;
|
||||
width: $myW;
|
||||
height: auto;
|
||||
z-index: 2;
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: $myC;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
&:before {
|
||||
// Vert line
|
||||
top: 0; right: auto; bottom: -10px; left: floor($myW/2) - 1;
|
||||
width: 2px;
|
||||
//top: 0; right: 3px; bottom: 0; left: 3px;
|
||||
}
|
||||
&:after {
|
||||
// Circle element
|
||||
@include border-radius($myW);
|
||||
@include transform(translateY(-50%));
|
||||
top: 50%; right: 0; bottom: auto; left: 0;
|
||||
width: auto;
|
||||
height: $myW;
|
||||
}
|
||||
}
|
||||
&:hover .toi-line {
|
||||
@include toiLineHovEffects;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -99,10 +142,11 @@
|
||||
}
|
||||
|
||||
.knob {
|
||||
width: $sliderKnobW;
|
||||
z-index: 2;
|
||||
.range-value {
|
||||
//@include test($sliderColorRange);
|
||||
@include trans-prop-nice-fade(.25s);
|
||||
padding: 0 $rangeValOffset;
|
||||
position: absolute;
|
||||
height: $r2H;
|
||||
line-height: $r2H;
|
||||
@@ -112,7 +156,7 @@
|
||||
color: $sliderColorKnobHov;
|
||||
}
|
||||
&.knob-l {
|
||||
@include border-bottom-left-radius($knobCr);
|
||||
//@include border-bottom-left-radius($knobCr); // MOVED TO _CONTROLS.SCSS
|
||||
margin-left: $knobM;
|
||||
.range-value {
|
||||
text-align: right;
|
||||
@@ -120,11 +164,14 @@
|
||||
}
|
||||
}
|
||||
&.knob-r {
|
||||
@include border-bottom-right-radius($knobCr);
|
||||
//@include border-bottom-right-radius($knobCr);
|
||||
margin-right: $knobM;
|
||||
.range-value {
|
||||
left: $rangeValOffset;
|
||||
}
|
||||
&:hover + .range-holder .range .toi-line {
|
||||
@include toiLineHovEffects;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
<span class="val">{{endOuterText}}</span>
|
||||
<a class="ui-symbol icon icon-calendar"></a>
|
||||
<mct-popup ng-if="t2.isActive()">
|
||||
<div mct-click-elsewhere="t2.setState(false)" class="xmenu-holder go-up">
|
||||
<div mct-click-elsewhere="t2.setState(false)">
|
||||
<mct-control key="'datetime-picker'"
|
||||
ng-model="ngModel.outer"
|
||||
field="'end'"
|
||||
@@ -64,13 +64,6 @@
|
||||
<div class="l-time-range-slider">
|
||||
<div class="slider"
|
||||
mct-resize="spanWidth = bounds.width">
|
||||
<div class="slot range-holder">
|
||||
<div class="range"
|
||||
mct-drag-down="startMiddleDrag()"
|
||||
mct-drag="middleDrag(delta[0])"
|
||||
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
||||
</div>
|
||||
</div>
|
||||
<div class="knob knob-l"
|
||||
mct-drag-down="startLeftDrag()"
|
||||
mct-drag="leftDrag(delta[0])"
|
||||
@@ -83,6 +76,14 @@
|
||||
ng-style="{ right: endInnerPct }">
|
||||
<div class="range-value">{{endInnerText}}</div>
|
||||
</div>
|
||||
<div class="slot range-holder">
|
||||
<div class="range"
|
||||
mct-drag-down="startMiddleDrag()"
|
||||
mct-drag="middleDrag(delta[0])"
|
||||
ng-style="{ left: startInnerPct, right: endInnerPct}">
|
||||
<div class="toi-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user