|
61 | 61 | .rz-bar-wrapper {
|
62 | 62 | left: 0;
|
63 | 63 | box-sizing: border-box;
|
64 |
| - margin-top: -@handleSize / 2; |
65 |
| - padding-top: @handleSize / 2; |
| 64 | + margin-top: (-@handleSize / 2); |
| 65 | + padding-top: (@handleSize / 2); |
66 | 66 | width: 100%;
|
67 | 67 | height: @handleSize;
|
68 | 68 | z-index: 1;
|
|
79 | 79 | height: @barDimension;
|
80 | 80 | z-index: 1;
|
81 | 81 | background: @barNormalColor;
|
82 |
| - .rounded(@barDimension / 2); |
| 82 | + .rounded((@barDimension / 2)); |
83 | 83 | }
|
84 | 84 |
|
85 | 85 | .rz-bar-wrapper.rz-transparent .rz-bar {
|
|
95 | 95 | .rz-selection {
|
96 | 96 | z-index: 2;
|
97 | 97 | background: @barFillColor;
|
98 |
| - .rounded(@barDimension / 2); |
| 98 | + .rounded((@barDimension / 2)); |
99 | 99 | transition: background-color linear @animationDuration;
|
100 | 100 | }
|
101 | 101 |
|
102 | 102 | .rz-restricted {
|
103 | 103 | z-index: 3;
|
104 | 104 | background: @restrictedBarColor;
|
105 |
| - .rounded(@barDimension / 2); |
| 105 | + .rounded((@barDimension / 2)); |
106 | 106 | }
|
107 | 107 |
|
108 | 108 | .rz-pointer {
|
109 | 109 | cursor: pointer;
|
110 | 110 | width: @handleSize;
|
111 | 111 | height: @handleSize;
|
112 |
| - top: -@handleSize / 2 + @barDimension / 2; |
| 112 | + top: (-@handleSize / 2 + @barDimension / 2); |
113 | 113 | background-color: @handleBgColor;
|
114 | 114 | z-index: 3;
|
115 |
| - .rounded(@handleSize / 2); |
| 115 | + .rounded((@handleSize / 2)); |
116 | 116 | transition: all linear @animationDuration;
|
117 | 117 |
|
118 | 118 | &:after {
|
119 | 119 | content: '';
|
120 | 120 | width: @handlePointerSize;
|
121 | 121 | height: @handlePointerSize;
|
122 | 122 | position: absolute;
|
123 |
| - top: @handleSize / 2 - @handlePointerSize / 2; |
124 |
| - left: @handleSize / 2 - @handlePointerSize / 2; |
125 |
| - .rounded(@handlePointerSize / 2); |
| 123 | + top: (@handleSize / 2 - @handlePointerSize / 2); |
| 124 | + left: (@handleSize / 2 - @handlePointerSize / 2); |
| 125 | + .rounded((@handlePointerSize / 2)); |
126 | 126 | background: @handleInnerColor;
|
127 | 127 | }
|
128 | 128 | &:hover:after {
|
|
138 | 138 |
|
139 | 139 | .rz-bubble {
|
140 | 140 | cursor: default;
|
141 |
| - bottom: @handleSize / 2; |
| 141 | + bottom: (@handleSize / 2); |
142 | 142 | padding: @bubblePadding;
|
143 | 143 | color: @labelTextColor;
|
144 | 144 | transition: all linear @animationDuration;
|
|
154 | 154 | height: 0;
|
155 | 155 | position: absolute;
|
156 | 156 | left: 0;
|
157 |
| - top: -(@ticksHeight - @barDimension) / 2; |
| 157 | + top: (-(@ticksHeight - @barDimension) / 2); |
158 | 158 | margin: 0;
|
159 | 159 | z-index: 1;
|
160 | 160 | list-style: none;
|
|
163 | 163 | .rz-ticks-values-under {
|
164 | 164 | .rz-tick-value {
|
165 | 165 | top: auto;
|
166 |
| - bottom: @ticksValuePosition - 2; |
| 166 | + bottom: (@ticksValuePosition - 2); |
167 | 167 | }
|
168 | 168 | }
|
169 | 169 |
|
|
177 | 177 | position: absolute;
|
178 | 178 | top: 0;
|
179 | 179 | left: 0;
|
180 |
| - margin-left: @handleSize / 2 - @ticksWidth / 2; // for centering |
| 180 | + margin-left: (@handleSize / 2 - @ticksWidth / 2); // for centering |
181 | 181 | transition: background-color linear @animationDuration;
|
182 | 182 | &.rz-selected {
|
183 | 183 | background: @selectedTicksColor;
|
|
215 | 215 | .rz-bar-wrapper {
|
216 | 216 | top: auto;
|
217 | 217 | left: 0;
|
218 |
| - margin: 0 0 0 -@handleSize / 2; |
219 |
| - padding: 0 0 0 @handleSize / 2; |
| 218 | + margin: 0 0 0 (-@handleSize / 2); |
| 219 | + padding: 0 0 0 (@handleSize / 2); |
220 | 220 | height: 100%;
|
221 | 221 | width: @handleSize;
|
222 | 222 | }
|
|
229 | 229 | }
|
230 | 230 |
|
231 | 231 | .rz-pointer {
|
232 |
| - left: -@handleSize / 2 + @barDimension / 2 !important; |
| 232 | + left: (-@handleSize / 2 + @barDimension / 2) !important; |
233 | 233 | top: auto;
|
234 | 234 | bottom: 0;
|
235 | 235 | }
|
236 | 236 |
|
237 | 237 | .rz-bubble {
|
238 |
| - left: @handleSize / 2 !important; |
| 238 | + left: (@handleSize / 2) !important; |
239 | 239 | margin-left: 3px;
|
240 | 240 | bottom: 0;
|
241 | 241 | }
|
242 | 242 |
|
243 | 243 | .rz-ticks {
|
244 | 244 | height: 100%;
|
245 | 245 | width: 0;
|
246 |
| - left: -(@ticksHeight - @barDimension) / 2; |
| 246 | + left: (-(@ticksHeight - @barDimension) / 2); |
247 | 247 | top: 0;
|
248 | 248 | z-index: 1;
|
249 | 249 | }
|
250 | 250 | .rz-tick {
|
251 | 251 | vertical-align: middle;
|
252 | 252 | margin-left: auto;
|
253 |
| - margin-top: @handleSize / 2 - @ticksWidth / 2; // for centering |
| 253 | + margin-top: (@handleSize / 2 - @ticksWidth / 2); // for centering |
254 | 254 | }
|
255 | 255 | .rz-tick-value {
|
256 | 256 | left: @ticksValuePositionOnVertical;
|
|
0 commit comments