armtek-uikit-react 1.0.256 → 1.0.259

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 (73) hide show
  1. package/assets/Accordion.scss +113 -123
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +105 -111
  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 +294 -313
  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 +75 -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 +19 -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 +51 -69
  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 +37 -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 -222
  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 +0 -1
  55. package/ui/Avatar/Avatar.js +1 -2
  56. package/ui/Button/Button.d.ts +1 -1
  57. package/ui/ButtonIcon/ButtonIcon.d.ts +1 -1
  58. package/ui/Chip/Chip.d.ts +3 -2
  59. package/ui/Chip/Chip.js +20 -2
  60. package/ui/Form/DateField/DateField.js +0 -4
  61. package/ui/Form/DatePicker/styles.css +802 -802
  62. package/ui/Form/FormControls/FormControls.js +1 -1
  63. package/ui/Form/FormControls/const.d.ts +0 -1
  64. package/ui/Form/FormControls/const.js +2 -3
  65. package/ui/Form/Period/Period.d.ts +1 -12
  66. package/ui/Form/Period/Period.js +4 -16
  67. package/ui/Form/Select/Select.d.ts +2 -2
  68. package/ui/Form/Select/Select.js +4 -8
  69. package/ui/Form/Select/SelectSummary.d.ts +3 -3
  70. package/ui/Form/TimeField/TimeField.d.ts +1 -1
  71. package/ui/Modal/Modal.js +0 -1
  72. package/ui/Slider/style.scss +346 -346
  73. package/ui/Table/Table.js +1 -4
