armtek-uikit-react 1.0.245 → 1.0.251

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 (60) hide show
  1. package/assets/Accordion.scss +123 -113
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +111 -105
  5. package/assets/AvatarGroup.scss +47 -47
  6. package/assets/BackDrop.scss +27 -27
  7. package/assets/Badge.scss +96 -96
  8. package/assets/Button.scss +750 -750
  9. package/assets/ButtonGroup.scss +37 -37
  10. package/assets/ButtonIcon.scss +32 -32
  11. package/assets/Card.scss +13 -13
  12. package/assets/Checkbox.scss +313 -313
  13. package/assets/Chip.scss +313 -280
  14. package/assets/DateField.scss +2 -2
  15. package/assets/DatePicker.scss +72 -72
  16. package/assets/Dropdown.scss +42 -42
  17. package/assets/FormControls.scss +14 -14
  18. package/assets/HelperText.scss +11 -11
  19. package/assets/Icon.scss +30 -30
  20. package/assets/Interval.scss +34 -34
  21. package/assets/Link.scss +96 -96
  22. package/assets/ListItem.scss +73 -73
  23. package/assets/Loader.scss +56 -56
  24. package/assets/Logo.scss +28 -28
  25. package/assets/Modal.scss +97 -97
  26. package/assets/Pagination.scss +3 -3
  27. package/assets/Paper.scss +22 -22
  28. package/assets/Period.scss +8 -8
  29. package/assets/Popper.scss +2 -2
  30. package/assets/Rating.scss +26 -26
  31. package/assets/Select.scss +85 -85
  32. package/assets/Skeleton.scss +25 -25
  33. package/assets/Slider.scss +5 -5
  34. package/assets/Stack.scss +27 -27
  35. package/assets/Status.scss +69 -51
  36. package/assets/StepItem.scss +89 -89
  37. package/assets/StepItemIcon.scss +47 -47
  38. package/assets/Stepper.scss +30 -30
  39. package/assets/Switch.scss +67 -67
  40. package/assets/Table.scss +52 -52
  41. package/assets/TextArea.scss +17 -17
  42. package/assets/TextField.scss +197 -197
  43. package/assets/Tooltip.scss +17 -17
  44. package/assets/classes.scss +422 -422
  45. package/assets/fonts.scss +24 -24
  46. package/assets/global.scss +222 -221
  47. package/assets/styles.min.css +1 -1
  48. package/assets/styles.min.css.map +1 -1
  49. package/assets/styles.scss +46 -46
  50. package/assets/variables.scss +13 -13
  51. package/lib/hooks/useEnhancedEffect.js +6 -6
  52. package/lib/hooks/useTimeout.js +2 -2
  53. package/package.json +1 -1
  54. package/ui/Avatar/Avatar.d.ts +1 -0
  55. package/ui/Avatar/Avatar.js +2 -1
  56. package/ui/Form/DateField/DateField.js +2 -2
  57. package/ui/Form/DatePicker/styles.css +802 -802
  58. package/ui/Form/Period/Period.d.ts +11 -0
  59. package/ui/Form/Period/Period.js +16 -4
  60. package/ui/Slider/style.scss +346 -346
