armtek-uikit-react 1.0.262 → 1.0.264

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 (80) hide show
  1. package/assets/Accordion.scss +123 -123
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +111 -111
  5. package/assets/AvatarGroup.scss +47 -47
  6. package/assets/BackDrop.scss +39 -39
  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 +59 -32
  11. package/assets/Card.scss +13 -13
  12. package/assets/Checkbox.scss +313 -313
  13. package/assets/Chip.scss +327 -327
  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 +76 -76
  23. package/assets/Loader.scss +56 -56
  24. package/assets/Logo.scss +28 -28
  25. package/assets/Modal.scss +103 -103
  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 -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 +52 -52
  41. package/assets/TextArea.scss +23 -18
  42. package/assets/TextField.scss +206 -198
  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 -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/helpers/helpers.d.ts +1 -1
  52. package/lib/helpers/helpers.js +1 -1
  53. package/lib/hooks/useEnhancedEffect.js +6 -6
  54. package/lib/hooks/useTimeout.js +2 -2
  55. package/package.json +1 -1
  56. package/ui/Avatar/Avatar.d.ts +10 -1
  57. package/ui/Avatar/Avatar.js +4 -2
  58. package/ui/ButtonIcon/ButtonIcon.js +5 -2
  59. package/ui/Card/Card.d.ts +1 -1
  60. package/ui/Card/Card.js +4 -2
  61. package/ui/Chip/Chip.d.ts +3 -2
  62. package/ui/Chip/Chip.js +4 -2
  63. package/ui/Form/DateField/DateField.js +2 -2
  64. package/ui/Form/DatePicker/styles.css +802 -802
  65. package/ui/Form/Password/Password.d.ts +4 -0
  66. package/ui/Form/TextArea/TextArea.d.ts +11 -1
  67. package/ui/Form/TextArea/TextArea.js +15 -7
  68. package/ui/Form/TextField/TextField.d.ts +11 -0
  69. package/ui/Form/TextField/TextField.js +53 -4
  70. package/ui/Icon/Mi.d.ts +17 -1
  71. package/ui/Icon/Mi.js +5 -3
  72. package/ui/Icon/Mis.d.ts +1 -1
  73. package/ui/Icon/Mis.js +4 -3
  74. package/ui/Link/Link.d.ts +3 -2
  75. package/ui/Link/Link.js +4 -2
  76. package/ui/Slider/style.scss +346 -346
  77. package/ui/Stack/Stack.d.ts +1 -1
  78. package/ui/Stack/Stack.js +3 -2
  79. package/ui/Status/Status.d.ts +4 -3
  80. package/ui/Status/Status.js +4 -2
