@acorex/styles 5.0.37 → 5.0.41

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 (28) hide show
  1. package/package.json +1 -1
  2. package/src/components/_button.scss +1 -1
  3. package/src/components/_calendar.scss +3 -0
  4. package/src/components/_checkbox.scss +16 -3
  5. package/src/components/_dropdown.scss +9 -7
  6. package/src/components/_editor-container.scss +47 -10
  7. package/src/components/_fieldset.scss +8 -0
  8. package/src/components/_form.scss +1 -1
  9. package/src/components/_input.scss +2 -7
  10. package/src/components/_list.scss +3 -5
  11. package/src/components/_loading.scss +5 -0
  12. package/src/components/_numberbox.scss +17 -0
  13. package/src/components/_popup.scss +41 -28
  14. package/src/components/_switch copy.scss +185 -0
  15. package/src/components/_switch.scss +145 -304
  16. package/src/components/_tabs.scss +1 -1
  17. package/src/components/index.scss +2 -0
  18. package/src/icons/demo-files/demo.css +152 -152
  19. package/src/icons/demo-files/demo.js +30 -30
  20. package/src/icons/demo.html +458 -458
  21. package/src/icons/fonts/acorex-icon.svg +39 -39
  22. package/src/icons/style.css +116 -116
  23. package/src/icons/style.scss +179 -179
  24. package/src/icons/variables.scss +34 -34
  25. package/src/images/fill-loading.svg +10 -0
  26. package/src/images/loading.svg +8 -0
  27. package/src/utility/_mixins.scss +6 -5
  28. package/src/variables/_colors.scss +12 -12
