@acorex/styles 5.5.0 → 5.6.0

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 (27) hide show
  1. package/package.json +1 -1
  2. package/src/base/index.scss +0 -1
  3. package/src/components/_alert.scss +25 -9
  4. package/src/components/_button.scss +290 -82
  5. package/src/components/_collapse.scss +5 -4
  6. package/src/components/_color-palette.scss +64 -9
  7. package/src/components/_data-table.scss +16 -0
  8. package/src/components/_decoration.scss +0 -3
  9. package/src/components/_dialog.scss +2 -2
  10. package/src/components/_drawer.scss +9 -5
  11. package/src/components/_dropdown.scss +4 -0
  12. package/src/components/_editor-container.scss +4 -4
  13. package/src/components/_list.scss +4 -0
  14. package/src/components/_popup.scss +4 -0
  15. package/src/components/_tabs.scss +9 -5
  16. package/src/components/index.scss +2 -1
  17. package/src/icons/demo.html +43 -1
  18. package/src/icons/fonts/acorex-icon.eot +0 -0
  19. package/src/icons/fonts/acorex-icon.svg +3 -0
  20. package/src/icons/fonts/acorex-icon.ttf +0 -0
  21. package/src/icons/fonts/acorex-icon.woff +0 -0
  22. package/src/icons/selection.json +1 -1
  23. package/src/icons/style.css +14 -5
  24. package/src/icons/style.scss +20 -5
  25. package/src/icons/variables.scss +3 -0
  26. package/src/utility/_mixins.scss +9 -2
  27. package/src/utility/index.scss +7 -0
