armtek-uikit-react 1.0.266 → 1.0.267

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 (58) 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 -59
  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 -23
  42. package/assets/TextField.scss +209 -206
  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/hooks/useEnhancedEffect.js +6 -6
  52. package/lib/hooks/useTimeout.js +2 -2
  53. package/package.json +1 -1
  54. package/ui/Form/DateField/DateField.js +2 -2
  55. package/ui/Form/DatePicker/styles.css +802 -802
  56. package/ui/Form/TextField/TextField.d.ts +1 -0
  57. package/ui/Form/TextField/TextField.js +53 -1
  58. package/ui/Slider/style.scss +346 -346
package/assets/TextField.scss CHANGED
@@ -1,206 +1,209 @@
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
- }
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_noTransition {
111
+ transition: none;
112
+ }
113
+ .arm-textfield__label_small {
114
+ top: 4px;
115
+ }
116
+ .arm-textfield__label_focused {
117
+ font-size: 12px;
118
+ transform: none;
119
+ top: 1px;
120
+ &.arm-textfield__label_small {
121
+ padding-top: 4px;
122
+ }
123
+ }
124
+
125
+ .arm-textfield__input_outlined {
126
+ border-left: none;
127
+ border-top: none;
128
+ border-right: none;
129
+ padding-left: 0 !important;
130
+ &:focus,
131
+ &:hover {
132
+ border-left: none;
133
+ border-top: none;
134
+ border-right: none;
135
+ }
136
+ border-radius: 0;
137
+ & + .arm-textfield__label {
138
+ left: 0;
139
+ }
140
+ &:disabled {
141
+ & + .arm-textfield__label {
142
+ color: var(--color-gray-400);
143
+ }
144
+ }
145
+ }
146
+
147
+ //.arm-textfield__label_error{
148
+ //}
149
+ .arm-textfield__adornment {
150
+ flex-shrink: 0;
151
+ white-space: nowrap;
152
+ z-index: 5;
153
+ height: 100%;
154
+ padding-right: 10px;
155
+ & > .arm-adornment {
156
+ flex-shrink: 0;
157
+ white-space: inherit;
158
+ }
159
+ }
160
+ .arm-textfield__adornment_start {
161
+ padding-left: 10px;
162
+ }
163
+ .arm-textfield__helperText {
164
+ margin-top: calc(var(--size-step) / 2);
165
+ }
166
+ .arm-textfield_disabled {
167
+ & + .arm-textfield__helperText {
168
+ color: var(--color-gray-600);
169
+ }
170
+ & .arm-textfield_outlined {
171
+ & .arm-textfield__helperText {
172
+ color: var(--color-gray-400);
173
+ }
174
+ }
175
+ & .arm-textfield__icon {
176
+ color: var(--color-gray-400);
177
+ }
178
+ }
179
+
180
+ .arm-theme-dark {
181
+ & .arm-textfield_root {
182
+ background-color: var(--color-gray-700);
183
+ border-color: var(--color-gray-600);
184
+ &:hover {
185
+ border-color: var(--color-gray-700);
186
+ }
187
+ &.arm-textfield_root_focused {
188
+ border-color: var(--color-gray-200);
189
+ }
190
+ &.arm-textfield_root_disabled {
191
+ border-color: transparent;
192
+ }
193
+ &.arm-textfield_root_error {
194
+ border-color: var(--color-red-700) !important;
195
+ }
196
+ }
197
+ & .arm-textfield__input {
198
+ color: var(--color-gray-200);
199
+ }
200
+ & .arm-textfield__label {
201
+ color: var(--color-gray-500);
202
+ }
203
+ .arm-helper-text_error {
204
+ color: var(--color-red-700);
205
+ }
206
+ .arm-textfield__input::placeholder {
207
+ color: var(--color-gray-500);
208
+ }
209
+ }
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
  }