@bodynarf/react.components 1.14.0 → 1.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/changelog.md +1 -1
  2. package/components/accordion/component/index.js +1 -1
  3. package/components/accordion/component/style.css +21 -0
  4. package/components/anchor/component/style.css +12 -0
  5. package/components/button/component/style.css +10 -0
  6. package/components/dropdown/component/style.css +101 -0
  7. package/components/dropdown/components/compact/index.d.ts.map +1 -1
  8. package/components/dropdown/components/compact/index.js +3 -3
  9. package/components/dropdown/components/label/components/empty/index.js +1 -1
  10. package/components/dropdown/components/label/components/withSearch/style.css +21 -0
  11. package/components/dropdown/types.d.ts +6 -6
  12. package/components/dropdown/types.d.ts.map +1 -1
  13. package/components/file/component/styles.css +74 -0
  14. package/components/icon/component/style.css +19 -0
  15. package/components/index.d.ts +0 -2
  16. package/components/index.d.ts.map +1 -1
  17. package/components/index.js +0 -2
  18. package/components/modal/component/style.css +32 -0
  19. package/components/multiselect/component/style.css +20 -0
  20. package/components/multiselect/components/withoutLabel/index.d.ts.map +1 -1
  21. package/components/multiselect/components/withoutLabel/index.js +3 -3
  22. package/components/primitives/checkbox/component/style.css +19 -0
  23. package/components/primitives/color/component/style.css +15 -0
  24. package/components/primitives/date/component/style.css +9 -0
  25. package/components/primitives/internal/hint/style.css +4 -0
  26. package/components/primitives/password/component/style.css +10 -0
  27. package/components/primitives/radioGroup/component/style.css +382 -0
  28. package/components/primitives/radioGroup/component/style.scss +2 -0
  29. package/components/primitives/slider/component/style.css +438 -0
  30. package/components/primitives/slider/component/style.scss +2 -0
  31. package/components/primitives/switch/component/style.css +482 -0
  32. package/components/primitives/switch/component/style.scss +2 -0
  33. package/components/primitives/timePicker/component/style.css +21 -0
  34. package/components/progress/component/style.css +167 -0
  35. package/components/search/component/style.css +18 -0
  36. package/components/stepper/component/style.css +510 -0
  37. package/components/stepper/component/style.scss +2 -0
  38. package/components/table/component/style.css +14 -0
  39. package/components/tabs/component/style.css +6 -0
  40. package/components/tag/component/style.css +19 -0
  41. package/components/timeline/component/style.css +488 -0
  42. package/components/timeline/component/style.scss +2 -0
  43. package/package.json +10 -3
  44. package/tsconfig.tsbuildinfo +1 -1
