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/Chip.scss CHANGED
@@ -1,280 +1,280 @@
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_outlined {
255
- &.arm-chip {
256
- background-color: transparent;
257
- color: var(--color-neutral-light);
258
- border-color: var(--color-neutral-light);
259
- }
260
- &.arm-chip.arm-chip_primary {
261
- background-color: transparent;
262
- color: var(--color-blue-600);
263
- border-color: var(--color-blue-600);
264
- }
265
- &.arm-chip.arm-chip_secondary {
266
- color: var(--color-secondary);
267
- border-color: var(--color-secondary);
268
- }
269
- }
270
-
271
- a.arm-chip_outlined.arm-chip.arm-chip_primary:hover,
272
- button.arm-chip_outlined.arm-chip.arm-chip_primary:hover {
273
- background-color: rgba(var(--color-blue-800-rgba), 0.1);
274
- }
275
- a.arm-chip_outlined.arm-chip.arm-chip_secondary:hover,
276
- button.arm-chip_outlined.arm-chip.arm-chip_secondary:hover {
277
- background-color: rgba(var(--color-secondary-rgba), 0.1);
278
- }
279
-
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_outlined {
255
+ &.arm-chip {
256
+ background-color: transparent;
257
+ color: var(--color-neutral-light);
258
+ border-color: var(--color-neutral-light);
259
+ }
260
+ &.arm-chip.arm-chip_primary {
261
+ background-color: transparent;
262
+ color: var(--color-blue-600);
263
+ border-color: var(--color-blue-600);
264
+ }
265
+ &.arm-chip.arm-chip_secondary {
266
+ color: var(--color-secondary);
267
+ border-color: var(--color-secondary);
268
+ }
269
+ }
270
+
271
+ a.arm-chip_outlined.arm-chip.arm-chip_primary:hover,
272
+ button.arm-chip_outlined.arm-chip.arm-chip_primary:hover {
273
+ background-color: rgba(var(--color-blue-800-rgba), 0.1);
274
+ }
275
+ a.arm-chip_outlined.arm-chip.arm-chip_secondary:hover,
276
+ button.arm-chip_outlined.arm-chip.arm-chip_secondary:hover {
277
+ background-color: rgba(var(--color-secondary-rgba), 0.1);
278
+ }
279
+
280
280
  }
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
  }