Skip to content

I
i20rzslider
Commit 9c659bf4 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Use real LESS power by factorizing the rzslider element.

parent 819127a0
Hide whitespace changes
Inline Side-by-side
Showing with 110 additions and 111 deletions
src/rzslider.less
View file @ 9c659bf4
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
* *
* Licensed under the MIT license * Licensed under the MIT license
*/ */
@import 'variables.less'; @import 'variables.less';
rzslider { rzslider {
...@@ -29,120 +28,120 @@ rzslider { ...@@ -29,120 +28,120 @@ rzslider {
background-color: @handleDisabledColor; background-color: @handleDisabledColor;
} }
} }
}
rzslider span { span {
white-space: nowrap; white-space: nowrap;
position: absolute; position: absolute;
display: inline-block; display: inline-block;
}
rzslider span.rz-base { &.rz-base {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
} }
rzslider span.rz-bar-wrapper {
left: 0;
box-sizing: border-box;
margin-top: -@handleSize / 2;
padding-top: @handleSize / 2;
width: 100%;
height: @handleSize;
z-index: 1;
}
rzslider span.rz-bar { &.rz-bar-wrapper {
left: 0; left: 0;
width: 100%; box-sizing: border-box;
height: @barHeight; margin-top: -@handleSize / 2;
z-index: 1; padding-top: @handleSize / 2;
background: @barNormalColor; width: 100%;
.rounded(@barHeight/2); height: @handleSize;
} z-index: 1;
}
rzslider span.rz-bar.rz-selection {
z-index: 2; &.rz-bar {
background: @barFillColor; left: 0;
.rounded(@barHeight/2); width: 100%;
} height: @barHeight;
z-index: 1;
rzslider span.rz-pointer { background: @barNormalColor;
cursor: pointer; .rounded(@barHeight/2);
width: @handleSize; }
height: @handleSize;
top: -@handleSize/2 + @barHeight/2; &.rz-bar.rz-selection {
background-color: @handleBgColor; z-index: 2;
z-index: 3; background: @barFillColor;
.rounded(@handleSize/2); .rounded(@barHeight/2);
// -webkit-transition:all linear 0.15s; }
// -moz-transition:all linear 0.15s;
// -o-transition:all linear 0.15s; &.rz-pointer {
// transition:all linear 0.15s; cursor: pointer;
} width: @handleSize;
height: @handleSize;
rzslider span.rz-pointer:after { top: -@handleSize/2 + @barHeight/2;
content: ''; background-color: @handleBgColor;
width: @handlePointerSize; z-index: 3;
height: @handlePointerSize; .rounded(@handleSize/2);
position: absolute; // -webkit-transition:all linear 0.15s;
top: @handleSize/2 - @handlePointerSize/2; // -moz-transition:all linear 0.15s;
left: @handleSize/2 - @handlePointerSize/2; // -o-transition:all linear 0.15s;
.rounded(@handlePointerSize/2); // transition:all linear 0.15s;
background: @handleInnerColor;
}
rzslider span.rz-pointer:hover:after {
background-color: @handleHoverColor;
}
rzslider span.rz-pointer.rz-active:after {
background-color: @handleActiveColor;
}
rzslider span.rz-bubble {
cursor: default;
bottom: @handleSize/2;
padding: @bubblePadding;
color: @labelTextColor;
}
rzslider span.rz-bubble.rz-selection {
top: @handleSize/2;
}
rzslider span.rz-bubble.rz-limit {
color: @limitLabelTextColor;
}
rzslider .rz-ticks {
box-sizing: border-box;
width: 100%;
position: absolute;
left: 0;
top: -(@ticksHeight - @barHeight) / 2;
margin: 0;
padding: 0 (@handleSize - @ticksWidth) / 2;
z-index: 1;
list-style: none;
display: flex;
justify-content: space-between;
.tick {
text-align: center;
cursor: pointer;
width: @ticksWidth;
height: @ticksHeight;
background: @ticksColor;
border-radius: 50%;
&.selected {
background: @selectedTicksColor;
} }
.tick-value {
&.rz-pointer:after {
content: '';
width: @handlePointerSize;
height: @handlePointerSize;
position: absolute; position: absolute;
top: @ticksValuePosition; top: @handleSize/2 - @handlePointerSize/2;
transform: translate(-50%, 0); left: @handleSize/2 - @handlePointerSize/2;
.rounded(@handlePointerSize/2);
background: @handleInnerColor;
}
&.rz-pointer:hover:after {
background-color: @handleHoverColor;
}
&.rz-pointer.rz-active:after {
background-color: @handleActiveColor;
}
&.rz-bubble {
cursor: default;
bottom: @handleSize/2;
padding: @bubblePadding;
color: @labelTextColor;
}
&.rz-bubble.rz-selection {
top: @handleSize/2;
}
&.rz-bubble.rz-limit {
color: @limitLabelTextColor;
}
}
.rz-ticks {
box-sizing: border-box;
width: 100%;
position: absolute;
left: 0;
top: -(@ticksHeight - @barHeight) / 2;
margin: 0;
padding: 0 (@handleSize - @ticksWidth) / 2;
z-index: 1;
list-style: none;
display: flex;
justify-content: space-between;
.tick {
text-align: center;
cursor: pointer;
width: @ticksWidth;
height: @ticksHeight;
background: @ticksColor;
border-radius: 50%;
&.selected {
background: @selectedTicksColor;
}
.tick-value {
position: absolute;
top: @ticksValuePosition;
transform: translate(-50%, 0);
}
} }
} }
} }
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment