armtek-uikit-react 1.0.240 → 1.0.242

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 (61) 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 +104 -104
  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 +72 -72
  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 -19
  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 +37 -37
  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.scss +46 -46
  48. package/assets/variables.scss +13 -13
  49. package/lib/hooks/useEnhancedEffect.js +6 -6
  50. package/lib/hooks/useTimeout.js +2 -2
  51. package/package.json +1 -1
  52. package/ui/Form/DatePicker/styles.css +802 -802
  53. package/ui/Form/FormControls/FormControls.js +2 -1
  54. package/ui/Form/FormControls/const.d.ts +1 -0
  55. package/ui/Form/FormControls/const.js +5 -0
  56. package/ui/Form/Select/Select.js +8 -4
  57. package/ui/Modal/BaseModal.js +3 -2
  58. package/ui/Modal/Modal.js +24 -0
  59. package/ui/Modal/const.d.ts +2 -0
  60. package/ui/Modal/const.js +6 -0
  61. package/ui/Slider/style.scss +346 -346
package/assets/TextField.scss CHANGED
@@ -1,198 +1,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
- }
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
- }
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
198
  }
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
  }