package/src/components/_switch.scss CHANGED
@@ -1,346 +1,187 @@
1
1
  @layer components {
2
+ ax-switch,
2
3
  .ax-switch {
3
- width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
4
- height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
5
- @apply ax-relative ax-inline-block;
6
- input {
7
- @apply ax-w-0 ax-h-0 ax-opacity-0;
8
- }
9
-
10
- .ax-switch-slider {
11
- @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
12
- @include control-dark("editor");
13
- -webkit-transition: 0.4s;
14
- transition: 0.4s;
15
- &::before {
16
- @apply ax-absolute ax-bg-white ax-rounded-full;
17
- content: "";
18
- width: 35%;
19
- padding-bottom: 35%;
20
- left: 7%;
21
- top: 50%;
22
- transform: translate(0, -50%);
23
- -webkit-transition: 0.4s;
24
- transition: 0.4s;
4
+ button {
5
+ @apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 ax-text-light-fore ax-transition-all;
6
+ min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
7
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
8
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
9
+ &.ax-switch-checked {
10
+ @apply ax-bg-primary-500;
11
+ .ax-switch-handle {
12
+ @apply ax-right-0.5;
13
+ left: initial;
14
+ }
15
+ .ax-switch-inner {
16
+ @apply ax-text-primary-fore;
17
+ margin-inline-end: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
18
+ margin-inline-start: var(--ax-base-size);
19
+ }
25
20
  }
26
- }
27
-
28
- input:checked + .ax-switch-slider {
29
- @apply ax-bg-primary-500;
30
- }
31
-
32
- input:focus + .ax-switch-slider {
33
- @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
34
- }
35
-
36
- input:checked + .ax-switch-slider:before {
37
- -webkit-transform: translate(140%, -50%);
38
- -ms-transform: translate(140%, -50%);
39
- transform: translate(140%, -50%);
40
- }
41
-
42
- &.ax-state-disabled {
43
- .ax-switch-slider {
44
- background-color: rgb(var(--ax-color-disabled)) !important;
45
- @apply ax-cursor-not-allowed ax-border-transparent;
46
- &:after {
47
- @apply ax-border-transparent;
21
+ .ax-switch-handle {
22
+ width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
23
+ height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
24
+ @apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
25
+ ax-loading {
26
+ transform: translateY(-50%);
27
+ @apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
28
+ svg {
29
+ @apply ax-fill-primary-500 ax-stroke-primary-500;
30
+ }
48
31
  }
49
- &:hover {
50
- @apply ax-border-transparent;
32
+ &:before {
33
+ @apply ax-absolute ax-bg-white ax-transition-all ax-rounded-full;
34
+ content: "";
51
35
  }
52
36
  }
53
- }
54
- &.ax-state-readonly {
55
- .ax-switch-slider {
56
- opacity: 0.6;
57
- @apply ax-cursor-not-allowed;
37
+ .ax-switch-inner {
38
+ @apply ax-block;
39
+ margin-inline-start: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 4px);
40
+ margin-inline-end: var(--ax-base-size);
41
+ transition: margin 0.2s;
58
42
  }
59
43
  }
60
-
61
- &.ax-success {
62
- > input {
63
- &:checked {
64
- & + .ax-switch-slider {
65
- background-color: rgb(var(--ax-color-success));
44
+ &.ax-primary {
45
+ button {
46
+ &.ax-switch-checked {
47
+ @apply ax-bg-primary-500;
48
+ .ax-switch-inner {
49
+ @apply ax-text-primary-fore;
50
+ }
51
+ }
52
+ .ax-switch-handle {
53
+ ax-loading {
54
+ svg {
55
+ @apply ax-fill-primary-500 ax-stroke-primary-500;
56
+ }
66
57
  }
67
58
  }
68
- }
69
- input:focus ~ .ax-switch-slider {
70
- @apply ax-ring-success-500;
71
59
  }
72
60
  }
73
61
  &.ax-secondary {
74
- > input {
75
- &:checked {
76
- & + .ax-switch-slider {
77
- background-color: rgb(var(--ax-color-secondary));
62
+ button {
63
+ &.ax-switch-checked {
64
+ @apply ax-bg-secondary-500;
65
+ .ax-switch-inner {
66
+ @apply ax-text-secondary-fore;
67
+ }
68
+ }
69
+ .ax-switch-handle {
70
+ ax-loading {
71
+ svg {
72
+ @apply ax-fill-secondary-500 ax-stroke-secondary-500;
73
+ }
78
74
  }
79
75
  }
80
- }
81
- input:focus ~ .ax-switch-slider {
82
- @apply ax-ring-secondary-500;
83
76
  }
84
77
  }
85
- &.ax-danger {
86
- > input {
87
- &:checked {
88
- & + .ax-switch-slider {
89
- background-color: rgb(var(--ax-color-danger));
78
+ &.ax-success {
79
+ button {
80
+ &.ax-switch-checked {
81
+ @apply ax-bg-success-500;
82
+ .ax-switch-inner {
83
+ @apply ax-text-success-fore;
84
+ }
85
+ }
86
+ .ax-switch-handle {
87
+ ax-loading {
88
+ svg {
89
+ @apply ax-fill-success-500 ax-stroke-success-500;
90
+ }
90
91
  }
91
92
  }
92
- }
93
- input:focus ~ .ax-switch-slider {
94
- @apply ax-ring-danger-500;
95
93
  }
96
94
  }
97
95
  &.ax-warning {
98
- > input {
99
- &:checked {
100
- & + .ax-switch-slider {
101
- background-color: rgb(var(--ax-color-warning));
96
+ button {
97
+ &.ax-switch-checked {
98
+ @apply ax-bg-warning-500;
99
+ .ax-switch-inner {
100
+ @apply ax-text-warning-fore;
101
+ }
102
+ }
103
+ .ax-switch-handle {
104
+ ax-loading {
105
+ svg {
106
+ @apply ax-fill-warning-500 ax-stroke-warning-500;
107
+ }
102
108
  }
103
109
  }
104
- }
105
- input:focus ~ .ax-switch-slider {
106
- @apply ax-ring-warning-500;
107
110
  }
108
111
  }
109
- &.ax-info {
110
- > input {
111
- &:checked {
112
- & + .ax-switch-slider {
113
- background-color: rgb(var(--ax-color-info));
112
+ &.ax-danger {
113
+ button {
114
+ &.ax-switch-checked {
115
+ @apply ax-bg-danger-500;
116
+ .ax-switch-inner {
117
+ @apply ax-text-danger-fore;
118
+ }
119
+ }
120
+ .ax-switch-handle {
121
+ ax-loading {
122
+ svg {
123
+ @apply ax-fill-danger-500 ax-stroke-danger-500;
124
+ }
114
125
  }
115
126
  }
116
- }
117
- input:focus ~ .ax-switch-slider {
118
- @apply ax-ring-info-500;
119
127
  }
120
128
  }
121
- &.ax-light {
122
- > input {
123
- &:checked {
124
- & + .ax-switch-slider {
125
- background-color: rgb(var(--ax-color-light));
129
+ &.ax-info {
130
+ button {
131
+ &.ax-switch-checked {
132
+ @apply ax-bg-info-500;
133
+ .ax-switch-inner {
134
+ @apply ax-text-info-fore;
135
+ }
136
+ }
137
+ .ax-switch-handle {
138
+ ax-loading {
139
+ svg {
140
+ @apply ax-fill-info-500 ax-stroke-info-500;
141
+ }
126
142
  }
127
143
  }
128
- }
129
- input:focus ~ .ax-switch-slider {
130
- @apply ax-ring-light-500;
131
144
  }
132
145
  }
133
146
  &.ax-dark {
134
- > input {
135
- &:checked {
136
- & + .ax-switch-slider {
137
- background-color: rgb(var(--ax-color-dark));
147
+ button {
148
+ &.ax-switch-checked {
149
+ @apply ax-bg-dark-500;
150
+ .ax-switch-inner {
151
+ @apply ax-text-dark-fore;
152
+ }
153
+ }
154
+ .ax-switch-handle {
155
+ ax-loading {
156
+ svg {
157
+ @apply ax-fill-dark-500 ax-stroke-dark-500;
158
+ }
138
159
  }
139
160
  }
140
161
  }
141
- input:focus ~ .ax-switch-slider {
142
- @apply ax-ring-dark-500;
162
+ }
163
+ &.ax-light {
164
+ button {
165
+ &.ax-switch-checked {
166
+ @apply ax-bg-light-500;
167
+ .ax-switch-inner {
168
+ @apply ax-text-light-fore;
169
+ }
170
+ }
171
+ .ax-switch-handle {
172
+ ax-loading {
173
+ svg {
174
+ @apply ax-fill-light-500 ax-stroke-light-500;
175
+ }
176
+ }
177
+ }
143
178
  }
144
179
  }
180
+ .ax-state-disabled {
181
+ @apply ax-opacity-60 ax-cursor-not-allowed #{!important};
182
+ }
183
+ .ax-state-readonly {
184
+ @apply ax-opacity-75 #{!important};
185
+ }
145
186
  }
146
-
147
- // .ax-switch {
148
- // position: relative;
149
- // display: block;
150
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 7px);
151
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 15px);
152
- // margin: 5px;
153
- // >input {
154
- // opacity: 0;
155
- // width: 0;
156
- // height: 0;
157
- // &:checked {
158
- // &+.ax-switch-slider {
159
- // background-color: rgb(var(--ax-color-primary));
160
-
161
- // &::before {
162
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
163
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
164
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 18px));
165
- // }
166
- // }
167
- // }
168
- // }
169
- // .ax-switch-slider {
170
- // position: absolute;
171
- // cursor: pointer;
172
- // top: 0;
173
- // left: 0;
174
- // right: 0;
175
- // bottom: 0;
176
- // -webkit-transition: 0.2s;
177
- // transition: 0.2s;
178
- // border-radius: 25px;
179
- // @apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
180
- // &::before {
181
- // content: "";
182
- // position: absolute;
183
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
184
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
185
- // left: 3px;
186
- // bottom: 3px;
187
- // background-color: white;
188
- // -webkit-transition: 0.2s;
189
- // transition: 0.2s;
190
- // border-radius: 50%;
191
- // }
192
- // }
193
- // input:focus~.ax-switch-slider {
194
- // @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
195
- // }
196
- // &.ax-sm {
197
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
198
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 21px);
199
- // >input {
200
- // &:checked {
201
- // &+.ax-switch-slider {
202
- // &::before {
203
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
204
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
205
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 25px));
206
- // }
207
- // }
208
- // }
209
- // }
210
- // .ax-switch-slider {
211
- // &::before {
212
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
213
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 27px);
214
- // }
215
- // }
216
- // }
217
- // &.ax-lg {
218
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) + 20px);
219
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 5px);
220
- // >input {
221
- // &:checked {
222
- // &+.ax-switch-slider {
223
- // &::before {
224
- // -webkit-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
225
- // -ms-transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
226
- // transform: translateX(calc(var(--ax-base-size) * var(--ax-base-ratio) - 16px));
227
- // }
228
- // }
229
- // }
230
- // }
231
- // .ax-switch-slider {
232
- // &::before {
233
- // height: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
234
- // width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 11px);
235
- // }
236
- // }
237
- // }
238
- // &.ax-state-error {
239
- // .ax-switch-slider {
240
- // @apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
241
- // }
242
- // }
243
- // &.ax-state-disabled {
244
- // .ax-switch-slider {
245
- // background-color: rgb(var(--ax-color-disabled)) !important;
246
- // @apply ax-cursor-not-allowed ax-border-transparent;
247
- // &:after {
248
- // @apply ax-border-transparent;
249
- // }
250
- // &:hover {
251
- // @apply ax-border-transparent;
252
- // }
253
- // }
254
- // }
255
- // &.ax-state-readonly {
256
- // .ax-switch-slider {
257
- // opacity: 0.6;
258
- // @apply ax-cursor-not-allowed;
259
- // }
260
- // }
261
- // &.ax-success {
262
- // >input {
263
- // &:checked {
264
- // &+.ax-switch-slider {
265
- // background-color: rgb(var(--ax-color-success));
266
- // }
267
- // }
268
- // }
269
- // input:focus~.ax-switch-slider {
270
- // @apply ax-ring-success-500;
271
- // }
272
- // }
273
- // &.ax-secondary {
274
- // >input {
275
- // &:checked {
276
- // &+.ax-switch-slider {
277
- // background-color: rgb(var(--ax-color-secondary));
278
- // }
279
- // }
280
- // }
281
- // input:focus~.ax-switch-slider {
282
- // @apply ax-ring-secondary-500;
283
- // }
284
- // }
285
- // &.ax-danger {
286
- // >input {
287
- // &:checked {
288
- // &+.ax-switch-slider {
289
- // background-color: rgb(var(--ax-color-danger));
290
- // }
291
- // }
292
- // }
293
- // input:focus~.ax-switch-slider {
294
- // @apply ax-ring-danger-500;
295
- // }
296
- // }
297
- // &.ax-warning {
298
- // >input {
299
- // &:checked {
300
- // &+.ax-switch-slider {
301
- // background-color: rgb(var(--ax-color-warning));
302
- // }
303
- // }
304
- // }
305
- // input:focus~.ax-switch-slider {
306
- // @apply ax-ring-warning-500;
307
- // }
308
- // }
309
- // &.ax-info {
310
- // >input {
311
- // &:checked {
312
- // &+.ax-switch-slider {
313
- // background-color: rgb(var(--ax-color-info));
314
- // }
315
- // }
316
- // }
317
- // input:focus~.ax-switch-slider {
318
- // @apply ax-ring-info-500;
319
- // }
320
- // }
321
- // &.ax-light {
322
- // >input {
323
- // &:checked {
324
- // &+.ax-switch-slider {
325
- // background-color: rgb(var(--ax-color-light));
326
- // }
327
- // }
328
- // }
329
- // input:focus~.ax-switch-slider {
330
- // @apply ax-ring-light-500;
331
- // }
332
- // }
333
- // &.ax-dark {
334
- // >input {
335
- // &:checked {
336
- // &+.ax-switch-slider {
337
- // background-color: rgb(var(--ax-color-dark));
338
- // }
339
- // }
340
- // }
341
- // input:focus~.ax-switch-slider {
342
- // @apply ax-ring-dark-500;
343
- // }
344
- // }
345
- // }
346
187
  }
package/src/components/_tabs.scss CHANGED
@@ -119,7 +119,7 @@
119
119
  }
120
120
 
121
121
  &.ax-state-active {
122
- @apply ax-bg-light-300 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
122
+ @apply ax-bg-light-200 ax-text-light-fore dark:ax-text-light-50 dark:ax-bg-light-600;
123
123
  }
124
124
  }
125
125
  }
package/src/components/index.scss CHANGED
@@ -10,10 +10,12 @@
10
10
  @import "./drawer";
11
11
  @import "./dropdown";
12
12
  @import "./editor-container";
13
+ @import "./fieldset";
13
14
  @import "./form";
14
15
  @import "./input";
15
16
  @import "./label";
16
17
  @import "./list";
18
+ @import "./numberbox";
17
19
  @import "./loading";
18
20
  @import "./popup";
19
21
  @import "./radio";