@@ -0,0 +1,438 @@
1
+ .bbr-slider-container {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: column;
5
+ width: 100%;
6
+ padding-top: 0.5rem;
7
+ }
8
+ .bbr-slider-container.is-vertical {
9
+ flex-direction: row;
10
+ width: auto;
11
+ height: 200px;
12
+ padding-top: 0;
13
+ padding-left: 0.5rem;
14
+ }
15
+
16
+ .bbr-slider-output {
17
+ position: absolute;
18
+ top: -1.5rem;
19
+ display: inline-block;
20
+ width: 3rem;
21
+ padding: 0.25rem 0.5rem;
22
+ font-size: 0.75rem;
23
+ text-align: center;
24
+ color: hsl(0, 0%, 100%);
25
+ background-color: hsl(171, 100%, 41%);
26
+ border-radius: 4px;
27
+ pointer-events: none;
28
+ }
29
+ .bbr-slider-output::after {
30
+ content: "";
31
+ position: absolute;
32
+ top: 100%;
33
+ left: 50%;
34
+ margin-left: -5px;
35
+ border-width: 5px;
36
+ border-style: solid;
37
+ border-color: hsl(171, 100%, 41%) transparent transparent transparent;
38
+ }
39
+
40
+ .bbr-slider-labels {
41
+ display: flex;
42
+ justify-content: space-between;
43
+ margin-top: 0.25rem;
44
+ font-size: 0.75rem;
45
+ color: hsl(0, 0%, 48%);
46
+ }
47
+
48
+ input[type=range].slider.bbr-slider {
49
+ --progress-percent: 0%;
50
+ appearance: none;
51
+ width: 100%;
52
+ margin: 0;
53
+ padding: 0;
54
+ background: transparent;
55
+ cursor: pointer;
56
+ }
57
+ input[type=range].slider.bbr-slider::-webkit-slider-runnable-track {
58
+ box-sizing: border-box;
59
+ width: 100%;
60
+ height: 0.5rem;
61
+ background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
62
+ border: 0px solid hsl(0, 0%, 48%);
63
+ border-radius: 4px;
64
+ box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
65
+ }
66
+ input[type=range].slider.bbr-slider::-moz-range-track {
67
+ box-sizing: border-box;
68
+ width: 100%;
69
+ height: 0.5rem;
70
+ background: hsl(0, 0%, 86%);
71
+ border: 0px solid hsl(0, 0%, 48%);
72
+ border-radius: 4px;
73
+ box-shadow: 0px 0px 0px hsl(0, 0%, 48%);
74
+ }
75
+ input[type=range].slider.bbr-slider::-moz-range-progress {
76
+ height: 0.5rem;
77
+ background: hsl(171, 100%, 41%);
78
+ border-radius: 4px;
79
+ }
80
+ input[type=range].slider.bbr-slider::-ms-track {
81
+ box-sizing: border-box;
82
+ width: 100%;
83
+ height: 0.5rem;
84
+ background: transparent;
85
+ border-color: transparent;
86
+ color: transparent;
87
+ }
88
+ input[type=range].slider.bbr-slider::-ms-fill-lower {
89
+ background: hsl(171, 100%, 41%);
90
+ border-radius: 4px;
91
+ }
92
+ input[type=range].slider.bbr-slider::-ms-fill-upper {
93
+ background: hsl(0, 0%, 86%);
94
+ border-radius: 4px;
95
+ }
96
+ input[type=range].slider.bbr-slider::-webkit-slider-thumb {
97
+ appearance: none;
98
+ width: 1rem;
99
+ height: 1rem;
100
+ margin-top: -0.25rem;
101
+ background: hsl(0, 0%, 100%);
102
+ border: 1px solid hsl(0, 0%, 71%);
103
+ border-radius: 4px;
104
+ box-shadow: none;
105
+ transition: transform 0.2s ease;
106
+ }
107
+ input[type=range].slider.bbr-slider::-webkit-slider-thumb:hover {
108
+ transform: scale(1.1);
109
+ }
110
+ input[type=range].slider.bbr-slider::-moz-range-thumb {
111
+ width: 1rem;
112
+ height: 1rem;
113
+ background: hsl(0, 0%, 100%);
114
+ border: 1px solid hsl(0, 0%, 71%);
115
+ border-radius: 4px;
116
+ box-shadow: none;
117
+ transition: transform 0.2s ease;
118
+ }
119
+ input[type=range].slider.bbr-slider::-moz-range-thumb:hover {
120
+ transform: scale(1.1);
121
+ }
122
+ input[type=range].slider.bbr-slider::-ms-thumb {
123
+ width: 1rem;
124
+ height: 1rem;
125
+ background: hsl(0, 0%, 100%);
126
+ border: 1px solid hsl(0, 0%, 71%);
127
+ border-radius: 4px;
128
+ box-shadow: none;
129
+ }
130
+ input[type=range].slider.bbr-slider:focus {
131
+ outline: none;
132
+ }
133
+ input[type=range].slider.bbr-slider:focus::-webkit-slider-thumb {
134
+ border-color: hsl(171, 100%, 41%);
135
+ box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
136
+ }
137
+ input[type=range].slider.bbr-slider:focus::-moz-range-thumb {
138
+ border-color: hsl(171, 100%, 41%);
139
+ box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
140
+ }
141
+ input[type=range].slider.bbr-slider:disabled {
142
+ cursor: not-allowed;
143
+ opacity: 0.5;
144
+ }
145
+ input[type=range].slider.bbr-slider.is-circle::-webkit-slider-thumb {
146
+ border-radius: 50%;
147
+ }
148
+ input[type=range].slider.bbr-slider.is-circle::-moz-range-thumb {
149
+ border-radius: 50%;
150
+ }
151
+ input[type=range].slider.bbr-slider.is-circle::-ms-thumb {
152
+ border-radius: 50%;
153
+ }
154
+ input[type=range].slider.bbr-slider.is-small::-webkit-slider-runnable-track {
155
+ height: 0.375rem;
156
+ }
157
+ input[type=range].slider.bbr-slider.is-small::-moz-range-track {
158
+ height: 0.375rem;
159
+ }
160
+ input[type=range].slider.bbr-slider.is-small::-ms-track {
161
+ height: 0.375rem;
162
+ }
163
+ input[type=range].slider.bbr-slider.is-small::-webkit-slider-thumb {
164
+ height: 0.75rem;
165
+ width: 0.75rem;
166
+ margin-top: -0.1875rem;
167
+ }
168
+ input[type=range].slider.bbr-slider.is-small::-moz-range-thumb {
169
+ height: 0.75rem;
170
+ width: 0.75rem;
171
+ }
172
+ input[type=range].slider.bbr-slider.is-small::-ms-thumb {
173
+ height: 0.75rem;
174
+ width: 0.75rem;
175
+ margin-top: 0;
176
+ }
177
+ input[type=range].slider.bbr-slider.is-medium::-webkit-slider-runnable-track {
178
+ height: 0.625rem;
179
+ }
180
+ input[type=range].slider.bbr-slider.is-medium::-moz-range-track {
181
+ height: 0.625rem;
182
+ }
183
+ input[type=range].slider.bbr-slider.is-medium::-ms-track {
184
+ height: 0.625rem;
185
+ }
186
+ input[type=range].slider.bbr-slider.is-medium::-webkit-slider-thumb {
187
+ height: 1.25rem;
188
+ width: 1.25rem;
189
+ margin-top: -0.3125rem;
190
+ }
191
+ input[type=range].slider.bbr-slider.is-medium::-moz-range-thumb {
192
+ height: 1.25rem;
193
+ width: 1.25rem;
194
+ }
195
+ input[type=range].slider.bbr-slider.is-medium::-ms-thumb {
196
+ height: 1.25rem;
197
+ width: 1.25rem;
198
+ margin-top: 0;
199
+ }
200
+ input[type=range].slider.bbr-slider.is-large::-webkit-slider-runnable-track {
201
+ height: 0.75rem;
202
+ }
203
+ input[type=range].slider.bbr-slider.is-large::-moz-range-track {
204
+ height: 0.75rem;
205
+ }
206
+ input[type=range].slider.bbr-slider.is-large::-ms-track {
207
+ height: 0.75rem;
208
+ }
209
+ input[type=range].slider.bbr-slider.is-large::-webkit-slider-thumb {
210
+ height: 1.5rem;
211
+ width: 1.5rem;
212
+ margin-top: -0.375rem;
213
+ }
214
+ input[type=range].slider.bbr-slider.is-large::-moz-range-thumb {
215
+ height: 1.5rem;
216
+ width: 1.5rem;
217
+ }
218
+ input[type=range].slider.bbr-slider.is-large::-ms-thumb {
219
+ height: 1.5rem;
220
+ width: 1.5rem;
221
+ margin-top: 0;
222
+ }
223
+ input[type=range].slider.bbr-slider.is-white::-webkit-slider-runnable-track {
224
+ background: linear-gradient(to right, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
225
+ }
226
+ input[type=range].slider.bbr-slider.is-white::-moz-range-progress {
227
+ background: hsl(0, 0%, 100%);
228
+ }
229
+ input[type=range].slider.bbr-slider.is-white::-ms-fill-lower {
230
+ background: hsl(0, 0%, 100%);
231
+ }
232
+ input[type=range].slider.bbr-slider.is-white:focus::-webkit-slider-thumb {
233
+ border-color: hsl(0, 0%, 100%);
234
+ box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
235
+ }
236
+ input[type=range].slider.bbr-slider.is-white:focus::-moz-range-thumb {
237
+ border-color: hsl(0, 0%, 100%);
238
+ box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.25);
239
+ }
240
+ input[type=range].slider.bbr-slider.is-black::-webkit-slider-runnable-track {
241
+ background: linear-gradient(to right, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
242
+ }
243
+ input[type=range].slider.bbr-slider.is-black::-moz-range-progress {
244
+ background: hsl(0, 0%, 4%);
245
+ }
246
+ input[type=range].slider.bbr-slider.is-black::-ms-fill-lower {
247
+ background: hsl(0, 0%, 4%);
248
+ }
249
+ input[type=range].slider.bbr-slider.is-black:focus::-webkit-slider-thumb {
250
+ border-color: hsl(0, 0%, 4%);
251
+ box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
252
+ }
253
+ input[type=range].slider.bbr-slider.is-black:focus::-moz-range-thumb {
254
+ border-color: hsl(0, 0%, 4%);
255
+ box-shadow: 0 0 0 0.125em rgba(10.2, 10.2, 10.2, 0.25);
256
+ }
257
+ input[type=range].slider.bbr-slider.is-light::-webkit-slider-runnable-track {
258
+ background: linear-gradient(to right, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
259
+ }
260
+ input[type=range].slider.bbr-slider.is-light::-moz-range-progress {
261
+ background: hsl(0, 0%, 96%);
262
+ }
263
+ input[type=range].slider.bbr-slider.is-light::-ms-fill-lower {
264
+ background: hsl(0, 0%, 96%);
265
+ }
266
+ input[type=range].slider.bbr-slider.is-light:focus::-webkit-slider-thumb {
267
+ border-color: hsl(0, 0%, 96%);
268
+ box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
269
+ }
270
+ input[type=range].slider.bbr-slider.is-light:focus::-moz-range-thumb {
271
+ border-color: hsl(0, 0%, 96%);
272
+ box-shadow: 0 0 0 0.125em rgba(244.8, 244.8, 244.8, 0.25);
273
+ }
274
+ input[type=range].slider.bbr-slider.is-dark::-webkit-slider-runnable-track {
275
+ background: linear-gradient(to right, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
276
+ }
277
+ input[type=range].slider.bbr-slider.is-dark::-moz-range-progress {
278
+ background: hsl(0, 0%, 21%);
279
+ }
280
+ input[type=range].slider.bbr-slider.is-dark::-ms-fill-lower {
281
+ background: hsl(0, 0%, 21%);
282
+ }
283
+ input[type=range].slider.bbr-slider.is-dark:focus::-webkit-slider-thumb {
284
+ border-color: hsl(0, 0%, 21%);
285
+ box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
286
+ }
287
+ input[type=range].slider.bbr-slider.is-dark:focus::-moz-range-thumb {
288
+ border-color: hsl(0, 0%, 21%);
289
+ box-shadow: 0 0 0 0.125em rgba(53.55, 53.55, 53.55, 0.25);
290
+ }
291
+ input[type=range].slider.bbr-slider.is-primary::-webkit-slider-runnable-track {
292
+ background: linear-gradient(to right, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
293
+ }
294
+ input[type=range].slider.bbr-slider.is-primary::-moz-range-progress {
295
+ background: hsl(171, 100%, 41%);
296
+ }
297
+ input[type=range].slider.bbr-slider.is-primary::-ms-fill-lower {
298
+ background: hsl(171, 100%, 41%);
299
+ }
300
+ input[type=range].slider.bbr-slider.is-primary:focus::-webkit-slider-thumb {
301
+ border-color: hsl(171, 100%, 41%);
302
+ box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
303
+ }
304
+ input[type=range].slider.bbr-slider.is-primary:focus::-moz-range-thumb {
305
+ border-color: hsl(171, 100%, 41%);
306
+ box-shadow: 0 0 0 0.125em rgba(0, 209.1, 177.735, 0.25);
307
+ }
308
+ input[type=range].slider.bbr-slider.is-link::-webkit-slider-runnable-track {
309
+ background: linear-gradient(to right, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
310
+ }
311
+ input[type=range].slider.bbr-slider.is-link::-moz-range-progress {
312
+ background: hsl(229, 53%, 53%);
313
+ }
314
+ input[type=range].slider.bbr-slider.is-link::-ms-fill-lower {
315
+ background: hsl(229, 53%, 53%);
316
+ }
317
+ input[type=range].slider.bbr-slider.is-link:focus::-webkit-slider-thumb {
318
+ border-color: hsl(229, 53%, 53%);
319
+ box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
320
+ }
321
+ input[type=range].slider.bbr-slider.is-link:focus::-moz-range-thumb {
322
+ border-color: hsl(229, 53%, 53%);
323
+ box-shadow: 0 0 0 0.125em rgba(71.6295, 94.92035, 198.6705, 0.25);
324
+ }
325
+ input[type=range].slider.bbr-slider.is-info::-webkit-slider-runnable-track {
326
+ background: linear-gradient(to right, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
327
+ }
328
+ input[type=range].slider.bbr-slider.is-info::-moz-range-progress {
329
+ background: hsl(207, 61%, 53%);
330
+ }
331
+ input[type=range].slider.bbr-slider.is-info::-ms-fill-lower {
332
+ background: hsl(207, 61%, 53%);
333
+ }
334
+ input[type=range].slider.bbr-slider.is-info:focus::-webkit-slider-thumb {
335
+ border-color: hsl(207, 61%, 53%);
336
+ box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
337
+ }
338
+ input[type=range].slider.bbr-slider.is-info:focus::-moz-range-thumb {
339
+ border-color: hsl(207, 61%, 53%);
340
+ box-shadow: 0 0 0 0.125em rgba(62.0415, 142.46085, 208.2585, 0.25);
341
+ }
342
+ input[type=range].slider.bbr-slider.is-success::-webkit-slider-runnable-track {
343
+ background: linear-gradient(to right, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
344
+ }
345
+ input[type=range].slider.bbr-slider.is-success::-moz-range-progress {
346
+ background: hsl(153, 53%, 53%);
347
+ }
348
+ input[type=range].slider.bbr-slider.is-success::-ms-fill-lower {
349
+ background: hsl(153, 53%, 53%);
350
+ }
351
+ input[type=range].slider.bbr-slider.is-success:focus::-webkit-slider-thumb {
352
+ border-color: hsl(153, 53%, 53%);
353
+ box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
354
+ }
355
+ input[type=range].slider.bbr-slider.is-success:focus::-moz-range-thumb {
356
+ border-color: hsl(153, 53%, 53%);
357
+ box-shadow: 0 0 0 0.125em rgba(71.6295, 198.6705, 141.50205, 0.25);
358
+ }
359
+ input[type=range].slider.bbr-slider.is-warning::-webkit-slider-runnable-track {
360
+ background: linear-gradient(to right, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
361
+ }
362
+ input[type=range].slider.bbr-slider.is-warning::-moz-range-progress {
363
+ background: hsl(44, 100%, 77%);
364
+ }
365
+ input[type=range].slider.bbr-slider.is-warning::-ms-fill-lower {
366
+ background: hsl(44, 100%, 77%);
367
+ }
368
+ input[type=range].slider.bbr-slider.is-warning:focus::-webkit-slider-thumb {
369
+ border-color: hsl(44, 100%, 77%);
370
+ box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
371
+ }
372
+ input[type=range].slider.bbr-slider.is-warning:focus::-moz-range-thumb {
373
+ border-color: hsl(44, 100%, 77%);
374
+ box-shadow: 0 0 0 0.125em rgba(255, 223.72, 137.7, 0.25);
375
+ }
376
+ input[type=range].slider.bbr-slider.is-danger::-webkit-slider-runnable-track {
377
+ background: linear-gradient(to right, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
378
+ }
379
+ input[type=range].slider.bbr-slider.is-danger::-moz-range-progress {
380
+ background: hsl(348, 86%, 61%);
381
+ }
382
+ input[type=range].slider.bbr-slider.is-danger::-ms-fill-lower {
383
+ background: hsl(348, 86%, 61%);
384
+ }
385
+ input[type=range].slider.bbr-slider.is-danger:focus::-webkit-slider-thumb {
386
+ border-color: hsl(348, 86%, 61%);
387
+ box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
388
+ }
389
+ input[type=range].slider.bbr-slider.is-danger:focus::-moz-range-thumb {
390
+ border-color: hsl(348, 86%, 61%);
391
+ box-shadow: 0 0 0 0.125em rgba(241.077, 70.023, 104.2338, 0.25);
392
+ }
393
+ input[type=range].slider.bbr-slider.is-vertical {
394
+ writing-mode: vertical-lr;
395
+ direction: rtl;
396
+ width: 0.5rem;
397
+ height: 100%;
398
+ min-height: 100px;
399
+ }
400
+ input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-runnable-track {
401
+ width: 0.5rem;
402
+ height: 100%;
403
+ background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
404
+ }
405
+ input[type=range].slider.bbr-slider.is-vertical::-webkit-slider-thumb {
406
+ margin-top: 0;
407
+ margin-left: -0.25rem;
408
+ }
409
+ input[type=range].slider.bbr-slider.is-vertical.is-white::-webkit-slider-runnable-track {
410
+ background: linear-gradient(to top, hsl(0, 0%, 100%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
411
+ }
412
+ input[type=range].slider.bbr-slider.is-vertical.is-black::-webkit-slider-runnable-track {
413
+ background: linear-gradient(to top, hsl(0, 0%, 4%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
414
+ }
415
+ input[type=range].slider.bbr-slider.is-vertical.is-light::-webkit-slider-runnable-track {
416
+ background: linear-gradient(to top, hsl(0, 0%, 96%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
417
+ }
418
+ input[type=range].slider.bbr-slider.is-vertical.is-dark::-webkit-slider-runnable-track {
419
+ background: linear-gradient(to top, hsl(0, 0%, 21%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
420
+ }
421
+ input[type=range].slider.bbr-slider.is-vertical.is-primary::-webkit-slider-runnable-track {
422
+ background: linear-gradient(to top, hsl(171, 100%, 41%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
423
+ }
424
+ input[type=range].slider.bbr-slider.is-vertical.is-link::-webkit-slider-runnable-track {
425
+ background: linear-gradient(to top, hsl(229, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
426
+ }
427
+ input[type=range].slider.bbr-slider.is-vertical.is-info::-webkit-slider-runnable-track {
428
+ background: linear-gradient(to top, hsl(207, 61%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
429
+ }
430
+ input[type=range].slider.bbr-slider.is-vertical.is-success::-webkit-slider-runnable-track {
431
+ background: linear-gradient(to top, hsl(153, 53%, 53%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
432
+ }
433
+ input[type=range].slider.bbr-slider.is-vertical.is-warning::-webkit-slider-runnable-track {
434
+ background: linear-gradient(to top, hsl(44, 100%, 77%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
435
+ }
436
+ input[type=range].slider.bbr-slider.is-vertical.is-danger::-webkit-slider-runnable-track {
437
+ background: linear-gradient(to top, hsl(348, 86%, 61%) var(--progress-percent), hsl(0, 0%, 86%) var(--progress-percent));
438
+ }
@@ -1,3 +1,5 @@
1
+ @import "bulma/sass/utilities/derived-variables";
2
+
1
3
  $slider-radius: $radius !default;
2
4
  $slider-track-background: $grey-lighter !default;
3
5
  $slider-track-radius: $radius !default;