@acorex/styles 6.0.2 → 6.0.7
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.
- package/index.js +1 -7
- package/package.json +2 -2
- package/src/components/_alert.scss +287 -3
- package/src/components/_button.scss +2 -2
- package/src/components/_calendar.scss +1 -0
- package/src/components/_color-picker.scss +1 -1
- package/src/components/_context-menu.scss +19 -0
- package/src/components/_decoration.scss +4 -4
- package/src/components/_drawer.scss +4 -3
- package/src/components/_dropdown.scss +1 -0
- package/src/components/_editor-container.scss +3 -3
- package/src/components/_fieldset.scss +5 -5
- package/src/components/_menu copy.scss +96 -0
- package/src/components/_menu.scss +82 -39
- package/src/components/_range-slider.scss +23 -16
- package/src/components/_result.scss +1 -1
- package/src/components/_switch.scss +2 -2
- package/src/components/_tabs.scss +22 -29
- package/src/components/index.scss +1 -0
- package/src/utility/_mixins.scss +1 -1
- package/src/utility/index.scss +4 -4
package/index.js
CHANGED
|
@@ -173,12 +173,6 @@ module.exports = withAnimations({
|
|
|
173
173
|
backgroundColor:
|
|
174
174
|
"rgb(var(--ax-color-default-color) / var(--tw-text-opacity))",
|
|
175
175
|
},
|
|
176
|
-
".rtl": {
|
|
177
|
-
direction: "rtl",
|
|
178
|
-
},
|
|
179
|
-
".ltr": {
|
|
180
|
-
direction: "ltr",
|
|
181
|
-
},
|
|
182
176
|
};
|
|
183
177
|
addUtilities(acorexClasses, ["responsive", "hover", "focus"]);
|
|
184
178
|
}),
|
|
@@ -186,6 +180,6 @@ module.exports = withAnimations({
|
|
|
186
180
|
require("tailwindcss/nesting")(require("postcss-nesting")),
|
|
187
181
|
require("tailwindcss"),
|
|
188
182
|
require("autoprefixer"),
|
|
189
|
-
require("tailwind-
|
|
183
|
+
require("tailwind-auto-directions"),
|
|
190
184
|
],
|
|
191
185
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acorex/styles",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "",
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"animated-tailwindcss": "^3.3.0",
|
|
13
13
|
"autoprefixer": "^10.4.7",
|
|
14
14
|
"postcss": "^8.4.14",
|
|
15
|
-
"tailwind-
|
|
15
|
+
"tailwind-auto-directions": "^1.0.2",
|
|
16
16
|
"tailwindcss": "^3.1.3"
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -23,7 +23,10 @@
|
|
|
23
23
|
.ax-alert-body {
|
|
24
24
|
@apply ax-flex-1 ax-p-3.5;
|
|
25
25
|
.ax-icon {
|
|
26
|
-
@apply ax-
|
|
26
|
+
@apply ax-text-2xl;
|
|
27
|
+
&:first-child{
|
|
28
|
+
@apply ax-me-2
|
|
29
|
+
}
|
|
27
30
|
}
|
|
28
31
|
.ax-button {
|
|
29
32
|
--ax-base-size: 6px;
|
|
@@ -87,6 +90,22 @@
|
|
|
87
90
|
// @include color-look-generator();
|
|
88
91
|
|
|
89
92
|
// primary
|
|
93
|
+
&.ax-primary-twotone,
|
|
94
|
+
&.ax-primary-outline,
|
|
95
|
+
&.ax-primary-link,
|
|
96
|
+
&.ax-primary-blank {
|
|
97
|
+
.ax-close-button {
|
|
98
|
+
.ax-icon {
|
|
99
|
+
@apply ax-text-primary-500;
|
|
100
|
+
&:hover {
|
|
101
|
+
@apply ax-text-primary-500/50;
|
|
102
|
+
}
|
|
103
|
+
&:active {
|
|
104
|
+
@apply ax-text-primary-500;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
}
|
|
90
109
|
&.ax-primary-default {
|
|
91
110
|
@apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
|
|
92
111
|
.ax-header {
|
|
@@ -95,6 +114,17 @@
|
|
|
95
114
|
.ax-alert-progress {
|
|
96
115
|
@apply ax-bg-primary-800 dark:ax-bg-primary-500;
|
|
97
116
|
}
|
|
117
|
+
.ax-close-button {
|
|
118
|
+
.ax-icon {
|
|
119
|
+
@apply ax-text-primary-fore;
|
|
120
|
+
&:hover {
|
|
121
|
+
@apply ax-text-primary-50/50;
|
|
122
|
+
}
|
|
123
|
+
&:active {
|
|
124
|
+
@apply ax-text-primary-fore;
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
}
|
|
98
128
|
}
|
|
99
129
|
&.ax-primary-twotone {
|
|
100
130
|
@apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
|
|
@@ -114,6 +144,15 @@
|
|
|
114
144
|
@apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
|
|
115
145
|
}
|
|
116
146
|
}
|
|
147
|
+
&.ax-primary-link {
|
|
148
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-primary-500 ax-border-b ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
|
|
149
|
+
.ax-header {
|
|
150
|
+
@apply ax-bg-transparent;
|
|
151
|
+
}
|
|
152
|
+
.ax-alert-progress {
|
|
153
|
+
@apply ax-bg-primary-500 ax-h-1 dark:ax-bg-primary-400;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
117
156
|
&.ax-primary-blank {
|
|
118
157
|
@apply ax-bg-transparent ax-text-primary-500 dark:ax-text-primary-300 ax-rounded-none;
|
|
119
158
|
.ax-header {
|
|
@@ -123,8 +162,25 @@
|
|
|
123
162
|
@apply ax-bg-primary-200 dark:ax-bg-primary-800;
|
|
124
163
|
}
|
|
125
164
|
}
|
|
165
|
+
|
|
126
166
|
|
|
127
167
|
// secondary
|
|
168
|
+
&.ax-secondary-twotone,
|
|
169
|
+
&.ax-secondary-outline,
|
|
170
|
+
&.ax-secondary-link,
|
|
171
|
+
&.ax-secondary-blank {
|
|
172
|
+
.ax-close-button {
|
|
173
|
+
.ax-icon {
|
|
174
|
+
@apply ax-text-secondary-500;
|
|
175
|
+
&:hover {
|
|
176
|
+
@apply ax-text-secondary-500/50;
|
|
177
|
+
}
|
|
178
|
+
&:active {
|
|
179
|
+
@apply ax-text-secondary-500;
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
128
184
|
&.ax-secondary-default {
|
|
129
185
|
@apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
|
|
130
186
|
.ax-header {
|
|
@@ -133,6 +189,17 @@
|
|
|
133
189
|
.ax-alert-progress {
|
|
134
190
|
@apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
|
|
135
191
|
}
|
|
192
|
+
.ax-close-button {
|
|
193
|
+
.ax-icon {
|
|
194
|
+
@apply ax-text-secondary-fore;
|
|
195
|
+
&:hover {
|
|
196
|
+
@apply ax-text-secondary-50/50;
|
|
197
|
+
}
|
|
198
|
+
&:active {
|
|
199
|
+
@apply ax-text-secondary-fore;
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
136
203
|
}
|
|
137
204
|
&.ax-secondary-twotone {
|
|
138
205
|
@apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
|
|
@@ -152,6 +219,15 @@
|
|
|
152
219
|
@apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
|
|
153
220
|
}
|
|
154
221
|
}
|
|
222
|
+
&.ax-secondary-link {
|
|
223
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-secondary-500 ax-border-b ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
|
|
224
|
+
.ax-header {
|
|
225
|
+
@apply ax-bg-transparent;
|
|
226
|
+
}
|
|
227
|
+
.ax-alert-progress {
|
|
228
|
+
@apply ax-bg-secondary-500 ax-h-1 dark:ax-bg-secondary-400;
|
|
229
|
+
}
|
|
230
|
+
}
|
|
155
231
|
&.ax-secondary-blank {
|
|
156
232
|
@apply ax-bg-transparent ax-text-secondary-500 dark:ax-text-secondary-300 ax-rounded-none;
|
|
157
233
|
.ax-header {
|
|
@@ -163,6 +239,22 @@
|
|
|
163
239
|
}
|
|
164
240
|
|
|
165
241
|
// success
|
|
242
|
+
&.ax-success-twotone,
|
|
243
|
+
&.ax-success-outline,
|
|
244
|
+
&.ax-success-link,
|
|
245
|
+
&.ax-success-blank {
|
|
246
|
+
.ax-close-button {
|
|
247
|
+
.ax-icon {
|
|
248
|
+
@apply ax-text-success-500;
|
|
249
|
+
&:hover {
|
|
250
|
+
@apply ax-text-success-500/50;
|
|
251
|
+
}
|
|
252
|
+
&:active {
|
|
253
|
+
@apply ax-text-success-500;
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
}
|
|
166
258
|
&.ax-success-default {
|
|
167
259
|
@apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
|
|
168
260
|
.ax-header {
|
|
@@ -171,6 +263,17 @@
|
|
|
171
263
|
.ax-alert-progress {
|
|
172
264
|
@apply ax-bg-success-800 dark:ax-bg-success-500;
|
|
173
265
|
}
|
|
266
|
+
.ax-close-button {
|
|
267
|
+
.ax-icon {
|
|
268
|
+
@apply ax-text-success-fore;
|
|
269
|
+
&:hover {
|
|
270
|
+
@apply ax-text-success-50/50;
|
|
271
|
+
}
|
|
272
|
+
&:active {
|
|
273
|
+
@apply ax-text-success-fore;
|
|
274
|
+
}
|
|
275
|
+
}
|
|
276
|
+
}
|
|
174
277
|
}
|
|
175
278
|
&.ax-success-twotone {
|
|
176
279
|
@apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
|
|
@@ -190,6 +293,17 @@
|
|
|
190
293
|
@apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
|
|
191
294
|
}
|
|
192
295
|
}
|
|
296
|
+
|
|
297
|
+
&.ax-success-link {
|
|
298
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-success-500 ax-border-b ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
|
|
299
|
+
.ax-header {
|
|
300
|
+
@apply ax-bg-transparent;
|
|
301
|
+
}
|
|
302
|
+
.ax-alert-progress {
|
|
303
|
+
@apply ax-bg-success-500 ax-h-1 dark:ax-bg-success-400;
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
|
|
193
307
|
&.ax-success-blank {
|
|
194
308
|
@apply ax-bg-transparent ax-text-success-500 dark:ax-text-success-300 ax-rounded-none;
|
|
195
309
|
.ax-header {
|
|
@@ -201,6 +315,22 @@
|
|
|
201
315
|
}
|
|
202
316
|
|
|
203
317
|
// warning
|
|
318
|
+
&.ax-warning-twotone,
|
|
319
|
+
&.ax-warning-outline,
|
|
320
|
+
&.ax-warning-link,
|
|
321
|
+
&.ax-warning-blank {
|
|
322
|
+
.ax-close-button {
|
|
323
|
+
.ax-icon {
|
|
324
|
+
@apply ax-text-warning-900;
|
|
325
|
+
&:hover {
|
|
326
|
+
@apply ax-text-warning-900/50;
|
|
327
|
+
}
|
|
328
|
+
&:active {
|
|
329
|
+
@apply ax-text-warning-900;
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
}
|
|
204
334
|
&.ax-warning-default {
|
|
205
335
|
@apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
|
|
206
336
|
.ax-header {
|
|
@@ -209,6 +339,17 @@
|
|
|
209
339
|
.ax-alert-progress {
|
|
210
340
|
@apply ax-bg-warning-800 dark:ax-bg-warning-500;
|
|
211
341
|
}
|
|
342
|
+
.ax-close-button {
|
|
343
|
+
.ax-icon {
|
|
344
|
+
@apply ax-text-warning-fore;
|
|
345
|
+
&:hover {
|
|
346
|
+
@apply ax-text-warning-50/50;
|
|
347
|
+
}
|
|
348
|
+
&:active {
|
|
349
|
+
@apply ax-text-warning-fore;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
}
|
|
212
353
|
}
|
|
213
354
|
&.ax-warning-twotone {
|
|
214
355
|
@apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
|
|
@@ -228,6 +369,15 @@
|
|
|
228
369
|
@apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
|
|
229
370
|
}
|
|
230
371
|
}
|
|
372
|
+
&.ax-warning-link {
|
|
373
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-warning-900 ax-border-b ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
|
|
374
|
+
.ax-header {
|
|
375
|
+
@apply ax-bg-transparent;
|
|
376
|
+
}
|
|
377
|
+
.ax-alert-progress {
|
|
378
|
+
@apply ax-bg-warning-500 ax-h-1 dark:ax-bg-warning-400;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
231
381
|
&.ax-warning-blank {
|
|
232
382
|
@apply ax-bg-transparent ax-text-warning-500 dark:ax-text-warning-300 ax-rounded-none;
|
|
233
383
|
.ax-header {
|
|
@@ -239,6 +389,22 @@
|
|
|
239
389
|
}
|
|
240
390
|
|
|
241
391
|
// danger
|
|
392
|
+
&.ax-danger-twotone,
|
|
393
|
+
&.ax-danger-outline,
|
|
394
|
+
&.ax-danger-link,
|
|
395
|
+
&.ax-danger-blank {
|
|
396
|
+
.ax-close-button {
|
|
397
|
+
.ax-icon {
|
|
398
|
+
@apply ax-text-danger-500;
|
|
399
|
+
&:hover {
|
|
400
|
+
@apply ax-text-danger-500/50;
|
|
401
|
+
}
|
|
402
|
+
&:active {
|
|
403
|
+
@apply ax-text-danger-500;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
}
|
|
242
408
|
&.ax-danger-default {
|
|
243
409
|
@apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
|
|
244
410
|
.ax-header {
|
|
@@ -247,6 +413,17 @@
|
|
|
247
413
|
.ax-alert-progress {
|
|
248
414
|
@apply ax-bg-danger-800 dark:ax-bg-danger-500;
|
|
249
415
|
}
|
|
416
|
+
.ax-close-button {
|
|
417
|
+
.ax-icon {
|
|
418
|
+
@apply ax-text-danger-fore;
|
|
419
|
+
&:hover {
|
|
420
|
+
@apply ax-text-danger-50/50;
|
|
421
|
+
}
|
|
422
|
+
&:active {
|
|
423
|
+
@apply ax-text-danger-fore;
|
|
424
|
+
}
|
|
425
|
+
}
|
|
426
|
+
}
|
|
250
427
|
}
|
|
251
428
|
&.ax-danger-twotone {
|
|
252
429
|
@apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
|
|
@@ -266,6 +443,16 @@
|
|
|
266
443
|
@apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
|
|
267
444
|
}
|
|
268
445
|
}
|
|
446
|
+
&.ax-danger-link {
|
|
447
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-danger-500 ax-border-b ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
|
|
448
|
+
.ax-header {
|
|
449
|
+
@apply ax-bg-transparent;
|
|
450
|
+
}
|
|
451
|
+
.ax-alert-progress {
|
|
452
|
+
@apply ax-bg-danger-500 ax-h-1 dark:ax-bg-danger-400;
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
|
|
269
456
|
&.ax-danger-blank {
|
|
270
457
|
@apply ax-bg-transparent ax-text-danger-500 dark:ax-text-danger-300 ax-rounded-none;
|
|
271
458
|
.ax-header {
|
|
@@ -277,6 +464,22 @@
|
|
|
277
464
|
}
|
|
278
465
|
|
|
279
466
|
// info
|
|
467
|
+
&.ax-info-twotone,
|
|
468
|
+
&.ax-info-outline,
|
|
469
|
+
&.ax-info-link,
|
|
470
|
+
&.ax-info-blank {
|
|
471
|
+
.ax-close-button {
|
|
472
|
+
.ax-icon {
|
|
473
|
+
@apply ax-text-info-500;
|
|
474
|
+
&:hover {
|
|
475
|
+
@apply ax-text-info-500/50;
|
|
476
|
+
}
|
|
477
|
+
&:active {
|
|
478
|
+
@apply ax-text-info-500;
|
|
479
|
+
}
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
}
|
|
280
483
|
&.ax-info-default {
|
|
281
484
|
@apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
|
|
282
485
|
.ax-header {
|
|
@@ -285,6 +488,17 @@
|
|
|
285
488
|
.ax-alert-progress {
|
|
286
489
|
@apply ax-bg-info-800 dark:ax-bg-info-500;
|
|
287
490
|
}
|
|
491
|
+
.ax-close-button {
|
|
492
|
+
.ax-icon {
|
|
493
|
+
@apply ax-text-info-fore;
|
|
494
|
+
&:hover {
|
|
495
|
+
@apply ax-text-info-50/50;
|
|
496
|
+
}
|
|
497
|
+
&:active {
|
|
498
|
+
@apply ax-text-info-fore;
|
|
499
|
+
}
|
|
500
|
+
}
|
|
501
|
+
}
|
|
288
502
|
}
|
|
289
503
|
&.ax-info-twotone {
|
|
290
504
|
@apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
|
|
@@ -295,6 +509,15 @@
|
|
|
295
509
|
@apply ax-bg-info-300 dark:ax-bg-info-500;
|
|
296
510
|
}
|
|
297
511
|
}
|
|
512
|
+
&.ax-info-link {
|
|
513
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-info-500 ax-border-b ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
|
|
514
|
+
.ax-header {
|
|
515
|
+
@apply ax-bg-transparent;
|
|
516
|
+
}
|
|
517
|
+
.ax-alert-progress {
|
|
518
|
+
@apply ax-bg-info-500 ax-h-1 dark:ax-bg-info-400;
|
|
519
|
+
}
|
|
520
|
+
}
|
|
298
521
|
&.ax-info-outline {
|
|
299
522
|
@apply ax-bg-transparent ax-text-info-500 ax-border ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
|
|
300
523
|
.ax-header {
|
|
@@ -315,6 +538,22 @@
|
|
|
315
538
|
}
|
|
316
539
|
|
|
317
540
|
// light
|
|
541
|
+
&.ax-light-twotone,
|
|
542
|
+
&.ax-light-outline,
|
|
543
|
+
&.ax-light-link,
|
|
544
|
+
&.ax-light-blank {
|
|
545
|
+
.ax-close-button {
|
|
546
|
+
.ax-icon {
|
|
547
|
+
@apply ax-text-light-500;
|
|
548
|
+
&:hover {
|
|
549
|
+
@apply ax-text-light-500/50;
|
|
550
|
+
}
|
|
551
|
+
&:active {
|
|
552
|
+
@apply ax-text-light-500;
|
|
553
|
+
}
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
}
|
|
318
557
|
&.ax-light-default {
|
|
319
558
|
@apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
|
|
320
559
|
.ax-header {
|
|
@@ -342,6 +581,15 @@
|
|
|
342
581
|
@apply ax-bg-light-300;
|
|
343
582
|
}
|
|
344
583
|
}
|
|
584
|
+
&.ax-light-link {
|
|
585
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-light-500 ax-border-b ax-border-light-500 dark:ax-border-light-400 dark:ax-text-light-300;
|
|
586
|
+
.ax-header {
|
|
587
|
+
@apply ax-bg-transparent;
|
|
588
|
+
}
|
|
589
|
+
.ax-alert-progress {
|
|
590
|
+
@apply ax-bg-light-300;
|
|
591
|
+
}
|
|
592
|
+
}
|
|
345
593
|
&.ax-light-blank {
|
|
346
594
|
@apply ax-bg-transparent ax-text-light-500 dark:ax-text-light-300;
|
|
347
595
|
.ax-header {
|
|
@@ -352,13 +600,40 @@
|
|
|
352
600
|
}
|
|
353
601
|
}
|
|
354
602
|
// dark
|
|
603
|
+
&.ax-dark-twotone,
|
|
604
|
+
&.ax-dark-outline,
|
|
605
|
+
&.ax-dark-link,
|
|
606
|
+
&.ax-dark-blank {
|
|
607
|
+
.ax-close-button {
|
|
608
|
+
.ax-icon {
|
|
609
|
+
@apply ax-text-dark-500;
|
|
610
|
+
&:hover {
|
|
611
|
+
@apply ax-text-dark-500/50;
|
|
612
|
+
}
|
|
613
|
+
&:active {
|
|
614
|
+
@apply ax-text-dark-500;
|
|
615
|
+
}
|
|
616
|
+
}
|
|
617
|
+
}
|
|
618
|
+
}
|
|
355
619
|
&.ax-dark-default {
|
|
356
620
|
@apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
|
|
357
621
|
.ax-header {
|
|
358
622
|
@apply ax-bg-dark-600;
|
|
359
623
|
}
|
|
360
624
|
.ax-alert-progress {
|
|
361
|
-
@apply ax-bg-dark-
|
|
625
|
+
@apply ax-bg-dark-50/30;
|
|
626
|
+
}
|
|
627
|
+
.ax-close-button {
|
|
628
|
+
.ax-icon {
|
|
629
|
+
@apply ax-text-dark-fore;
|
|
630
|
+
&:hover {
|
|
631
|
+
@apply ax-text-dark-50/50;
|
|
632
|
+
}
|
|
633
|
+
&:active {
|
|
634
|
+
@apply ax-text-dark-fore;
|
|
635
|
+
}
|
|
636
|
+
}
|
|
362
637
|
}
|
|
363
638
|
}
|
|
364
639
|
&.ax-dark-twotone {
|
|
@@ -379,10 +654,19 @@
|
|
|
379
654
|
@apply ax-bg-dark-100;
|
|
380
655
|
}
|
|
381
656
|
}
|
|
657
|
+
&.ax-dark-link {
|
|
658
|
+
@apply ax-bg-transparent ax-rounded-none ax-text-dark-500 ax-border-b ax-border-dark-500 dark:ax-border-dark-400 dark:ax-text-dark-300;
|
|
659
|
+
.ax-header {
|
|
660
|
+
@apply ax-bg-transparent;
|
|
661
|
+
}
|
|
662
|
+
.ax-alert-progress {
|
|
663
|
+
@apply ax-bg-dark-100;
|
|
664
|
+
}
|
|
665
|
+
}
|
|
382
666
|
&.ax-dark-blank {
|
|
383
667
|
@apply ax-bg-transparent ax-text-dark-500 dark:ax-text-dark-100;
|
|
384
668
|
.ax-header {
|
|
385
|
-
@apply ax-
|
|
669
|
+
@apply ax-bg-transparent;
|
|
386
670
|
}
|
|
387
671
|
.ax-alert-progress {
|
|
388
672
|
@apply ax-bg-dark-200 dark:ax-bg-dark-200;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.ax-button {
|
|
3
|
-
@apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis
|
|
3
|
+
@apply ax-text-sm ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-default ax-select-none ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis;
|
|
4
4
|
height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
|
|
5
5
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
|
|
6
6
|
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
.ax-icon,
|
|
44
44
|
i {
|
|
45
|
-
@apply ax-text-
|
|
45
|
+
@apply ax-text-2xl;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.ax-context-menu {
|
|
3
|
+
@apply ax-min-w-[12rem] ax-max-w-xs ax-bg-white ax-border ax-border-light-200 dark:ax-border-dark-500 ax-sm ax-rounded-default ax-py-2 ax-px-1;
|
|
4
|
+
@include control-states("surface");
|
|
5
|
+
> ul {
|
|
6
|
+
@apply ax-space-y-2 #{!important};
|
|
7
|
+
|
|
8
|
+
> li {
|
|
9
|
+
&:not(.ax-state-disabled, .ax-divider) {
|
|
10
|
+
@apply ax-p-1;
|
|
11
|
+
&:hover {
|
|
12
|
+
@apply ax-bg-light-200 dark:ax-bg-white/10 dark:ax-text-light-50;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
.ax-header,
|
|
5
5
|
.ax-footer
|
|
6
6
|
{
|
|
7
|
-
@apply ax-flex ax-justify-between ax-items-center ax-gap-2;
|
|
8
|
-
|
|
7
|
+
@apply ax-flex ax-justify-between ax-items-center ax-gap-2 ax-bg-white;
|
|
8
|
+
@include control-states("surface");
|
|
9
9
|
&>.ax-prefix,
|
|
10
10
|
&>.ax-suffix {
|
|
11
11
|
@apply ax-flex ax-flex-auto ax-flex-row ax-gap-2 ax-items-center ;
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
|
|
30
30
|
.ax-close-button {
|
|
31
31
|
.ax-icon {
|
|
32
|
-
@apply ax-text-light-
|
|
32
|
+
@apply ax-text-light-500 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
|
|
33
33
|
&:hover {
|
|
34
|
-
@apply ax-text-light-
|
|
34
|
+
@apply ax-text-light-700 dark:ax-text-light-100;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -18,8 +18,7 @@
|
|
|
18
18
|
@apply ax-flex ax-flex-col ax-max-w-[95%] ax-h-full ax-animate-duration-300 ax-transition-all #{!important};
|
|
19
19
|
.ax-header,
|
|
20
20
|
.ax-footer {
|
|
21
|
-
@apply
|
|
22
|
-
@include control-states("editor");
|
|
21
|
+
@apply ax-p-3 ax-border-light-300 dark:ax-border-light-700 ;
|
|
23
22
|
}
|
|
24
23
|
.ax-footer
|
|
25
24
|
{
|
|
@@ -36,7 +35,9 @@
|
|
|
36
35
|
|
|
37
36
|
&>.ax-content
|
|
38
37
|
{
|
|
39
|
-
@apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full;
|
|
38
|
+
@apply ax-overflow-auto ax-bg-white ax-flex-1 ax-h-full ax-text-light-500;
|
|
39
|
+
@include control-states("surface");
|
|
40
|
+
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
&.ax-drawer-overlay {
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
&>.ax-prefix {
|
|
57
57
|
*,
|
|
58
58
|
.ax-button,
|
|
59
|
-
.ax-
|
|
59
|
+
.ax-title {
|
|
60
60
|
@apply ax-rounded-s;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
&>.ax-suffix {
|
|
65
65
|
*,
|
|
66
66
|
.ax-button,
|
|
67
|
-
.ax-
|
|
67
|
+
.ax-title {
|
|
68
68
|
@apply ax-rounded-e;
|
|
69
69
|
}
|
|
70
70
|
}
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
@apply ax-px-2;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
.ax-
|
|
82
|
+
.ax-title {
|
|
83
83
|
@apply ax-bg-light-100 ax-text-light-fore ax-px-4;
|
|
84
84
|
}
|
|
85
85
|
}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
@layer components{
|
|
2
|
-
.ax-fieldset{
|
|
3
|
-
@apply ax-
|
|
4
|
-
legend{
|
|
1
|
+
@layer components {
|
|
2
|
+
.ax-fieldset {
|
|
3
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-p-3 ax-rounded dark:ax-border-white/10;
|
|
4
|
+
legend {
|
|
5
5
|
@apply ax-text-sm ax-px-1;
|
|
6
6
|
}
|
|
7
7
|
}
|
|
8
|
-
}
|
|
8
|
+
}
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
ax-menu {
|
|
2
|
+
@apply ax-text-sm ax-transition-all ax-select-none;
|
|
3
|
+
& > ul {
|
|
4
|
+
@apply ax-flex ax-gap-2;
|
|
5
|
+
.ax-menu-item {
|
|
6
|
+
@apply ax-flex ax-items-center ax-text-sm ax-justify-between ax-cursor-pointer ax-flex-1;
|
|
7
|
+
}
|
|
8
|
+
li {
|
|
9
|
+
@apply ax-relative ax-flex ax-items-center;
|
|
10
|
+
|
|
11
|
+
.ax-menu-item-prefix,
|
|
12
|
+
.ax-menu-item-suffix {
|
|
13
|
+
@apply ax-flex ax-items-center ax-gap-2;
|
|
14
|
+
ax-icon {
|
|
15
|
+
@apply ax-transition-all ax-text-xl;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
.ax-menu-item-prefix {
|
|
19
|
+
}
|
|
20
|
+
.ax-menu-item-suffix {
|
|
21
|
+
ax-icon {
|
|
22
|
+
@apply ax-block ax--rotate-180;
|
|
23
|
+
&.ax-menu-active-icon {
|
|
24
|
+
@apply ax--rotate-90;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
&.ax-state-disabled {
|
|
29
|
+
@apply ax-cursor-not-allowed;
|
|
30
|
+
.ax-menu-item-prefix,
|
|
31
|
+
.ax-menu-item-suffix {
|
|
32
|
+
@apply ax-opacity-40;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
&.ax-horizontal {
|
|
37
|
+
> li {
|
|
38
|
+
padding-inline-end: 0.5rem;
|
|
39
|
+
&:hover {
|
|
40
|
+
@apply ax-text-light-600;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
&.ax-vertical {
|
|
45
|
+
@apply ax-flex-col ax-p-2;
|
|
46
|
+
li {
|
|
47
|
+
&.ax-divider {
|
|
48
|
+
&::before {
|
|
49
|
+
content: "";
|
|
50
|
+
@apply -ax-bottom-1 ax-start-0 ax-absolute ax-w-full ax-h-[1px] ax-bg-light-200 dark:ax-bg-white/20;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
& > li {
|
|
55
|
+
@apply ax-flex ax-px-4 ax-py-1 ax-items-center ax-rounded-default ax-text-sm ax-justify-between ax-cursor-pointer;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
&.ax-side-menu {
|
|
59
|
+
@apply ax-flex-col;
|
|
60
|
+
|
|
61
|
+
li {
|
|
62
|
+
@apply ax-flex-col ax-mb-1 ax-rounded-default;
|
|
63
|
+
.ax-menu-item {
|
|
64
|
+
@apply ax-p-2;
|
|
65
|
+
}
|
|
66
|
+
&:not(.ax-state-disabled) {
|
|
67
|
+
> .ax-menu-item {
|
|
68
|
+
&:hover {
|
|
69
|
+
@apply ax-bg-light-100 dark:ax-bg-white/20 ax-rounded-default;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
ul {
|
|
75
|
+
@apply ax-mt-1 ax-mx-4;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.ax-submenu-ul {
|
|
82
|
+
@apply ax-bg-white ax-border ax-border-light-200 dark:ax-border-dark-500 ax-sm ax-rounded-default ax-py-2;
|
|
83
|
+
@include control-states("surface");
|
|
84
|
+
li {
|
|
85
|
+
@apply ax-py-3 ax-px-4 ax-cursor-pointer ax-flex ax-items-center ax-justify-between;
|
|
86
|
+
.ax-menu-item-suffix {
|
|
87
|
+
@apply ax-ms-3;
|
|
88
|
+
}
|
|
89
|
+
&:not(.ax-state-disabled) {
|
|
90
|
+
&:hover {
|
|
91
|
+
@apply ax-bg-light-200 dark:ax-bg-white/[0.16];
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
@@ -1,55 +1,98 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
@apply ax-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
ax-menu {
|
|
2
|
+
ul {
|
|
3
|
+
li {
|
|
4
|
+
@apply ax-cursor-pointer ax-text-light-500 dark:ax-text-light-50 ax-rounded-default;
|
|
5
|
+
&:not(.ax-state-disabled) {
|
|
6
|
+
&:hover {
|
|
7
|
+
@apply ax-text-light-800 dark:ax-text-light-200;
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.ax-menu-item {
|
|
12
|
+
@apply ax-flex ax-justify-between ax-items-center ax-w-full ax-gap-1;
|
|
13
|
+
}
|
|
14
|
+
.ax-menu-item-prefix,
|
|
15
|
+
.ax-menu-item-suffix {
|
|
16
|
+
@apply ax-flex ax-items-center ax-gap-2 ax-h-6;
|
|
17
|
+
ax-icon {
|
|
18
|
+
@apply ax-transition-all ax-text-xl;
|
|
19
|
+
}
|
|
7
20
|
}
|
|
8
|
-
|
|
9
|
-
@apply ax-flex-row ax-whitespace-nowrap
|
|
21
|
+
.ax-menu-item-prefix {
|
|
10
22
|
}
|
|
11
|
-
|
|
23
|
+
.ax-menu-item-suffix {
|
|
24
|
+
ax-icon {
|
|
25
|
+
@apply ax-block ax--rotate-180;
|
|
26
|
+
&.ax-menu-active-icon {
|
|
27
|
+
@apply ax--rotate-90;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
&.ax-state-disabled {
|
|
32
|
+
@apply ax-cursor-not-allowed;
|
|
33
|
+
.ax-menu-item-prefix,
|
|
34
|
+
.ax-menu-item-suffix {
|
|
35
|
+
@apply ax-opacity-40;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
> ul {
|
|
41
|
+
&.ax-horizontal {
|
|
42
|
+
@apply ax-flex ax-items-center ax-gap-4;
|
|
12
43
|
li {
|
|
44
|
+
&.ax-divider {
|
|
45
|
+
@apply ax-w-[1px] ax-h-4;
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
> li {
|
|
13
49
|
@apply ax-cursor-pointer;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
@apply ax-cursor-not-allowed ax-opacity-60;
|
|
50
|
+
.ax-menu-item {
|
|
51
|
+
@apply ax-flex ax-items-start ax-justify-between;
|
|
17
52
|
}
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
&.ax-vertical {
|
|
56
|
+
@apply ax-w-full;
|
|
57
|
+
&:not(&.ax-submenu-ul) {
|
|
58
|
+
@apply ax-space-y-4;
|
|
59
|
+
}
|
|
60
|
+
li {
|
|
61
|
+
&.ax-divider {
|
|
62
|
+
@apply ax-h-[1px] ax-my-2;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
&.ax-submenu-ul {
|
|
66
|
+
@apply ax-p-2 ax-bg-white ax-border ax-border-light-200 ax-rounded-default ax-shadow;
|
|
67
|
+
@include control-states("surface");
|
|
18
68
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
&:hover {
|
|
27
|
-
@apply ax-bg-primary-50 ax-text-primary-500 dark:ax-bg-primary-500 dark:ax-text-primary-fore;
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
.ax-icon {
|
|
31
|
-
@apply ax-text-xl;
|
|
32
|
-
}
|
|
33
|
-
.ax-menu-start-side {
|
|
34
|
-
@apply ax-flex ax-items-center;
|
|
35
|
-
.ax-icon {
|
|
36
|
-
@apply ax-me-1.5;
|
|
69
|
+
li {
|
|
70
|
+
&:not(.ax-state-disabled, .ax-divider) {
|
|
71
|
+
@apply ax-py-1 ax-ps-4 ax-pe-2;
|
|
72
|
+
&:hover {
|
|
73
|
+
@apply ax-bg-light-200 dark:ax-bg-white/10 dark:ax-text-light-50;
|
|
37
74
|
}
|
|
38
75
|
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
@apply ax-block ax--rotate-180 ax-transition-all ;
|
|
42
|
-
&.active-icon {
|
|
43
|
-
@apply ax--rotate-90;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
76
|
+
&.ax-divider {
|
|
77
|
+
@apply ax-h-[1px] ax-my-2;
|
|
46
78
|
}
|
|
47
79
|
}
|
|
48
|
-
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
&.ax-side-menu {
|
|
83
|
+
@apply ax-space-y-4;
|
|
84
|
+
li {
|
|
85
|
+
&.ax-divider {
|
|
86
|
+
@apply ax-h-[1px] ax-my-2;
|
|
87
|
+
}
|
|
49
88
|
ul {
|
|
50
|
-
@apply ax-ps-
|
|
89
|
+
@apply ax-ps-4 ax-space-y-4 ax-mt-4;
|
|
51
90
|
}
|
|
52
91
|
}
|
|
53
92
|
}
|
|
54
93
|
}
|
|
94
|
+
|
|
95
|
+
.ax-divider {
|
|
96
|
+
@apply ax-bg-light-200 ax-p-0 ax-cursor-auto dark:ax-bg-white/20;
|
|
97
|
+
}
|
|
55
98
|
}
|
|
@@ -104,14 +104,21 @@
|
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
106
|
|
|
107
|
+
&.ax-vertical{
|
|
108
|
+
@apply ax-rotate-90 ax-block;
|
|
109
|
+
input[type="range"] {
|
|
110
|
+
-webkit-appearance: slider-vertical;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
|
|
107
114
|
&.ax-primary-default {
|
|
108
115
|
input {
|
|
109
116
|
background: linear-gradient(
|
|
110
117
|
to right,
|
|
111
118
|
rgb(var(--ax-color-primary-500)) 0%,
|
|
112
119
|
rgb(var(--ax-color-primary-500)) var(--ax-current-value),
|
|
113
|
-
rgb(var(--ax-color-light-
|
|
114
|
-
rgb(var(--ax-color-light-
|
|
120
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
121
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
115
122
|
);
|
|
116
123
|
}
|
|
117
124
|
}
|
|
@@ -122,8 +129,8 @@
|
|
|
122
129
|
to right,
|
|
123
130
|
rgb(var(--ax-color-secondary-500)) 0%,
|
|
124
131
|
rgb(var(--ax-color-secondary-500)) var(--ax-current-value),
|
|
125
|
-
rgb(var(--ax-color-light-
|
|
126
|
-
rgb(var(--ax-color-light-
|
|
132
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
133
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
127
134
|
);
|
|
128
135
|
}
|
|
129
136
|
}
|
|
@@ -134,8 +141,8 @@
|
|
|
134
141
|
to right,
|
|
135
142
|
rgb(var(--ax-color-danger-500)) 0%,
|
|
136
143
|
rgb(var(--ax-color-danger-500)) var(--ax-current-value),
|
|
137
|
-
rgb(var(--ax-color-light-
|
|
138
|
-
rgb(var(--ax-color-light-
|
|
144
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
145
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
139
146
|
);
|
|
140
147
|
}
|
|
141
148
|
}
|
|
@@ -146,8 +153,8 @@
|
|
|
146
153
|
to right,
|
|
147
154
|
rgb(var(--ax-color-success-500)) 0%,
|
|
148
155
|
rgb(var(--ax-color-success-500)) var(--ax-current-value),
|
|
149
|
-
rgb(var(--ax-color-light-
|
|
150
|
-
rgb(var(--ax-color-light-
|
|
156
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
157
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
151
158
|
);
|
|
152
159
|
}
|
|
153
160
|
}
|
|
@@ -158,8 +165,8 @@
|
|
|
158
165
|
to right,
|
|
159
166
|
rgb(var(--ax-color-warning-500)) 0%,
|
|
160
167
|
rgb(var(--ax-color-warning-500)) var(--ax-current-value),
|
|
161
|
-
rgb(var(--ax-color-light-
|
|
162
|
-
rgb(var(--ax-color-light-
|
|
168
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
169
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
163
170
|
);
|
|
164
171
|
}
|
|
165
172
|
}
|
|
@@ -170,8 +177,8 @@
|
|
|
170
177
|
to right,
|
|
171
178
|
rgb(var(--ax-color-info-500)) 0%,
|
|
172
179
|
rgb(var(--ax-color-info-500)) var(--ax-current-value),
|
|
173
|
-
rgb(var(--ax-color-light-
|
|
174
|
-
rgb(var(--ax-color-light-
|
|
180
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
181
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
175
182
|
);
|
|
176
183
|
}
|
|
177
184
|
}
|
|
@@ -182,8 +189,8 @@
|
|
|
182
189
|
to right,
|
|
183
190
|
rgb(var(--ax-color-light-500)) 0%,
|
|
184
191
|
rgb(var(--ax-color-light-500)) var(--ax-current-value),
|
|
185
|
-
rgb(var(--ax-color-light-
|
|
186
|
-
rgb(var(--ax-color-light-
|
|
192
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
193
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
187
194
|
);
|
|
188
195
|
}
|
|
189
196
|
}
|
|
@@ -194,8 +201,8 @@
|
|
|
194
201
|
to right,
|
|
195
202
|
rgb(var(--ax-color-dark-500)) 0%,
|
|
196
203
|
rgb(var(--ax-color-dark-500)) var(--ax-current-value),
|
|
197
|
-
rgb(var(--ax-color-light-
|
|
198
|
-
rgb(var(--ax-color-light-
|
|
204
|
+
rgb(var(--ax-color-light-200)) var(--ax-current-value),
|
|
205
|
+
rgb(var(--ax-color-light-200)) 100%
|
|
199
206
|
);
|
|
200
207
|
}
|
|
201
208
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.ax-switch {
|
|
3
3
|
button {
|
|
4
|
-
@apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 ax-text-light-fore ax-transition-all;
|
|
4
|
+
@apply ax-relative ax-inline-block ax-align-middle ax-border-none ax-cursor-pointer ax-rounded-full ax-bg-light-300 dark:ax-bg-white/20 ax-text-light-fore ax-transition-all;
|
|
5
5
|
min-width: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
6
6
|
height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
|
|
7
7
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
.ax-switch-handle {
|
|
21
21
|
width: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
|
|
22
22
|
height: calc(((var(--ax-base-size) * var(--ax-base-ratio)) / 2) - 4px);
|
|
23
|
-
@apply ax-bg-white
|
|
23
|
+
@apply ax-bg-white ax-absolute ax-rounded-full ax-transition-all ax-left-0.5 ax-top-0.5;
|
|
24
24
|
ax-loading {
|
|
25
25
|
transform: translateY(-50%);
|
|
26
26
|
@apply ax-w-full ax-absolute ax-left-0 ax-right-0 ax-top-2/4 ax--translate-y-1/2;
|
|
@@ -4,16 +4,18 @@
|
|
|
4
4
|
|
|
5
5
|
.ax-items-wrapper {
|
|
6
6
|
@apply ax-flex;
|
|
7
|
+
}
|
|
7
8
|
|
|
9
|
+
&:not(.ax-look-custom) {
|
|
8
10
|
ax-tab-item {
|
|
9
|
-
@apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm;
|
|
11
|
+
@apply ax-text-center ax-px-5 ax-cursor-pointer ax-whitespace-nowrap ax-flex ax-items-center ax-justify-center ax-relative ax-text-sm ax-font-medium;
|
|
10
12
|
min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
11
13
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2);
|
|
12
14
|
|
|
13
15
|
&.ax-state-disabled {
|
|
14
16
|
// background-color: rgb(var(--ax-color-disabled)) !important;
|
|
15
17
|
// color: rgb(var(--ax-color-disabled-fore)) !important;
|
|
16
|
-
@apply ax-opacity-50 ax-cursor-not-allowed #{!important}
|
|
18
|
+
@apply ax-opacity-50 ax-cursor-not-allowed #{!important};
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
&.ax-state-active {
|
|
@@ -42,32 +44,28 @@
|
|
|
42
44
|
0 1px 10px 0 rgba(0, 0, 0, 0.12);
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
|
|
46
47
|
&.ax-horizontal {
|
|
47
48
|
&.ax-look-default {
|
|
48
|
-
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
|
|
49
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-overflow-hidden ax-rounded-default;
|
|
49
50
|
@include control-states("editor");
|
|
50
51
|
|
|
51
52
|
ax-tab-item {
|
|
52
|
-
@apply ax-bg-white ax-border-e ax-border-b-2
|
|
53
|
+
@apply ax-bg-white ax-border-e ax-border-b-2 ax-border-solid ax-border-light-300 dark:ax-text-light-200;
|
|
53
54
|
@include control-states("editor");
|
|
54
55
|
|
|
55
56
|
border-bottom-color: transparent !important;
|
|
56
57
|
|
|
57
58
|
&:first-child {
|
|
58
|
-
@apply ax-rounded-s;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
&:last-child {
|
|
62
|
-
@apply ax-
|
|
62
|
+
@apply ax-border-e-0;
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
&:hover,
|
|
66
|
-
&.ax-state-active
|
|
67
|
-
|
|
68
|
-
&:not(.ax-state-disabled){
|
|
66
|
+
&.ax-state-active {
|
|
67
|
+
&:not(.ax-state-disabled) {
|
|
69
68
|
border-bottom-color: rgb(var(--ax-color-primary)) !important;
|
|
70
|
-
|
|
71
69
|
}
|
|
72
70
|
}
|
|
73
71
|
}
|
|
@@ -79,16 +77,15 @@
|
|
|
79
77
|
&.ax-state-active {
|
|
80
78
|
@apply ax-text-primary-500;
|
|
81
79
|
&::after {
|
|
82
|
-
@apply ax-absolute ax-top-
|
|
80
|
+
@apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
83
81
|
content: "";
|
|
84
82
|
}
|
|
85
|
-
|
|
86
83
|
}
|
|
87
84
|
&:hover {
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
85
|
+
&::after {
|
|
86
|
+
@apply ax-absolute ax-top-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
87
|
+
content: "";
|
|
88
|
+
}
|
|
92
89
|
}
|
|
93
90
|
}
|
|
94
91
|
}
|
|
@@ -96,20 +93,18 @@
|
|
|
96
93
|
&.ax-look-end-line {
|
|
97
94
|
@apply ax-border-b ax-border-solid ax-border-light-300 dark:ax-border-light-200/10 ax-w-full;
|
|
98
95
|
ax-tab-item {
|
|
99
|
-
|
|
100
96
|
&.ax-state-active {
|
|
101
97
|
@apply ax-text-primary-500;
|
|
102
98
|
&::after {
|
|
103
|
-
@apply ax-absolute ax-bottom-
|
|
99
|
+
@apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
104
100
|
content: "";
|
|
105
101
|
}
|
|
106
|
-
|
|
107
102
|
}
|
|
108
103
|
&:hover {
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
104
|
+
&::after {
|
|
105
|
+
@apply ax-absolute ax-bottom-0 ax-w-full ax-h-0.5 ax-bg-primary-500 ax-block;
|
|
106
|
+
content: "";
|
|
107
|
+
}
|
|
113
108
|
}
|
|
114
109
|
}
|
|
115
110
|
}
|
|
@@ -149,12 +144,11 @@
|
|
|
149
144
|
|
|
150
145
|
ax-tab-item {
|
|
151
146
|
@apply ax-text-center ax-justify-start ax-py-2;
|
|
152
|
-
|
|
153
147
|
}
|
|
154
148
|
}
|
|
155
149
|
|
|
156
150
|
&.ax-look-default {
|
|
157
|
-
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded;
|
|
151
|
+
@apply ax-border ax-border-solid ax-border-light-300 ax-shadow-sm ax-rounded ax-overflow-hidden;
|
|
158
152
|
@include control-states("editor");
|
|
159
153
|
|
|
160
154
|
ax-tab-item {
|
|
@@ -192,8 +186,8 @@
|
|
|
192
186
|
@apply ax-border-e-2 ax-border-solid ax-border-light-300 dark:ax-border-light-200/10;
|
|
193
187
|
|
|
194
188
|
&.ax-state-active {
|
|
195
|
-
|
|
196
|
-
|
|
189
|
+
@apply ax-border-primary-500 ax-text-primary-500;
|
|
190
|
+
|
|
197
191
|
&:hover {
|
|
198
192
|
@apply ax-border-primary-500;
|
|
199
193
|
}
|
|
@@ -237,6 +231,5 @@
|
|
|
237
231
|
}
|
|
238
232
|
}
|
|
239
233
|
}
|
|
240
|
-
|
|
241
234
|
}
|
|
242
235
|
}
|
package/src/utility/_mixins.scss
CHANGED
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
@apply ax-bg-light-100 ax-text-light-fore dark:ax-border-white/10 dark:ax-bg-white/[0.-04] dark:ax-text-opacity-60 ax-cursor-not-allowed #{!important};
|
|
48
48
|
}
|
|
49
49
|
@if ($type == "surface") {
|
|
50
|
-
@apply dark:ax-bg-default-background dark:ax-border-white/10
|
|
50
|
+
@apply dark:ax-bg-default-background dark:ax-border-white/10 ;
|
|
51
51
|
}
|
|
52
52
|
}
|
|
53
53
|
|
package/src/utility/index.scss
CHANGED