Skip to content

Commit 9c659bf

Browse files
author
Valentin Hervieu
committed
Use real LESS power by factorizing the rzslider element.
1 parent 819127a commit 9c659bf

File tree

1 file changed

+110
-111
lines changed

1 file changed

+110
-111
lines changed

‎src/rzslider.less

Lines changed: 110 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
*
77
* Licensed under the MIT license
88
*/
9-
109
@import 'variables.less';
1110

1211
rzslider {
@@ -29,120 +28,120 @@ rzslider {
2928
background-color: @handleDisabledColor;
3029
}
3130
}
32-
}
3331

34-
rzslider span {
35-
white-space: nowrap;
36-
position: absolute;
37-
display: inline-block;
38-
}
32+
span {
33+
white-space: nowrap;
34+
position: absolute;
35+
display: inline-block;
3936

40-
rzslider span.rz-base {
41-
width: 100%;
42-
height: 100%;
43-
padding: 0;
44-
}
45-
46-
rzslider span.rz-bar-wrapper {
47-
left: 0;
48-
box-sizing: border-box;
49-
margin-top: -@handleSize / 2;
50-
padding-top: @handleSize / 2;
51-
width: 100%;
52-
height: @handleSize;
53-
z-index: 1;
54-
}
37+
&.rz-base {
38+
width: 100%;
39+
height: 100%;
40+
padding: 0;
41+
}
5542

56-
rzslider span.rz-bar {
57-
left: 0;
58-
width: 100%;
59-
height: @barHeight;
60-
z-index: 1;
61-
background: @barNormalColor;
62-
.rounded(@barHeight/2);
63-
}
64-
65-
rzslider span.rz-bar.rz-selection {
66-
z-index: 2;
67-
background: @barFillColor;
68-
.rounded(@barHeight/2);
69-
}
70-
71-
rzslider span.rz-pointer {
72-
cursor: pointer;
73-
width: @handleSize;
74-
height: @handleSize;
75-
top: -@handleSize/2 + @barHeight/2;
76-
background-color: @handleBgColor;
77-
z-index: 3;
78-
.rounded(@handleSize/2);
79-
// -webkit-transition:all linear 0.15s;
80-
// -moz-transition:all linear 0.15s;
81-
// -o-transition:all linear 0.15s;
82-
// transition:all linear 0.15s;
83-
}
84-
85-
rzslider span.rz-pointer:after {
86-
content: '';
87-
width: @handlePointerSize;
88-
height: @handlePointerSize;
89-
position: absolute;
90-
top: @handleSize/2 - @handlePointerSize/2;
91-
left: @handleSize/2 - @handlePointerSize/2;
92-
.rounded(@handlePointerSize/2);
93-
background: @handleInnerColor;
94-
}
95-
96-
rzslider span.rz-pointer:hover:after {
97-
background-color: @handleHoverColor;
98-
}
99-
100-
rzslider span.rz-pointer.rz-active:after {
101-
background-color: @handleActiveColor;
102-
}
103-
104-
rzslider span.rz-bubble {
105-
cursor: default;
106-
bottom: @handleSize/2;
107-
padding: @bubblePadding;
108-
color: @labelTextColor;
109-
}
110-
111-
rzslider span.rz-bubble.rz-selection {
112-
top: @handleSize/2;
113-
}
114-
115-
rzslider span.rz-bubble.rz-limit {
116-
color: @limitLabelTextColor;
117-
}
118-
119-
rzslider .rz-ticks {
120-
box-sizing: border-box;
121-
width: 100%;
122-
position: absolute;
123-
left: 0;
124-
top: -(@ticksHeight - @barHeight) / 2;
125-
margin: 0;
126-
padding: 0 (@handleSize - @ticksWidth) / 2;
127-
z-index: 1;
128-
list-style: none;
129-
display: flex;
130-
justify-content: space-between;
131-
132-
.tick {
133-
text-align: center;
134-
cursor: pointer;
135-
width: @ticksWidth;
136-
height: @ticksHeight;
137-
background: @ticksColor;
138-
border-radius: 50%;
139-
&.selected {
140-
background: @selectedTicksColor;
43+
&.rz-bar-wrapper {
44+
left: 0;
45+
box-sizing: border-box;
46+
margin-top: -@handleSize / 2;
47+
padding-top: @handleSize / 2;
48+
width: 100%;
49+
height: @handleSize;
50+
z-index: 1;
51+
}
52+
53+
&.rz-bar {
54+
left: 0;
55+
width: 100%;
56+
height: @barHeight;
57+
z-index: 1;
58+
background: @barNormalColor;
59+
.rounded(@barHeight/2);
60+
}
61+
62+
&.rz-bar.rz-selection {
63+
z-index: 2;
64+
background: @barFillColor;
65+
.rounded(@barHeight/2);
66+
}
67+
68+
&.rz-pointer {
69+
cursor: pointer;
70+
width: @handleSize;
71+
height: @handleSize;
72+
top: -@handleSize/2 + @barHeight/2;
73+
background-color: @handleBgColor;
74+
z-index: 3;
75+
.rounded(@handleSize/2);
76+
// -webkit-transition:all linear 0.15s;
77+
// -moz-transition:all linear 0.15s;
78+
// -o-transition:all linear 0.15s;
79+
// transition:all linear 0.15s;
14180
}
142-
.tick-value {
81+
82+
&.rz-pointer:after {
83+
content: '';
84+
width: @handlePointerSize;
85+
height: @handlePointerSize;
14386
position: absolute;
144-
top: @ticksValuePosition;
145-
transform: translate(-50%, 0);
87+
top: @handleSize/2 - @handlePointerSize/2;
88+
left: @handleSize/2 - @handlePointerSize/2;
89+
.rounded(@handlePointerSize/2);
90+
background: @handleInnerColor;
91+
}
92+
93+
&.rz-pointer:hover:after {
94+
background-color: @handleHoverColor;
95+
}
96+
97+
&.rz-pointer.rz-active:after {
98+
background-color: @handleActiveColor;
99+
}
100+
101+
&.rz-bubble {
102+
cursor: default;
103+
bottom: @handleSize/2;
104+
padding: @bubblePadding;
105+
color: @labelTextColor;
106+
}
107+
108+
&.rz-bubble.rz-selection {
109+
top: @handleSize/2;
110+
}
111+
112+
&.rz-bubble.rz-limit {
113+
color: @limitLabelTextColor;
114+
}
115+
}
116+
117+
.rz-ticks {
118+
box-sizing: border-box;
119+
width: 100%;
120+
position: absolute;
121+
left: 0;
122+
top: -(@ticksHeight - @barHeight) / 2;
123+
margin: 0;
124+
padding: 0 (@handleSize - @ticksWidth) / 2;
125+
z-index: 1;
126+
list-style: none;
127+
display: flex;
128+
justify-content: space-between;
129+
130+
.tick {
131+
text-align: center;
132+
cursor: pointer;
133+
width: @ticksWidth;
134+
height: @ticksHeight;
135+
background: @ticksColor;
136+
border-radius: 50%;
137+
&.selected {
138+
background: @selectedTicksColor;
139+
}
140+
.tick-value {
141+
position: absolute;
142+
top: @ticksValuePosition;
143+
transform: translate(-50%, 0);
144+
}
146145
}
147146
}
148-
}
147+
}

0 commit comments

Comments
 (0)