armtek-uikit-react 1.0.245 → 1.0.250

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 +113 -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 +279 -279
  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 +50 -50
  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 +221 -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
package/assets/Checkbox.scss CHANGED
@@ -1,313 +1,313 @@
1
-
2
- .arm-checkbox{
3
- position: relative;
4
- display: flex;
5
- }
6
- .arm-checkbox_text{
7
- align-items: center;
8
- }
9
- .arm-checkbox__input{
10
- display: none;
11
- }
12
- .arm-checkbox__text{
13
- padding-left: calc(var(--size-step));
14
- font-size: 16px;
15
- display: block;
16
- cursor: pointer;
17
- }
18
- .arm-checkbox__text_error{
19
- color: var(--color-error);
20
- }
21
- .arm-checkbox__text_size_small{
22
- font-size: 14px;
23
- }
24
- .arm-checkbox__label{
25
- cursor: pointer;
26
- text-align: left;
27
- position: relative;
28
- display: block;
29
- line-height: 1.2;
30
- min-width:22px;
31
- width:22px;
32
- height: 22px;
33
- &:before{
34
- width: 100%;
35
- height: 100%;
36
- border-radius: var(--border-radius);
37
- border: 1px solid var(--color-gray-700);
38
- background: #fff;
39
- position: absolute;
40
- content: '';
41
- left: 0;
42
- top: 0;
43
- box-sizing: border-box;
44
- }
45
- &:after{
46
- content: '';
47
- position: absolute;
48
- transform: rotate(45deg);
49
- left: 8px;
50
- top: 4px;
51
- width: 7px;
52
- height: 11px;
53
- border-bottom: 2px solid;
54
- border-right: 2px solid;
55
- display: none;
56
- box-sizing: border-box;
57
- }
58
- &.arm-checkbox_error:before{
59
- border-color: var(--color-error);
60
- }
61
- }
62
-
63
-
64
- .arm-checkbox_medium{
65
- min-width:18px;
66
- width:18px;
67
- height: 18px;
68
- &:after{
69
- left: 6px;
70
- top: 2px;
71
- width: 6px;
72
- height: 10px;
73
- }
74
- }
75
-
76
- .arm-checkbox_small{
77
- font-size: 14px;
78
- min-width:16px;
79
- width:16px;
80
- height: 16px;
81
- &:after{
82
- left: 5px;
83
- top: 3px;
84
- height: 8px;
85
- width: 6px;
86
- }
87
- }
88
-
89
- .arm-checkbox__label_intermediate{
90
- &:after{
91
- border-left: none;
92
- width: 14px;
93
- transform: none;
94
- top: 10px;
95
- height: 0;
96
- left: 4px;
97
- border-right: none;
98
- }
99
- &.arm-checkbox_medium:after{
100
- width: 11px;
101
- top: 8px;
102
- }
103
- &.arm-checkbox_small:after{
104
- width: 9px;
105
- top: 7px;
106
- }
107
- }
108
-
109
- .arm-checkbox__label_intermediate,
110
- .arm-checkbox__label_checked{
111
- &:before{
112
- border-color: transparent;
113
- background: var(--color-primary);
114
- }
115
- &:after{
116
- border-color: #fff;
117
- display: block;
118
- }
119
- &.arm-checkbox_secondary{
120
- &:before{
121
- background: var(--color-secondary);
122
- }
123
- }
124
-
125
- &.arm-checkbox_contained{
126
- &.arm-checkbox_secondary{
127
- &:before{
128
- background: var(--color-secondary);
129
- }
130
- }
131
- &.arm-checkbox_neutral{
132
- &:before{
133
- background: var(--color-neutral);
134
- }
135
- }
136
- &.arm-checkbox_success{
137
- &:before{
138
- background: var(--color-success);
139
- }
140
- }
141
- &.arm-checkbox_warning{
142
- &:before{
143
- background: var(--color-warning);
144
- }
145
- }
146
- &.arm-checkbox_error{
147
- color: var(--color-error-dark);
148
- &:before{
149
- background: var(--color-error-dark);
150
- }
151
- }
152
- }
153
- }
154
- .arm-checkbox_outlined{
155
- &:before{
156
- background: transparent;
157
- border-color: var(--color-primary);
158
- }
159
- &:after{
160
- border-color: var(--color-primary);
161
- }
162
- &.arm-checkbox_secondary{
163
- &:before{
164
- background: transparent;
165
- border-color: var(--color-secondary);
166
- }
167
- &:after{
168
- border-color: var(--color-secondary);
169
- }
170
- }
171
- &.arm-checkbox_neutral{
172
- &:before{
173
- border-color: var(--color-neutral);
174
- }
175
- &:after{
176
- border-color: var(--color-neutral);
177
- }
178
- }
179
- &.arm-checkbox_success{
180
- &:before{
181
- border-color: var(--color-success);
182
- }
183
- &:after{
184
- border-color: var(--color-success);
185
- }
186
- }
187
- &.arm-checkbox_error{
188
- color: var(--color-error-dark);
189
- &:before{
190
- border-color: var(--color-error-dark);
191
- }
192
- &:after{
193
- border-color: var(--color-error-dark);
194
- }
195
- }
196
- &.arm-checkbox_warning{
197
- &:before{
198
- border-color: var(--color-warning);
199
- }
200
- &:after{
201
- border-color: var(--color-warning);
202
- }
203
- }
204
- //&.arm-checkbox_error{
205
- // &:before{
206
- // border-color: var(--color-error);
207
- // }
208
- // &:after{
209
- // border-color: var(--color-error);
210
- // }
211
- //}
212
- }
213
-
214
- .arm-checkbox__label_disabled{
215
- color: var(--color-gray-500) !important;
216
- pointer-events: none;
217
- &:before{
218
- background-color: var(--color-gray-400);
219
- }
220
- &:after{
221
- border-color: var(--color-gray-200);
222
- }
223
- &.arm-checkbox_outlined{
224
- &:before{
225
- background-color: transparent;
226
- border-color: var(--color-gray-200);
227
- }
228
- &:after{
229
- border-color: var(--color-gray-200);
230
- }
231
- }
232
- }
233
-
234
- .arm-radio{
235
- & .arm-checkbox__label{
236
- &:before{
237
- border-radius: 50%;
238
- }
239
- &:after{
240
- border: none;
241
- border-radius: 50%;
242
- background: var(--color-primary);
243
- width: 10px;
244
- height: 10px;
245
- margin-top: 0px;
246
- margin-left: 0;
247
- top:50%;
248
- left:50%;
249
- transform: translate(-50%, -50%);
250
- }
251
- &.arm-checkbox_medium{
252
- &:after{
253
- width: 8px;
254
- height: 8px;
255
- margin-top: -1px;
256
- }
257
- }
258
- &.arm-checkbox_small{
259
- &:after{
260
- width: 6px;
261
- height: 6px;
262
- }
263
- }
264
- &.arm-checkbox_secondary:before{
265
- border-color: var(--color-secondary);
266
- }
267
- &.arm-checkbox_success:before{
268
- border-color: var(--color-success);
269
- }
270
- &.arm-checkbox_warning:before{
271
- border-color: var(--color-warning);
272
- }
273
- &.arm-checkbox_neutral:before{
274
- border-color: var(--color-neutral);
275
- }
276
- &.arm-checkbox_error:before{
277
- border-color: var(--color-error-dark);
278
- }
279
- &.arm-checkbox_secondary:after{
280
- background: var(--color-secondary);
281
- }
282
- &.arm-checkbox_success:after{
283
- background: var(--color-success);
284
- }
285
- &.arm-checkbox_warning:after{
286
- background: var(--color-warning);
287
- }
288
- &.arm-checkbox_neutral:after{
289
- background: var(--color-neutral);
290
- }
291
- &.arm-checkbox_error:after{
292
- background: var(--color-error-dark);
293
- }
294
- &_disabled:after{
295
- background: var(--color-gray-200) !important;
296
- }
297
- &.arm-checkbox_contained:after{
298
- background: #fff;
299
- }
300
-
301
- &.arm-checkbox__label_disabled:before{
302
- background: transparent !important;
303
- border-color: var(--color-gray-400);
304
- }
305
- &_checked{
306
- &.arm-checkbox__label_disabled:before{
307
- background: #B1BCC6 !important;
308
- }
309
- }
310
-
311
-
312
- }
313
- }
1
+
2
+ .arm-checkbox{
3
+ position: relative;
4
+ display: flex;
5
+ }
6
+ .arm-checkbox_text{
7
+ align-items: center;
8
+ }
9
+ .arm-checkbox__input{
10
+ display: none;
11
+ }
12
+ .arm-checkbox__text{
13
+ padding-left: calc(var(--size-step));
14
+ font-size: 16px;
15
+ display: block;
16
+ cursor: pointer;
17
+ }
18
+ .arm-checkbox__text_error{
19
+ color: var(--color-error);
20
+ }
21
+ .arm-checkbox__text_size_small{
22
+ font-size: 14px;
23
+ }
24
+ .arm-checkbox__label{
25
+ cursor: pointer;
26
+ text-align: left;
27
+ position: relative;
28
+ display: block;
29
+ line-height: 1.2;
30
+ min-width:22px;
31
+ width:22px;
32
+ height: 22px;
33
+ &:before{
34
+ width: 100%;
35
+ height: 100%;
36
+ border-radius: var(--border-radius);
37
+ border: 1px solid var(--color-gray-700);
38
+ background: #fff;
39
+ position: absolute;
40
+ content: '';
41
+ left: 0;
42
+ top: 0;
43
+ box-sizing: border-box;
44
+ }
45
+ &:after{
46
+ content: '';
47
+ position: absolute;
48
+ transform: rotate(45deg);
49
+ left: 8px;
50
+ top: 4px;
51
+ width: 7px;
52
+ height: 11px;
53
+ border-bottom: 2px solid;
54
+ border-right: 2px solid;
55
+ display: none;
56
+ box-sizing: border-box;
57
+ }
58
+ &.arm-checkbox_error:before{
59
+ border-color: var(--color-error);
60
+ }
61
+ }
62
+
63
+
64
+ .arm-checkbox_medium{
65
+ min-width:18px;
66
+ width:18px;
67
+ height: 18px;
68
+ &:after{
69
+ left: 6px;
70
+ top: 2px;
71
+ width: 6px;
72
+ height: 10px;
73
+ }
74
+ }
75
+
76
+ .arm-checkbox_small{
77
+ font-size: 14px;
78
+ min-width:16px;
79
+ width:16px;
80
+ height: 16px;
81
+ &:after{
82
+ left: 5px;
83
+ top: 3px;
84
+ height: 8px;
85
+ width: 6px;
86
+ }
87
+ }
88
+
89
+ .arm-checkbox__label_intermediate{
90
+ &:after{
91
+ border-left: none;
92
+ width: 14px;
93
+ transform: none;
94
+ top: 10px;
95
+ height: 0;
96
+ left: 4px;
97
+ border-right: none;
98
+ }
99
+ &.arm-checkbox_medium:after{
100
+ width: 11px;
101
+ top: 8px;
102
+ }
103
+ &.arm-checkbox_small:after{
104
+ width: 9px;
105
+ top: 7px;
106
+ }
107
+ }
108
+
109
+ .arm-checkbox__label_intermediate,
110
+ .arm-checkbox__label_checked{
111
+ &:before{
112
+ border-color: transparent;
113
+ background: var(--color-primary);
114
+ }
115
+ &:after{
116
+ border-color: #fff;
117
+ display: block;
118
+ }
119
+ &.arm-checkbox_secondary{
120
+ &:before{
121
+ background: var(--color-secondary);
122
+ }
123
+ }
124
+
125
+ &.arm-checkbox_contained{
126
+ &.arm-checkbox_secondary{
127
+ &:before{
128
+ background: var(--color-secondary);
129
+ }
130
+ }
131
+ &.arm-checkbox_neutral{
132
+ &:before{
133
+ background: var(--color-neutral);
134
+ }
135
+ }
136
+ &.arm-checkbox_success{
137
+ &:before{
138
+ background: var(--color-success);
139
+ }
140
+ }
141
+ &.arm-checkbox_warning{
142
+ &:before{
143
+ background: var(--color-warning);
144
+ }
145
+ }
146
+ &.arm-checkbox_error{
147
+ color: var(--color-error-dark);
148
+ &:before{
149
+ background: var(--color-error-dark);
150
+ }
151
+ }
152
+ }
153
+ }
154
+ .arm-checkbox_outlined{
155
+ &:before{
156
+ background: transparent;
157
+ border-color: var(--color-primary);
158
+ }
159
+ &:after{
160
+ border-color: var(--color-primary);
161
+ }
162
+ &.arm-checkbox_secondary{
163
+ &:before{
164
+ background: transparent;
165
+ border-color: var(--color-secondary);
166
+ }
167
+ &:after{
168
+ border-color: var(--color-secondary);
169
+ }
170
+ }
171
+ &.arm-checkbox_neutral{
172
+ &:before{
173
+ border-color: var(--color-neutral);
174
+ }
175
+ &:after{
176
+ border-color: var(--color-neutral);
177
+ }
178
+ }
179
+ &.arm-checkbox_success{
180
+ &:before{
181
+ border-color: var(--color-success);
182
+ }
183
+ &:after{
184
+ border-color: var(--color-success);
185
+ }
186
+ }
187
+ &.arm-checkbox_error{
188
+ color: var(--color-error-dark);
189
+ &:before{
190
+ border-color: var(--color-error-dark);
191
+ }
192
+ &:after{
193
+ border-color: var(--color-error-dark);
194
+ }
195
+ }
196
+ &.arm-checkbox_warning{
197
+ &:before{
198
+ border-color: var(--color-warning);
199
+ }
200
+ &:after{
201
+ border-color: var(--color-warning);
202
+ }
203
+ }
204
+ //&.arm-checkbox_error{
205
+ // &:before{
206
+ // border-color: var(--color-error);
207
+ // }
208
+ // &:after{
209
+ // border-color: var(--color-error);
210
+ // }
211
+ //}
212
+ }
213
+
214
+ .arm-checkbox__label_disabled{
215
+ color: var(--color-gray-500) !important;
216
+ pointer-events: none;
217
+ &:before{
218
+ background-color: var(--color-gray-400);
219
+ }
220
+ &:after{
221
+ border-color: var(--color-gray-200);
222
+ }
223
+ &.arm-checkbox_outlined{
224
+ &:before{
225
+ background-color: transparent;
226
+ border-color: var(--color-gray-200);
227
+ }
228
+ &:after{
229
+ border-color: var(--color-gray-200);
230
+ }
231
+ }
232
+ }
233
+
234
+ .arm-radio{
235
+ & .arm-checkbox__label{
236
+ &:before{
237
+ border-radius: 50%;
238
+ }
239
+ &:after{
240
+ border: none;
241
+ border-radius: 50%;
242
+ background: var(--color-primary);
243
+ width: 10px;
244
+ height: 10px;
245
+ margin-top: 0px;
246
+ margin-left: 0;
247
+ top:50%;
248
+ left:50%;
249
+ transform: translate(-50%, -50%);
250
+ }
251
+ &.arm-checkbox_medium{
252
+ &:after{
253
+ width: 8px;
254
+ height: 8px;
255
+ margin-top: -1px;
256
+ }
257
+ }
258
+ &.arm-checkbox_small{
259
+ &:after{
260
+ width: 6px;
261
+ height: 6px;
262
+ }
263
+ }
264
+ &.arm-checkbox_secondary:before{
265
+ border-color: var(--color-secondary);
266
+ }
267
+ &.arm-checkbox_success:before{
268
+ border-color: var(--color-success);
269
+ }
270
+ &.arm-checkbox_warning:before{
271
+ border-color: var(--color-warning);
272
+ }
273
+ &.arm-checkbox_neutral:before{
274
+ border-color: var(--color-neutral);
275
+ }
276
+ &.arm-checkbox_error:before{
277
+ border-color: var(--color-error-dark);
278
+ }
279
+ &.arm-checkbox_secondary:after{
280
+ background: var(--color-secondary);
281
+ }
282
+ &.arm-checkbox_success:after{
283
+ background: var(--color-success);
284
+ }
285
+ &.arm-checkbox_warning:after{
286
+ background: var(--color-warning);
287
+ }
288
+ &.arm-checkbox_neutral:after{
289
+ background: var(--color-neutral);
290
+ }
291
+ &.arm-checkbox_error:after{
292
+ background: var(--color-error-dark);
293
+ }
294
+ &_disabled:after{
295
+ background: var(--color-gray-200) !important;
296
+ }
297
+ &.arm-checkbox_contained:after{
298
+ background: #fff;
299
+ }
300
+
301
+ &.arm-checkbox__label_disabled:before{
302
+ background: transparent !important;
303
+ border-color: var(--color-gray-400);
304
+ }
305
+ &_checked{
306
+ &.arm-checkbox__label_disabled:before{
307
+ background: #B1BCC6 !important;
308
+ }
309
+ }
310
+
311
+
312
+ }
313
+ }