@@ -1,347 +1,347 @@
1
-
2
- .rc-slider {
3
- position: relative;
4
- width: 100%;
5
- height: 14px;
6
- padding: 5px 0;
7
- border-radius: 6px;
8
- touch-action: none;
9
- box-sizing: border-box;
10
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
11
- }
12
- .rc-slider * {
13
- box-sizing: border-box;
14
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
15
- }
16
- .rc-slider-rail {
17
- position: absolute;
18
- width: 100%;
19
- height: 4px;
20
- background-color: #FFD3A6;
21
- border-radius: 6px;
22
- }
23
- .rc-slider._small .rc-slider-rail{
24
- height: 2px;
25
- }
26
- .rc-slider-track {
27
- position: absolute;
28
- height: 4px;
29
- background-color: #FF7F00;
30
- border-radius: 6px;
31
- }
32
- .rc-slider._small .rc-slider-track{
33
- height: 2px;
34
- }
35
- .rc-slider-track-draggable {
36
- z-index: 1;
37
- box-sizing: content-box;
38
- background-clip: content-box;
39
- border-top: 5px solid rgba(0, 0, 0, 0);
40
- border-bottom: 5px solid rgba(0, 0, 0, 0);
41
- transform: translateY(-5px);
42
- }
43
- .rc-slider-handle {
44
- position: absolute;
45
- z-index: 1;
46
- width: 28px;
47
- height: 28px;
48
- margin-top: -12px;
49
- background-color: #fff;
50
- border: solid 2px #FF7F00;
51
- border-radius: 50%;
52
- cursor: pointer;
53
- cursor: -webkit-grab;
54
- cursor: grab;
55
- touch-action: pan-x;
56
- }
57
- .rc-slider._small .rc-slider-handle{
58
- width: 20px;
59
- height: 20px;
60
- margin-top: -8px;
61
- }
62
-
63
- .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
64
- border-color: #FF7F00;
65
- box-shadow: 0 0 0 5px #FFD3A6;
66
- }
67
- .rc-slider-handle:focus {
68
- outline: none;
69
- box-shadow: none;
70
- }
71
- .rc-slider-handle:focus-visible {
72
- border-color: #2db7f5;
73
- box-shadow: 0 0 0 3px #96dbfa;
74
- }
75
- .rc-slider-handle-click-focused:focus {
76
- border-color: #96dbfa;
77
- box-shadow: unset;
78
- }
79
- .rc-slider-handle:hover {
80
- border-color: #FF7F00;
81
- }
82
- .rc-slider-handle:active {
83
- border-color: #57c5f7;
84
- box-shadow: 0 0 5px #57c5f7;
85
- cursor: -webkit-grabbing;
86
- cursor: grabbing;
87
- }
88
- .rc-slider-mark {
89
- position: absolute;
90
- top: 18px;
91
- left: 0;
92
- width: 100%;
93
- font-size: 12px;
94
- }
95
- .rc-slider-mark-text {
96
- position: absolute;
97
- display: inline-block;
98
- color: #999;
99
- text-align: center;
100
- vertical-align: middle;
101
- cursor: pointer;
102
- }
103
- .rc-slider-mark-text-active {
104
- color: #666;
105
- }
106
- .rc-slider-step {
107
- position: absolute;
108
- width: 100%;
109
- height: 4px;
110
- background: transparent;
111
- }
112
- .rc-slider-dot {
113
- position: absolute;
114
- bottom: -2px;
115
- width: 8px;
116
- height: 8px;
117
- vertical-align: middle;
118
- background-color: #fff;
119
- border: 2px solid #e9e9e9;
120
- border-radius: 50%;
121
- cursor: pointer;
122
- }
123
- .rc-slider-dot-active {
124
- border-color: #96dbfa;
125
- }
126
- .rc-slider-dot-reverse {
127
- margin-right: -4px;
128
- }
129
- .rc-slider-disabled {
130
- /*background-color: #e9e9e9;*/
131
- }
132
- .rc-slider-disabled .rc-slider-track {
133
- background-color: #ccc !important;
134
- }
135
- .rc-slider-disabled .rc-slider-handle,
136
- .rc-slider-disabled .rc-slider-dot {
137
- background-color: #D3DAE1!important;;
138
- border-color: #D3DAE1!important;;
139
- box-shadow: none!important;;
140
- cursor: not-allowed;
141
- }
142
- .rc-slider-disabled .rc-slider-mark-text,
143
- .rc-slider-disabled .rc-slider-dot {
144
- cursor: not-allowed !important;
145
- }
146
- .rc-slider-vertical {
147
- width: 14px;
148
- height: 100%;
149
- padding: 0 5px;
150
- }
151
- .rc-slider-vertical .rc-slider-rail {
152
- width: 4px;
153
- height: 100%;
154
- }
155
- .rc-slider-vertical .rc-slider-track {
156
- bottom: 0;
157
- left: 5px;
158
- width: 4px;
159
- }
160
- .rc-slider-vertical .rc-slider-track-draggable {
161
- border-top: 0;
162
- border-bottom: 0;
163
- border-right: 5px solid rgba(0, 0, 0, 0);
164
- border-left: 5px solid rgba(0, 0, 0, 0);
165
- transform: translateX(-5px);
166
- }
167
- .rc-slider-vertical .rc-slider-handle {
168
- position: absolute;
169
- z-index: 1;
170
- margin-top: 0;
171
- margin-left: -5px;
172
- touch-action: pan-y;
173
- }
174
- .rc-slider-vertical .rc-slider-mark {
175
- top: 0;
176
- left: 18px;
177
- height: 100%;
178
- }
179
- .rc-slider-vertical .rc-slider-step {
180
- width: 4px;
181
- height: 100%;
182
- }
183
- .rc-slider-vertical .rc-slider-dot {
184
- margin-left: -2px;
185
- }
186
- .rc-slider-tooltip-zoom-down-enter,
187
- .rc-slider-tooltip-zoom-down-appear {
188
- display: block !important;
189
- animation-duration: 0.3s;
190
- animation-fill-mode: both;
191
- animation-play-state: paused;
192
- }
193
- .rc-slider-tooltip-zoom-down-leave {
194
- display: block !important;
195
- animation-duration: 0.3s;
196
- animation-fill-mode: both;
197
- animation-play-state: paused;
198
- }
199
- .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
200
- .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
201
- animation-name: rcSliderTooltipZoomDownIn;
202
- animation-play-state: running;
203
- }
204
- .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
205
- animation-name: rcSliderTooltipZoomDownOut;
206
- animation-play-state: running;
207
- }
208
- .rc-slider-tooltip-zoom-down-enter,
209
- .rc-slider-tooltip-zoom-down-appear {
210
- transform: scale(0, 0);
211
- animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
212
- }
213
- .rc-slider-tooltip-zoom-down-leave {
214
- animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
215
- }
216
- @keyframes rcSliderTooltipZoomDownIn {
217
- 0% {
218
- transform: scale(0, 0);
219
- transform-origin: 50% 100%;
220
- opacity: 0;
221
- }
222
- 100% {
223
- transform: scale(1, 1);
224
- transform-origin: 50% 100%;
225
- }
226
- }
227
- @keyframes rcSliderTooltipZoomDownOut {
228
- 0% {
229
- transform: scale(1, 1);
230
- transform-origin: 50% 100%;
231
- }
232
- 100% {
233
- transform: scale(0, 0);
234
- transform-origin: 50% 100%;
235
- opacity: 0;
236
- }
237
- }
238
- .rc-slider-tooltip {
239
- position: absolute;
240
- top: -9999px;
241
- left: -9999px;
242
- visibility: visible;
243
- box-sizing: border-box;
244
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
245
- }
246
- .rc-slider-tooltip * {
247
- box-sizing: border-box;
248
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
249
- }
250
- .rc-slider-tooltip-hidden {
251
- display: none;
252
- }
253
- .rc-slider-tooltip-placement-top {
254
- padding: 4px 0 8px 0;
255
- }
256
- .rc-slider-tooltip-inner {
257
- min-width: 24px;
258
- height: 24px;
259
- padding: 6px 2px;
260
- color: #fff;
261
- font-size: 12px;
262
- line-height: 1;
263
- text-align: center;
264
- text-decoration: none;
265
- background-color: #6c6c6c;
266
- border-radius: 6px;
267
- box-shadow: 0 0 4px #d9d9d9;
268
- }
269
- .rc-slider-tooltip-arrow {
270
- position: absolute;
271
- width: 0;
272
- height: 0;
273
- border-color: transparent;
274
- border-style: solid;
275
- }
276
- .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
277
- bottom: 4px;
278
- left: 50%;
279
- margin-left: -4px;
280
- border-width: 4px 4px 0;
281
- border-top-color: #6c6c6c;
282
- }
283
-
284
- .arm-slider__primary {
285
- .rc-slider-handle {
286
- border-color: var(--color-primary);
287
- box-shadow: none;
288
- }
289
- .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
290
- border-color: var(--color-primary);
291
- box-shadow: 0 0 0 5px var(--color-primary-opacity);
292
- }
293
- .rc-slider-rail{
294
- background-color: var(--color-blue-500);
295
- }
296
- .rc-slider-track{
297
- background-color: var(--color-primary-dark);
298
- }
299
- }
300
- .arm-slider__error {
301
- .rc-slider-handle {
302
- border-color: var(--color-error);
303
- box-shadow: none;
304
- }
305
- .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
306
- border-color: var(--color-error);
307
- box-shadow: 0 0 0 5px var(--color-error-opacity);
308
- }
309
- .rc-slider-rail{
310
- background-color: var(--color-red-300);
311
- }
312
- .rc-slider-track{
313
- background-color: var(--color-error);
314
- }
315
- }
316
- .arm-slider__success {
317
- .rc-slider-handle {
318
- border-color: var(--color-success);
319
- box-shadow: none;
320
- }
321
- .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
322
- border-color: var(--color-success);
323
- box-shadow: 0 0 0 5px var(--color-success-opacity);
324
- }
325
- .rc-slider-rail{
326
- background-color: var(--color-green-300);
327
- }
328
- .rc-slider-track{
329
- background-color: var(--color-success);
330
- }
331
- }
332
- .arm-slider__warning {
333
- .rc-slider-handle {
334
- border-color: var(--color-warning);
335
- box-shadow: none;
336
- }
337
- .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
338
- border-color: var(--color-warning);
339
- box-shadow: 0 0 0 5px var(--color-warning-opacity);
340
- }
341
- .rc-slider-rail{
342
- background-color: var(--color-yellow-300);
343
- }
344
- .rc-slider-track{
345
- background-color: var(--color-warning);
346
- }
1
+
2
+ .rc-slider {
3
+ position: relative;
4
+ width: 100%;
5
+ height: 14px;
6
+ padding: 5px 0;
7
+ border-radius: 6px;
8
+ touch-action: none;
9
+ box-sizing: border-box;
10
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
11
+ }
12
+ .rc-slider * {
13
+ box-sizing: border-box;
14
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
15
+ }
16
+ .rc-slider-rail {
17
+ position: absolute;
18
+ width: 100%;
19
+ height: 4px;
20
+ background-color: #FFD3A6;
21
+ border-radius: 6px;
22
+ }
23
+ .rc-slider._small .rc-slider-rail{
24
+ height: 2px;
25
+ }
26
+ .rc-slider-track {
27
+ position: absolute;
28
+ height: 4px;
29
+ background-color: #FF7F00;
30
+ border-radius: 6px;
31
+ }
32
+ .rc-slider._small .rc-slider-track{
33
+ height: 2px;
34
+ }
35
+ .rc-slider-track-draggable {
36
+ z-index: 1;
37
+ box-sizing: content-box;
38
+ background-clip: content-box;
39
+ border-top: 5px solid rgba(0, 0, 0, 0);
40
+ border-bottom: 5px solid rgba(0, 0, 0, 0);
41
+ transform: translateY(-5px);
42
+ }
43
+ .rc-slider-handle {
44
+ position: absolute;
45
+ z-index: 1;
46
+ width: 28px;
47
+ height: 28px;
48
+ margin-top: -12px;
49
+ background-color: #fff;
50
+ border: solid 2px #FF7F00;
51
+ border-radius: 50%;
52
+ cursor: pointer;
53
+ cursor: -webkit-grab;
54
+ cursor: grab;
55
+ touch-action: pan-x;
56
+ }
57
+ .rc-slider._small .rc-slider-handle{
58
+ width: 20px;
59
+ height: 20px;
60
+ margin-top: -8px;
61
+ }
62
+
63
+ .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
64
+ border-color: #FF7F00;
65
+ box-shadow: 0 0 0 5px #FFD3A6;
66
+ }
67
+ .rc-slider-handle:focus {
68
+ outline: none;
69
+ box-shadow: none;
70
+ }
71
+ .rc-slider-handle:focus-visible {
72
+ border-color: #2db7f5;
73
+ box-shadow: 0 0 0 3px #96dbfa;
74
+ }
75
+ .rc-slider-handle-click-focused:focus {
76
+ border-color: #96dbfa;
77
+ box-shadow: unset;
78
+ }
79
+ .rc-slider-handle:hover {
80
+ border-color: #FF7F00;
81
+ }
82
+ .rc-slider-handle:active {
83
+ border-color: #57c5f7;
84
+ box-shadow: 0 0 5px #57c5f7;
85
+ cursor: -webkit-grabbing;
86
+ cursor: grabbing;
87
+ }
88
+ .rc-slider-mark {
89
+ position: absolute;
90
+ top: 18px;
91
+ left: 0;
92
+ width: 100%;
93
+ font-size: 12px;
94
+ }
95
+ .rc-slider-mark-text {
96
+ position: absolute;
97
+ display: inline-block;
98
+ color: #999;
99
+ text-align: center;
100
+ vertical-align: middle;
101
+ cursor: pointer;
102
+ }
103
+ .rc-slider-mark-text-active {
104
+ color: #666;
105
+ }
106
+ .rc-slider-step {
107
+ position: absolute;
108
+ width: 100%;
109
+ height: 4px;
110
+ background: transparent;
111
+ }
112
+ .rc-slider-dot {
113
+ position: absolute;
114
+ bottom: -2px;
115
+ width: 8px;
116
+ height: 8px;
117
+ vertical-align: middle;
118
+ background-color: #fff;
119
+ border: 2px solid #e9e9e9;
120
+ border-radius: 50%;
121
+ cursor: pointer;
122
+ }
123
+ .rc-slider-dot-active {
124
+ border-color: #96dbfa;
125
+ }
126
+ .rc-slider-dot-reverse {
127
+ margin-right: -4px;
128
+ }
129
+ .rc-slider-disabled {
130
+ /*background-color: #e9e9e9;*/
131
+ }
132
+ .rc-slider-disabled .rc-slider-track {
133
+ background-color: #ccc !important;
134
+ }
135
+ .rc-slider-disabled .rc-slider-handle,
136
+ .rc-slider-disabled .rc-slider-dot {
137
+ background-color: #D3DAE1!important;;
138
+ border-color: #D3DAE1!important;;
139
+ box-shadow: none!important;;
140
+ cursor: not-allowed;
141
+ }
142
+ .rc-slider-disabled .rc-slider-mark-text,
143
+ .rc-slider-disabled .rc-slider-dot {
144
+ cursor: not-allowed !important;
145
+ }
146
+ .rc-slider-vertical {
147
+ width: 14px;
148
+ height: 100%;
149
+ padding: 0 5px;
150
+ }
151
+ .rc-slider-vertical .rc-slider-rail {
152
+ width: 4px;
153
+ height: 100%;
154
+ }
155
+ .rc-slider-vertical .rc-slider-track {
156
+ bottom: 0;
157
+ left: 5px;
158
+ width: 4px;
159
+ }
160
+ .rc-slider-vertical .rc-slider-track-draggable {
161
+ border-top: 0;
162
+ border-bottom: 0;
163
+ border-right: 5px solid rgba(0, 0, 0, 0);
164
+ border-left: 5px solid rgba(0, 0, 0, 0);
165
+ transform: translateX(-5px);
166
+ }
167
+ .rc-slider-vertical .rc-slider-handle {
168
+ position: absolute;
169
+ z-index: 1;
170
+ margin-top: 0;
171
+ margin-left: -5px;
172
+ touch-action: pan-y;
173
+ }
174
+ .rc-slider-vertical .rc-slider-mark {
175
+ top: 0;
176
+ left: 18px;
177
+ height: 100%;
178
+ }
179
+ .rc-slider-vertical .rc-slider-step {
180
+ width: 4px;
181
+ height: 100%;
182
+ }
183
+ .rc-slider-vertical .rc-slider-dot {
184
+ margin-left: -2px;
185
+ }
186
+ .rc-slider-tooltip-zoom-down-enter,
187
+ .rc-slider-tooltip-zoom-down-appear {
188
+ display: block !important;
189
+ animation-duration: 0.3s;
190
+ animation-fill-mode: both;
191
+ animation-play-state: paused;
192
+ }
193
+ .rc-slider-tooltip-zoom-down-leave {
194
+ display: block !important;
195
+ animation-duration: 0.3s;
196
+ animation-fill-mode: both;
197
+ animation-play-state: paused;
198
+ }
199
+ .rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
200
+ .rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
201
+ animation-name: rcSliderTooltipZoomDownIn;
202
+ animation-play-state: running;
203
+ }
204
+ .rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
205
+ animation-name: rcSliderTooltipZoomDownOut;
206
+ animation-play-state: running;
207
+ }
208
+ .rc-slider-tooltip-zoom-down-enter,
209
+ .rc-slider-tooltip-zoom-down-appear {
210
+ transform: scale(0, 0);
211
+ animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
212
+ }
213
+ .rc-slider-tooltip-zoom-down-leave {
214
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
215
+ }
216
+ @keyframes rcSliderTooltipZoomDownIn {
217
+ 0% {
218
+ transform: scale(0, 0);
219
+ transform-origin: 50% 100%;
220
+ opacity: 0;
221
+ }
222
+ 100% {
223
+ transform: scale(1, 1);
224
+ transform-origin: 50% 100%;
225
+ }
226
+ }
227
+ @keyframes rcSliderTooltipZoomDownOut {
228
+ 0% {
229
+ transform: scale(1, 1);
230
+ transform-origin: 50% 100%;
231
+ }
232
+ 100% {
233
+ transform: scale(0, 0);
234
+ transform-origin: 50% 100%;
235
+ opacity: 0;
236
+ }
237
+ }
238
+ .rc-slider-tooltip {
239
+ position: absolute;
240
+ top: -9999px;
241
+ left: -9999px;
242
+ visibility: visible;
243
+ box-sizing: border-box;
244
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
245
+ }
246
+ .rc-slider-tooltip * {
247
+ box-sizing: border-box;
248
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
249
+ }
250
+ .rc-slider-tooltip-hidden {
251
+ display: none;
252
+ }
253
+ .rc-slider-tooltip-placement-top {
254
+ padding: 4px 0 8px 0;
255
+ }
256
+ .rc-slider-tooltip-inner {
257
+ min-width: 24px;
258
+ height: 24px;
259
+ padding: 6px 2px;
260
+ color: #fff;
261
+ font-size: 12px;
262
+ line-height: 1;
263
+ text-align: center;
264
+ text-decoration: none;
265
+ background-color: #6c6c6c;
266
+ border-radius: 6px;
267
+ box-shadow: 0 0 4px #d9d9d9;
268
+ }
269
+ .rc-slider-tooltip-arrow {
270
+ position: absolute;
271
+ width: 0;
272
+ height: 0;
273
+ border-color: transparent;
274
+ border-style: solid;
275
+ }
276
+ .rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
277
+ bottom: 4px;
278
+ left: 50%;
279
+ margin-left: -4px;
280
+ border-width: 4px 4px 0;
281
+ border-top-color: #6c6c6c;
282
+ }
283
+
284
+ .arm-slider__primary {
285
+ .rc-slider-handle {
286
+ border-color: var(--color-primary);
287
+ box-shadow: none;
288
+ }
289
+ .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
290
+ border-color: var(--color-primary);
291
+ box-shadow: 0 0 0 5px var(--color-primary-opacity);
292
+ }
293
+ .rc-slider-rail{
294
+ background-color: var(--color-blue-500);
295
+ }
296
+ .rc-slider-track{
297
+ background-color: var(--color-primary-dark);
298
+ }
299
+ }
300
+ .arm-slider__error {
301
+ .rc-slider-handle {
302
+ border-color: var(--color-error);
303
+ box-shadow: none;
304
+ }
305
+ .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
306
+ border-color: var(--color-error);
307
+ box-shadow: 0 0 0 5px var(--color-error-opacity);
308
+ }
309
+ .rc-slider-rail{
310
+ background-color: var(--color-red-300);
311
+ }
312
+ .rc-slider-track{
313
+ background-color: var(--color-error);
314
+ }
315
+ }
316
+ .arm-slider__success {
317
+ .rc-slider-handle {
318
+ border-color: var(--color-success);
319
+ box-shadow: none;
320
+ }
321
+ .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
322
+ border-color: var(--color-success);
323
+ box-shadow: 0 0 0 5px var(--color-success-opacity);
324
+ }
325
+ .rc-slider-rail{
326
+ background-color: var(--color-green-300);
327
+ }
328
+ .rc-slider-track{
329
+ background-color: var(--color-success);
330
+ }
331
+ }
332
+ .arm-slider__warning {
333
+ .rc-slider-handle {
334
+ border-color: var(--color-warning);
335
+ box-shadow: none;
336
+ }
337
+ .rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
338
+ border-color: var(--color-warning);
339
+ box-shadow: 0 0 0 5px var(--color-warning-opacity);
340
+ }
341
+ .rc-slider-rail{
342
+ background-color: var(--color-yellow-300);
343
+ }
344
+ .rc-slider-track{
345
+ background-color: var(--color-warning);
346
+ }
347
347
  }