package/assets/Chip.scss CHANGED
@@ -1,313 +1,294 @@
1
- @use "variables" as v;
2
-
3
- .arm-chip{
4
- background-color: var(--color-gray-200);
5
- padding: calc(var(--size-step) / 1.5) calc(var(--size-step) * 1.5);
6
- border-radius: 20px;
7
- font-size: 13px;
8
- display: inline-flex;
9
- align-items: center;
10
- }
11
-
12
- .arm-chip_square{
13
- border-radius: var(--border-radius);
14
- }
15
- .arm-chip__text{
16
- line-height: 1;
17
- }
18
-
19
- .arm-chip__inner{
20
- @include v.flex(center)
21
- }
22
-
23
- .arm-chip__icon{
24
- display: inline-block;
25
- margin-right: var(--size-step);
26
- margin-left: calc(var(--size-step) * -1);
27
- font-size: 22px;
28
- @include v.flex();
29
- overflow: hidden;
30
- }
31
- .arm-chip__close{
32
- // margin-right: var(--size-step);
33
- margin-left: calc(var(--size-step) * 1);
34
- padding: 0;
35
- font-size: 20px;
36
- color: var(--color-gray-500);
37
- cursor: pointer;
38
- &:hover{
39
- @include v.transition();
40
- color: var(--color-gray-600);
41
- }
42
- }
43
-
44
- .arm-chip__close_primary,
45
- .arm-chip__close_secondary{
46
- color: #fff;
47
- &:hover{
48
- color: #fff;
49
- opacity: 0.6;
50
- }
51
- }
52
-
53
- .arm-chip_small{
54
- height: 24px;
55
- padding: 4px var(--size-step);
56
- }
57
- .arm-chip_medium{
58
- height: 32px;
59
- }
60
- .arm-chip__icon_small{
61
- font-size: 18px;
62
- margin-left: 0;
63
- }
64
- .arm-chip__close_small{
65
- font-size: 15px;
66
- margin-right: -2px;
67
- }
68
-
69
- .arm-chip_outlined{
70
- background-color: transparent;
71
- border: 1px solid var(--color-gray-400);
72
- }
73
- a.arm-chip_outlined,
74
- button.arm-chip_outlined{
75
- &:hover{
76
- background-color: rgba(var(--color-neutral-rgba), 0.1);
77
- }
78
- }
79
-
80
- .arm-chip_secondary{
81
- color: #fff;
82
- background-color: var(--color-secondary);
83
- &.arm-chip_outlined{
84
- border-color: var(--color-secondary);
85
- background-color: transparent;
86
- color: var(--color-secondary);
87
- }
88
- }
89
- a.arm-chip_secondary,
90
- button.arm-chip_secondary{
91
- &:hover{
92
- background-color: var(--color-secondary-rgba);
93
- }
94
- &.arm-chip_outlined:hover{
95
- background-color: var(--color-orange-100);
96
- }
97
- }
98
-
99
- .arm-chip_success{
100
- background-color: var(--color-success);
101
- &.arm-chip_outlined{
102
- border-color: var(--color-success);
103
- background-color: transparent;
104
- color: var(--color-success);
105
- }
106
- }
107
- a.arm-chip_success,
108
- button.arm-chip_success{
109
- &:hover{
110
- background-color: var(--color-success-dark);
111
- }
112
- &.arm-chip_outlined:hover{
113
- background-color: var(--color-green-100);
114
- }
115
- }
116
-
117
- .arm-chip_error{
118
- background-color: var(--color-error);
119
- &.arm-chip_outlined{
120
- border-color: var(--color-error);
121
- background-color: transparent;
122
- color: var(--color-error);
123
- }
124
- }
125
- a.arm-chip_error,
126
- button.arm-chip_error{
127
- &:hover{
128
- background-color: var(--color-error-dark);
129
- }
130
- &.arm-chip_outlined:hover{
131
- background-color: var(--color-red-100);
132
- }
133
- }
134
-
135
- .arm-chip_warning{
136
- background-color: var(--color-warning);
137
- &.arm-chip_outlined{
138
- border-color: var(--color-warning);
139
- background-color: transparent;
140
- color: var(--color-warning);
141
- }
142
- }
143
- a.arm-chip_warning,
144
- button.arm-chip_warning{
145
- &:hover{
146
- background-color: var(--color-warning-dark);
147
- }
148
- &.arm-chip_outlined:hover{
149
- background-color: var(--color-orange-100);
150
- }
151
- }
152
-
153
- .arm-chip_info{
154
- color: #fff;
155
- background-color: var(--color-info);
156
- &.arm-chip_outlined{
157
- border-color: var(--color-info);
158
- background-color: transparent;
159
- color: var(--color-info);
160
- }
161
- }
162
- a.arm-chip_info,
163
- button.arm-chip_info{
164
- &:hover{
165
- background-color: var(--color-info-dark);
166
- }
167
- &.arm-chip_outlined:hover{
168
- background-color: var(--color-blue-100);
169
- }
170
- }
171
-
172
- .arm-chip_black{
173
- color: #fff;
174
- background-color: var(--color-neutral);
175
- &.arm-chip_outlined{
176
- border-color: var(--color-neutral);
177
- background-color: transparent;
178
- color: var(--color-neutral);
179
- }
180
- }
181
- a.arm-chip_black,
182
- button.arm-chip_black{
183
- &:hover{
184
- background-color: var(--color-neutral-dark);
185
- }
186
- &.arm-chip_outlined:hover{
187
- background-color: var(--color-gray-100);
188
- }
189
- }
190
-
191
- .arm-chip_white{
192
- background-color: #fff;
193
- }
194
- a.arm-chip_white,
195
- button.arm-chip_white{
196
- &:hover{
197
- background-color: var(--color-gray-100);
198
- }
199
- }
200
-
201
-
202
- .arm-chip_primary{
203
- color: #fff;
204
- background-color: var(--color-primary);
205
- &.arm-chip_outlined{
206
- border-color: var(--color-primary);
207
- background-color: transparent;
208
- color: var(--color-primary);
209
- }
210
- }
211
- a.arm-chip_primary,
212
- button.arm-chip_primary{
213
- &:hover{
214
- background-color: var(--color-primary-dark);
215
- }
216
- &.arm-chip_outlined:hover{
217
- background-color: var(--color-blue-100);
218
- }
219
- }
220
-
221
- .arm-chip_disabled{
222
- pointer-events: none;
223
- opacity: 0.5;
224
- }
225
-
226
- .arm-theme-dark {
227
- .arm-chip {
228
- background-color: rgba(var(--color-gray-500-rgba), 0.3);
229
- color: var(--color-gray-200);
230
- }
231
- a.arm-chip:hover,
232
- button.arm-chip:hover {
233
- background-color: var(--color-neutral);
234
- }
235
-
236
- .arm-chip.arm-chip_primary {
237
- background-color: var(--color-blue-800);
238
- color: var(--color-secondary-contrast);
239
- }
240
- a.arm-chip.arm-chip_primary:hover,
241
- button.arm-chip.arm-chip_primary:hover {
242
- background-color: var(--color-primary);
243
- }
244
-
245
- .arm-chip.arm-chip_secondary {
246
- background-color: var(--color-secondary);
247
- color: var(--color-secondary-contrast);
248
- }
249
- a.arm-chip.arm-chip_secondary:hover,
250
- button.arm-chip.arm-chip_secondary:hover {
251
- background-color: var(--color-secondary-dark);
252
- }
253
-
254
- .arm-chip.arm-chip_error {
255
- background-color: var(--color-error);
256
- color: var(--color-error-contrast);
257
- }
258
- a.arm-chip.arm-chip_error:hover,
259
- button.arm-chip.arm-chip_error:hover {
260
- background-color: var(--color-error-dark);
261
- }
262
- .arm-chip.arm-chip_success {
263
- background-color: var(--color-success);
264
- color: var(--color-success-contrast);
265
- }
266
- a.arm-chip.arm-chip_error:hover,
267
- button.arm-chip.arm-chip_error:hover {
268
- background-color: var(--color-success-dark);
269
- }
270
- .arm-chip.arm-chip_info {
271
- background-color: var(--color-info);
272
- color: var(--color-info-contrast);
273
- }
274
- a.arm-chip.arm-chip_info:hover,
275
- button.arm-chip.arm-chip_info:hover {
276
- background-color: var(--color-info-dark);
277
- }
278
- .arm-chip.arm-chip_warning {
279
- background-color: var(--color-warning);
280
- color: var(--color-warning-contrast);
281
- }
282
- a.arm-chip.arm-chip_warning:hover,
283
- button.arm-chip.arm-chip_warning:hover {
284
- background-color: var(--color-warning-dark);
285
- }
286
-
287
- .arm-chip_outlined {
288
- &.arm-chip {
289
- background-color: transparent;
290
- color: var(--color-neutral-light);
291
- border-color: var(--color-neutral-light);
292
- }
293
- &.arm-chip.arm-chip_primary {
294
- background-color: transparent;
295
- color: var(--color-blue-600);
296
- border-color: var(--color-blue-600);
297
- }
298
- &.arm-chip.arm-chip_secondary {
299
- color: var(--color-secondary);
300
- border-color: var(--color-secondary);
301
- }
302
- }
303
-
304
- a.arm-chip_outlined.arm-chip.arm-chip_primary:hover,
305
- button.arm-chip_outlined.arm-chip.arm-chip_primary:hover {
306
- background-color: rgba(var(--color-blue-800-rgba), 0.1);
307
- }
308
- a.arm-chip_outlined.arm-chip.arm-chip_secondary:hover,
309
- button.arm-chip_outlined.arm-chip.arm-chip_secondary:hover {
310
- background-color: rgba(var(--color-secondary-rgba), 0.1);
311
- }
312
-
313
- }
1
+ @use "variables" as v;
2
+
3
+ .arm-chip{
4
+ background-color: var(--color-gray-200);
5
+ padding: calc(var(--size-step) / 1.5) calc(var(--size-step) * 1.5);
6
+ border-radius: 20px;
7
+ font-size: 13px;
8
+ display: inline-flex;
9
+ align-items: center;
10
+ }
11
+
12
+ .arm-chip_square{
13
+ border-radius: var(--border-radius);
14
+ }
15
+ .arm-chip__text{
16
+ line-height: 1;
17
+ }
18
+
19
+ .arm-chip__inner{
20
+ @include v.flex(center)
21
+ }
22
+
23
+ .arm-chip__icon{
24
+ display: inline-block;
25
+ margin-right: var(--size-step);
26
+ margin-left: calc(var(--size-step) * -1);
27
+ font-size: 22px;
28
+ @include v.flex();
29
+ overflow: hidden;
30
+ }
31
+ .arm-chip__close{
32
+ appearance: none;
33
+ background: transparent;
34
+ border: none;
35
+ margin-left: calc(var(--size-step) * 1);
36
+ padding: 0;
37
+ line-height: 1;
38
+ font-size: 20px;
39
+ color: var(--color-gray-500);
40
+ cursor: pointer;
41
+ @include v.transition();
42
+
43
+ &:focus-visible{
44
+ outline: 2px solid var(--color-primary);
45
+ outline-offset: 2px;
46
+ }
47
+
48
+ &:disabled{
49
+ cursor: default;
50
+ opacity: 0.6;
51
+ }
52
+
53
+ &:hover{
54
+ color: var(--color-gray-600);
55
+ }
56
+ }
57
+
58
+ .arm-chip__close_primary,
59
+ .arm-chip__close_secondary{
60
+ color: #fff;
61
+ &:hover{
62
+ color: #fff;
63
+ opacity: 0.6;
64
+ }
65
+ }
66
+
67
+ .arm-chip_small{
68
+ min-height: 24px;
69
+ padding: 4px var(--size-step);
70
+ }
71
+ .arm-chip_medium{
72
+ min-height: 32px;
73
+ }
74
+ .arm-chip__icon_small{
75
+ font-size: 18px;
76
+ margin-left: 0;
77
+ }
78
+ .arm-chip__close_small{
79
+ font-size: 15px;
80
+ margin-right: -2px;
81
+ }
82
+
83
+ .arm-chip_outlined{
84
+ background-color: transparent;
85
+ border: 1px solid var(--color-gray-400);
86
+ }
87
+ a.arm-chip_outlined,
88
+ button.arm-chip_outlined{
89
+ &:hover{
90
+ background-color: rgba(var(--color-neutral-rgba), 0.1);
91
+ }
92
+ }
93
+
94
+ .arm-chip_secondary{
95
+ color: #fff;
96
+ background-color: var(--color-secondary);
97
+ &.arm-chip_outlined{
98
+ border-color: var(--color-secondary);
99
+ background-color: transparent;
100
+ color: var(--color-secondary);
101
+ }
102
+ }
103
+ a.arm-chip_secondary,
104
+ button.arm-chip_secondary{
105
+ &:hover{
106
+ background-color: var(--color-secondary-rgba);
107
+ }
108
+ &.arm-chip_outlined:hover{
109
+ background-color: var(--color-orange-100);
110
+ }
111
+ }
112
+
113
+ .arm-chip_success{
114
+ background-color: var(--color-success);
115
+ &.arm-chip_outlined{
116
+ border-color: var(--color-success);
117
+ background-color: transparent;
118
+ color: var(--color-success);
119
+ }
120
+ }
121
+ a.arm-chip_success,
122
+ button.arm-chip_success{
123
+ &:hover{
124
+ background-color: var(--color-success-dark);
125
+ }
126
+ &.arm-chip_outlined:hover{
127
+ background-color: var(--color-green-100);
128
+ }
129
+ }
130
+
131
+ .arm-chip_error{
132
+ background-color: var(--color-error);
133
+ &.arm-chip_outlined{
134
+ border-color: var(--color-error);
135
+ background-color: transparent;
136
+ color: var(--color-error);
137
+ }
138
+ }
139
+ a.arm-chip_error,
140
+ button.arm-chip_error{
141
+ &:hover{
142
+ background-color: var(--color-error-dark);
143
+ }
144
+ &.arm-chip_outlined:hover{
145
+ background-color: var(--color-red-100);
146
+ }
147
+ }
148
+
149
+ .arm-chip_warning{
150
+ background-color: var(--color-warning);
151
+ &.arm-chip_outlined{
152
+ border-color: var(--color-warning);
153
+ background-color: transparent;
154
+ color: var(--color-warning);
155
+ }
156
+ }
157
+ a.arm-chip_warning,
158
+ button.arm-chip_warning{
159
+ &:hover{
160
+ background-color: var(--color-warning-dark);
161
+ }
162
+ &.arm-chip_outlined:hover{
163
+ background-color: var(--color-orange-100);
164
+ }
165
+ }
166
+
167
+ .arm-chip_info{
168
+ color: #fff;
169
+ background-color: var(--color-info);
170
+ &.arm-chip_outlined{
171
+ border-color: var(--color-info);
172
+ background-color: transparent;
173
+ color: var(--color-info);
174
+ }
175
+ }
176
+ a.arm-chip_info,
177
+ button.arm-chip_info{
178
+ &:hover{
179
+ background-color: var(--color-info-dark);
180
+ }
181
+ &.arm-chip_outlined:hover{
182
+ background-color: var(--color-blue-100);
183
+ }
184
+ }
185
+
186
+ .arm-chip_black{
187
+ color: #fff;
188
+ background-color: var(--color-neutral);
189
+ &.arm-chip_outlined{
190
+ border-color: var(--color-neutral);
191
+ background-color: transparent;
192
+ color: var(--color-neutral);
193
+ }
194
+ }
195
+ a.arm-chip_black,
196
+ button.arm-chip_black{
197
+ &:hover{
198
+ background-color: var(--color-neutral-dark);
199
+ }
200
+ &.arm-chip_outlined:hover{
201
+ background-color: var(--color-gray-100);
202
+ }
203
+ }
204
+
205
+ .arm-chip_white{
206
+ background-color: #fff;
207
+ }
208
+ a.arm-chip_white,
209
+ button.arm-chip_white{
210
+ &:hover{
211
+ background-color: var(--color-gray-100);
212
+ }
213
+ }
214
+
215
+
216
+ .arm-chip_primary{
217
+ color: #fff;
218
+ background-color: var(--color-primary);
219
+ &.arm-chip_outlined{
220
+ border-color: var(--color-primary);
221
+ background-color: transparent;
222
+ color: var(--color-primary);
223
+ }
224
+ }
225
+ a.arm-chip_primary,
226
+ button.arm-chip_primary{
227
+ &:hover{
228
+ background-color: var(--color-primary-dark);
229
+ }
230
+ &.arm-chip_outlined:hover{
231
+ background-color: var(--color-blue-100);
232
+ }
233
+ }
234
+
235
+ .arm-chip_disabled{
236
+ pointer-events: none;
237
+ opacity: 0.5;
238
+ }
239
+
240
+ .arm-theme-dark {
241
+ .arm-chip {
242
+ background-color: rgba(var(--color-gray-500-rgba), 0.3);
243
+ color: var(--color-gray-200);
244
+ }
245
+ a.arm-chip:hover,
246
+ button.arm-chip:hover {
247
+ background-color: var(--color-neutral);
248
+ }
249
+
250
+ .arm-chip.arm-chip_primary {
251
+ background-color: var(--color-blue-800);
252
+ color: var(--color-secondary-contrast);
253
+ }
254
+ a.arm-chip.arm-chip_primary:hover,
255
+ button.arm-chip.arm-chip_primary:hover {
256
+ background-color: var(--color-primary);
257
+ }
258
+
259
+ .arm-chip.arm-chip_secondary {
260
+ background-color: var(--color-secondary);
261
+ color: var(--color-secondary-contrast);
262
+ }
263
+ a.arm-chip.arm-chip_secondary:hover,
264
+ button.arm-chip.arm-chip_secondary:hover {
265
+ background-color: var(--color-secondary-dark);
266
+ }
267
+
268
+ .arm-chip_outlined {
269
+ &.arm-chip {
270
+ background-color: transparent;
271
+ color: var(--color-neutral-light);
272
+ border-color: var(--color-neutral-light);
273
+ }
274
+ &.arm-chip.arm-chip_primary {
275
+ background-color: transparent;
276
+ color: var(--color-blue-600);
277
+ border-color: var(--color-blue-600);
278
+ }
279
+ &.arm-chip.arm-chip_secondary {
280
+ color: var(--color-secondary);
281
+ border-color: var(--color-secondary);
282
+ }
283
+ }
284
+
285
+ a.arm-chip_outlined.arm-chip.arm-chip_primary:hover,
286
+ button.arm-chip_outlined.arm-chip.arm-chip_primary:hover {
287
+ background-color: rgba(var(--color-blue-800-rgba), 0.1);
288
+ }
289
+ a.arm-chip_outlined.arm-chip.arm-chip_secondary:hover,
290
+ button.arm-chip_outlined.arm-chip.arm-chip_secondary:hover {
291
+ background-color: rgba(var(--color-secondary-rgba), 0.1);
292
+ }
293
+
294
+ }
package/assets/DateField.scss CHANGED
@@ -1,3 +1,3 @@
1
- .arm-datefield-popper > div{
2
- background: none !important;
1
+ .arm-datefield-popper > div{
2
+ background: none !important;
3
3
  }