@acorex/styles 5.0.21 → 5.0.25
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/dark.scss +3 -21
- package/package.json +1 -1
- package/src/base/index.scss +8 -7
- package/src/components/_alert.scss +37 -29
- package/src/components/_badge.scss +37 -4
- package/src/components/_button.scss +74 -74
- package/src/components/_calendar.scss +11 -11
- package/src/components/_checkbox.scss +5 -4
- package/src/components/_dialog.scss +12 -11
- package/src/components/_drawer.scss +1 -1
- package/src/components/_dropdown.scss +38 -38
- package/src/components/_editor-container.scss +8 -6
- package/src/components/_form.scss +1 -1
- package/src/components/_input.scss +1 -1
- package/src/components/_list.scss +3 -3
- package/src/components/_loading.scss +2 -2
- package/src/components/_popup.scss +18 -17
- package/src/components/_radio.scss +5 -3
- package/src/components/_selectbox.scss +3 -0
- package/src/components/_selection-list.scss +3 -3
- package/src/components/_side-menu.scss +1 -5
- package/src/components/_switch.scss +10 -11
- package/src/components/_tabs.scss +82 -66
- package/src/components/_toast.scss +7 -7
- package/src/utility/_mixins.scss +16 -1
- package/src/variables/_colors.scss +1 -1
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
@layer components {
|
|
2
|
-
|
|
3
2
|
ax-drop-down,
|
|
4
3
|
.ax-drop-down {
|
|
5
4
|
display: contents;
|
|
@@ -18,7 +17,8 @@
|
|
|
18
17
|
}
|
|
19
18
|
|
|
20
19
|
.ax-overlay-pane {
|
|
21
|
-
@apply ax-bg-white ax-
|
|
20
|
+
@apply ax-bg-white ax-border ax-rounded ax-border-light-300;
|
|
21
|
+
@include control-dark("surface");
|
|
22
22
|
|
|
23
23
|
&.ax-dropdown-list {
|
|
24
24
|
@apply ax-border ax-border-solid ax-flex ax-flex-col ax-py-1 ax-rounded ax-shadow-sm;
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
ax-button-item {
|
|
27
27
|
height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
|
|
28
28
|
line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
|
|
29
|
-
@apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-light-600 ax-cursor-pointer;
|
|
29
|
+
@apply ax-relative ax-inline-flex ax-items-center ax-justify-start ax-px-4 ax-text-sm ax-text-light-600 ax-cursor-pointer ax-select-none;
|
|
30
30
|
|
|
31
31
|
&.ax-divide {
|
|
32
32
|
@apply ax-border-t ax-border ax-border-solid;
|
|
@@ -44,142 +44,142 @@
|
|
|
44
44
|
@apply ax-flex ax-flex-row ax-ps-2;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
&.ax-primary {
|
|
47
|
+
&.ax-primary-default {
|
|
48
48
|
@apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
|
|
49
49
|
|
|
50
50
|
&:hover,
|
|
51
51
|
&:focus {
|
|
52
|
-
@apply ax-bg-primary-50 ax-text-primary-600;
|
|
52
|
+
@apply ax-bg-primary-50 ax-text-primary-600 dark:ax-bg-primary-500 dark:ax-text-primary-100;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
&:active {
|
|
56
|
-
@apply ax-bg-primary-100 ax-text-primary-700;
|
|
56
|
+
@apply ax-bg-primary-100 ax-text-primary-700 dark:ax-bg-primary-600 dark:ax-text-primary-100;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
&.ax-state-selected {
|
|
60
|
-
@apply ax-bg-primary-200;
|
|
60
|
+
@apply ax-bg-primary-200 dark:ax-bg-primary-600 dark:ax-text-primary-100;
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
&.ax-secondary {
|
|
64
|
+
&.ax-secondary-default {
|
|
65
65
|
@apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
|
|
66
66
|
|
|
67
67
|
&:hover,
|
|
68
68
|
&:focus {
|
|
69
|
-
@apply ax-bg-secondary-50 ax-text-secondary-600;
|
|
69
|
+
@apply ax-bg-secondary-50 ax-text-secondary-600 dark:ax-bg-secondary-500 dark:ax-text-secondary-100;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
&:active {
|
|
73
|
-
@apply ax-bg-secondary-100 ax-text-secondary-700;
|
|
73
|
+
@apply ax-bg-secondary-100 ax-text-secondary-700 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
&.ax-state-selected {
|
|
77
|
-
@apply ax-bg-secondary-200;
|
|
77
|
+
@apply ax-bg-secondary-200 dark:ax-bg-secondary-600 dark:ax-text-secondary-100;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
|
|
81
|
-
&.ax-warning {
|
|
81
|
+
&.ax-warning-default {
|
|
82
82
|
@apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
|
|
83
83
|
|
|
84
84
|
&:hover,
|
|
85
85
|
&:focus {
|
|
86
|
-
@apply ax-bg-warning-50 ax-text-warning-600;
|
|
86
|
+
@apply ax-bg-warning-50 ax-text-warning-600 dark:ax-bg-warning-500 dark:ax-text-warning-100;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
89
|
&:active {
|
|
90
|
-
@apply ax-bg-warning-100 ax-text-warning-700;
|
|
90
|
+
@apply ax-bg-warning-100 ax-text-warning-700 dark:ax-bg-warning-600 dark:ax-text-warning-100;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
93
|
&.ax-state-selected {
|
|
94
|
-
@apply ax-bg-warning-200;
|
|
94
|
+
@apply ax-bg-warning-200 dark:ax-bg-warning-600 dark:ax-text-warning-100;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
97
|
|
|
98
|
-
&.ax-danger {
|
|
98
|
+
&.ax-danger-default {
|
|
99
99
|
@apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
|
|
100
100
|
|
|
101
101
|
&:hover,
|
|
102
102
|
&:focus {
|
|
103
|
-
@apply ax-bg-danger-50 ax-text-danger-600;
|
|
103
|
+
@apply ax-bg-danger-50 ax-text-danger-600 dark:ax-bg-danger-500 dark:ax-text-danger-100;
|
|
104
104
|
}
|
|
105
105
|
|
|
106
106
|
&:active {
|
|
107
|
-
@apply ax-bg-danger-100 ax-text-danger-700;
|
|
107
|
+
@apply ax-bg-danger-100 ax-text-danger-700 dark:ax-bg-danger-600 dark:ax-text-danger-100;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
&.ax-state-selected {
|
|
111
|
-
@apply ax-bg-danger-200;
|
|
111
|
+
@apply ax-bg-danger-200 dark:ax-bg-danger-600 dark:ax-text-danger-100;
|
|
112
112
|
}
|
|
113
113
|
}
|
|
114
114
|
|
|
115
|
-
&.ax-success {
|
|
115
|
+
&.ax-success-default {
|
|
116
116
|
@apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
|
|
117
117
|
|
|
118
118
|
&:hover,
|
|
119
119
|
&:focus {
|
|
120
|
-
@apply ax-bg-success-50 ax-text-success-600;
|
|
120
|
+
@apply ax-bg-success-50 ax-text-success-600 dark:ax-bg-success-500 dark:ax-text-success-100;
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
&:active {
|
|
124
|
-
@apply ax-bg-success-100 ax-text-success-700;
|
|
124
|
+
@apply ax-bg-success-100 ax-text-success-700 dark:ax-bg-success-600 dark:ax-text-success-100;
|
|
125
125
|
}
|
|
126
126
|
|
|
127
127
|
&.ax-state-selected {
|
|
128
|
-
@apply ax-bg-success-200;
|
|
128
|
+
@apply ax-bg-success-200 dark:ax-bg-success-600 dark:ax-text-success-100;
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
131
|
|
|
132
|
-
&.ax-info {
|
|
132
|
+
&.ax-info-default {
|
|
133
133
|
@apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
|
|
134
134
|
|
|
135
135
|
&:hover,
|
|
136
136
|
&:focus {
|
|
137
|
-
@apply ax-bg-info-50 ax-text-info-600;
|
|
137
|
+
@apply ax-bg-info-50 ax-text-info-600 dark:ax-bg-info-500 dark:ax-text-info-100;
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
&:active {
|
|
141
|
-
@apply ax-bg-info-100 ax-text-info-700;
|
|
141
|
+
@apply ax-bg-info-100 ax-text-info-700 dark:ax-bg-info-600 dark:ax-text-info-100;
|
|
142
142
|
}
|
|
143
143
|
|
|
144
144
|
&.ax-state-selected {
|
|
145
|
-
@apply ax-bg-info-200;
|
|
145
|
+
@apply ax-bg-info-200 dark:ax-bg-info-600 dark:ax-text-info-100;
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
|
|
149
|
-
&.ax-dark {
|
|
150
|
-
@apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
|
|
149
|
+
&.ax-dark-default {
|
|
150
|
+
@apply ax-bg-transparent ax-text-dark-500 ax-border-transparent dark:ax-text-dark-100;
|
|
151
151
|
|
|
152
152
|
&:hover,
|
|
153
153
|
&:focus {
|
|
154
|
-
@apply ax-bg-dark-50 ax-text-dark-600;
|
|
154
|
+
@apply ax-bg-dark-50 ax-text-dark-600 dark:ax-bg-dark-400 dark:ax-text-dark-50;
|
|
155
155
|
}
|
|
156
156
|
|
|
157
157
|
&:active {
|
|
158
|
-
@apply ax-bg-dark-100 ax-text-dark-700;
|
|
158
|
+
@apply ax-bg-dark-100 ax-text-dark-700 dark:ax-text-dark-100;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
161
|
&.ax-state-selected {
|
|
162
|
-
@apply ax-bg-dark-200;
|
|
162
|
+
@apply ax-bg-dark-200 dark:ax-bg-dark-400 dark:ax-text-dark-100;
|
|
163
163
|
}
|
|
164
164
|
}
|
|
165
165
|
|
|
166
|
-
&.ax-light {
|
|
167
|
-
@apply ax-bg-transparent ax-text-light-
|
|
166
|
+
&.ax-light-default {
|
|
167
|
+
@apply ax-bg-transparent ax-text-light-500 ax-border-transparent;
|
|
168
168
|
|
|
169
169
|
&:hover,
|
|
170
170
|
&:focus {
|
|
171
|
-
@apply ax-bg-light-500 ax-text-light-
|
|
171
|
+
@apply ax-bg-light-50 ax-text-light-600 dark:ax-bg-light-500 dark:ax-text-light-100;
|
|
172
172
|
}
|
|
173
173
|
|
|
174
174
|
&:active {
|
|
175
|
-
@apply ax-bg-light-100 ax-text-light-700;
|
|
175
|
+
@apply ax-bg-light-100 ax-text-light-700 dark:ax-bg-light-600 dark:ax-text-light-100;
|
|
176
176
|
}
|
|
177
177
|
|
|
178
178
|
&.ax-state-selected {
|
|
179
|
-
@apply ax-bg-light-600;
|
|
179
|
+
@apply ax-bg-light-200 dark:ax-bg-light-600 dark:ax-text-light-100;
|
|
180
180
|
}
|
|
181
181
|
}
|
|
182
182
|
}
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
|
-
}
|
|
185
|
+
}
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
@layer components {
|
|
2
2
|
.ax-editor-container {
|
|
3
3
|
height: calc(var(--ax-base-size) * var(--ax-base-ratio));
|
|
4
|
-
@apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300
|
|
4
|
+
@apply ax-flex ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300;
|
|
5
|
+
@include control-dark('editor');
|
|
6
|
+
|
|
5
7
|
&:focus-within {
|
|
6
|
-
@apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
|
|
8
|
+
@apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
|
|
7
9
|
}
|
|
8
10
|
&.ax-button-icon {
|
|
9
11
|
@apply ax-px-2;
|
|
@@ -27,12 +29,12 @@
|
|
|
27
29
|
}
|
|
28
30
|
}
|
|
29
31
|
ax-prefix {
|
|
30
|
-
|
|
32
|
+
*,ax-button {
|
|
31
33
|
@apply ax-rounded-s;
|
|
32
34
|
}
|
|
33
35
|
}
|
|
34
36
|
ax-suffix {
|
|
35
|
-
|
|
37
|
+
*,ax-button {
|
|
36
38
|
@apply ax-rounded-e;
|
|
37
39
|
}
|
|
38
40
|
}
|
|
@@ -65,9 +67,9 @@
|
|
|
65
67
|
}
|
|
66
68
|
}
|
|
67
69
|
&.ax-state-error {
|
|
68
|
-
@apply ax-border-danger;
|
|
70
|
+
@apply ax-border-danger-500;
|
|
69
71
|
.ax-input {
|
|
70
|
-
@apply ax-placeholder-danger;
|
|
72
|
+
@apply ax-placeholder-danger-500;
|
|
71
73
|
}
|
|
72
74
|
&:focus-within {
|
|
73
75
|
@apply ax-ring-0 ax-ring-transparent;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
@apply ax-outline-none ax-text-base ax-p-0;
|
|
4
4
|
line-height: 20px;
|
|
5
5
|
&:focus {
|
|
6
|
-
@apply ax-ring-2 ax-ring-primary ax-ring-opacity-100 ax-border-transparent;
|
|
6
|
+
@apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
|
|
7
7
|
}
|
|
8
8
|
&.ax-state-disabled {
|
|
9
9
|
background-color: rgb(var(--ax-color-disabled)) !important;
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
}
|
|
5
5
|
.ax-list-container {
|
|
6
6
|
.ax-list-items-container {
|
|
7
|
-
@apply ax-py-1 ax-rounded ax-
|
|
7
|
+
@apply ax-py-1 ax-rounded ax-overflow-y-auto ax-h-full dark:ax-border-transparent;
|
|
8
8
|
&.ax-vertical {
|
|
9
9
|
@apply ax-grid ax-grid-cols-1;
|
|
10
10
|
&.ax-divide {
|
|
@@ -26,12 +26,12 @@
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
&.ax-state-selected {
|
|
29
|
-
@apply ax-bg-primary-100 ax-text-primary ax-font-medium dark:ax-bg-primary dark:ax-text-primary-50;
|
|
29
|
+
@apply ax-bg-primary-100 ax-text-primary-500 ax-font-medium dark:ax-bg-primary-500 dark:ax-text-primary-50;
|
|
30
30
|
}
|
|
31
31
|
&:focus,
|
|
32
32
|
&.ax-state-focus {
|
|
33
33
|
&:not(.ax-state-selected) {
|
|
34
|
-
@apply ax-outline-none ax-bg-primary-50 ax-text-primary;
|
|
34
|
+
@apply ax-outline-none ax-bg-primary-50 ax-text-primary-500;
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
}
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
&::before {
|
|
26
|
-
@apply ax-bg-primary;
|
|
26
|
+
@apply ax-bg-primary-500;
|
|
27
27
|
animation: pulse2 2s ease-in-out infinite;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&::after {
|
|
31
|
-
@apply ax-bg-primary;
|
|
31
|
+
@apply ax-bg-primary-500;
|
|
32
32
|
animation: pulse2 2s 1s ease-in-out infinite;
|
|
33
33
|
}
|
|
34
34
|
}
|
|
@@ -15,7 +15,8 @@
|
|
|
15
15
|
.ax-popup {
|
|
16
16
|
max-height: 98vh;
|
|
17
17
|
min-height: fit-content;
|
|
18
|
-
@apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0
|
|
18
|
+
@apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0;
|
|
19
|
+
@include control-dark('surface');
|
|
19
20
|
|
|
20
21
|
header {
|
|
21
22
|
@apply ax-flex ax-justify-between ax-px-3 ax-py-2;
|
|
@@ -44,7 +45,7 @@
|
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
|
|
47
|
-
&.ax-full {
|
|
48
|
+
&.ax-popup-full {
|
|
48
49
|
@apply ax-w-screen ax-h-screen;
|
|
49
50
|
}
|
|
50
51
|
|
|
@@ -53,66 +54,66 @@
|
|
|
53
54
|
}
|
|
54
55
|
|
|
55
56
|
@media all and (min-width: 1280px) {
|
|
56
|
-
&.ax-sm {
|
|
57
|
+
&.ax-popup-sm {
|
|
57
58
|
width: 420px !important;
|
|
58
59
|
}
|
|
59
60
|
|
|
60
|
-
&.ax-md {
|
|
61
|
+
&.ax-popup-md {
|
|
61
62
|
width: 680px !important;
|
|
62
63
|
}
|
|
63
64
|
|
|
64
|
-
&.ax-lg {
|
|
65
|
+
&.ax-popup-lg {
|
|
65
66
|
width: 1024px !important;
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
69
|
|
|
69
70
|
@media all and (min-width: 1024px) and (max-width: 1279px) {
|
|
70
|
-
&.ax-sm {
|
|
71
|
+
&.ax-popup-sm {
|
|
71
72
|
width: 100vw;
|
|
72
73
|
max-height: 100vh;
|
|
73
74
|
}
|
|
74
75
|
|
|
75
|
-
&.ax-md {
|
|
76
|
+
&.ax-popup-md {
|
|
76
77
|
width: 500px !important;
|
|
77
78
|
}
|
|
78
79
|
|
|
79
|
-
&.ax-lg {
|
|
80
|
+
&.ax-popup-lg {
|
|
80
81
|
width: 900px !important;
|
|
81
82
|
}
|
|
82
83
|
}
|
|
83
84
|
|
|
84
85
|
@media all and (min-width: 768px) and (max-width: 1023px) {
|
|
85
|
-
&.ax-sm {
|
|
86
|
+
&.ax-popup-sm {
|
|
86
87
|
width: 100vw;
|
|
87
88
|
max-height: 100vh;
|
|
88
89
|
}
|
|
89
90
|
|
|
90
|
-
&.ax-md {
|
|
91
|
+
&.ax-popup-md {
|
|
91
92
|
width: 500px !important;
|
|
92
93
|
}
|
|
93
94
|
|
|
94
|
-
&.ax-lg {
|
|
95
|
+
&.ax-popup-lg {
|
|
95
96
|
width: 700px !important;
|
|
96
97
|
}
|
|
97
98
|
}
|
|
98
99
|
|
|
99
100
|
@media all and (min-width: 425px) and (max-width: 767px) {
|
|
100
|
-
&.ax-sm {
|
|
101
|
+
&.ax-popup-sm {
|
|
101
102
|
width: 100vw;
|
|
102
103
|
max-height: 100vh;
|
|
103
104
|
}
|
|
104
105
|
|
|
105
|
-
&.ax-md,
|
|
106
|
-
&.ax-lg {
|
|
106
|
+
&.ax-popup-md,
|
|
107
|
+
&.ax-popup-lg {
|
|
107
108
|
width: 460px !important;
|
|
108
109
|
}
|
|
109
110
|
}
|
|
110
111
|
|
|
111
112
|
@media all and (min-width: 0px) and (max-width: 424px) {
|
|
112
113
|
|
|
113
|
-
&.ax-sm,
|
|
114
|
-
&.ax-md,
|
|
115
|
-
&.ax-lg {
|
|
114
|
+
&.ax-popup-sm,
|
|
115
|
+
&.ax-popup-md,
|
|
116
|
+
&.ax-popup-lg {
|
|
116
117
|
width: 100vw;
|
|
117
118
|
max-height: 100vh;
|
|
118
119
|
}
|
|
@@ -3,13 +3,15 @@
|
|
|
3
3
|
@apply ax-text-sm ax-font-medium ax-text-light-700;
|
|
4
4
|
|
|
5
5
|
.ax-radio {
|
|
6
|
-
@apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary ax-m-0 ax-outline-none ax-align-middle ax-appearance-none
|
|
6
|
+
@apply ax-w-4 ax-h-4 ax-border-solid ax-border ax-border-light-300 ax-rounded-full ax-bg-white ax-text-primary-500 ax-m-0 ax-outline-none ax-align-middle ax-appearance-none;
|
|
7
|
+
@include control-dark('editor');
|
|
8
|
+
|
|
7
9
|
&:checked {
|
|
8
|
-
@apply ax-border-primary ax-bg-no-repeat ax-bg-current ax-bg-contain;
|
|
10
|
+
@apply ax-border-primary-500 ax-bg-no-repeat ax-bg-current ax-bg-contain;
|
|
9
11
|
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
|
|
10
12
|
}
|
|
11
13
|
&:focus {
|
|
12
|
-
@apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
|
|
14
|
+
@apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
|
|
13
15
|
}
|
|
14
16
|
}
|
|
15
17
|
ax-label {
|
|
@@ -15,13 +15,13 @@
|
|
|
15
15
|
}
|
|
16
16
|
|
|
17
17
|
&.ax-state-error {
|
|
18
|
-
@apply ax-text-danger;
|
|
18
|
+
@apply ax-text-danger-500;
|
|
19
19
|
.ax-checkbox-checkmark {
|
|
20
|
-
@apply ax-border-danger;
|
|
20
|
+
@apply ax-border-danger-500;
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
.ax-radio-checkmark {
|
|
24
|
-
@apply ax-border-danger;
|
|
24
|
+
@apply ax-border-danger-500;
|
|
25
25
|
}
|
|
26
26
|
}
|
|
27
27
|
}
|
|
@@ -7,11 +7,7 @@
|
|
|
7
7
|
@apply ax-bg-light-100;
|
|
8
8
|
}
|
|
9
9
|
&:focus {
|
|
10
|
-
@apply ax-outline-none
|
|
11
|
-
ax-ring-2
|
|
12
|
-
ax-ring-primary
|
|
13
|
-
ax-ring-opacity-100
|
|
14
|
-
ax-border-transparent;
|
|
10
|
+
@apply ax-outline-none ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
|
|
15
11
|
}
|
|
16
12
|
.ax-side-menu-icon {
|
|
17
13
|
@apply ax-pr-2 ax-h-full ax-flex ax-items-center;
|
|
@@ -28,11 +28,10 @@
|
|
|
28
28
|
left: 0;
|
|
29
29
|
right: 0;
|
|
30
30
|
bottom: 0;
|
|
31
|
-
background-color: rgb(var(--ax-color-light-400));
|
|
32
31
|
-webkit-transition: 0.2s;
|
|
33
32
|
transition: 0.2s;
|
|
34
33
|
border-radius: 25px;
|
|
35
|
-
@apply ax-
|
|
34
|
+
@apply ax-bg-light-400 dark:ax-border-transparent dark:ax-bg-white/[0.16] dark:ax-backdrop-blur-3xl;
|
|
36
35
|
&::before {
|
|
37
36
|
content: "";
|
|
38
37
|
position: absolute;
|
|
@@ -47,7 +46,7 @@
|
|
|
47
46
|
}
|
|
48
47
|
}
|
|
49
48
|
input:focus~.ax-switch-slider {
|
|
50
|
-
@apply ax-ring-2 ax-ring-primary ax-ring-offset-2;
|
|
49
|
+
@apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
|
|
51
50
|
}
|
|
52
51
|
&.ax-sm {
|
|
53
52
|
width: calc(var(--ax-base-size) * var(--ax-base-ratio) - 6px);
|
|
@@ -93,7 +92,7 @@
|
|
|
93
92
|
}
|
|
94
93
|
&.ax-state-error {
|
|
95
94
|
.ax-switch-slider {
|
|
96
|
-
@apply ax-ring-2 ax-ring-danger ax-ring-opacity-100 ax-border-transparent;
|
|
95
|
+
@apply ax-ring-2 ax-ring-danger-500 ax-ring-opacity-100 ax-border-transparent;
|
|
97
96
|
}
|
|
98
97
|
}
|
|
99
98
|
&.ax-state-disabled {
|
|
@@ -123,7 +122,7 @@
|
|
|
123
122
|
}
|
|
124
123
|
}
|
|
125
124
|
input:focus~.ax-switch-slider {
|
|
126
|
-
@apply ax-ring-success;
|
|
125
|
+
@apply ax-ring-success-500;
|
|
127
126
|
}
|
|
128
127
|
}
|
|
129
128
|
&.ax-secondary {
|
|
@@ -135,7 +134,7 @@
|
|
|
135
134
|
}
|
|
136
135
|
}
|
|
137
136
|
input:focus~.ax-switch-slider {
|
|
138
|
-
@apply ax-ring-secondary;
|
|
137
|
+
@apply ax-ring-secondary-500;
|
|
139
138
|
}
|
|
140
139
|
}
|
|
141
140
|
&.ax-danger {
|
|
@@ -147,7 +146,7 @@
|
|
|
147
146
|
}
|
|
148
147
|
}
|
|
149
148
|
input:focus~.ax-switch-slider {
|
|
150
|
-
@apply ax-ring-danger;
|
|
149
|
+
@apply ax-ring-danger-500;
|
|
151
150
|
}
|
|
152
151
|
}
|
|
153
152
|
&.ax-warning {
|
|
@@ -159,7 +158,7 @@
|
|
|
159
158
|
}
|
|
160
159
|
}
|
|
161
160
|
input:focus~.ax-switch-slider {
|
|
162
|
-
@apply ax-ring-warning;
|
|
161
|
+
@apply ax-ring-warning-500;
|
|
163
162
|
}
|
|
164
163
|
}
|
|
165
164
|
&.ax-info {
|
|
@@ -171,7 +170,7 @@
|
|
|
171
170
|
}
|
|
172
171
|
}
|
|
173
172
|
input:focus~.ax-switch-slider {
|
|
174
|
-
@apply ax-ring-info;
|
|
173
|
+
@apply ax-ring-info-500;
|
|
175
174
|
}
|
|
176
175
|
}
|
|
177
176
|
&.ax-light {
|
|
@@ -183,7 +182,7 @@
|
|
|
183
182
|
}
|
|
184
183
|
}
|
|
185
184
|
input:focus~.ax-switch-slider {
|
|
186
|
-
@apply ax-ring-light;
|
|
185
|
+
@apply ax-ring-light-500;
|
|
187
186
|
}
|
|
188
187
|
}
|
|
189
188
|
&.ax-dark {
|
|
@@ -195,7 +194,7 @@
|
|
|
195
194
|
}
|
|
196
195
|
}
|
|
197
196
|
input:focus~.ax-switch-slider {
|
|
198
|
-
@apply ax-ring-dark;
|
|
197
|
+
@apply ax-ring-dark-500;
|
|
199
198
|
}
|
|
200
199
|
}
|
|
201
200
|
}
|