package/assets/TextField.scss CHANGED
@@ -1,198 +1,206 @@
1
- @use "variables" as v;
2
-
3
- .arm-textfield_root{
4
- position: relative;
5
- overflow: hidden;
6
- border-radius: var(--border-radius);
7
- border: 1px solid var(--color-gray-400);
8
- background-color: #fff;
9
- height: var(--size-elarge);
10
- @include v.flex();
11
- &:hover{
12
- border-color: var(--color-gray-600);
13
- }
14
- &.arm-textfield_root_focused{
15
- border-color: var(--color-gray-800);
16
- }
17
- &.arm-textfield_root_disabled{
18
- pointer-events: none;
19
- background: var(--color-gray-100);
20
- border-color: transparent;
21
- & .arm-textfield__label{
22
- color: var(--color-gray-600);
23
- }
24
- }
25
- &_outlined{
26
- border-top:none;
27
- border-left: none;
28
- border-right: none;
29
- border-radius: 0;
30
- }
31
- }
32
- .arm-textfield_root_size_small{
33
- height: var(--size-large);
34
- font-size: 14px;
35
- }
36
- .arm-textfield_root_outlined{
37
- &.arm-textfield_root_disabled{
38
- background: transparent;
39
- border-bottom-style: dotted;
40
- border-bottom-width: 1px;
41
- border-bottom-color: var(--color-gray-100);
42
- }
43
- }
44
- .arm-textfield__wrapper{
45
- cursor: text;
46
- position: relative;
47
- padding: 10px 12px 8px;
48
- width: 100%;
49
- }
50
- .arm-textfield__wrapper_label{
51
- padding: 25px 12px 8px;
52
- }
53
- .arm-textfield__wrapper_size_small{
54
- &.arm-textfield__wrapper_label{
55
- padding: 18px 12px 4px
56
- }
57
- }
58
- .arm-textfield__wrapper_outlined{
59
- padding-left: 0 !important;
60
- & .arm-textfield__label{
61
- padding-left: 0;
62
- }
63
- }
64
- .arm-textfield__input{
65
- display: block;
66
- width: 100%;
67
- font-size: 16px;
68
- outline: none;
69
- background: transparent;
70
- border: none;
71
- padding: 0;
72
- height: 23px;
73
- &:focus{
74
- border-color: var(--color-gray-800);
75
- }
76
- }
77
- .arm-textfield__input_size_small{
78
- font-size: 14px;
79
- height: 20px;
80
- }
81
- .arm-textfield__input_label::placeholder{
82
- opacity: 0;
83
- }
84
- .arm-textfield_root_success{
85
- border-color: var(--color-success) !important;
86
- }
87
- .arm-textfield_root_error{
88
- border-color: var(--color-error-dark) !important;
89
- }
90
-
91
- .arm-textfield__label_small{
92
- font-size: 14px;
93
- }
94
- .arm-textfield__label{
95
- pointer-events: none;
96
- color: var(--color-gray-600);
97
- white-space: nowrap;
98
- position: absolute;
99
- top: 12px;
100
- padding-left: 12px;
101
- left: 1px;
102
- font-size: 16px;
103
- transition: 0.2s all ease;
104
- width: calc(100% - 2px);
105
- padding-top:8px;
106
- line-height: 1.2;
107
- }
108
- .arm-textfield__label_small{
109
- top: 4px;
110
- }
111
- .arm-textfield__label_focused{
112
- font-size: 12px;
113
- transform: none;
114
- top: 1px;
115
- &.arm-textfield__label_small{
116
- padding-top:4px
117
- }
118
- }
119
-
120
- .arm-textfield__input_outlined{
121
- border-left:none;
122
- border-top:none;
123
- border-right: none;
124
- padding-left: 0 !important;
125
- &:focus,
126
- &:hover{
127
- border-left:none;
128
- border-top:none;
129
- border-right: none;
130
- }
131
- border-radius: 0;
132
- & + .arm-textfield__label{
133
- left:0;
134
- }
135
- &:disabled{
136
- & + .arm-textfield__label{
137
- color: var(--color-gray-400);
138
- }
139
- }
140
- }
141
-
142
- //.arm-textfield__label_error{
143
- //}
144
- .arm-textfield__adornment{
145
- z-index: 5;
146
- height: 100%;
147
- padding-right: 10px;
148
- & > .arm-adornment{
149
- font-size: 0;
150
- }
151
- }
152
- .arm-textfield__helperText{
153
- margin-top: calc(var(--size-step) / 2);
154
- }
155
- .arm-textfield_disabled{
156
- & + .arm-textfield__helperText{
157
- color: var(--color-gray-600);
158
- }
159
- & .arm-textfield_outlined{
160
- & .arm-textfield__helperText{
161
- color: var(--color-gray-400);
162
- }
163
- }
164
- & .arm-textfield__icon{
165
- color: var(--color-gray-400);
166
- }
167
- }
168
-
169
- .arm-theme-dark {
170
- & .arm-textfield_root{
171
- background-color: var(--color-gray-700);
172
- border-color: var(--color-gray-600);
173
- &:hover{
174
- border-color: var(--color-gray-700);
175
- }
176
- &.arm-textfield_root_focused{
177
- border-color: var(--color-gray-200);
178
- }
179
- &.arm-textfield_root_disabled{
180
- border-color: transparent;
181
- }
182
- &.arm-textfield_root_error{
183
- border-color: var(--color-red-700) !important;
184
- }
185
- }
186
- & .arm-textfield__input{
187
- color: var(--color-gray-200)
188
- }
189
- & .arm-textfield__label{
190
- color: var(--color-gray-500)
191
- }
192
- .arm-helper-text_error {
193
- color: var(--color-red-700);
194
- }
195
- .arm-textfield__input::placeholder{
196
- color: var(--color-gray-500);
197
- }
198
- }
1
+ @use "variables" as v;
2
+
3
+ .arm-textfield_root{
4
+ position: relative;
5
+ overflow: hidden;
6
+ border-radius: var(--border-radius);
7
+ border: 1px solid var(--color-gray-400);
8
+ background-color: #fff;
9
+ height: var(--size-elarge);
10
+ @include v.flex();
11
+ &:hover{
12
+ border-color: var(--color-gray-600);
13
+ }
14
+ &.arm-textfield_root_focused{
15
+ border-color: var(--color-gray-800);
16
+ }
17
+ &.arm-textfield_root_disabled{
18
+ pointer-events: none;
19
+ background: var(--color-gray-100);
20
+ border-color: transparent;
21
+ & .arm-textfield__label{
22
+ color: var(--color-gray-600);
23
+ }
24
+ }
25
+ &_outlined{
26
+ border-top:none;
27
+ border-left: none;
28
+ border-right: none;
29
+ border-radius: 0;
30
+ }
31
+ }
32
+ .arm-textfield_root_size_small{
33
+ height: var(--size-large);
34
+ font-size: 14px;
35
+ }
36
+ .arm-textfield_root_outlined{
37
+ &.arm-textfield_root_disabled{
38
+ background: transparent;
39
+ border-bottom-style: dotted;
40
+ border-bottom-width: 1px;
41
+ border-bottom-color: var(--color-gray-100);
42
+ }
43
+ }
44
+ .arm-textfield__wrapper{
45
+ cursor: text;
46
+ position: relative;
47
+ padding: 10px 12px 8px;
48
+ width: 100%;
49
+ flex: 1 1 auto;
50
+ min-width: 0;
51
+ }
52
+ .arm-textfield__wrapper_label{
53
+ padding: 25px 12px 8px;
54
+ }
55
+ .arm-textfield__wrapper_size_small{
56
+ &.arm-textfield__wrapper_label{
57
+ padding: 18px 12px 4px
58
+ }
59
+ }
60
+ .arm-textfield__wrapper_outlined{
61
+ padding-left: 0 !important;
62
+ & .arm-textfield__label{
63
+ padding-left: 0;
64
+ }
65
+ }
66
+ .arm-textfield__input{
67
+ display: block;
68
+ width: 100%;
69
+ font-size: 16px;
70
+ outline: none;
71
+ background: transparent;
72
+ border: none;
73
+ padding: 0;
74
+ height: 23px;
75
+ &:focus{
76
+ border-color: var(--color-gray-800);
77
+ }
78
+ }
79
+ .arm-textfield__input_size_small{
80
+ font-size: 14px;
81
+ height: 20px;
82
+ }
83
+ .arm-textfield__input_label::placeholder{
84
+ opacity: 0;
85
+ }
86
+ .arm-textfield_root_success{
87
+ border-color: var(--color-success) !important;
88
+ }
89
+ .arm-textfield_root_error{
90
+ border-color: var(--color-error-dark) !important;
91
+ }
92
+
93
+ .arm-textfield__label_small{
94
+ font-size: 14px;
95
+ }
96
+ .arm-textfield__label{
97
+ pointer-events: none;
98
+ color: var(--color-gray-600);
99
+ white-space: nowrap;
100
+ position: absolute;
101
+ top: 12px;
102
+ padding-left: 12px;
103
+ left: 1px;
104
+ font-size: 16px;
105
+ transition: 0.2s all ease;
106
+ width: calc(100% - 2px);
107
+ padding-top:8px;
108
+ line-height: 1.2;
109
+ }
110
+ .arm-textfield__label_small{
111
+ top: 4px;
112
+ }
113
+ .arm-textfield__label_focused{
114
+ font-size: 12px;
115
+ transform: none;
116
+ top: 1px;
117
+ &.arm-textfield__label_small{
118
+ padding-top:4px
119
+ }
120
+ }
121
+
122
+ .arm-textfield__input_outlined{
123
+ border-left:none;
124
+ border-top:none;
125
+ border-right: none;
126
+ padding-left: 0 !important;
127
+ &:focus,
128
+ &:hover{
129
+ border-left:none;
130
+ border-top:none;
131
+ border-right: none;
132
+ }
133
+ border-radius: 0;
134
+ & + .arm-textfield__label{
135
+ left:0;
136
+ }
137
+ &:disabled{
138
+ & + .arm-textfield__label{
139
+ color: var(--color-gray-400);
140
+ }
141
+ }
142
+ }
143
+
144
+ //.arm-textfield__label_error{
145
+ //}
146
+ .arm-textfield__adornment{
147
+ flex-shrink: 0;
148
+ white-space: nowrap;
149
+ z-index: 5;
150
+ height: 100%;
151
+ padding-right: 10px;
152
+ & > .arm-adornment{
153
+ flex-shrink: 0;
154
+ white-space: inherit;
155
+ }
156
+ }
157
+ .arm-textfield__adornment_start{
158
+ padding-left: 10px;
159
+ }
160
+ .arm-textfield__helperText{
161
+ margin-top: calc(var(--size-step) / 2);
162
+ }
163
+ .arm-textfield_disabled{
164
+ & + .arm-textfield__helperText{
165
+ color: var(--color-gray-600);
166
+ }
167
+ & .arm-textfield_outlined{
168
+ & .arm-textfield__helperText{
169
+ color: var(--color-gray-400);
170
+ }
171
+ }
172
+ & .arm-textfield__icon{
173
+ color: var(--color-gray-400);
174
+ }
175
+ }
176
+
177
+ .arm-theme-dark {
178
+ & .arm-textfield_root{
179
+ background-color: var(--color-gray-700);
180
+ border-color: var(--color-gray-600);
181
+ &:hover{
182
+ border-color: var(--color-gray-700);
183
+ }
184
+ &.arm-textfield_root_focused{
185
+ border-color: var(--color-gray-200);
186
+ }
187
+ &.arm-textfield_root_disabled{
188
+ border-color: transparent;
189
+ }
190
+ &.arm-textfield_root_error{
191
+ border-color: var(--color-red-700) !important;
192
+ }
193
+ }
194
+ & .arm-textfield__input{
195
+ color: var(--color-gray-200)
196
+ }
197
+ & .arm-textfield__label{
198
+ color: var(--color-gray-500)
199
+ }
200
+ .arm-helper-text_error {
201
+ color: var(--color-red-700);
202
+ }
203
+ .arm-textfield__input::placeholder{
204
+ color: var(--color-gray-500);
205
+ }
206
+ }
package/assets/Tooltip.scss CHANGED
@@ -1,18 +1,18 @@
1
-
2
- .arm-tooltip{
3
- display: inline-block;
4
- position: relative;
5
- }
6
- .arm-tooltip__item{
7
- //position: absolute;
8
- padding: var(--size-step);
9
- border-radius: var(--border-radius);
10
- background: var(--color-gray-700);
11
- color: #fff;
12
- font-weight: 500;
13
- font-size: 12px;
14
- left: 50%;
15
- bottom: 100%;
16
- display: inline-flex;
17
- //transform: translateX(-50%);
1
+
2
+ .arm-tooltip{
3
+ display: inline-block;
4
+ position: relative;
5
+ }
6
+ .arm-tooltip__item{
7
+ //position: absolute;
8
+ padding: var(--size-step);
9
+ border-radius: var(--border-radius);
10
+ background: var(--color-gray-700);
11
+ color: #fff;
12
+ font-weight: 500;
13
+ font-size: 12px;
14
+ left: 50%;
15
+ bottom: 100%;
16
+ display: inline-flex;
17
+ //transform: translateX(-50%);
18
18
  }