@acorex/styles 7.24.5 → 16.0.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 (81) hide show
  1. package/fonts/font-awesome/fa-brands-400.eot +0 -0
  2. package/fonts/font-awesome/fa-brands-400.svg +3570 -0
  3. package/fonts/font-awesome/fa-brands-400.ttf +0 -0
  4. package/fonts/font-awesome/fa-brands-400.woff +0 -0
  5. package/fonts/font-awesome/fa-brands-400.woff2 +0 -0
  6. package/fonts/font-awesome/fa-duotone-900.eot +0 -0
  7. package/fonts/font-awesome/fa-duotone-900.svg +15055 -0
  8. package/fonts/font-awesome/fa-duotone-900.ttf +0 -0
  9. package/fonts/font-awesome/fa-duotone-900.woff +0 -0
  10. package/fonts/font-awesome/fa-duotone-900.woff2 +0 -0
  11. package/fonts/font-awesome/fa-light-300.eot +0 -0
  12. package/fonts/font-awesome/fa-light-300.svg +12330 -0
  13. package/fonts/font-awesome/fa-light-300.ttf +0 -0
  14. package/fonts/font-awesome/fa-light-300.woff +0 -0
  15. package/fonts/font-awesome/fa-light-300.woff2 +0 -0
  16. package/fonts/font-awesome/fa-regular-400.eot +0 -0
  17. package/fonts/font-awesome/fa-regular-400.svg +11256 -0
  18. package/fonts/font-awesome/fa-regular-400.ttf +0 -0
  19. package/fonts/font-awesome/fa-regular-400.woff +0 -0
  20. package/fonts/font-awesome/fa-regular-400.woff2 +0 -0
  21. package/fonts/font-awesome/fa-solid-900.eot +0 -0
  22. package/fonts/font-awesome/fa-solid-900.svg +9588 -0
  23. package/fonts/font-awesome/fa-solid-900.ttf +0 -0
  24. package/fonts/font-awesome/fa-solid-900.woff +0 -0
  25. package/fonts/font-awesome/fa-solid-900.woff2 +0 -0
  26. package/fonts/font-awesome/font-awesome.css +16960 -0
  27. package/package.json +11 -11
  28. package/scss/buttons.scss +69 -0
  29. package/scss/calendar.scss +144 -0
  30. package/scss/checkbox.scss +46 -0
  31. package/scss/context-menu.scss +75 -0
  32. package/scss/data-grid.scss +117 -0
  33. package/scss/drawer.scss +138 -0
  34. package/scss/fieldset.scss +23 -0
  35. package/scss/forms.scss +523 -0
  36. package/scss/list.scss +47 -0
  37. package/scss/master.scss +330 -0
  38. package/scss/menu.scss +130 -0
  39. package/scss/mixin.scss +12 -0
  40. package/scss/page.scss +54 -0
  41. package/scss/progress.scss +11 -0
  42. package/scss/selection-list.scss +104 -0
  43. package/scss/style.scss +47 -0
  44. package/scss/tab-strip.scss +31 -0
  45. package/scss/tab.scss +36 -0
  46. package/scss/toast.scss +46 -0
  47. package/scss/tooltip.scss +55 -0
  48. package/scss/treeview.scss +152 -0
  49. package/scss/upload.scss +170 -0
  50. package/scss/variables.scss +139 -0
  51. package/icons/fontawesome/fontawesome.scss +0 -68
  52. package/icons/index.scss +0 -207
  53. package/icons/material/material.scss +0 -73
  54. package/index.css +0 -2623
  55. package/index.min.css +0 -1
  56. package/index.scss +0 -9
  57. package/src/base/_preflight.scss +0 -417
  58. package/src/base/index.scss +0 -13
  59. package/src/mixins/_look.scss +0 -84
  60. package/src/mixins/_media.scss +0 -27
  61. package/src/mixins/_util.scss +0 -19
  62. package/src/mixins/index.scss +0 -3
  63. package/src/shared/_actionsheet.scss +0 -23
  64. package/src/shared/_check-box.scss +0 -59
  65. package/src/shared/_color-look.scss +0 -689
  66. package/src/shared/_drop-down.scss +0 -76
  67. package/src/shared/_editor-container.scss +0 -257
  68. package/src/shared/_general-button.scss +0 -87
  69. package/src/shared/_inputs.scss +0 -16
  70. package/src/shared/_list.scss +0 -211
  71. package/src/shared/_radio.scss +0 -56
  72. package/src/shared/_table.scss +0 -149
  73. package/src/shared/_utils.scss +0 -75
  74. package/src/shared/index.scss +0 -11
  75. package/src/utility/index.scss +0 -24
  76. package/src/variables/_colors.scss +0 -2
  77. package/src/variables/_degrees.scss +0 -1
  78. package/src/variables/index.scss +0 -2
  79. package/tailwind-base.js +0 -235
  80. package/themes/default.css +0 -1
  81. package/themes/default.scss +0 -141
