@acorex/styles 5.0.4 → 5.0.8

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 (47) hide show
  1. package/index.scss +3 -2
  2. package/package.json +10 -10
  3. package/src/base/_colors.scss +16 -16
  4. package/src/base/index.scss +11 -7
  5. package/src/components/_alert.scss +156 -147
  6. package/src/components/_badge.scss +11 -39
  7. package/src/components/_button.scss +641 -651
  8. package/src/components/_calendar.scss +158 -96
  9. package/src/components/_carousel.scss +36 -61
  10. package/src/components/_checkbox.scss +24 -24
  11. package/src/components/_datapager.scss +39 -39
  12. package/src/components/_datepicker.scss +4 -4
  13. package/src/components/_dialog.scss +61 -61
  14. package/src/components/_drawer.scss +79 -79
  15. package/src/components/_dropdown.scss +140 -177
  16. package/src/components/_editor-container.scss +76 -69
  17. package/src/components/_form.scss +7 -7
  18. package/src/components/_input.scss +17 -16
  19. package/src/components/_label.scss +4 -4
  20. package/src/components/_list.scss +48 -48
  21. package/src/components/_loading.scss +53 -53
  22. package/src/components/_popup.scss +86 -86
  23. package/src/components/_radio.scss +19 -30
  24. package/src/components/_range-slider.scss +13 -13
  25. package/src/components/_selectbox.scss +15 -15
  26. package/src/components/_selection-list.scss +28 -28
  27. package/src/components/_side-menu.scss +46 -46
  28. package/src/components/_skeleton.scss +24 -24
  29. package/src/components/_switch.scss +199 -199
  30. package/src/components/_table.scss +20 -22
  31. package/src/components/_tabs.scss +209 -117
  32. package/src/components/_toast.scss +83 -93
  33. package/src/components/_tooltip.scss +44 -44
  34. package/src/components/index.scss +28 -28
  35. package/src/icons/Read Me.txt +7 -0
  36. package/src/icons/demo-files/demo.css +152 -0
  37. package/src/icons/demo-files/demo.js +30 -0
  38. package/src/icons/demo.html +416 -0
  39. package/src/icons/fonts/acorex-icon.svg +37 -0
  40. package/src/icons/fonts/acorex-icon.ttf +0 -0
  41. package/src/icons/fonts/acorex-icon.woff +0 -0
  42. package/src/icons/selection.json +1 -0
  43. package/src/icons/style.css +107 -0
  44. package/src/icons/style.scss +164 -0
  45. package/src/icons/variables.scss +31 -0
  46. package/src/variables/_colors.scss +135 -135
  47. package/src/variables/_mixins.scss +18 -18