package/src/components/_button.scss CHANGED
@@ -1,85 +1,91 @@
1
1
  @layer components {
2
2
  ax-button {
3
+ @apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-border-light-300 ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
3
4
  height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
4
5
  line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
5
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-base ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
6
- @screen md {
7
- @apply ax-text-sm;
6
+
7
+ &>button {
8
+ @apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
9
+ &:focus,
10
+ &:focus-visible {
11
+ @apply ax-outline-none ax-z-10;
12
+ outline:none;
13
+ }
14
+ }
15
+ &:focus,
16
+ &:focus-visible {
17
+ @apply ax-outline-none ax-z-10;
18
+ outline:none;
8
19
  }
9
20
  ax-prefix {
10
21
  @apply ax-flex ax-flex-row ax-pe-2;
11
22
  }
23
+
12
24
  ax-suffix {
13
25
  @apply ax-flex ax-flex-row ax-ps-2;
14
26
  }
27
+
15
28
  .ax-badge {
16
29
  @apply ax-text-xs;
17
30
  }
18
- &:focus {
19
- @apply ax-outline-none ax-z-10;
20
- }
31
+
21
32
  &.ax-rounded {
22
33
  @apply ax-rounded-full;
23
34
  }
35
+
24
36
  &.ax-button-icon {
25
37
  width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
26
- @apply ax-px-3;
38
+ &>button{
39
+ @apply ax-px-3;
40
+ }
27
41
 
28
42
  ax-prefix,
29
43
  ax-suffix {
30
44
  @apply ax-p-0;
31
45
  }
46
+
32
47
  ax-icon {
33
48
  @apply ax-text-base;
34
49
  }
35
50
  }
36
- // &.ax-sm {
37
- // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
38
- // line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
39
- // @apply ax-text-sm;
40
- // .ax-ic {
41
- // @apply ax-text-sm;
42
- // }
43
- // }
44
- // &.ax-lg {
45
- // height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
46
- // line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
47
- // @apply ax-text-lg;
48
- // &.ax-button-icon {
49
- // @apply ax-px-3;
50
- // }
51
- // .ax-ic {
52
- // @apply ax-text-3xl;
53
- // }
54
- // }
51
+
55
52
  ax-loading-spinner {
56
53
  @apply ax-flex ax-pe-1;
54
+
57
55
  svg {
58
56
  width: calc(var(--ax-base-size) * 3);
59
57
  height: calc(var(--ax-base-size) * 3);
60
58
  @apply ax-fill-current;
61
59
  }
62
60
  }
61
+
63
62
  // states
64
63
  &.ax-state-selected {
65
64
  @apply ax-z-10;
66
65
  }
66
+
67
67
  &.ax-state-loading {
68
68
  @apply ax-cursor-not-allowed;
69
69
  }
70
+
70
71
  &.ax-state-disabled {
71
72
  @apply ax-cursor-not-allowed ax-opacity-60;
72
73
  }
74
+
73
75
  // normal
74
76
  &.ax-primary-default {
75
77
  @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
78
+
76
79
  &:not(.ax-state-disabled) {
77
80
  &:hover {
78
81
  @apply ax-bg-primary-600;
79
82
  }
80
- &:focus {
83
+
84
+ &:focus,
85
+ &:focus-within {
81
86
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
82
87
  }
88
+
83
89
  &:active {
84
90
  @apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
85
91
  }
@@ -89,15 +95,20 @@
89
95
  @apply ax-bg-primary-700;
90
96
  }
91
97
  }
98
+
92
99
  &.ax-secondary-default {
93
100
  @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
101
+
94
102
  &:not(.ax-state-disabled) {
95
103
  &:hover {
96
104
  @apply ax-bg-secondary-600;
97
105
  }
98
- &:focus {
106
+
107
+ &:focus,
108
+ &:focus-within {
99
109
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
100
110
  }
111
+
101
112
  &:active {
102
113
  @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
103
114
  }
@@ -107,15 +118,20 @@
107
118
  @apply ax-bg-secondary-700;
108
119
  }
109
120
  }
121
+
110
122
  &.ax-warning-default {
111
123
  @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
124
+
112
125
  &:not(.ax-state-disabled) {
113
126
  &:hover {
114
127
  @apply ax-bg-warning-400;
115
128
  }
116
- &:focus {
129
+
130
+ &:focus,
131
+ &:focus-within {
117
132
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
118
133
  }
134
+
119
135
  &:active {
120
136
  @apply ax-bg-warning-600 ax-text-warning-fore ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
121
137
  }
@@ -125,15 +141,20 @@
125
141
  @apply ax-bg-warning-700 ax-text-warning-50;
126
142
  }
127
143
  }
144
+
128
145
  &.ax-danger-default {
129
146
  @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
147
+
130
148
  &:not(.ax-state-disabled) {
131
149
  &:hover {
132
150
  @apply ax-bg-danger-600;
133
151
  }
134
- &:focus {
152
+
153
+ &:focus,
154
+ &:focus-within {
135
155
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
136
156
  }
157
+
137
158
  &:active {
138
159
  @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
139
160
  }
@@ -143,15 +164,20 @@
143
164
  @apply ax-bg-danger-700;
144
165
  }
145
166
  }
167
+
146
168
  &.ax-success-default {
147
169
  @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
170
+
148
171
  &:not(.ax-state-disabled) {
149
172
  &:hover {
150
173
  @apply ax-bg-success-600;
151
174
  }
152
- &:focus {
175
+
176
+ &:focus,
177
+ &:focus-within {
153
178
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
154
179
  }
180
+
155
181
  &:active {
156
182
  @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
157
183
  }
@@ -161,15 +187,20 @@
161
187
  @apply ax-bg-success-700;
162
188
  }
163
189
  }
190
+
164
191
  &.ax-info-default {
165
192
  @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
193
+
166
194
  &:not(.ax-state-disabled) {
167
195
  &:hover {
168
196
  @apply ax-bg-info-600;
169
197
  }
170
- &:focus {
198
+
199
+ &:focus,
200
+ &:focus-within {
171
201
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
172
202
  }
203
+
173
204
  &:active {
174
205
  @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
175
206
  }
@@ -179,15 +210,20 @@
179
210
  @apply ax-bg-info-700;
180
211
  }
181
212
  }
213
+
182
214
  &.ax-dark-default {
183
215
  @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-400;
216
+
184
217
  &:not(.ax-state-disabled) {
185
218
  &:hover {
186
219
  @apply ax-bg-dark-400 dark:ax-bg-dark-400;
187
220
  }
188
- &:focus {
221
+
222
+ &:focus,
223
+ &:focus-within {
189
224
  @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
190
225
  }
226
+
191
227
  &:active {
192
228
  @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-300 dark:ax-bg-dark-300;
193
229
  }
@@ -197,17 +233,22 @@
197
233
  @apply ax-bg-dark-300;
198
234
  }
199
235
  }
236
+
200
237
  &.ax-light-default {
201
238
  @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300 dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
239
+
202
240
  &:not(.ax-state-disabled) {
203
241
  &:hover {
204
242
  @apply ax-bg-light-100 dark:ax-bg-light-600;
205
243
  }
206
- &:focus {
207
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
244
+
245
+ &:focus,
246
+ &:focus-within {
247
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-bg-light-500 dark:ax-ring-light-500;
208
248
  }
249
+
209
250
  &:active {
210
- @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200 dark:ax-bg-light-500 dark:ax-ring-light-500;
251
+ @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-bg-light-500 dark:ax-ring-light-500;
211
252
  }
212
253
  }
213
254
 
@@ -215,128 +256,168 @@
215
256
  @apply ax-bg-light-600 ax-text-light-50;
216
257
  }
217
258
  }
259
+
218
260
  // twotone
219
261
  &.ax-primary-twotone {
220
262
  @apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-300 dark:ax-text-primary-700;
263
+
221
264
  &:not(.ax-state-disabled) {
265
+
222
266
  &:hover,
223
- &:focus {
267
+ &:focus,
268
+ &:focus-within {
224
269
  @apply ax-bg-primary-200 ax-text-primary-700;
225
270
  }
271
+
226
272
  &:active {
227
273
  @apply ax-bg-primary-300 ax-text-primary-700;
228
274
  }
229
275
  }
230
276
 
231
277
  &.ax-state-selected {
232
- @apply ax-bg-primary-200 ax-text-primary-700;
278
+ @apply ax-bg-primary-300 ax-text-primary-700;
233
279
  }
234
280
  }
281
+
235
282
  &.ax-secondary-twotone {
236
283
  @apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-300 dark:ax-text-secondary-700;
284
+
237
285
  &:not(.ax-state-disabled) {
286
+
238
287
  &:hover,
239
- &:focus {
288
+ &:focus,
289
+ &:focus-within {
240
290
  @apply ax-bg-secondary-200 ax-text-secondary-700;
241
291
  }
292
+
242
293
  &:active {
243
294
  @apply ax-bg-secondary-300 ax-text-secondary-700;
244
295
  }
245
296
  }
246
297
 
247
298
  &.ax-state-selected {
248
- @apply ax-bg-secondary-200 ax-text-secondary-700;
299
+ @apply ax-bg-secondary-300 ax-text-secondary-700;
249
300
  }
250
301
  }
302
+
251
303
  &.ax-warning-twotone {
252
304
  @apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-300 dark:ax-text-warning-fore;
305
+
253
306
  &:not(.ax-state-disabled) {
307
+
254
308
  &:hover,
255
- &:focus {
309
+ &:focus,
310
+ &:focus-within {
256
311
  @apply ax-bg-warning-200 ax-text-warning-fore;
257
312
  }
313
+
258
314
  &:active {
259
315
  @apply ax-bg-warning-300 ax-text-warning-fore;
260
316
  }
261
317
  }
262
318
 
263
319
  &.ax-state-selected {
264
- @apply ax-bg-warning-200 ax-text-warning-fore;
320
+ @apply ax-bg-warning-300 ax-text-warning-fore;
265
321
  }
266
322
  }
323
+
267
324
  &.ax-danger-twotone {
268
325
  @apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
326
+
269
327
  &:not(.ax-state-disabled) {
328
+
270
329
  &:hover,
271
- &:focus {
330
+ &:focus,
331
+ &:focus-within {
272
332
  @apply ax-bg-danger-200 ax-text-danger-700;
273
333
  }
334
+
274
335
  &:active {
275
336
  @apply ax-bg-danger-300 ax-text-danger-700;
276
337
  }
277
338
  }
278
339
 
279
340
  &.ax-state-selected {
280
- @apply ax-bg-danger-200 ax-text-danger-700;
341
+ @apply ax-bg-danger-300 ax-text-danger-700;
281
342
  }
282
343
  }
344
+
283
345
  &.ax-success-twotone {
284
346
  @apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-300 dark:ax-text-success-700;
347
+
285
348
  &:not(.ax-state-disabled) {
349
+
286
350
  &:hover,
287
- &:focus {
351
+ &:focus,
352
+ &:focus-within {
288
353
  @apply ax-bg-success-200 ax-text-success-700;
289
354
  }
355
+
290
356
  &:active {
291
357
  @apply ax-bg-success-300 ax-text-success-700;
292
358
  }
293
359
  }
294
360
 
295
361
  &.ax-state-selected {
296
- @apply ax-bg-success-200 ax-text-success-700;
362
+ @apply ax-bg-success-300 ax-text-success-700;
297
363
  }
298
364
  }
365
+
299
366
  &.ax-info-twotone {
300
367
  @apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-300 dark:ax-text-info-700;
368
+
301
369
  &:not(.ax-state-disabled) {
370
+
302
371
  &:hover,
303
- &:focus {
372
+ &:focus,
373
+ &:focus-within {
304
374
  @apply ax-bg-info-200 ax-text-info-700;
305
375
  }
376
+
306
377
  &:active {
307
378
  @apply ax-bg-info-300 ax-text-info-700;
308
379
  }
309
380
  }
310
381
 
311
382
  &.ax-state-selected {
312
- @apply ax-bg-info-200 ax-text-primary-700;
383
+ @apply ax-bg-info-300 ax-text-primary-700;
313
384
  }
314
385
  }
386
+
315
387
  &.ax-dark-twotone {
316
388
  @apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
389
+
317
390
  &:not(.ax-state-disabled) {
318
- &:hover {
319
- }
320
- &:focus {
391
+ &:hover {}
392
+
393
+ &:focus,
394
+ &:focus-within {
321
395
  @apply ax-bg-dark-100 ax-text-dark-700;
322
396
  }
397
+
323
398
  &:active {
324
399
  @apply ax-bg-dark-200 ax-text-dark-700;
325
400
  }
401
+
326
402
  &.ax-state-selected {
327
- @apply ax-bg-dark-200 ax-text-dark-fore;
403
+ @apply ax-bg-dark-300 ax-text-dark-fore;
328
404
  }
329
405
  }
330
406
  }
407
+
331
408
  &.ax-light-twotone {
332
- @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent dark:ax-bg-light-300 dark:ax-text-light-700;
409
+ @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent dark:ax-bg-light-300 dark:ax-text-light-700;
410
+
333
411
  &:not(.ax-state-disabled) {
334
412
  &:hover {
335
413
  @apply ax-bg-light-300;
336
414
  }
337
- &:focus {
415
+
416
+ &:focus,
417
+ &:focus-within {
338
418
  @apply ax-bg-light-200;
339
419
  }
420
+
340
421
  &:active {
341
422
  @apply ax-bg-light-300;
342
423
  }
@@ -346,14 +427,19 @@
346
427
  @apply ax-bg-light-400;
347
428
  }
348
429
  }
430
+
349
431
  // outline
350
432
  &.ax-primary-outline {
351
433
  @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
434
+
352
435
  &:not(.ax-state-disabled) {
436
+
353
437
  &:hover,
354
- &:focus {
438
+ &:focus,
439
+ &:focus-within {
355
440
  @apply ax-bg-primary-500 ax-border-primary-500 ax-text-primary-fore;
356
441
  }
442
+
357
443
  &:active {
358
444
  @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
359
445
  }
@@ -363,13 +449,18 @@
363
449
  @apply ax-bg-primary-500 ax-text-primary-fore;
364
450
  }
365
451
  }
452
+
366
453
  &.ax-secondary-outline {
367
454
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
455
+
368
456
  &:not(.ax-state-disabled) {
457
+
369
458
  &:hover,
370
- &:focus {
459
+ &:focus,
460
+ &:focus-within {
371
461
  @apply ax-bg-secondary-500 ax-border-secondary-500 ax-text-secondary-fore;
372
462
  }
463
+
373
464
  &:active {
374
465
  @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
375
466
  }
@@ -379,13 +470,18 @@
379
470
  @apply ax-bg-secondary-500 ax-text-secondary-fore;
380
471
  }
381
472
  }
473
+
382
474
  &.ax-warning-outline {
383
475
  @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
476
+
384
477
  &:not(.ax-state-disabled) {
478
+
385
479
  &:hover,
386
- &:focus {
480
+ &:focus,
481
+ &:focus-within {
387
482
  @apply ax-bg-warning-500 ax-border-warning-500 ax-text-warning-fore;
388
483
  }
484
+
389
485
  &:active {
390
486
  @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
391
487
  }
@@ -395,13 +491,18 @@
395
491
  @apply ax-bg-warning-500 ax-text-warning-fore;
396
492
  }
397
493
  }
494
+
398
495
  &.ax-danger-outline {
399
496
  @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
497
+
400
498
  &:not(.ax-state-disabled) {
499
+
401
500
  &:hover,
402
- &:focus {
501
+ &:focus,
502
+ &:focus-within {
403
503
  @apply ax-bg-danger-500 ax-border-danger-500 ax-text-danger-fore;
404
504
  }
505
+
405
506
  &:active {
406
507
  @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
407
508
  }
@@ -411,13 +512,18 @@
411
512
  @apply ax-bg-danger-500 ax-text-danger-fore;
412
513
  }
413
514
  }
515
+
414
516
  &.ax-success-outline {
415
517
  @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
518
+
416
519
  &:not(.ax-state-disabled) {
520
+
417
521
  &:hover,
418
- &:focus {
522
+ &:focus,
523
+ &:focus-within {
419
524
  @apply ax-bg-success-500 ax-border-success-500 ax-text-success-fore;
420
525
  }
526
+
421
527
  &:active {
422
528
  @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
423
529
  }
@@ -427,13 +533,18 @@
427
533
  @apply ax-bg-success-500 ax-text-success-fore;
428
534
  }
429
535
  }
536
+
430
537
  &.ax-info-outline {
431
538
  @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
539
+
432
540
  &:not(.ax-state-disabled) {
541
+
433
542
  &:hover,
434
- &:focus {
543
+ &:focus,
544
+ &:focus-within {
435
545
  @apply ax-bg-info-500 ax-border-info-500 ax-text-info-fore;
436
546
  }
547
+
437
548
  &:active {
438
549
  @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
439
550
  }
@@ -443,17 +554,22 @@
443
554
  @apply ax-bg-info-500 ax-text-info-fore;
444
555
  }
445
556
  }
557
+
446
558
  &.ax-dark-outline {
447
559
  @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
560
+
448
561
  &:not(.ax-state-disabled) {
449
562
  &:hover {
450
563
  @apply ax-bg-dark-50 ax-border-dark-500 ax-text-dark-500 dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
451
564
  }
452
- &:focus {
565
+
566
+ &:focus,
567
+ &:focus-within {
453
568
  @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore dark:ax-border-dark-300 dark:ax-bg-dark-300 dark:ax-text-light-100;
454
569
  }
570
+
455
571
  &:active {
456
- @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore dark:ax-bg-dark-200 ;
572
+ @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore dark:ax-bg-dark-200;
457
573
  }
458
574
  }
459
575
 
@@ -461,13 +577,18 @@
461
577
  @apply ax-bg-dark-500 ax-text-dark-fore;
462
578
  }
463
579
  }
580
+
464
581
  &.ax-light-outline {
465
582
  @apply ax-bg-transparent ax-text-light-fore ax-border-light-300 dark:ax-text-light-200 dark:ax-border-light-400;
583
+
466
584
  &:not(.ax-state-disabled) {
585
+
467
586
  &:hover,
468
- &:focus {
587
+ &:focus,
588
+ &:focus-within {
469
589
  @apply ax-bg-light-200 ax-border-light-300 ax-text-light-fore;
470
590
  }
591
+
471
592
  &:active {
472
593
  @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
473
594
  }
@@ -477,14 +598,19 @@
477
598
  @apply ax-bg-light-300 ax-text-light-fore;
478
599
  }
479
600
  }
601
+
480
602
  // blank
481
603
  &.ax-primary-blank {
482
604
  @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
605
+
483
606
  &:not(.ax-state-disabled) {
607
+
484
608
  &:hover,
485
- &:focus {
609
+ &:focus,
610
+ &:focus-within {
486
611
  @apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-transparent;
487
612
  }
613
+
488
614
  &:active {
489
615
  @apply ax-bg-primary-100 ax-text-primary-700;
490
616
  }
@@ -494,13 +620,18 @@
494
620
  @apply ax-bg-primary-200;
495
621
  }
496
622
  }
623
+
497
624
  &.ax-secondary-blank {
498
625
  @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
626
+
499
627
  &:not(.ax-state-disabled) {
628
+
500
629
  &:hover,
501
- &:focus {
630
+ &:focus,
631
+ &:focus-within {
502
632
  @apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-transparent;
503
633
  }
634
+
504
635
  &:active {
505
636
  @apply ax-bg-secondary-100 ax-text-secondary-700;
506
637
  }
@@ -510,13 +641,18 @@
510
641
  @apply ax-bg-secondary-200;
511
642
  }
512
643
  }
644
+
513
645
  &.ax-warning-blank {
514
646
  @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
647
+
515
648
  &:not(.ax-state-disabled) {
649
+
516
650
  &:hover,
517
- &:focus {
651
+ &:focus,
652
+ &:focus-within {
518
653
  @apply ax-bg-warning-50 ax-text-warning-fore dark:ax-bg-transparent;
519
654
  }
655
+
520
656
  &:active {
521
657
  @apply ax-bg-warning-100 ax-text-warning-fore;
522
658
  }
@@ -526,13 +662,18 @@
526
662
  @apply ax-bg-warning-200;
527
663
  }
528
664
  }
665
+
529
666
  &.ax-danger-blank {
530
667
  @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
668
+
531
669
  &:not(.ax-state-disabled) {
670
+
532
671
  &:hover,
533
- &:focus {
672
+ &:focus,
673
+ &:focus-within {
534
674
  @apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-transparent;
535
675
  }
676
+
536
677
  &:active {
537
678
  @apply ax-bg-danger-100 ax-text-danger-700;
538
679
  }
@@ -542,13 +683,18 @@
542
683
  @apply ax-bg-danger-200;
543
684
  }
544
685
  }
686
+
545
687
  &.ax-success-blank {
546
688
  @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
689
+
547
690
  &:not(.ax-state-disabled) {
691
+
548
692
  &:hover,
549
- &:focus {
693
+ &:focus,
694
+ &:focus-within {
550
695
  @apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-transparent;
551
696
  }
697
+
552
698
  &:active {
553
699
  @apply ax-bg-success-100 ax-text-success-700;
554
700
  }
@@ -558,13 +704,18 @@
558
704
  @apply ax-bg-success-200;
559
705
  }
560
706
  }
707
+
561
708
  &.ax-info-blank {
562
709
  @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
710
+
563
711
  &:not(.ax-state-disabled) {
712
+
564
713
  &:hover,
565
- &:focus {
714
+ &:focus,
715
+ &:focus-within {
566
716
  @apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-transparent;
567
717
  }
718
+
568
719
  &:active {
569
720
  @apply ax-bg-info-100 ax-text-info-700;
570
721
  }
@@ -574,13 +725,18 @@
574
725
  @apply ax-bg-info-200;
575
726
  }
576
727
  }
728
+
577
729
  &.ax-dark-blank {
578
730
  @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
731
+
579
732
  &:not(.ax-state-disabled) {
733
+
580
734
  &:hover,
581
- &:focus {
735
+ &:focus,
736
+ &:focus-within {
582
737
  @apply ax-bg-dark-400 ax-text-dark-fore dark:ax-bg-transparent dark:ax-text-dark-100;
583
738
  }
739
+
584
740
  &:active {
585
741
  @apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
586
742
  }
@@ -590,13 +746,18 @@
590
746
  @apply ax-bg-dark-200;
591
747
  }
592
748
  }
749
+
593
750
  &.ax-light-blank {
594
751
  @apply ax-bg-transparent ax-text-light-600 ax-border-transparent dark:ax-text-light-300;
752
+
595
753
  &:not(.ax-state-disabled) {
754
+
596
755
  &:hover,
597
- &:focus {
756
+ &:focus,
757
+ &:focus-within {
598
758
  @apply ax-bg-light-50 ax-text-light-500 dark:ax-bg-transparent dark:ax-text-light-500;
599
759
  }
760
+
600
761
  &:active {
601
762
  @apply ax-bg-light-200 ax-text-light-700 dark:ax-text-light-300;
602
763
  }
@@ -606,30 +767,40 @@
606
767
  @apply ax-bg-light-600;
607
768
  }
608
769
  }
770
+
609
771
  // link
610
772
  &.ax-primary-link {
611
773
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500;
774
+
612
775
  &:not(.ax-state-disabled) {
776
+
613
777
  &:hover,
614
- &:focus {
615
- @apply ax-text-primary-600 ax-border-primary-600;
778
+ &:focus,
779
+ &:focus-within {
780
+ @apply ax-text-primary-800 ax-border-primary-800;
616
781
  }
782
+
617
783
  &:active {
618
784
  @apply ax-text-primary-500 ax-border-primary-500;
619
785
  }
620
786
  }
621
-
787
+
622
788
  &.ax-state-selected {
623
789
  @apply ax-bg-primary-200;
624
790
  }
625
791
  }
792
+
626
793
  &.ax-secondary-link {
627
794
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
795
+
628
796
  &:not(.ax-state-disabled) {
797
+
629
798
  &:hover,
630
- &:focus {
799
+ &:focus,
800
+ &:focus-within {
631
801
  @apply ax-text-secondary-600 ax-border-secondary-600;
632
802
  }
803
+
633
804
  &:active {
634
805
  @apply ax-text-secondary-500 ax-border-secondary-500;
635
806
  }
@@ -639,13 +810,18 @@
639
810
  @apply ax-bg-secondary-200;
640
811
  }
641
812
  }
813
+
642
814
  &.ax-warning-link {
643
815
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
816
+
644
817
  &:not(.ax-state-disabled) {
818
+
645
819
  &:hover,
646
- &:focus {
820
+ &:focus,
821
+ &:focus-within {
647
822
  @apply ax-text-warning-fore ax-border-warning-600;
648
823
  }
824
+
649
825
  &:active {
650
826
  @apply ax-text-warning-fore ax-border-warning-500;
651
827
  }
@@ -655,13 +831,18 @@
655
831
  @apply ax-bg-warning-200;
656
832
  }
657
833
  }
834
+
658
835
  &.ax-danger-link {
659
836
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500;
837
+
660
838
  &:not(.ax-state-disabled) {
839
+
661
840
  &:hover,
662
- &:focus {
841
+ &:focus,
842
+ &:focus-within {
663
843
  @apply ax-text-danger-600 ax-border-danger-600;
664
844
  }
845
+
665
846
  &:active {
666
847
  @apply ax-text-danger-500 ax-border-danger-500;
667
848
  }
@@ -671,13 +852,18 @@
671
852
  @apply ax-bg-danger-200;
672
853
  }
673
854
  }
855
+
674
856
  &.ax-success-link {
675
857
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success-500;
858
+
676
859
  &:not(.ax-state-disabled) {
860
+
677
861
  &:hover,
678
- &:focus {
862
+ &:focus,
863
+ &:focus-within {
679
864
  @apply ax-text-success-600 ax-border-success-600;
680
865
  }
866
+
681
867
  &:active {
682
868
  @apply ax-text-success-500 ax-border-success-500;
683
869
  }
@@ -687,13 +873,18 @@
687
873
  @apply ax-bg-success-200;
688
874
  }
689
875
  }
876
+
690
877
  &.ax-info-link {
691
878
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info-500;
879
+
692
880
  &:not(.ax-state-disabled) {
881
+
693
882
  &:hover,
694
- &:focus {
883
+ &:focus,
884
+ &:focus-within {
695
885
  @apply ax-text-info-600 ax-border-info-600;
696
886
  }
887
+
697
888
  &:active {
698
889
  @apply ax-text-info-500 ax-border-info-500;
699
890
  }
@@ -703,13 +894,18 @@
703
894
  @apply ax-bg-info-200;
704
895
  }
705
896
  }
897
+
706
898
  &.ax-dark-link {
707
899
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
900
+
708
901
  &:not(.ax-state-disabled) {
902
+
709
903
  &:hover,
710
- &:focus {
904
+ &:focus,
905
+ &:focus-within {
711
906
  @apply ax-text-dark-600 ax-border-dark-600 dark:ax-border-dark-200 dark:ax-text-dark-200;
712
907
  }
908
+
713
909
  &:active {
714
910
  @apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
715
911
  }
@@ -719,15 +915,20 @@
719
915
  @apply ax-bg-dark-200;
720
916
  }
721
917
  }
918
+
722
919
  &.ax-light-link {
723
920
  @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-light-400 ax-border-light-400 dark:ax-border-light-50 dark:ax-text-light-50;
921
+
724
922
  &:not(.ax-state-disabled) {
725
923
  &:hover {
726
924
  @apply ax-text-light-300 ax-border-light-300;
727
925
  }
728
- &:focus {
926
+
927
+ &:focus,
928
+ &:focus-within {
729
929
  @apply ax-text-light-500 ax-border-y-light-500;
730
930
  }
931
+
731
932
  &:active {
732
933
  @apply ax-text-light-600 ax-border-light-600 dark:ax-border-light-200 dark:ax-text-light-200;
733
934
  }
@@ -738,25 +939,32 @@
738
939
  }
739
940
  }
740
941
  }
942
+
741
943
  .ax-button-group {
742
944
  @apply ax-flex;
945
+
743
946
  ax-button {
744
947
  @apply ax-rounded-none;
948
+
745
949
  &[class*="-link"] {
950
+
746
951
  &:first-child,
747
952
  &:last-child {
748
953
  @apply ax-rounded-s-none ax-rounded-e-none;
749
954
  }
750
955
  }
956
+
751
957
  &:not(:first-child):not(:last-child) {
752
958
  @apply ax-border-s-0;
753
959
  }
960
+
754
961
  &:first-child {
755
962
  @apply ax-rounded-s-md;
756
963
  }
964
+
757
965
  &:last-child {
758
966
  @apply ax-rounded-e-md ax-border-s-0;
759
967
  }
760
968
  }
761
969
  }
762
- }
970
+ }