package/src/shared/_color-look.scss DELETED
@@ -1,689 +0,0 @@
1
- @import '../variables/index.scss';
2
-
3
- @each $color in $color_names {
4
- @each $look in $look_names {
5
- @if ($look == 'solid') {
6
- .ax-el-#{$color}-#{$look} {
7
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore ax-border-#{$color}-500;
8
- background-color: rgba(var(--ax-color-#{$color}-500));
9
- color: rgba(var(--ax-color-#{$color}-fore));
10
- border-color: rgba(var(--ax-color-#{$color}-500));
11
- &.ax-el-interactive {
12
- &:hover {
13
- &:not(.ax-state-disabled) {
14
- // @apply ax-bg-#{$color}-600;
15
- background-color: rgba(var(--ax-color-#{$color}-600));
16
- }
17
- }
18
- }
19
-
20
- &.ax-state-selected {
21
- // @apply ax-bg-#{$color}-700;
22
- background-color: rgba(var(--ax-color-#{$color}-700));
23
- }
24
- .ax-ripple {
25
- // @apply ax-bg-#{$color}-300/30 #{!important};
26
- background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
27
- }
28
- ax-loading-spinner {
29
- .ax-loader {
30
- // @apply ax-border-#{$color}-fore ax-border-b-transparent;
31
- border-color: rgba(var(--ax-color-#{$color}-fore));
32
- border-bottom-color: transparent;
33
- }
34
- }
35
- &:is(&:focus-visible, &.ax-state-focus) {
36
- // @apply ax-outline-#{$color}-500;
37
- outline-color: rgba(var(--ax-color-#{$color}-500));
38
- }
39
- & > button {
40
- &:is(&:focus-visible, &.ax-state-focus) {
41
- // @apply ax-outline-#{$color}-500;
42
- outline-color: rgba(var(--ax-color-#{$color}-500));
43
- }
44
- }
45
- &.ax-dropdown-button-marker {
46
- border-inline-start-color: rgba(var(--ax-color-#{$color}-600));
47
- }
48
- }
49
- }
50
-
51
- @if ($look == 'outline') {
52
- .ax-el-#{$color}-#{$look} {
53
- // @apply ax-border-#{$color}-500 ax-text-#{$color}-500 ax-border ax-bg-transparent;
54
- background-color: transparent;
55
- color: rgba(var(--ax-color-#{$color}-500));
56
- border-color: rgba(var(--ax-color-#{$color}-500));
57
- border-width: 1px;
58
- &.ax-el-interactive {
59
- &:hover {
60
- &:not(.ax-state-disabled) {
61
- // @apply ax-border-#{$color}-700 ax-text-#{$color}-700;
62
- color: rgba(var(--ax-color-#{$color}-700));
63
- border-color: rgba(var(--ax-color-#{$color}-700));
64
- }
65
- }
66
- }
67
- &.ax-state-selected {
68
- // @apply ax-border-#{$color}-500 ax-text-#{$color}-fore ax-bg-#{$color}-500;
69
- border-color: rgba(var(--ax-color-#{$color}-500));
70
- color: rgba(var(--ax-color-#{$color}-fore));
71
- background-color: rgba(var(--ax-color-#{$color}-500));
72
- }
73
- .ax-ripple {
74
- // @apply ax-bg-#{$color}-500/30 #{!important};
75
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
76
- }
77
- ax-loading-spinner {
78
- .ax-loader {
79
- // @apply ax-border-#{$color}-500 ax-border-b-transparent;
80
- border-color: rgba(var(--ax-color-#{$color}-500));
81
- border-bottom-color: transparent;
82
- }
83
- }
84
- &:is(&:focus-visible, &.ax-state-focus) {
85
- // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
86
- outline-offset: -2px;
87
- outline-color: rgba(var(--ax-color-#{$color}-500));
88
- color: rgba(var(--ax-color-#{$color}-fore-tint));
89
- }
90
- & > button {
91
- &:is(&:focus-visible, &.ax-state-focus) {
92
- // @apply ax-text-#{$color}-fore-tint ax-outline-#{$color}-fore-tint -ax-outline-offset-4;
93
- outline-offset: -2px;
94
- outline-color: rgba(var(--ax-color-#{$color}-500));
95
- color: rgba(var(--ax-color-#{$color}-fore-tint));
96
- }
97
- }
98
- &.ax-dropdown-button-marker {
99
- border-inline-start-color: rgba(var(--ax-color-#{$color}-500));
100
- }
101
- }
102
- }
103
-
104
- @if ($look == 'blank') {
105
- .ax-el-#{$color}-#{$look} {
106
- // @apply ax-text-#{$color}-500;
107
- color: rgba(var(--ax-color-#{$color}-500));
108
-
109
- &.ax-el-interactive {
110
- &:hover {
111
- &:not(.ax-state-disabled) {
112
- // @apply ax-text-#{$color}-fore-tint;
113
- color: rgba(var(--ax-color-#{$color}-fore-tint));
114
- }
115
- }
116
- }
117
-
118
- &.ax-state-selected {
119
- // @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
120
- background-color: rgba(var(--ax-color-#{$color}-700));
121
- color: rgba(var(--ax-color-#{$color}-fore));
122
- }
123
- .ax-ripple {
124
- // @apply ax-bg-#{$color}-500/30 #{!important};
125
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
126
- }
127
- ax-loading-spinner {
128
- .ax-loader {
129
- // @apply ax-border-#{$color}-500 ax-border-b-transparent;
130
- border-color: rgba(var(--ax-color-#{$color}-500));
131
- border-bottom-color: transparent;
132
- }
133
- }
134
- &:is(&:focus-visible, &.ax-state-focus) {
135
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
136
- outline-color: rgba(var(--ax-color-#{$color}-300));
137
- outline-offset: 0;
138
- }
139
- & > button {
140
- &:is(&:focus-visible, &.ax-state-focus) {
141
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
142
- outline-color: rgba(var(--ax-color-#{$color}-300));
143
- outline-offset: 0;
144
- }
145
- }
146
- &.ax-dropdown-button-marker {
147
- border-inline-start-color: transparent;
148
- }
149
- }
150
- }
151
-
152
- @if ($look == 'twotone') {
153
- .ax-el-#{$color}-#{$look} {
154
- // @apply ax-bg-#{$color}-100 ax-text-#{$color}-fore-tint ax-border-#{$color}-100;
155
- background-color: rgba(var(--ax-color-#{$color}-100));
156
- color: rgba(var(--ax-color-#{$color}-fore-tint));
157
- border-color: rgba(var(--ax-color-#{$color}-100));
158
-
159
- &.ax-el-interactive {
160
- &:hover {
161
- &:not(.ax-state-disabled) {
162
- // @apply ax-bg-#{$color}-200;
163
- background-color: rgba(var(--ax-color-#{$color}-200));
164
- }
165
- }
166
- }
167
-
168
- &.ax-state-selected {
169
- // @apply ax-bg-#{$color}-300;
170
- background-color: rgba(var(--ax-color-#{$color}-300));
171
- }
172
-
173
- .ax-ripple {
174
- // @apply ax-bg-#{$color}-500/30 #{!important};
175
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
176
- }
177
- ax-loading-spinner {
178
- .ax-loader {
179
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
180
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
181
- border-bottom-color: transparent;
182
- }
183
- }
184
-
185
- &:is(&:focus-visible, &.ax-state-focus) {
186
- // @apply ax-outline-#{$color}-500;
187
- outline-color: rgba(var(--ax-color-#{$color}-500));
188
- }
189
- & > button {
190
- &:is(&:focus-visible, &.ax-state-focus) {
191
- // @apply ax-outline-#{$color}-500;
192
- outline-color: rgba(var(--ax-color-#{$color}-500));
193
- }
194
- }
195
- &.ax-dropdown-button-marker {
196
- border-inline-start-color: rgba(var(--ax-color-#{$color}-50));
197
- }
198
- }
199
- }
200
- }
201
- }
202
-
203
- .ax-el-ghost-solid {
204
- // @apply ax-border ax-border-default ax-bg-ghost ax-text-ghost-fore ax-shadow-sm;
205
- border-width: 1px;
206
- border-color: rgba(var(--ax-color-border-default));
207
- background-color: rgba(var(--ax-color-ghost));
208
- color: rgba(var(--ax-color-ghost-fore));
209
- --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
210
- --ax-shadow-colored: 0 1px 2px 0 var(--ax-shadow-color);
211
- box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
212
- &.ax-el-interactive {
213
- &:hover {
214
- &:not(&.ax-state-selected, &.ax-state-disabled) {
215
- // @apply ax-border-primary-500 ax-text-primary-500;
216
- border-color: rgba(var(--ax-color-primary-500));
217
- color: rgba(var(--ax-color-primary-500));
218
- }
219
- // + &.ax-dropdown-button-marker {
220
- // border-inline-start-color: rgba(var(--ax-color-primary-500));
221
- // }
222
- & + .ax-dropdown-button-marker {
223
- border-inline-start-color: rgba(var(--ax-color-primary-500));
224
- }
225
- }
226
- &:active {
227
- // @apply ax-border-primary-700 ax-text-primary-700;
228
- border-color: rgba(var(--ax-color-primary-700));
229
- color: rgba(var(--ax-color-primary-700));
230
- }
231
- }
232
-
233
- &.ax-state-selected {
234
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
235
- border-color: rgba(var(--ax-color-primary-500));
236
- background-color: rgba(var(--ax-color-primary-500));
237
- color: rgba(var(--ax-color-primary-fore));
238
- }
239
-
240
- .ax-ripple {
241
- // @apply ax-bg-primary-500/30 #{!important};
242
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
243
- }
244
- ax-loading-spinner {
245
- .ax-loader {
246
- // @apply ax-border-ghost-fore ax-border-b-transparent;
247
- border-color: rgba(var(--ax-color-ghost-fore));
248
- border-bottom-color: transparent;
249
- }
250
- }
251
- &.ax-dropdown-button-marker {
252
- border-inline-start-color: rgba(var(--ax-color-border-default));
253
- }
254
- }
255
- .ax-el-ghost-outline {
256
- // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
257
- border-width: 1px;
258
- border-color: rgba(var(--ax-color-border-default));
259
- background-color: transparent;
260
- color: rgba(var(--ax-color-ghost-fore));
261
-
262
- &.ax-el-interactive {
263
- &:hover {
264
- &:not(&.ax-state-selected, &.ax-state-disabled) {
265
- // @apply ax-border-primary-500 ax-text-primary-500;
266
- border-color: rgba(var(--ax-color-primary-500));
267
- color: rgba(var(--ax-color-primary-500));
268
- }
269
- & + .ax-dropdown-button-marker {
270
- border-inline-start-color: rgba(var(--ax-color-primary-500));
271
- }
272
- }
273
- }
274
-
275
- &.ax-state-selected {
276
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
277
- border-color: rgba(var(--ax-color-primary-500));
278
- color: rgba(var(--ax-color-primary-fore));
279
- }
280
- .ax-ripple {
281
- // @apply ax-bg-primary-500/30 #{!important};
282
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
283
- }
284
- ax-loading-spinner {
285
- .ax-loader {
286
- // @apply ax-border-ghost-fore ax-border-b-transparent;
287
- border-color: rgba(var(--ax-color-ghost-fore));
288
- border-bottom-color: transparent;
289
- }
290
- }
291
- &.ax-dropdown-button-marker {
292
- border-inline-start-color: rgba(var(--ax-color-border-default));
293
- }
294
- }
295
- .ax-el-ghost-blank {
296
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
297
- border-style: none;
298
- background-color: transparent;
299
- color: rgba(var(--ax-color-ghost-fore));
300
-
301
- &.ax-state-selected {
302
- // @apply ax-bg-primary-500 ax-text-primary-fore;
303
- background-color: rgba(var(--ax-color-primary-500));
304
- color: rgba(var(--ax-color-primary-fore));
305
- }
306
- &.ax-el-interactive {
307
- &:hover {
308
- &:not(&.ax-state-selected, &.ax-state-disabled) {
309
- // @apply ax-border-primary-700 ax-text-primary-700;
310
- border-color: rgba(var(--ax-color-primary-700));
311
- color: rgba(var(--ax-color-primary-700));
312
- }
313
- }
314
- &:active {
315
- // @apply ax-border-primary-800 ax-text-primary-800;
316
- border-color: rgba(var(--ax-color-primary-800));
317
- color: rgba(var(--ax-color-primary-800));
318
- }
319
- }
320
-
321
- .ax-ripple {
322
- // @apply ax-bg-primary-500/30 #{!important};
323
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
324
- }
325
- ax-loading-spinner {
326
- .ax-loader {
327
- // @apply ax-border-ghost-fore ax-border-b-transparent;
328
- border-color: rgba(var(--ax-color-ghost-fore));
329
- border-bottom-color: transparent;
330
- }
331
- }
332
- & > button {
333
- &:is(&:focus-visible, &.ax-state-focus) {
334
- // @apply ax-outline-primary-500;
335
- outline-color: rgba(var(--ax-color-primary-500));
336
- }
337
- }
338
- &.ax-dropdown-button-marker {
339
- border-inline-start-color: rgba(var(--ax-color-border-default));
340
- }
341
- }
342
- .ax-el-ghost-twotone {
343
- // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
344
- border-color: transparent;
345
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
346
- color: rgba(var(--ax-color-ghost-fore));
347
-
348
- &.ax-el-interactive {
349
- &:hover {
350
- &:not(&.ax-state-selected, &.ax-state-disabled) {
351
- // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
352
- background-color: rgba(var(--ax-color-primary-200));
353
- color: rgba(var(--ax-color-primary-fore-tint));
354
- }
355
- & + .ax-dropdown-button-marker {
356
- border-inline-start-color: rgba(var(--ax-color-primary-500));
357
- }
358
- }
359
- &:active {
360
- // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
361
- background-color: rgba(var(--ax-color-primary-300));
362
- color: rgba(var(--ax-color-primary-fore-tint));
363
- }
364
- }
365
- &.ax-state-selected {
366
- // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
367
- border-color: rgba(var(--ax-color-primary-300));
368
- background-color: rgba(var(--ax-color-primary-400));
369
- color: rgba(var(--ax-color-primary-fore-tint));
370
- }
371
- .ax-ripple {
372
- // @apply ax-bg-primary-500/30 #{!important};
373
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
374
- }
375
- ax-loading-spinner {
376
- .ax-loader {
377
- // @apply ax-border-ghost-fore ax-border-b-transparent;
378
- border-color: rgba(var(--ax-color-ghost-fore));
379
- border-bottom-color: transparent;
380
- }
381
- }
382
- & > button {
383
- &:is(&:focus-visible, &.ax-state-focus) {
384
- // @apply ax-outline-primary-500;
385
- outline-color: rgba(var(--ax-color-primary-500));
386
- }
387
- }
388
- &.ax-dropdown-button-marker {
389
- border-inline-start-color: rgba(var(--ax-color-border-default));
390
- }
391
- }
392
-
393
- @mixin color-look-dark-mode {
394
- @each $color in $color_names {
395
- @each $look in $look_names {
396
- @if ($look == 'solid') {
397
- .ax-el-#{$color}-#{$look} {
398
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
399
- background-color: rgba(var(--ax-color-#{$color}-200));
400
- color: rgba(var(--ax-color-#{$color}-fore-tint));
401
- border-color: rgba(var(--ax-color-#{$color}-200));
402
- &.ax-el-interactive {
403
- &:hover {
404
- &:not(.ax-state-disabled) {
405
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
406
- background-color: rgba(var(--ax-color-#{$color}-300));
407
- color: rgba(var(--ax-color-#{$color}-fore-tint));
408
- }
409
- }
410
- }
411
-
412
- &.ax-state-selected {
413
- // @apply ax-bg-#{$color}-400;
414
- background-color: rgba(var(--ax-color-#{$color}-400));
415
- }
416
- .ax-ripple {
417
- // @apply ax-bg-#{$color}-200/30 #{!important};
418
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3) !important;
419
- }
420
- ax-loading-spinner {
421
- .ax-loader {
422
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
423
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
424
- border-bottom-color: transparent;
425
- }
426
- }
427
- & > button {
428
- &:is(&:focus-visible, &.ax-state-focus) {
429
- outline-color: rgba(var(--ax-color-primary-200));
430
- }
431
- }
432
- &.ax-dropdown-button-marker {
433
- border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
434
- }
435
- }
436
- }
437
- @if ($look == 'outline') {
438
- .ax-el-#{$color}-#{$look} {
439
- // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
440
-
441
- border-color: rgba(var(--ax-color-#{$color}-200));
442
- color: rgba(var(--ax-color-#{$color}-200));
443
-
444
- &.ax-el-interactive {
445
- &:hover {
446
- &:not(.ax-state-disabled) {
447
- // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
448
- border-color: rgba(var(--ax-color-#{$color}-300));
449
- color: rgba(var(--ax-color-#{$color}-300));
450
- background-color: transparent;
451
- }
452
- }
453
- }
454
-
455
- &.ax-state-selected {
456
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
457
- border-color: rgba(var(--ax-color-#{$color}-300));
458
- color: rgba(var(--ax-color-#{$color}-300));
459
- }
460
- .ax-ripple {
461
- // @apply ax-bg-#{$color}-500/30 #{!important};
462
- border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
463
- }
464
- ax-loading-spinner {
465
- .ax-loader {
466
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
467
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
468
- border-bottom-color: transparent;
469
- }
470
- }
471
- & > button {
472
- &:is(&:focus-visible, &.ax-state-focus) {
473
- // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
474
- border-color: rgba(var(--ax-color-#{$color}-300));
475
- color: rgba(var(--ax-color-#{$color}-300));
476
- }
477
- }
478
- }
479
- }
480
-
481
- @if ($look == 'blank') {
482
- .ax-el-#{$color}-#{$look} {
483
- // @apply ax-text-#{$color}-300 ax-bg-transparent;
484
-
485
- color: rgba(var(--ax-color-#{$color}-300));
486
- background-color: transparent;
487
- &.ax-el-interactive {
488
- &:hover {
489
- &:not(.ax-state-disabled) {
490
- // @apply ax-text-#{$color}-500;
491
- color: rgba(var(--ax-color-#{$color}-400));
492
- }
493
- }
494
- }
495
-
496
- &.ax-state-selected {
497
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
498
- background-color: rgba(var(--ax-color-#{$color}-500));
499
- color: rgba(var(--ax-color-#{$color}-fore));
500
- }
501
- .ax-ripple {
502
- // @apply ax-bg-#{$color}-500/30 #{!important};
503
- background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
504
- }
505
- ax-loading-spinner {
506
- .ax-loader {
507
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
508
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
509
- border-bottom-color: transparent;
510
- }
511
- }
512
- & > button {
513
- &:is(&:focus-visible, &.ax-state-focus) {
514
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
515
- }
516
- }
517
- }
518
- }
519
- @if ($look == 'twotone') {
520
- .ax-el-#{$color}-#{$look} {
521
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
522
-
523
- background-color: rgba(var(--ax-color-#{$color}-200));
524
- color: rgba(var(--ax-color-#{$color}-fore-tint));
525
- border-color: rgba(var(--ax-color-#{$color}-200));
526
-
527
- &.ax-state-interactive {
528
- &:hover {
529
- &:not(.ax-state-disabled) {
530
- background-color: rgba(var(--ax-color-#{$color}-300));
531
- // @apply ax-bg-#{$color}-300;
532
- }
533
- }
534
- }
535
-
536
- &.ax-state-selected {
537
- // @apply ax-bg-#{$color}-400;
538
- background-color: rgba(var(--ax-color-#{$color}-400));
539
- }
540
- .ax-ripple {
541
- // @apply ax-bg-#{$color}-500/30 #{!important};
542
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
543
- }
544
- ax-loading-spinner {
545
- .ax-loader {
546
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
547
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
548
- border-bottom-color: transparent;
549
- }
550
- }
551
- & > button {
552
- &:is(&:focus-visible, &.ax-state-focus) {
553
- // @apply ax-outline-#{$color}-500;
554
- }
555
- }
556
- &.ax-dropdown-button-marker {
557
- border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
558
- }
559
- }
560
- }
561
- }
562
- }
563
- .ax-el-ghost-solid {
564
- &.ax-el-interactive {
565
- &:hover {
566
- &:not(&.ax-state-selected, &.ax-state-disabled) {
567
- border-color: rgba(var(--ax-color-primary-200));
568
- color: rgba(var(--ax-color-primary-200));
569
- }
570
- & + .ax-dropdown-button-marker {
571
- border-inline-start-color: rgba(var(--ax-color-primary-200));
572
- }
573
- }
574
- &:active {
575
- border-color: rgba(var(--ax-color-primary-300));
576
- color: rgba(var(--ax-color-primary-300));
577
- }
578
- }
579
-
580
- &.ax-state-selected {
581
- border-color: rgba(var(--ax-color-primary-200));
582
- background-color: rgba(var(--ax-color-primary-200));
583
- color: rgba(var(--ax-color-primary-fore));
584
- }
585
-
586
- .ax-ripple {
587
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
588
- }
589
- }
590
- .ax-el-ghost-outline {
591
- &.ax-el-interactive {
592
- &:hover {
593
- &:not(&.ax-state-selected, &.ax-state-disabled) {
594
- border-color: rgba(var(--ax-color-primary-200));
595
- color: rgba(var(--ax-color-primary-200));
596
- }
597
- & + .ax-dropdown-button-marker {
598
- border-inline-start-color: rgba(var(--ax-color-primary-200));
599
- }
600
- }
601
- }
602
-
603
- &.ax-state-selected {
604
- border-color: rgba(var(--ax-color-primary-200));
605
- color: rgba(var(--ax-color-primary-fore-tint));
606
- }
607
- .ax-ripple {
608
- background-color: rgba(var(--ax-color-primary-200), 0.3);
609
- }
610
- ax-loading-spinner {
611
- .ax-loader {
612
- border-color: rgba(var(--ax-color-ghost-fore));
613
- border-bottom-color: transparent;
614
- }
615
- }
616
- }
617
- .ax-el-ghost-blank {
618
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
619
- border-style: none;
620
- background-color: transparent;
621
- color: rgba(var(--ax-color-ghost-fore));
622
-
623
- &.ax-state-selected {
624
- // @apply ax-bg-primary-500 ax-text-primary-fore;
625
- background-color: rgba(var(--ax-color-primary-500));
626
- color: rgba(var(--ax-color-primary-fore));
627
- }
628
- &.ax-el-interactive {
629
- &:hover {
630
- &:not(&.ax-state-selected, &.ax-state-disabled) {
631
- border-color: rgba(var(--ax-color-primary-300));
632
- color: rgba(var(--ax-color-primary-300));
633
- }
634
- }
635
- &:active {
636
- border-color: rgba(var(--ax-color-primary-400));
637
- color: rgba(var(--ax-color-primary-400));
638
- }
639
- }
640
-
641
- .ax-ripple {
642
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
643
- }
644
-
645
- & > button {
646
- &:is(&:focus-visible, &.ax-state-focus) {
647
- outline-color: rgba(var(--ax-color-primary-200));
648
- }
649
- }
650
- }
651
- .ax-el-ghost-twotone {
652
- border-color: transparent;
653
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
654
- color: rgba(var(--ax-color-ghost-fore));
655
-
656
- &.ax-el-interactive {
657
- &:hover {
658
- &:not(&.ax-state-selected, &.ax-state-disabled) {
659
- background-color: rgba(var(--ax-color-primary-200));
660
- color: rgba(var(--ax-color-primary-fore-tint));
661
- }
662
- & + .ax-dropdown-button-marker {
663
- border-inline-start-color: rgba(var(--ax-color-primary-200));
664
- }
665
- }
666
- &:active {
667
- background-color: rgba(var(--ax-color-primary-300));
668
- color: rgba(var(--ax-color-primary-fore-tint));
669
- }
670
- }
671
- &.ax-state-selected {
672
- border-color: rgba(var(--ax-color-primary-300));
673
- background-color: rgba(var(--ax-color-primary-300));
674
- }
675
- .ax-ripple {
676
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
677
- }
678
-
679
- & > button {
680
- &:is(&:focus-visible, &.ax-state-focus) {
681
- outline-color: rgba(var(--ax-color-primary-200));
682
- }
683
- }
684
- }
685
- }
686
-
687
- @include darkMode() {
688
- @include color-look-dark-mode();
689
- }