package/src/components/_button.scss CHANGED
@@ -1,652 +1,642 @@
1
- @import "../variables/mixins";
2
- @layer components {
3
- ax-button {
4
- @apply ax-contents;
5
- button {
6
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
7
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
8
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-gray-300 ax-text-gray-600;
9
- @include respond(mobile) {
10
- @apply ax-text-base;
11
- }
12
- ax-prefix {
13
- @apply ax-flex ax-flex-row ax-pe-2;
14
- }
15
- ax-suffix {
16
- @apply ax-flex ax-flex-row ax-ps-2;
17
- }
18
- &:focus {
19
- @apply ax-outline-none ax-z-10;
20
- }
21
- &.ax-rounded {
22
- @apply ax-rounded-full;
23
- }
24
- &.ax-button-icon {
25
- ax-prefix,
26
- ax-suffix {
27
- @apply ax-p-0;
28
- }
29
- @apply ax-px-2;
30
- [class*=" ax-ic-"],
31
- [class^=ax-ic-] {
32
- @apply ax-text-2xl;
33
- }
34
- }
35
- &.ax-sm {
36
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
37
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - 10px) !important;
38
- @apply ax-text-sm;
39
- .ax-ic {
40
- @apply ax-text-sm;
41
- }
42
- }
43
- &.ax-lg {
44
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
45
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 10px) !important;
46
- @apply ax-text-lg;
47
- &.ax-button-icon {
48
- @apply ax-px-3;
49
- }
50
- .ax-ic {
51
- @apply ax-text-3xl;
52
- }
53
- }
54
- ax-loading-spinner {
55
- @apply ax-flex ax-pe-1;
56
- svg {
57
- width: calc(var(--ax-base-size) * 3);
58
- height: calc(var(--ax-base-size) * 3);
59
- @apply ax-fill-current;
60
- }
61
- }
62
- // states
63
- &.ax-state-selected {
64
- @apply ax-z-10;
65
- }
66
- &.ax-state-loading {
67
- @apply ax-cursor-not-allowed;
68
- }
69
- &.ax-state-disabled {
70
- @apply ax-cursor-not-allowed ax-opacity-60;
71
- }
72
- // normal
73
- &.ax-primary {
74
- @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
75
- &:hover {
76
- @apply ax-bg-primary-600;
77
- }
78
- &:focus {
79
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
80
- }
81
- &:active {
82
- @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
83
- }
84
- &.ax-state-selected {
85
- @apply ax-bg-primary-700;
86
- }
87
- }
88
- &.ax-secondary {
89
- @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
90
- &:hover {
91
- @apply ax-bg-secondary-600;
92
- }
93
- &:focus {
94
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
95
- }
96
- &:active {
97
- @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
98
- }
99
- &.ax-state-selected {
100
- @apply ax-bg-secondary-700;
101
- }
102
- }
103
- &.ax-warning {
104
- @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
105
- &:hover {
106
- @apply ax-bg-warning-400;
107
- }
108
- &:focus {
109
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
110
- }
111
- &:active {
112
- @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
113
- }
114
- &.ax-state-selected {
115
- @apply ax-bg-warning-700 ax-text-warning-50;
116
- }
117
- }
118
- &.ax-danger {
119
- @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
120
- &:hover {
121
- @apply ax-bg-danger-600;
122
- }
123
- &:focus {
124
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
125
- }
126
- &:active {
127
- @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
128
- }
129
- &.ax-state-selected {
130
- @apply ax-bg-danger-700;
131
- }
132
- }
133
- &.ax-success {
134
- @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
135
- &:hover {
136
- @apply ax-bg-success-600;
137
- }
138
- &:focus {
139
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
140
- }
141
- &:active {
142
- @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
143
- }
144
- &.ax-state-selected {
145
- @apply ax-bg-success-700;
146
- }
147
- }
148
- &.ax-info {
149
- @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
150
- &:hover {
151
- @apply ax-bg-info-600;
152
- }
153
- &:focus {
154
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
155
- }
156
- &:active {
157
- @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
158
- }
159
- &.ax-state-selected {
160
- @apply ax-bg-info-700;
161
- }
162
- }
163
- &.ax-dark {
164
- @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
165
- &:hover {
166
- @apply ax-bg-dark-400;
167
- }
168
- &:focus {
169
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
170
- }
171
- &:active {
172
- @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
173
- }
174
- &.ax-state-selected {
175
- @apply ax-bg-dark-300;
176
- }
177
- }
178
- &.ax-light {
179
- @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-default;
180
- &:hover {
181
- @apply ax-bg-light-100;
182
- }
183
- &:focus {
184
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
185
- }
186
- &:active {
187
- @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
188
- }
189
- &.ax-state-selected {
190
- @apply ax-bg-light-600 ax-text-light-50;
191
- }
192
- }
193
- // twotone
194
- &.ax-primary-twotone {
195
- @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent;
196
- &:hover,
197
- &:focus {
198
- @apply ax-bg-primary-100 ax-text-primary-700;
199
- }
200
- &:active {
201
- @apply ax-bg-primary-200 ax-text-primary-700;
202
- }
203
- &.ax-state-selected {
204
- @apply ax-bg-primary-200 ax-text-primary-700;
205
- }
206
- }
207
- &.ax-secondary-twotone {
208
- @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent;
209
- &:hover,
210
- &:focus {
211
- @apply ax-bg-secondary-100 ax-text-secondary-700;
212
- }
213
- &:active {
214
- @apply ax-bg-secondary-200 ax-text-secondary-700;
215
- }
216
- &.ax-state-selected {
217
- @apply ax-bg-secondary-200 ax-text-secondary-700;
218
- }
219
- }
220
- &.ax-warning-twotone {
221
- @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent;
222
- &:hover,
223
- &:focus {
224
- @apply ax-bg-warning-100 ax-text-warning-700;
225
- }
226
- &:active {
227
- @apply ax-bg-warning-200 ax-text-warning-700;
228
- }
229
- &.ax-state-selected {
230
- @apply ax-bg-warning-200 ax-text-warning-700;
231
- }
232
- }
233
- &.ax-danger-twotone {
234
- @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent;
235
- &:hover,
236
- &:focus {
237
- @apply ax-bg-danger-100 ax-text-danger-700;
238
- }
239
- &:active {
240
- @apply ax-bg-danger-200 ax-text-danger-700;
241
- }
242
- &.ax-state-selected {
243
- @apply ax-bg-danger-200 ax-text-danger-700;
244
- }
245
- }
246
- &.ax-success-twotone {
247
- @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent;
248
- &:hover,
249
- &:focus {
250
- @apply ax-bg-success-100 ax-text-success-700;
251
- }
252
- &:active {
253
- @apply ax-bg-success-200 ax-text-success-700;
254
- }
255
- &.ax-state-selected {
256
- @apply ax-bg-success-200 ax-text-success-700;
257
- }
258
- }
259
- &.ax-info-twotone {
260
- @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent;
261
- &:hover,
262
- &:focus {
263
- @apply ax-bg-info-100 ax-text-primary-700;
264
- }
265
- &:active {
266
- @apply ax-bg-info-200 ax-text-primary-700;
267
- }
268
- &.ax-state-selected {
269
- @apply ax-bg-info-200 ax-text-primary-700;
270
- }
271
- }
272
- &.ax-dark-twotone {
273
- @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
274
- &:hover {}
275
- &:focus {
276
- @apply ax-bg-dark-100 ax-text-dark-700;
277
- }
278
- &:active {
279
- @apply ax-bg-dark-200 ax-text-dark-700;
280
- }
281
- &.ax-state-selected {
282
- @apply ax-bg-dark-300 ax-text-dark-fore;
283
- }
284
- }
285
- &.ax-light-twotone {
286
- @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
287
- &:hover {
288
- @apply ax-bg-light-300;
289
- }
290
- &:focus {
291
- @apply ax-bg-light-200;
292
- }
293
- &:active {
294
- @apply ax-bg-light-300;
295
- }
296
- &.ax-state-selected {
297
- @apply ax-bg-light-400;
298
- }
299
- }
300
- // outline
301
- &.ax-primary-outline {
302
- @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
303
- &:hover,
304
- &:focus {
305
- @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
306
- }
307
- &:active {
308
- @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
309
- }
310
- &.ax-state-selected {
311
- @apply ax-bg-primary ax-text-primary-fore;
312
- }
313
- }
314
- &.ax-secondary-outline {
315
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
316
- &:hover,
317
- &:focus {
318
- @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
319
- }
320
- &:active {
321
- @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
322
- }
323
- &.ax-state-selected {
324
- @apply ax-bg-secondary ax-text-secondary-fore;
325
- }
326
- }
327
- &.ax-warning-outline {
328
- @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
329
- &:hover,
330
- &:focus {
331
- @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
332
- }
333
- &:active {
334
- @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
335
- }
336
- &.ax-state-selected {
337
- @apply ax-bg-warning ax-text-warning-fore;
338
- }
339
- }
340
- &.ax-danger-outline {
341
- @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
342
- &:hover,
343
- &:focus {
344
- @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
345
- }
346
- &:active {
347
- @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
348
- }
349
- &.ax-state-selected {
350
- @apply ax-bg-danger ax-text-danger-fore;
351
- }
352
- }
353
- &.ax-success-outline {
354
- @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
355
- &:hover,
356
- &:focus {
357
- @apply ax-bg-success ax-border-success ax-text-success-fore;
358
- }
359
- &:active {
360
- @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
361
- }
362
- &.ax-state-selected {
363
- @apply ax-bg-success ax-text-success-fore;
364
- }
365
- }
366
- &.ax-info-outline {
367
- @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
368
- &:hover,
369
- &:focus {
370
- @apply ax-bg-info ax-border-info ax-text-info-fore;
371
- }
372
- &:active {
373
- @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
374
- }
375
- &.ax-state-selected {
376
- @apply ax-bg-info ax-text-info-fore;
377
- }
378
- }
379
- &.ax-dark-outline {
380
- @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500;
381
- &:hover {
382
- @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
383
- }
384
- &:focus {
385
- @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
386
- }
387
- &:active {
388
- @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
389
- }
390
- &.ax-state-selected {
391
- @apply ax-bg-dark ax-text-dark-fore;
392
- }
393
- }
394
- &.ax-light-outline {
395
- @apply ax-bg-transparent ax-text-light-fore ax-border-light-200;
396
- &:hover,
397
- &:focus {
398
- @apply ax-bg-light-200 ax-border-light-200 ax-text-light-fore;
399
- }
400
- &:active {
401
- @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
402
- }
403
- &.ax-state-selected {
404
- @apply ax-bg-light-300 ax-text-light-fore;
405
- }
406
- }
407
- // blank
408
- &.ax-primary-blank {
409
- @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
410
- &:hover,
411
- &:focus {
412
- @apply ax-bg-primary-50 ax-text-primary-600;
413
- }
414
- &:active {
415
- @apply ax-bg-primary-100 ax-text-primary-700;
416
- }
417
- &.ax-state-selected {
418
- @apply ax-bg-primary-200;
419
- }
420
- }
421
- &.ax-secondary-blank {
422
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
423
- &:hover,
424
- &:focus {
425
- @apply ax-bg-secondary-50 ax-text-secondary-600;
426
- }
427
- &:active {
428
- @apply ax-bg-secondary-100 ax-text-secondary-700;
429
- }
430
- &.ax-state-selected {
431
- @apply ax-bg-secondary-200;
432
- }
433
- }
434
- &.ax-warning-blank {
435
- @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
436
- &:hover,
437
- &:focus {
438
- @apply ax-bg-warning-50 ax-text-warning-600;
439
- }
440
- &:active {
441
- @apply ax-bg-warning-100 ax-text-warning-700;
442
- }
443
- &.ax-state-selected {
444
- @apply ax-bg-warning-200;
445
- }
446
- }
447
- &.ax-danger-blank {
448
- @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
449
- &:hover,
450
- &:focus {
451
- @apply ax-bg-danger-50 ax-text-danger-600;
452
- }
453
- &:active {
454
- @apply ax-bg-danger-100 ax-text-danger-700;
455
- }
456
- &.ax-state-selected {
457
- @apply ax-bg-danger-200;
458
- }
459
- }
460
- &.ax-success-blank {
461
- @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
462
- &:hover,
463
- &:focus {
464
- @apply ax-bg-success-50 ax-text-success-600;
465
- }
466
- &:active {
467
- @apply ax-bg-success-100 ax-text-success-700;
468
- }
469
- &.ax-state-selected {
470
- @apply ax-bg-success-200;
471
- }
472
- }
473
- &.ax-info-blank {
474
- @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
475
- &:hover,
476
- &:focus {
477
- @apply ax-bg-info-50 ax-text-info-600;
478
- }
479
- &:active {
480
- @apply ax-bg-info-100 ax-text-info-700;
481
- }
482
- &.ax-state-selected {
483
- @apply ax-bg-info-200;
484
- }
485
- }
486
- &.ax-dark-blank {
487
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
488
- &:hover,
489
- &:focus {
490
- @apply ax-bg-dark-400 ax-text-dark-fore;
491
- }
492
- &:active {
493
- @apply ax-bg-dark-600 ax-text-dark-fore;
494
- }
495
- &.ax-state-selected {
496
- @apply ax-bg-dark-200;
497
- }
498
- }
499
- &.ax-light-blank {
500
- @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
501
- &:hover,
502
- &:focus {
503
- @apply ax-bg-light-100 ax-text-light-500;
504
- }
505
- &:active {
506
- @apply ax-bg-light-200 ax-text-light-700;
507
- }
508
- &.ax-state-selected {
509
- @apply ax-bg-light-600;
510
- }
511
- }
512
- // link
513
- &.ax-primary-link {
514
- @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;
515
- &:hover,
516
- &:focus {
517
- @apply ax-text-primary-600 ax-border-primary-600;
518
- }
519
- &:active {
520
- @apply ax-text-primary-500 ax-border-primary-500;
521
- }
522
- &.ax-state-selected {
523
- @apply ax-bg-primary-200;
524
- }
525
- }
526
- &.ax-secondary-link {
527
- @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;
528
- &:hover,
529
- &:focus {
530
- @apply ax-text-secondary-600 ax-border-secondary-600;
531
- }
532
- &:active {
533
- @apply ax-text-secondary-500 ax-border-secondary-500;
534
- }
535
- &.ax-state-selected {
536
- @apply ax-bg-secondary-200;
537
- }
538
- }
539
- &.ax-warning-link {
540
- @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;
541
- &:hover,
542
- &:focus {
543
- @apply ax-text-warning-600 ax-border-warning-600;
544
- }
545
- &:active {
546
- @apply ax-text-warning-500 ax-border-warning-500;
547
- }
548
- &.ax-state-selected {
549
- @apply ax-bg-warning-200;
550
- }
551
- }
552
- &.ax-danger-link {
553
- @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;
554
- &:hover,
555
- &:focus {
556
- @apply ax-text-danger-600 ax-border-danger-600;
557
- }
558
- &:active {
559
- @apply ax-text-danger-500 ax-border-danger-500;
560
- }
561
- &.ax-state-selected {
562
- @apply ax-bg-danger-200;
563
- }
564
- }
565
- &.ax-success-link {
566
- @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;
567
- &:hover,
568
- &:focus {
569
- @apply ax-text-success-600 ax-border-success-600;
570
- }
571
- &:active {
572
- @apply ax-text-success-500 ax-border-success-500;
573
- }
574
- &.ax-state-selected {
575
- @apply ax-bg-success-200;
576
- }
577
- }
578
- &.ax-info-link {
579
- @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;
580
- &:hover,
581
- &:focus {
582
- @apply ax-text-info-600 ax-border-info-600;
583
- }
584
- &:active {
585
- @apply ax-text-info-500 ax-border-info-500;
586
- }
587
- &.ax-state-selected {
588
- @apply ax-bg-info-200;
589
- }
590
- }
591
- &.ax-dark-link {
592
- @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;
593
- &:hover,
594
- &:focus {
595
- @apply ax-text-dark-600 ax-border-dark-600;
596
- }
597
- &:active {
598
- @apply ax-text-dark-300 ax-border-dark-300;
599
- }
600
- &.ax-state-selected {
601
- @apply ax-bg-dark-200;
602
- }
603
- }
604
- &.ax-light-link {
605
- @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;
606
- &:hover {
607
- @apply ax-text-light-300 ax-border-light-300;
608
- }
609
- &:focus {
610
- @apply ax-text-light-500 ax-border-light-500;
611
- }
612
- &:active {
613
- @apply ax-text-light-600 ax-border-light-600;
614
- }
615
- &.ax-state-selected {
616
- @apply ax-bg-light-600;
617
- }
618
- }
619
- }
620
- }
621
- .ax-button-group {
622
- @apply ax-flex;
623
- ax-button {
624
- button {
625
- &[class*="-link"] {
626
- &:first-child,
627
- &:last-child {
628
- @apply ax-rounded-s-none ax-rounded-e-none;
629
- }
630
- }
631
- }
632
- &:not(:first-child):not(:last-child) {
633
- button {
634
- @apply ax-border-s-0;
635
- }
636
- }
637
- button {
638
- @apply ax-rounded-none;
639
- }
640
- &:first-child {
641
- button {
642
- @apply ax-rounded-s-md;
643
- }
644
- }
645
- &:last-child {
646
- button {
647
- @apply ax-rounded-e-md ax-border-s-0;
648
- }
649
- }
650
- }
651
- }
1
+ @import "../variables/mixins";
2
+ @layer components {
3
+ ax-button {
4
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap;
7
+ @include respond(mobile) {
8
+ @apply ax-text-base;
9
+ }
10
+ ax-prefix {
11
+ @apply ax-flex ax-flex-row ax-pe-2;
12
+ }
13
+ ax-suffix {
14
+ @apply ax-flex ax-flex-row ax-ps-2;
15
+ }
16
+ .ax-badge {
17
+ @apply ax-text-xs;
18
+ }
19
+ &:focus {
20
+ @apply ax-outline-none ax-z-10;
21
+ }
22
+ &.ax-rounded {
23
+ @apply ax-rounded-full;
24
+ }
25
+ &.ax-button-icon {
26
+ ax-prefix,
27
+ ax-suffix {
28
+ @apply ax-p-0;
29
+ }
30
+ @apply ax-px-2;
31
+ [class*=" ax-ic-"],
32
+ [class^=ax-ic-] {
33
+ @apply ax-text-2xl;
34
+ }
35
+ }
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
+ }
55
+ ax-loading-spinner {
56
+ @apply ax-flex ax-pe-1;
57
+ svg {
58
+ width: calc(var(--ax-base-size) * 3);
59
+ height: calc(var(--ax-base-size) * 3);
60
+ @apply ax-fill-current;
61
+ }
62
+ }
63
+ // states
64
+ &.ax-state-selected {
65
+ @apply ax-z-10;
66
+ }
67
+ &.ax-state-loading {
68
+ @apply ax-cursor-not-allowed;
69
+ }
70
+ &.ax-state-disabled {
71
+ @apply ax-cursor-not-allowed ax-opacity-60;
72
+ }
73
+ // normal
74
+ &.ax-primary {
75
+ @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
76
+ &:hover {
77
+ @apply ax-bg-primary-600;
78
+ }
79
+ &:focus {
80
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
81
+ }
82
+ &:active {
83
+ @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
84
+ }
85
+ &.ax-state-selected {
86
+ @apply ax-bg-primary-700;
87
+ }
88
+ }
89
+ &.ax-secondary {
90
+ @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
91
+ &:hover {
92
+ @apply ax-bg-secondary-600;
93
+ }
94
+ &:focus {
95
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
96
+ }
97
+ &:active {
98
+ @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
99
+ }
100
+ &.ax-state-selected {
101
+ @apply ax-bg-secondary-700;
102
+ }
103
+ }
104
+ &.ax-warning {
105
+ @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
106
+ &:hover {
107
+ @apply ax-bg-warning-400;
108
+ }
109
+ &:focus {
110
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
111
+ }
112
+ &:active {
113
+ @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
114
+ }
115
+ &.ax-state-selected {
116
+ @apply ax-bg-warning-700 ax-text-warning-50;
117
+ }
118
+ }
119
+ &.ax-danger {
120
+ @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
121
+ &:hover {
122
+ @apply ax-bg-danger-600;
123
+ }
124
+ &:focus {
125
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
126
+ }
127
+ &:active {
128
+ @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
129
+ }
130
+ &.ax-state-selected {
131
+ @apply ax-bg-danger-700;
132
+ }
133
+ }
134
+ &.ax-success {
135
+ @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
136
+ &:hover {
137
+ @apply ax-bg-success-600;
138
+ }
139
+ &:focus {
140
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
141
+ }
142
+ &:active {
143
+ @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
144
+ }
145
+ &.ax-state-selected {
146
+ @apply ax-bg-success-700;
147
+ }
148
+ }
149
+ &.ax-info {
150
+ @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
151
+ &:hover {
152
+ @apply ax-bg-info-600;
153
+ }
154
+ &:focus {
155
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
156
+ }
157
+ &:active {
158
+ @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
159
+ }
160
+ &.ax-state-selected {
161
+ @apply ax-bg-info-700;
162
+ }
163
+ }
164
+ &.ax-dark {
165
+ @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
166
+ &:hover {
167
+ @apply ax-bg-dark-400;
168
+ }
169
+ &:focus {
170
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
171
+ }
172
+ &:active {
173
+ @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
174
+ }
175
+ &.ax-state-selected {
176
+ @apply ax-bg-dark-300;
177
+ }
178
+ }
179
+ &.ax-light {
180
+ @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-default;
181
+ &:hover {
182
+ @apply ax-bg-light-100;
183
+ }
184
+ &:focus {
185
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
186
+ }
187
+ &:active {
188
+ @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
189
+ }
190
+ &.ax-state-selected {
191
+ @apply ax-bg-light-600 ax-text-light-50;
192
+ }
193
+ }
194
+ // twotone
195
+ &.ax-primary-twotone {
196
+ @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent;
197
+ &:hover,
198
+ &:focus {
199
+ @apply ax-bg-primary-100 ax-text-primary-700;
200
+ }
201
+ &:active {
202
+ @apply ax-bg-primary-200 ax-text-primary-700;
203
+ }
204
+ &.ax-state-selected {
205
+ @apply ax-bg-primary-200 ax-text-primary-700;
206
+ }
207
+ }
208
+ &.ax-secondary-twotone {
209
+ @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent;
210
+ &:hover,
211
+ &:focus {
212
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
213
+ }
214
+ &:active {
215
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
216
+ }
217
+ &.ax-state-selected {
218
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
219
+ }
220
+ }
221
+ &.ax-warning-twotone {
222
+ @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent;
223
+ &:hover,
224
+ &:focus {
225
+ @apply ax-bg-warning-100 ax-text-warning-700;
226
+ }
227
+ &:active {
228
+ @apply ax-bg-warning-200 ax-text-warning-700;
229
+ }
230
+ &.ax-state-selected {
231
+ @apply ax-bg-warning-200 ax-text-warning-700;
232
+ }
233
+ }
234
+ &.ax-danger-twotone {
235
+ @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent;
236
+ &:hover,
237
+ &:focus {
238
+ @apply ax-bg-danger-100 ax-text-danger-700;
239
+ }
240
+ &:active {
241
+ @apply ax-bg-danger-200 ax-text-danger-700;
242
+ }
243
+ &.ax-state-selected {
244
+ @apply ax-bg-danger-200 ax-text-danger-700;
245
+ }
246
+ }
247
+ &.ax-success-twotone {
248
+ @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent;
249
+ &:hover,
250
+ &:focus {
251
+ @apply ax-bg-success-100 ax-text-success-700;
252
+ }
253
+ &:active {
254
+ @apply ax-bg-success-200 ax-text-success-700;
255
+ }
256
+ &.ax-state-selected {
257
+ @apply ax-bg-success-200 ax-text-success-700;
258
+ }
259
+ }
260
+ &.ax-info-twotone {
261
+ @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent;
262
+ &:hover,
263
+ &:focus {
264
+ @apply ax-bg-info-100 ax-text-primary-700;
265
+ }
266
+ &:active {
267
+ @apply ax-bg-info-200 ax-text-primary-700;
268
+ }
269
+ &.ax-state-selected {
270
+ @apply ax-bg-info-200 ax-text-primary-700;
271
+ }
272
+ }
273
+ &.ax-dark-twotone {
274
+ @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
275
+ &:hover {}
276
+ &:focus {
277
+ @apply ax-bg-dark-100 ax-text-dark-700;
278
+ }
279
+ &:active {
280
+ @apply ax-bg-dark-200 ax-text-dark-700;
281
+ }
282
+ &.ax-state-selected {
283
+ @apply ax-bg-dark-300 ax-text-dark-fore;
284
+ }
285
+ }
286
+ &.ax-light-twotone {
287
+ @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
288
+ &:hover {
289
+ @apply ax-bg-light-300;
290
+ }
291
+ &:focus {
292
+ @apply ax-bg-light-200;
293
+ }
294
+ &:active {
295
+ @apply ax-bg-light-300;
296
+ }
297
+ &.ax-state-selected {
298
+ @apply ax-bg-light-400;
299
+ }
300
+ }
301
+ // outline
302
+ &.ax-primary-outline {
303
+ @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
304
+ &:hover,
305
+ &:focus {
306
+ @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
307
+ }
308
+ &:active {
309
+ @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
310
+ }
311
+ &.ax-state-selected {
312
+ @apply ax-bg-primary ax-text-primary-fore;
313
+ }
314
+ }
315
+ &.ax-secondary-outline {
316
+ @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
317
+ &:hover,
318
+ &:focus {
319
+ @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
320
+ }
321
+ &:active {
322
+ @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
323
+ }
324
+ &.ax-state-selected {
325
+ @apply ax-bg-secondary ax-text-secondary-fore;
326
+ }
327
+ }
328
+ &.ax-warning-outline {
329
+ @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
330
+ &:hover,
331
+ &:focus {
332
+ @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
333
+ }
334
+ &:active {
335
+ @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
336
+ }
337
+ &.ax-state-selected {
338
+ @apply ax-bg-warning ax-text-warning-fore;
339
+ }
340
+ }
341
+ &.ax-danger-outline {
342
+ @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
343
+ &:hover,
344
+ &:focus {
345
+ @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
346
+ }
347
+ &:active {
348
+ @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
349
+ }
350
+ &.ax-state-selected {
351
+ @apply ax-bg-danger ax-text-danger-fore;
352
+ }
353
+ }
354
+ &.ax-success-outline {
355
+ @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
356
+ &:hover,
357
+ &:focus {
358
+ @apply ax-bg-success ax-border-success ax-text-success-fore;
359
+ }
360
+ &:active {
361
+ @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
362
+ }
363
+ &.ax-state-selected {
364
+ @apply ax-bg-success ax-text-success-fore;
365
+ }
366
+ }
367
+ &.ax-info-outline {
368
+ @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
369
+ &:hover,
370
+ &:focus {
371
+ @apply ax-bg-info ax-border-info ax-text-info-fore;
372
+ }
373
+ &:active {
374
+ @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
375
+ }
376
+ &.ax-state-selected {
377
+ @apply ax-bg-info ax-text-info-fore;
378
+ }
379
+ }
380
+ &.ax-dark-outline {
381
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500;
382
+ &:hover {
383
+ @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
384
+ }
385
+ &:focus {
386
+ @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
387
+ }
388
+ &:active {
389
+ @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
390
+ }
391
+ &.ax-state-selected {
392
+ @apply ax-bg-dark ax-text-dark-fore;
393
+ }
394
+ }
395
+ &.ax-light-outline {
396
+ @apply ax-bg-transparent ax-text-light-fore ax-border-light-200;
397
+ &:hover,
398
+ &:focus {
399
+ @apply ax-bg-light-200 ax-border-light-200 ax-text-light-fore;
400
+ }
401
+ &:active {
402
+ @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
403
+ }
404
+ &.ax-state-selected {
405
+ @apply ax-bg-light-300 ax-text-light-fore;
406
+ }
407
+ }
408
+ // blank
409
+ &.ax-primary-blank {
410
+ @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
411
+ &:hover,
412
+ &:focus {
413
+ @apply ax-bg-primary-50 ax-text-primary-600;
414
+ }
415
+ &:active {
416
+ @apply ax-bg-primary-100 ax-text-primary-700;
417
+ }
418
+ &.ax-state-selected {
419
+ @apply ax-bg-primary-200;
420
+ }
421
+ }
422
+ &.ax-secondary-blank {
423
+ @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
424
+ &:hover,
425
+ &:focus {
426
+ @apply ax-bg-secondary-50 ax-text-secondary-600;
427
+ }
428
+ &:active {
429
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
430
+ }
431
+ &.ax-state-selected {
432
+ @apply ax-bg-secondary-200;
433
+ }
434
+ }
435
+ &.ax-warning-blank {
436
+ @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
437
+ &:hover,
438
+ &:focus {
439
+ @apply ax-bg-warning-50 ax-text-warning-600;
440
+ }
441
+ &:active {
442
+ @apply ax-bg-warning-100 ax-text-warning-700;
443
+ }
444
+ &.ax-state-selected {
445
+ @apply ax-bg-warning-200;
446
+ }
447
+ }
448
+ &.ax-danger-blank {
449
+ @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
450
+ &:hover,
451
+ &:focus {
452
+ @apply ax-bg-danger-50 ax-text-danger-600;
453
+ }
454
+ &:active {
455
+ @apply ax-bg-danger-100 ax-text-danger-700;
456
+ }
457
+ &.ax-state-selected {
458
+ @apply ax-bg-danger-200;
459
+ }
460
+ }
461
+ &.ax-success-blank {
462
+ @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
463
+ &:hover,
464
+ &:focus {
465
+ @apply ax-bg-success-50 ax-text-success-600;
466
+ }
467
+ &:active {
468
+ @apply ax-bg-success-100 ax-text-success-700;
469
+ }
470
+ &.ax-state-selected {
471
+ @apply ax-bg-success-200;
472
+ }
473
+ }
474
+ &.ax-info-blank {
475
+ @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
476
+ &:hover,
477
+ &:focus {
478
+ @apply ax-bg-info-50 ax-text-info-600;
479
+ }
480
+ &:active {
481
+ @apply ax-bg-info-100 ax-text-info-700;
482
+ }
483
+ &.ax-state-selected {
484
+ @apply ax-bg-info-200;
485
+ }
486
+ }
487
+ &.ax-dark-blank {
488
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
489
+ &:hover,
490
+ &:focus {
491
+ @apply ax-bg-dark-400 ax-text-dark-fore;
492
+ }
493
+ &:active {
494
+ @apply ax-bg-dark-600 ax-text-dark-fore;
495
+ }
496
+ &.ax-state-selected {
497
+ @apply ax-bg-dark-200;
498
+ }
499
+ }
500
+ &.ax-light-blank {
501
+ @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
502
+ &:hover,
503
+ &:focus {
504
+ @apply ax-bg-light-100 ax-text-light-500;
505
+ }
506
+ &:active {
507
+ @apply ax-bg-light-200 ax-text-light-700;
508
+ }
509
+ &.ax-state-selected {
510
+ @apply ax-bg-light-600;
511
+ }
512
+ }
513
+ // link
514
+ &.ax-primary-link {
515
+ @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;
516
+ &:hover,
517
+ &:focus {
518
+ @apply ax-text-primary-600 ax-border-primary-600;
519
+ }
520
+ &:active {
521
+ @apply ax-text-primary-500 ax-border-primary-500;
522
+ }
523
+ &.ax-state-selected {
524
+ @apply ax-bg-primary-200;
525
+ }
526
+ }
527
+ &.ax-secondary-link {
528
+ @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;
529
+ &:hover,
530
+ &:focus {
531
+ @apply ax-text-secondary-600 ax-border-secondary-600;
532
+ }
533
+ &:active {
534
+ @apply ax-text-secondary-500 ax-border-secondary-500;
535
+ }
536
+ &.ax-state-selected {
537
+ @apply ax-bg-secondary-200;
538
+ }
539
+ }
540
+ &.ax-warning-link {
541
+ @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;
542
+ &:hover,
543
+ &:focus {
544
+ @apply ax-text-warning-600 ax-border-warning-600;
545
+ }
546
+ &:active {
547
+ @apply ax-text-warning-500 ax-border-warning-500;
548
+ }
549
+ &.ax-state-selected {
550
+ @apply ax-bg-warning-200;
551
+ }
552
+ }
553
+ &.ax-danger-link {
554
+ @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;
555
+ &:hover,
556
+ &:focus {
557
+ @apply ax-text-danger-600 ax-border-danger-600;
558
+ }
559
+ &:active {
560
+ @apply ax-text-danger-500 ax-border-danger-500;
561
+ }
562
+ &.ax-state-selected {
563
+ @apply ax-bg-danger-200;
564
+ }
565
+ }
566
+ &.ax-success-link {
567
+ @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;
568
+ &:hover,
569
+ &:focus {
570
+ @apply ax-text-success-600 ax-border-success-600;
571
+ }
572
+ &:active {
573
+ @apply ax-text-success-500 ax-border-success-500;
574
+ }
575
+ &.ax-state-selected {
576
+ @apply ax-bg-success-200;
577
+ }
578
+ }
579
+ &.ax-info-link {
580
+ @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;
581
+ &:hover,
582
+ &:focus {
583
+ @apply ax-text-info-600 ax-border-info-600;
584
+ }
585
+ &:active {
586
+ @apply ax-text-info-500 ax-border-info-500;
587
+ }
588
+ &.ax-state-selected {
589
+ @apply ax-bg-info-200;
590
+ }
591
+ }
592
+ &.ax-dark-link {
593
+ @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;
594
+ &:hover,
595
+ &:focus {
596
+ @apply ax-text-dark-600 ax-border-dark-600;
597
+ }
598
+ &:active {
599
+ @apply ax-text-dark-300 ax-border-dark-300;
600
+ }
601
+ &.ax-state-selected {
602
+ @apply ax-bg-dark-200;
603
+ }
604
+ }
605
+ &.ax-light-link {
606
+ @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;
607
+ &:hover {
608
+ @apply ax-text-light-300 ax-border-light-300;
609
+ }
610
+ &:focus {
611
+ @apply ax-text-light-500 ax-border-light-500;
612
+ }
613
+ &:active {
614
+ @apply ax-text-light-600 ax-border-light-600;
615
+ }
616
+ &.ax-state-selected {
617
+ @apply ax-bg-light-600;
618
+ }
619
+ }
620
+ }
621
+ .ax-button-group {
622
+ @apply ax-flex;
623
+ ax-button {
624
+ @apply ax-rounded-none;
625
+ &[class*="-link"] {
626
+ &:first-child,
627
+ &:last-child {
628
+ @apply ax-rounded-s-none ax-rounded-e-none;
629
+ }
630
+ }
631
+ &:not(:first-child):not(:last-child) {
632
+ @apply ax-border-s-0;
633
+ }
634
+ &:first-child {
635
+ @apply ax-rounded-s-md;
636
+ }
637
+ &:last-child {
638
+ @apply ax-rounded-e-md ax-border-s-0;
639
+ }
640
+ }
641
+ }
652
642
  }