@acorex/styles 7.24.4 → 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 -696
  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,696 +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),
212
- var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
213
- &.ax-el-interactive {
214
- &:hover {
215
- &:not(&.ax-state-selected, &.ax-state-disabled) {
216
- // @apply ax-border-primary-500 ax-text-primary-500;
217
- border-color: rgba(var(--ax-color-primary-500));
218
- color: rgba(var(--ax-color-primary-500));
219
- }
220
- // + &.ax-dropdown-button-marker {
221
- // border-inline-start-color: rgba(var(--ax-color-primary-500));
222
- // }
223
- & + .ax-dropdown-button-marker {
224
- border-inline-start-color: rgba(var(--ax-color-primary-500));
225
- }
226
- }
227
- &:active {
228
- // @apply ax-border-primary-700 ax-text-primary-700;
229
- border-color: rgba(var(--ax-color-primary-700));
230
- color: rgba(var(--ax-color-primary-700));
231
- }
232
- }
233
-
234
- &.ax-state-selected {
235
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
236
- border-color: rgba(var(--ax-color-primary-500));
237
- background-color: rgba(var(--ax-color-primary-500));
238
- color: rgba(var(--ax-color-primary-fore));
239
- }
240
-
241
- .ax-ripple {
242
- // @apply ax-bg-primary-500/30 #{!important};
243
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
244
- }
245
- ax-loading-spinner {
246
- .ax-loader {
247
- // @apply ax-border-ghost-fore ax-border-b-transparent;
248
- border-color: rgba(var(--ax-color-ghost-fore));
249
- border-bottom-color: transparent;
250
- }
251
- }
252
- &.ax-dropdown-button-marker {
253
- border-inline-start-color: rgba(var(--ax-color-border-default));
254
- }
255
- }
256
- .ax-el-ghost-outline {
257
- // @apply ax-border ax-border-default ax-bg-transparent ax-text-ghost-fore;
258
- border-width: 1px;
259
- border-color: rgba(var(--ax-color-border-default));
260
- background-color: transparent;
261
- color: rgba(var(--ax-color-ghost-fore));
262
-
263
- &.ax-el-interactive {
264
- &:hover {
265
- &:not(&.ax-state-selected, &.ax-state-disabled) {
266
- // @apply ax-border-primary-500 ax-text-primary-500;
267
- border-color: rgba(var(--ax-color-primary-500));
268
- color: rgba(var(--ax-color-primary-500));
269
- }
270
- & + .ax-dropdown-button-marker {
271
- border-inline-start-color: rgba(var(--ax-color-primary-500));
272
- }
273
- }
274
- }
275
-
276
- &.ax-state-selected {
277
- // @apply ax-border-primary-500 ax-bg-primary-500 ax-text-primary-fore;
278
- border-color: rgba(var(--ax-color-primary-500));
279
- color: rgba(var(--ax-color-primary-fore));
280
- }
281
- .ax-ripple {
282
- // @apply ax-bg-primary-500/30 #{!important};
283
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
284
- }
285
- ax-loading-spinner {
286
- .ax-loader {
287
- // @apply ax-border-ghost-fore ax-border-b-transparent;
288
- border-color: rgba(var(--ax-color-ghost-fore));
289
- border-bottom-color: transparent;
290
- }
291
- }
292
- &.ax-dropdown-button-marker {
293
- border-inline-start-color: rgba(var(--ax-color-border-default));
294
- }
295
- }
296
- .ax-el-ghost-blank {
297
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
298
- border-style: none;
299
- background-color: transparent;
300
- color: rgba(var(--ax-color-ghost-fore));
301
-
302
- &.ax-state-selected {
303
- // @apply ax-bg-primary-500 ax-text-primary-fore;
304
- background-color: rgba(var(--ax-color-primary-500));
305
- color: rgba(var(--ax-color-primary-fore));
306
- }
307
- &.ax-el-interactive {
308
- &:hover {
309
- &:not(&.ax-state-selected, &.ax-state-disabled) {
310
- // @apply ax-border-primary-700 ax-text-primary-700;
311
- border-color: rgba(var(--ax-color-primary-700));
312
- color: rgba(var(--ax-color-primary-700));
313
- }
314
- }
315
- &:active {
316
- // @apply ax-border-primary-800 ax-text-primary-800;
317
- border-color: rgba(var(--ax-color-primary-800));
318
- color: rgba(var(--ax-color-primary-800));
319
- }
320
- }
321
-
322
- .ax-ripple {
323
- // @apply ax-bg-primary-500/30 #{!important};
324
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
325
- }
326
- ax-loading-spinner {
327
- .ax-loader {
328
- // @apply ax-border-ghost-fore ax-border-b-transparent;
329
- border-color: rgba(var(--ax-color-ghost-fore));
330
- border-bottom-color: transparent;
331
- }
332
- }
333
- & > button {
334
- &:is(&:focus-visible, &.ax-state-focus) {
335
- // @apply ax-outline-primary-500;
336
- outline-color: rgba(var(--ax-color-primary-500));
337
- }
338
- }
339
- &.ax-dropdown-button-marker {
340
- border-inline-start-color: rgba(var(--ax-color-border-default));
341
- }
342
- }
343
- .ax-el-ghost-twotone {
344
- // @apply ax-border-transparent ax-bg-ghost-fore/5 ax-text-ghost-fore;
345
- border-color: transparent;
346
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
347
- color: rgba(var(--ax-color-ghost-fore));
348
-
349
- &.ax-el-interactive {
350
- &:hover {
351
- &:not(&.ax-state-selected, &.ax-state-disabled) {
352
- // @apply ax-bg-primary-200 ax-text-primary-fore-tint;
353
- background-color: rgba(var(--ax-color-primary-200));
354
- color: rgba(var(--ax-color-primary-fore-tint));
355
- }
356
- & + .ax-dropdown-button-marker {
357
- border-inline-start-color: rgba(var(--ax-color-primary-500));
358
- }
359
- }
360
- &:active {
361
- // @apply ax-bg-primary-300 ax-text-primary-fore-tint;
362
- background-color: rgba(var(--ax-color-primary-300));
363
- color: rgba(var(--ax-color-primary-fore-tint));
364
- }
365
- }
366
- &.ax-state-selected {
367
- // @apply ax-border-primary-300 ax-bg-primary-400 ax-text-primary-fore-tint;
368
- border-color: rgba(var(--ax-color-primary-300));
369
- background-color: rgba(var(--ax-color-primary-400));
370
- color: rgba(var(--ax-color-primary-fore-tint));
371
- }
372
- .ax-ripple {
373
- // @apply ax-bg-primary-500/30 #{!important};
374
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
375
- }
376
- ax-loading-spinner {
377
- .ax-loader {
378
- // @apply ax-border-ghost-fore ax-border-b-transparent;
379
- border-color: rgba(var(--ax-color-ghost-fore));
380
- border-bottom-color: transparent;
381
- }
382
- }
383
- & > button {
384
- &:is(&:focus-visible, &.ax-state-focus) {
385
- // @apply ax-outline-primary-500;
386
- outline-color: rgba(var(--ax-color-primary-500));
387
- }
388
- }
389
- &.ax-dropdown-button-marker {
390
- border-inline-start-color: rgba(var(--ax-color-border-default));
391
- }
392
- }
393
-
394
- @mixin color-look-dark-mode {
395
- @each $color in $color_names {
396
- @each $look in $look_names {
397
- @if ($look == 'solid') {
398
- .ax-el-#{$color}-#{$look} {
399
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
400
- background-color: rgba(var(--ax-color-#{$color}-200));
401
- color: rgba(var(--ax-color-#{$color}-fore-tint));
402
- border-color: rgba(var(--ax-color-#{$color}-200));
403
- &.ax-el-interactive {
404
- &:hover {
405
- &:not(.ax-state-disabled) {
406
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore-tint;
407
- background-color: rgba(var(--ax-color-#{$color}-300));
408
- color: rgba(var(--ax-color-#{$color}-fore-tint));
409
- }
410
- }
411
- }
412
-
413
- &.ax-state-selected {
414
- // @apply ax-bg-#{$color}-400;
415
- background-color: rgba(var(--ax-color-#{$color}-400));
416
- }
417
- .ax-ripple {
418
- // @apply ax-bg-#{$color}-200/30 #{!important};
419
- background-color: rgba(
420
- var(--ax-color-#{$color}-500),
421
- 0.3
422
- ) !important;
423
- }
424
- ax-loading-spinner {
425
- .ax-loader {
426
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
427
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
428
- border-bottom-color: transparent;
429
- }
430
- }
431
- & > button {
432
- &:is(&:focus-visible, &.ax-state-focus) {
433
- outline-color: rgba(var(--ax-color-primary-200));
434
- }
435
- }
436
- &.ax-dropdown-button-marker {
437
- border-inline-start-color: rgba(var(--ax-color-#{$color}-900));
438
- }
439
- }
440
- }
441
- @if ($look == 'outline') {
442
- .ax-el-#{$color}-#{$look} {
443
- // @apply ax-border-#{$color}-200 ax-text-#{$color}-200;
444
-
445
- border-color: rgba(var(--ax-color-#{$color}-200));
446
- color: rgba(var(--ax-color-#{$color}-200));
447
-
448
- &.ax-el-interactive {
449
- &:hover {
450
- &:not(.ax-state-disabled) {
451
- // @apply ax-border-#{$color}-300 ax-text-#{$color}-300 ax-bg-transparent;
452
- border-color: rgba(var(--ax-color-#{$color}-300));
453
- color: rgba(var(--ax-color-#{$color}-300));
454
- background-color: transparent;
455
- }
456
- }
457
- }
458
-
459
- &.ax-state-selected {
460
- // @apply ax-bg-#{$color}-300 ax-text-#{$color}-fore;
461
- border-color: rgba(var(--ax-color-#{$color}-300));
462
- color: rgba(var(--ax-color-#{$color}-300));
463
- }
464
- .ax-ripple {
465
- // @apply ax-bg-#{$color}-500/30 #{!important};
466
- border-color: rgba(var(--ax-color-#{$color}-500), 0.3);
467
- }
468
- ax-loading-spinner {
469
- .ax-loader {
470
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
471
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
472
- border-bottom-color: transparent;
473
- }
474
- }
475
- & > button {
476
- &:is(&:focus-visible, &.ax-state-focus) {
477
- // @apply ax-text-#{$color}-300 ax-outline-#{$color}-300 -ax-outline-offset-4;
478
- border-color: rgba(var(--ax-color-#{$color}-300));
479
- color: rgba(var(--ax-color-#{$color}-300));
480
- }
481
- }
482
- }
483
- }
484
-
485
- @if ($look == 'blank') {
486
- .ax-el-#{$color}-#{$look} {
487
- // @apply ax-text-#{$color}-300 ax-bg-transparent;
488
-
489
- color: rgba(var(--ax-color-#{$color}-300));
490
- background-color: transparent;
491
- &.ax-el-interactive {
492
- &:hover {
493
- &:not(.ax-state-disabled) {
494
- // @apply ax-text-#{$color}-500;
495
- color: rgba(var(--ax-color-#{$color}-400));
496
- }
497
- }
498
- }
499
-
500
- &.ax-state-selected {
501
- // @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
502
- background-color: rgba(var(--ax-color-#{$color}-500));
503
- color: rgba(var(--ax-color-#{$color}-fore));
504
- }
505
- .ax-ripple {
506
- // @apply ax-bg-#{$color}-500/30 #{!important};
507
- background-color: rgba(
508
- var(--ax-color-#{$color}-300),
509
- 0.3
510
- ) !important;
511
- }
512
- ax-loading-spinner {
513
- .ax-loader {
514
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
515
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
516
- border-bottom-color: transparent;
517
- }
518
- }
519
- & > button {
520
- &:is(&:focus-visible, &.ax-state-focus) {
521
- // @apply ax-outline-#{$color}-300 ax-outline-offset-0;
522
- }
523
- }
524
- }
525
- }
526
- @if ($look == 'twotone') {
527
- .ax-el-#{$color}-#{$look} {
528
- // @apply ax-bg-#{$color}-200 ax-text-#{$color}-fore-tint ax-border-#{$color}-200;
529
-
530
- background-color: rgba(var(--ax-color-#{$color}-200));
531
- color: rgba(var(--ax-color-#{$color}-fore-tint));
532
- border-color: rgba(var(--ax-color-#{$color}-200));
533
-
534
- &.ax-state-interactive {
535
- &:hover {
536
- &:not(.ax-state-disabled) {
537
- background-color: rgba(var(--ax-color-#{$color}-300));
538
- // @apply ax-bg-#{$color}-300;
539
- }
540
- }
541
- }
542
-
543
- &.ax-state-selected {
544
- // @apply ax-bg-#{$color}-400;
545
- background-color: rgba(var(--ax-color-#{$color}-400));
546
- }
547
- .ax-ripple {
548
- // @apply ax-bg-#{$color}-500/30 #{!important};
549
- background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
550
- }
551
- ax-loading-spinner {
552
- .ax-loader {
553
- // @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
554
- border-color: rgba(var(--ax-color-#{$color}-fore-tint));
555
- border-bottom-color: transparent;
556
- }
557
- }
558
- & > button {
559
- &:is(&:focus-visible, &.ax-state-focus) {
560
- // @apply ax-outline-#{$color}-500;
561
- }
562
- }
563
- &.ax-dropdown-button-marker {
564
- border-inline-start-color: rgba(var(--ax-color-#{$color}-950));
565
- }
566
- }
567
- }
568
- }
569
- }
570
- .ax-el-ghost-solid {
571
- &.ax-el-interactive {
572
- &:hover {
573
- &:not(&.ax-state-selected, &.ax-state-disabled) {
574
- border-color: rgba(var(--ax-color-primary-200));
575
- color: rgba(var(--ax-color-primary-200));
576
- }
577
- & + .ax-dropdown-button-marker {
578
- border-inline-start-color: rgba(var(--ax-color-primary-200));
579
- }
580
- }
581
- &:active {
582
- border-color: rgba(var(--ax-color-primary-300));
583
- color: rgba(var(--ax-color-primary-300));
584
- }
585
- }
586
-
587
- &.ax-state-selected {
588
- border-color: rgba(var(--ax-color-primary-200));
589
- background-color: rgba(var(--ax-color-primary-200));
590
- color: rgba(var(--ax-color-primary-fore));
591
- }
592
-
593
- .ax-ripple {
594
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
595
- }
596
- }
597
- .ax-el-ghost-outline {
598
- &.ax-el-interactive {
599
- &:hover {
600
- &:not(&.ax-state-selected, &.ax-state-disabled) {
601
- border-color: rgba(var(--ax-color-primary-200));
602
- color: rgba(var(--ax-color-primary-200));
603
- }
604
- & + .ax-dropdown-button-marker {
605
- border-inline-start-color: rgba(var(--ax-color-primary-200));
606
- }
607
- }
608
- }
609
-
610
- &.ax-state-selected {
611
- border-color: rgba(var(--ax-color-primary-200));
612
- color: rgba(var(--ax-color-primary-fore-tint));
613
- }
614
- .ax-ripple {
615
- background-color: rgba(var(--ax-color-primary-200), 0.3);
616
- }
617
- ax-loading-spinner {
618
- .ax-loader {
619
- border-color: rgba(var(--ax-color-ghost-fore));
620
- border-bottom-color: transparent;
621
- }
622
- }
623
- }
624
- .ax-el-ghost-blank {
625
- // @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
626
- border-style: none;
627
- background-color: transparent;
628
- color: rgba(var(--ax-color-ghost-fore));
629
-
630
- &.ax-state-selected {
631
- // @apply ax-bg-primary-500 ax-text-primary-fore;
632
- background-color: rgba(var(--ax-color-primary-500));
633
- color: rgba(var(--ax-color-primary-fore));
634
- }
635
- &.ax-el-interactive {
636
- &:hover {
637
- &:not(&.ax-state-selected, &.ax-state-disabled) {
638
- border-color: rgba(var(--ax-color-primary-300));
639
- color: rgba(var(--ax-color-primary-300));
640
- }
641
- }
642
- &:active {
643
- border-color: rgba(var(--ax-color-primary-400));
644
- color: rgba(var(--ax-color-primary-400));
645
- }
646
- }
647
-
648
- .ax-ripple {
649
- background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
650
- }
651
-
652
- & > button {
653
- &:is(&:focus-visible, &.ax-state-focus) {
654
- outline-color: rgba(var(--ax-color-primary-200));
655
- }
656
- }
657
- }
658
- .ax-el-ghost-twotone {
659
- border-color: transparent;
660
- background-color: rgba(var(--ax-color-ghost-fore), 0.05);
661
- color: rgba(var(--ax-color-ghost-fore));
662
-
663
- &.ax-el-interactive {
664
- &:hover {
665
- &:not(&.ax-state-selected, &.ax-state-disabled) {
666
- background-color: rgba(var(--ax-color-primary-200));
667
- color: rgba(var(--ax-color-primary-fore-tint));
668
- }
669
- & + .ax-dropdown-button-marker {
670
- border-inline-start-color: rgba(var(--ax-color-primary-200));
671
- }
672
- }
673
- &:active {
674
- background-color: rgba(var(--ax-color-primary-300));
675
- color: rgba(var(--ax-color-primary-fore-tint));
676
- }
677
- }
678
- &.ax-state-selected {
679
- border-color: rgba(var(--ax-color-primary-300));
680
- background-color: rgba(var(--ax-color-primary-300));
681
- }
682
- .ax-ripple {
683
- background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
684
- }
685
-
686
- & > button {
687
- &:is(&:focus-visible, &.ax-state-focus) {
688
- outline-color: rgba(var(--ax-color-primary-200));
689
- }
690
- }
691
- }
692
- }
693
-
694
- @include darkMode() {
695
- @include color-look-dark-mode();
696
- }