1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 | @import '../../globals/scss/vars';
|
13 | @import '../../globals/scss/helper-mixins';
|
14 | @import '../../globals/scss/layer';
|
15 | @import '../../globals/scss/typography';
|
16 | @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
17 | @import '../form/form';
|
18 | @import '../text-input/text-input';
|
19 |
|
20 | @mixin slider {
|
21 | .#{$prefix}--slider-container {
|
22 | display: flex;
|
23 | align-items: center;
|
24 | user-select: none;
|
25 | }
|
26 |
|
27 | .#{$prefix}--slider {
|
28 | position: relative;
|
29 | width: 100%;
|
30 | margin: 0 $spacing-md;
|
31 | max-width: rem(640px);
|
32 | min-width: rem(200px);
|
33 | order: 1;
|
34 | }
|
35 |
|
36 | .#{$prefix}--slider__range-label:first-of-type {
|
37 | order: 0;
|
38 | }
|
39 |
|
40 | .#{$prefix}--slider-text-input {
|
41 | order: 3;
|
42 | }
|
43 |
|
44 | .#{$prefix}--slider--disabled {
|
45 | opacity: 0.5;
|
46 | }
|
47 |
|
48 | .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
|
49 | &:hover {
|
50 | transform: translate(-50%, -50%);
|
51 | }
|
52 | &:focus {
|
53 | box-shadow: none;
|
54 | outline: none;
|
55 | }
|
56 | &:active {
|
57 | background: $hover-secondary;
|
58 | transform: translate(-50%, -50%);
|
59 | }
|
60 | }
|
61 |
|
62 | .#{$prefix}--slider__range-label {
|
63 | @include typescale('zeta');
|
64 | color: $text-02;
|
65 |
|
66 | &:last-of-type {
|
67 | margin-right: $spacing-md;
|
68 | order: 2;
|
69 | }
|
70 | }
|
71 |
|
72 | .#{$prefix}--slider__track {
|
73 | position: absolute;
|
74 | width: 100%;
|
75 | height: rem(4px);
|
76 | background: $ui-04;
|
77 | cursor: pointer;
|
78 | transform: translate(0%, -50%);
|
79 | }
|
80 |
|
81 | .#{$prefix}--slider__filled-track {
|
82 | position: absolute;
|
83 | width: 100%;
|
84 | height: rem(4px);
|
85 | background: $brand-01;
|
86 | transform-origin: left;
|
87 | pointer-events: none;
|
88 | transform: translate(0%, -50%);
|
89 | }
|
90 |
|
91 | .#{$prefix}--slider__thumb {
|
92 | position: absolute;
|
93 | height: rem(24px);
|
94 | width: rem(24px);
|
95 | background: $brand-01;
|
96 | border-radius: 50%;
|
97 | top: 0;
|
98 | transform: translate(-50%, -50%);
|
99 | transition: transform 100ms $carbon--standard-easing, background 100ms $carbon--standard-easing;
|
100 | cursor: pointer;
|
101 | outline: none;
|
102 | z-index: 2;
|
103 |
|
104 | &--clicked {
|
105 | transition: left $transition--base $carbon--standard-easing;
|
106 | }
|
107 |
|
108 | &:hover {
|
109 | transform: translate(-50%, -50%) scale(1.05);
|
110 | }
|
111 | &:focus {
|
112 | @include focus-outline('blurred');
|
113 | }
|
114 | &:active {
|
115 | background: darken($brand-01, 5%);
|
116 | transform: translate(-50%, -50%) scale(1.25);
|
117 | }
|
118 | }
|
119 |
|
120 | .#{$prefix}--slider__input {
|
121 | display: none;
|
122 | }
|
123 |
|
124 | .#{$prefix}--slider-text-input,
|
125 | .#{$prefix}-slider-text-input {
|
126 | width: rem(60px);
|
127 | min-width: rem(60px);
|
128 | height: 2rem;
|
129 | padding: 0;
|
130 | text-align: center;
|
131 | font-weight: 600;
|
132 | -moz-appearance: textfield;
|
133 | &::-webkit-outer-spin-button,
|
134 | &::-webkit-inner-spin-button {
|
135 | display: none;
|
136 | }
|
137 | }
|
138 |
|
139 |
|
140 | .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__range-label {
|
141 | @include skeleton;
|
142 | width: rem(20px);
|
143 | height: rem(12px);
|
144 | }
|
145 |
|
146 | .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__track {
|
147 | cursor: default;
|
148 | pointer-events: none;
|
149 | }
|
150 |
|
151 | .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb {
|
152 | left: 50%;
|
153 | cursor: default;
|
154 | pointer-events: none;
|
155 | }
|
156 | }
|
157 |
|
158 | @mixin slider--x {
|
159 | .#{$prefix}--slider-container {
|
160 | display: flex;
|
161 | align-items: center;
|
162 | user-select: none;
|
163 | }
|
164 |
|
165 | .#{$prefix}--slider {
|
166 | position: relative;
|
167 | width: 100%;
|
168 | margin: 0 $carbon--spacing-05;
|
169 | max-width: rem(640px);
|
170 | min-width: rem(200px);
|
171 | }
|
172 |
|
173 | .#{$prefix}--slider__range-label {
|
174 | @include type-style('code-02');
|
175 | color: $text-01;
|
176 |
|
177 | &:last-of-type {
|
178 | margin-right: $carbon--spacing-05;
|
179 | }
|
180 | }
|
181 |
|
182 | .#{$prefix}--slider__track {
|
183 | position: absolute;
|
184 | width: 100%;
|
185 | height: rem(2px);
|
186 | background: $ui-03;
|
187 | cursor: pointer;
|
188 | transform: translate(0%, -50%);
|
189 | }
|
190 |
|
191 | .#{$prefix}--slider__track:before {
|
192 | content: '';
|
193 | position: absolute;
|
194 | display: inline-block;
|
195 | height: rem(4px);
|
196 | width: rem(2px);
|
197 | left: 50%;
|
198 | transform: translate(-50%, 0);
|
199 | top: rem(-5px);
|
200 | background: $ui-03;
|
201 | }
|
202 |
|
203 | .#{$prefix}--slider__filled-track {
|
204 | position: absolute;
|
205 | width: 100%;
|
206 | height: rem(2px);
|
207 | background: $ui-05;
|
208 | transform-origin: left;
|
209 | pointer-events: none;
|
210 | transform: translate(0%, -50%);
|
211 | transition: background $duration--fast-01 motion(standard, productive);
|
212 | }
|
213 |
|
214 | .#{$prefix}--slider__thumb {
|
215 | position: absolute;
|
216 | height: rem(14px);
|
217 | width: rem(14px);
|
218 | background: $ui-05;
|
219 | border-radius: 50%;
|
220 | box-shadow: inset 0 0 0 1px transparent, inset 0 0 0 2px transparent;
|
221 | top: 0;
|
222 | transform: translate(-50%, -50%);
|
223 | transition: transform $duration--fast-01 motion(standard, productive),
|
224 | background $duration--fast-01 motion(standard, productive), box-shadow $duration--fast-01 motion(standard, productive);
|
225 | cursor: pointer;
|
226 | outline: none;
|
227 | z-index: 3;
|
228 |
|
229 | &:hover {
|
230 |
|
231 | transform: translate(-50%, -50%) scale(1.4285714286);
|
232 | }
|
233 |
|
234 | &:focus {
|
235 |
|
236 | transform: translate(-50%, -50%) scale(1.4285714286);
|
237 | box-shadow: inset 0 0 0 2px $interactive-01, inset 0 0 0 3px $ui-01;
|
238 | background-color: $interactive-01;
|
239 | }
|
240 |
|
241 | &:active {
|
242 | transform: translate(-50%, -50%) scale(1.4285714286);
|
243 | box-shadow: inset 0 0 0 2px $interactive-01;
|
244 | }
|
245 | }
|
246 |
|
247 | .#{$prefix}--slider__input {
|
248 | display: none;
|
249 | }
|
250 |
|
251 | .#{$prefix}--slider-text-input,
|
252 | .#{$prefix}-slider-text-input {
|
253 | width: rem(64px);
|
254 | height: rem(40px);
|
255 | padding: 0;
|
256 | text-align: center;
|
257 | -moz-appearance: textfield;
|
258 |
|
259 | &::-webkit-outer-spin-button,
|
260 | &::-webkit-inner-spin-button {
|
261 | display: none;
|
262 | }
|
263 | }
|
264 |
|
265 | .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
|
266 | background-color: $interactive-01;
|
267 | }
|
268 |
|
269 |
|
270 | .#{$prefix}--label--disabled ~ .#{$prefix}--slider-container > .#{$prefix}--slider__range-label {
|
271 | color: $disabled-02;
|
272 | }
|
273 |
|
274 | .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb {
|
275 | background-color: $ui-03;
|
276 |
|
277 | &:hover {
|
278 | transform: translate(-50%, -50%);
|
279 | cursor: not-allowed;
|
280 | }
|
281 |
|
282 | &:focus {
|
283 | box-shadow: none;
|
284 | outline: none;
|
285 | background-color: $ui-03;
|
286 | transform: translate(-50%, -50%);
|
287 | }
|
288 |
|
289 | &:active {
|
290 | background: $ui-03;
|
291 | transform: translate(-50%, -50%);
|
292 | }
|
293 | }
|
294 |
|
295 | .#{$prefix}--slider--disabled .#{$prefix}--slider__track,
|
296 | .#{$prefix}--slider--disabled .#{$prefix}--slider__filled-track,
|
297 | .#{$prefix}--slider--disabled .#{$prefix}--slider__thumb:focus ~ .#{$prefix}--slider__filled-track {
|
298 | background-color: $ui-03;
|
299 | cursor: not-allowed;
|
300 | }
|
301 |
|
302 | .#{$prefix}--slider--disabled ~ .#{$prefix}--form-item .#{$prefix}--slider-text-input,
|
303 | .#{$prefix}--slider--disabled ~ .#{$prefix}--slider-text-input {
|
304 | background-color: $disabled-01;
|
305 | color: $disabled-02;
|
306 | transition: none;
|
307 |
|
308 | &:active,
|
309 | &:focus,
|
310 | &:hover {
|
311 | outline: none;
|
312 | color: $disabled-02;
|
313 | }
|
314 | }
|
315 |
|
316 |
|
317 | .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__range-label {
|
318 | @include skeleton;
|
319 | width: rem(20px);
|
320 | height: rem(12px);
|
321 | }
|
322 |
|
323 | .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__track {
|
324 | cursor: default;
|
325 | pointer-events: none;
|
326 | }
|
327 |
|
328 | .#{$prefix}--slider-container.#{$prefix}--skeleton .#{$prefix}--slider__thumb {
|
329 | left: 50%;
|
330 | cursor: default;
|
331 | pointer-events: none;
|
332 | }
|
333 | }
|
334 |
|
335 | @include exports('slider') {
|
336 | @if feature-flag-enabled('components-x') {
|
337 | @include slider--x;
|
338 | } @else {
|
339 | @include slider;
|
340 | }
|
341 | }
|