@acorex/styles 5.6.0 → 5.9.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.
- package/index.js +195 -0
- package/index.scss +3 -4
- package/package.json +1 -1
- package/src/base/index.scss +3 -1
- package/src/components/_action-sheet.scss +1 -1
- package/src/components/_alert.scss +310 -42
- package/src/components/_avatar.scss +1 -1
- package/src/components/_badge.scss +146 -26
- package/src/components/_breadcrumbs.scss +12 -8
- package/src/components/_button.scss +340 -397
- package/src/components/_calendar.scss +36 -18
- package/src/components/_collapse.scss +5 -11
- package/src/components/_color-palette.scss +33 -23
- package/src/components/_color-picker.scss +1 -1
- package/src/components/_data-table.scss +30 -5
- package/src/components/_datapager.scss +35 -26
- package/src/components/_decoration.scss +17 -9
- package/src/components/_drawer.scss +5 -1
- package/src/components/_dropdown.scss +6 -2
- package/src/components/_editor-container.scss +7 -2
- package/src/components/_fieldset.scss +1 -1
- package/src/components/_input.scss +1 -1
- package/src/components/_menu.scss +1 -1
- package/src/components/_popup.scss +7 -3
- package/src/components/_progress.scss +9 -10
- package/src/components/_range-slider.scss +195 -7
- package/src/components/_result.scss +2 -2
- package/src/components/_selection-list.scss +1 -1
- package/src/components/_table.scss +40 -7
- package/src/components/_tabs.scss +3 -3
- package/src/icons/demo-files/demo.css +152 -152
- package/src/icons/demo-files/demo.js +30 -30
- package/src/icons/demo.html +556 -542
- package/src/icons/fonts/acorex-icon.eot +0 -0
- package/src/icons/fonts/acorex-icon.svg +46 -45
- package/src/icons/fonts/acorex-icon.ttf +0 -0
- package/src/icons/fonts/acorex-icon.woff +0 -0
- package/src/icons/selection.json +1 -1
- package/src/icons/style.css +138 -135
- package/src/icons/style.scss +215 -210
- package/src/icons/variables.scss +41 -40
- package/src/utility/_mixins.scss +6 -69
- package/src/utility/index.scss +3 -3
- package/src/variables/_colors.scss +15 -14
|
@@ -1,21 +1,19 @@
|
|
|
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-
|
|
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 ax-transition-all;
|
|
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
|
|
|
7
|
-
|
|
8
|
-
@apply
|
|
7
|
+
& > button {
|
|
8
|
+
@apply ax-inline-flex ax-items-center ax-justify-center ax-font-medium ax-whitespace-nowrap ax-overflow-hidden ax-text-ellipsis ax-px-4 ax-w-full ax-h-full;
|
|
9
9
|
&:focus,
|
|
10
10
|
&:focus-visible {
|
|
11
|
-
@apply ax-outline-none
|
|
12
|
-
outline:none;
|
|
11
|
+
@apply ax-outline-none;
|
|
12
|
+
outline: none;
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
&:focus
|
|
16
|
-
|
|
17
|
-
@apply ax-outline-none ax-z-10;
|
|
18
|
-
outline:none;
|
|
15
|
+
&:focus {
|
|
16
|
+
@apply ax-outline-none;
|
|
19
17
|
}
|
|
20
18
|
ax-prefix {
|
|
21
19
|
@apply ax-flex ax-flex-row ax-pe-2;
|
|
@@ -24,7 +22,9 @@
|
|
|
24
22
|
ax-suffix {
|
|
25
23
|
@apply ax-flex ax-flex-row ax-ps-2;
|
|
26
24
|
}
|
|
27
|
-
|
|
25
|
+
&[class*="-outline"] {
|
|
26
|
+
@apply ax-border;
|
|
27
|
+
}
|
|
28
28
|
.ax-badge {
|
|
29
29
|
@apply ax-text-xs;
|
|
30
30
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
|
|
36
36
|
&.ax-button-icon {
|
|
37
37
|
width: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
|
|
38
|
-
|
|
38
|
+
& > button {
|
|
39
39
|
@apply ax-px-3;
|
|
40
40
|
}
|
|
41
41
|
|
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
@apply ax-p-0;
|
|
45
45
|
}
|
|
46
46
|
|
|
47
|
-
ax-icon
|
|
47
|
+
ax-icon,
|
|
48
|
+
i {
|
|
48
49
|
@apply ax-text-base;
|
|
49
50
|
}
|
|
50
51
|
}
|
|
@@ -60,9 +61,6 @@
|
|
|
60
61
|
}
|
|
61
62
|
|
|
62
63
|
// states
|
|
63
|
-
&.ax-state-selected {
|
|
64
|
-
@apply ax-z-10;
|
|
65
|
-
}
|
|
66
64
|
|
|
67
65
|
&.ax-state-loading {
|
|
68
66
|
@apply ax-cursor-not-allowed;
|
|
@@ -72,11 +70,11 @@
|
|
|
72
70
|
@apply ax-cursor-not-allowed ax-opacity-60;
|
|
73
71
|
}
|
|
74
72
|
|
|
75
|
-
//
|
|
73
|
+
// primary
|
|
76
74
|
&.ax-primary-default {
|
|
77
|
-
@apply ax-
|
|
75
|
+
@apply ax-bg-primary-500 ax-text-primary-fore ax-border-transparent dark:ax-bg-primary-800;
|
|
78
76
|
|
|
79
|
-
&:not(.ax-state-disabled) {
|
|
77
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
80
78
|
&:hover {
|
|
81
79
|
@apply ax-bg-primary-600;
|
|
82
80
|
}
|
|
@@ -90,864 +88,809 @@
|
|
|
90
88
|
@apply ax-bg-primary-800 ax-ring-2 ax-ring-offset-2 ax-ring-primary-800;
|
|
91
89
|
}
|
|
92
90
|
}
|
|
93
|
-
|
|
94
91
|
&.ax-state-selected {
|
|
95
|
-
@apply ax-bg-primary-
|
|
92
|
+
@apply ax-bg-primary-800 dark:ax-bg-primary-500;
|
|
96
93
|
}
|
|
97
94
|
}
|
|
95
|
+
&.ax-primary-twotone {
|
|
96
|
+
@apply ax-bg-primary-100 ax-text-primary-500 ax-border-transparent dark:ax-bg-primary-800 dark:ax-text-primary-100;
|
|
98
97
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
&:not(.ax-state-disabled) {
|
|
103
|
-
&:hover {
|
|
104
|
-
@apply ax-bg-secondary-600;
|
|
105
|
-
}
|
|
106
|
-
|
|
98
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
99
|
+
&:hover,
|
|
107
100
|
&:focus,
|
|
108
101
|
&:focus-within {
|
|
109
|
-
@apply ax-
|
|
102
|
+
@apply ax-bg-primary-200 ax-text-primary-700 dark:ax-bg-primary-700 dark:ax-text-primary-100;
|
|
110
103
|
}
|
|
111
104
|
|
|
112
105
|
&:active {
|
|
113
|
-
@apply ax-bg-
|
|
106
|
+
@apply ax-bg-primary-300 ax-text-primary-700 dark:ax-bg-primary-500;
|
|
114
107
|
}
|
|
115
108
|
}
|
|
116
|
-
|
|
117
109
|
&.ax-state-selected {
|
|
118
|
-
@apply ax-bg-
|
|
110
|
+
@apply ax-bg-primary-500 ax-text-primary-fore;
|
|
119
111
|
}
|
|
120
112
|
}
|
|
113
|
+
&.ax-primary-outline {
|
|
114
|
+
@apply ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
|
|
121
115
|
|
|
122
|
-
|
|
123
|
-
@apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
|
|
124
|
-
|
|
125
|
-
&:not(.ax-state-disabled) {
|
|
116
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
126
117
|
&:hover {
|
|
127
|
-
@apply ax-
|
|
118
|
+
@apply ax-border-primary-300 ax-text-primary-300 dark:ax-text-primary-200 dark:ax-border-primary-500;
|
|
128
119
|
}
|
|
129
|
-
|
|
130
120
|
&:focus,
|
|
131
121
|
&:focus-within {
|
|
132
|
-
@apply ax-ring-2 ax-ring-
|
|
122
|
+
@apply ax-border-primary-400 ax-ring-2 ax-text-primary-400 dark:ax-text-primary-200 dark:ax-border-primary-500 ax-ring-primary-100 dark:ax-ring-primary-900;
|
|
133
123
|
}
|
|
134
124
|
|
|
135
125
|
&:active {
|
|
136
|
-
@apply ax-
|
|
126
|
+
@apply ax-border-primary-600 ax-text-primary-800 dark:ax-border-primary-400 dark:ax-text-primary-100;
|
|
137
127
|
}
|
|
138
128
|
}
|
|
139
|
-
|
|
140
129
|
&.ax-state-selected {
|
|
141
|
-
@apply ax-bg-
|
|
130
|
+
@apply ax-bg-primary-800 ax-text-primary-fore ax-border-primary-800;
|
|
142
131
|
}
|
|
143
132
|
}
|
|
133
|
+
&.ax-primary-blank {
|
|
134
|
+
@apply ax-text-primary-500 ax-border-transparent dark:ax-text-primary-300;
|
|
144
135
|
|
|
145
|
-
|
|
146
|
-
@apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
|
|
147
|
-
|
|
148
|
-
&:not(.ax-state-disabled) {
|
|
136
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
149
137
|
&:hover {
|
|
150
|
-
@apply ax-
|
|
138
|
+
@apply ax-text-primary-600 dark:ax-text-primary-100;
|
|
151
139
|
}
|
|
152
|
-
|
|
153
140
|
&:focus,
|
|
154
141
|
&:focus-within {
|
|
155
|
-
@apply ax-ring-2 ax-ring-
|
|
142
|
+
@apply ax-text-primary-700 dark:ax-text-primary-200 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
|
|
156
143
|
}
|
|
157
144
|
|
|
158
145
|
&:active {
|
|
159
|
-
@apply ax-
|
|
146
|
+
@apply ax-text-primary-700 ax-ring-0 dark:ax-text-primary-300;
|
|
160
147
|
}
|
|
161
148
|
}
|
|
162
|
-
|
|
163
149
|
&.ax-state-selected {
|
|
164
|
-
@apply ax-bg-
|
|
150
|
+
@apply ax-bg-primary-800 ax-text-primary-fore;
|
|
165
151
|
}
|
|
166
152
|
}
|
|
153
|
+
&.ax-primary-link {
|
|
154
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-primary-500 ax-border-primary-500 dark:ax-border-primary-400 dark:ax-text-primary-300;
|
|
167
155
|
|
|
168
|
-
|
|
169
|
-
@apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
|
|
170
|
-
|
|
171
|
-
&:not(.ax-state-disabled) {
|
|
156
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
172
157
|
&:hover {
|
|
173
|
-
@apply ax-
|
|
158
|
+
@apply ax-text-primary-700 ax-border-primary-800 dark:ax-border-primary-200 dark:ax-text-primary-200;
|
|
174
159
|
}
|
|
175
|
-
|
|
176
160
|
&:focus,
|
|
177
161
|
&:focus-within {
|
|
178
|
-
@apply ax-ring-2 ax-ring-
|
|
162
|
+
@apply ax-text-primary-900 dark:ax-text-primary-500 ax-border-primary-800 dark:ax-border-primary-500 ax-ring-2 ax-ring-primary-100 dark:ax-ring-primary-900;
|
|
179
163
|
}
|
|
180
164
|
|
|
181
165
|
&:active {
|
|
182
|
-
@apply ax-
|
|
166
|
+
@apply ax-text-primary-500 dark:ax-text-primary-400 ax-border-primary-500 dark:ax-border-primary-400;
|
|
183
167
|
}
|
|
184
168
|
}
|
|
185
|
-
|
|
186
169
|
&.ax-state-selected {
|
|
187
|
-
@apply ax-bg-
|
|
170
|
+
@apply ax-bg-primary-800 ax-text-primary-fore;
|
|
188
171
|
}
|
|
189
172
|
}
|
|
190
173
|
|
|
191
|
-
|
|
192
|
-
|
|
174
|
+
// secondary
|
|
175
|
+
&.ax-secondary-default {
|
|
176
|
+
@apply ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent dark:ax-bg-secondary-800;
|
|
193
177
|
|
|
194
|
-
&:not(.ax-state-disabled) {
|
|
178
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
195
179
|
&:hover {
|
|
196
|
-
@apply ax-bg-
|
|
180
|
+
@apply ax-bg-secondary-600;
|
|
197
181
|
}
|
|
198
182
|
|
|
199
183
|
&:focus,
|
|
200
184
|
&:focus-within {
|
|
201
|
-
@apply ax-ring-2 ax-ring-offset-2 ax-ring-
|
|
185
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
|
|
202
186
|
}
|
|
203
187
|
|
|
204
188
|
&:active {
|
|
205
|
-
@apply ax-bg-
|
|
189
|
+
@apply ax-bg-secondary-800 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-800;
|
|
206
190
|
}
|
|
207
191
|
}
|
|
208
|
-
|
|
209
192
|
&.ax-state-selected {
|
|
210
|
-
@apply ax-bg-
|
|
193
|
+
@apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
|
|
211
194
|
}
|
|
212
195
|
}
|
|
196
|
+
&.ax-secondary-twotone {
|
|
197
|
+
@apply ax-bg-secondary-100 ax-text-secondary-500 ax-border-transparent dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
|
|
213
198
|
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
&:not(.ax-state-disabled) {
|
|
218
|
-
&:hover {
|
|
219
|
-
@apply ax-bg-dark-400 dark:ax-bg-dark-400;
|
|
220
|
-
}
|
|
221
|
-
|
|
199
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
200
|
+
&:hover,
|
|
222
201
|
&:focus,
|
|
223
202
|
&:focus-within {
|
|
224
|
-
@apply ax-
|
|
203
|
+
@apply ax-bg-secondary-200 ax-text-secondary-700 dark:ax-bg-secondary-700 dark:ax-text-secondary-100;
|
|
225
204
|
}
|
|
226
205
|
|
|
227
206
|
&:active {
|
|
228
|
-
@apply ax-bg-
|
|
207
|
+
@apply ax-bg-secondary-300 ax-text-secondary-700 dark:ax-bg-secondary-500;
|
|
229
208
|
}
|
|
230
209
|
}
|
|
231
|
-
|
|
232
210
|
&.ax-state-selected {
|
|
233
|
-
@apply ax-bg-
|
|
211
|
+
@apply ax-bg-secondary-500 ax-text-secondary-fore;
|
|
234
212
|
}
|
|
235
213
|
}
|
|
214
|
+
&.ax-secondary-outline {
|
|
215
|
+
@apply ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
|
|
236
216
|
|
|
237
|
-
|
|
238
|
-
@apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-light-300 dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
|
|
239
|
-
|
|
240
|
-
&:not(.ax-state-disabled) {
|
|
217
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
241
218
|
&:hover {
|
|
242
|
-
@apply ax-
|
|
219
|
+
@apply ax-border-secondary-300 ax-text-secondary-300 dark:ax-text-secondary-200 dark:ax-border-secondary-500;
|
|
243
220
|
}
|
|
244
|
-
|
|
245
221
|
&:focus,
|
|
246
222
|
&:focus-within {
|
|
247
|
-
@apply ax-ring-2 ax-
|
|
223
|
+
@apply ax-border-secondary-400 ax-ring-2 ax-text-secondary-400 dark:ax-text-secondary-200 dark:ax-border-secondary-500 ax-ring-secondary-100 dark:ax-ring-secondary-900;
|
|
248
224
|
}
|
|
249
225
|
|
|
250
226
|
&:active {
|
|
251
|
-
@apply ax-
|
|
227
|
+
@apply ax-border-secondary-600 ax-text-secondary-800 dark:ax-border-secondary-400 dark:ax-text-secondary-100;
|
|
252
228
|
}
|
|
253
229
|
}
|
|
254
|
-
|
|
255
230
|
&.ax-state-selected {
|
|
256
|
-
@apply ax-bg-
|
|
231
|
+
@apply ax-bg-secondary-800 ax-text-secondary-fore ax-border-secondary-800;
|
|
257
232
|
}
|
|
258
233
|
}
|
|
234
|
+
&.ax-secondary-blank {
|
|
235
|
+
@apply ax-text-secondary-500 ax-border-transparent dark:ax-text-secondary-300;
|
|
259
236
|
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
&:not(.ax-state-disabled) {
|
|
265
|
-
|
|
266
|
-
&:hover,
|
|
237
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
238
|
+
&:hover {
|
|
239
|
+
@apply ax-text-secondary-600 dark:ax-text-secondary-100;
|
|
240
|
+
}
|
|
267
241
|
&:focus,
|
|
268
242
|
&:focus-within {
|
|
269
|
-
@apply ax-
|
|
243
|
+
@apply ax-text-secondary-700 dark:ax-text-secondary-200 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
|
|
270
244
|
}
|
|
271
245
|
|
|
272
246
|
&:active {
|
|
273
|
-
@apply ax-
|
|
247
|
+
@apply ax-text-secondary-700 ax-ring-0 dark:ax-text-secondary-300;
|
|
274
248
|
}
|
|
275
249
|
}
|
|
276
|
-
|
|
277
250
|
&.ax-state-selected {
|
|
278
|
-
@apply ax-bg-
|
|
251
|
+
@apply ax-bg-secondary-800 ax-text-secondary-fore;
|
|
279
252
|
}
|
|
280
253
|
}
|
|
254
|
+
&.ax-secondary-link {
|
|
255
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500 dark:ax-border-secondary-400 dark:ax-text-secondary-300;
|
|
281
256
|
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
&:hover,
|
|
257
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
258
|
+
&:hover {
|
|
259
|
+
@apply ax-text-secondary-700 ax-border-secondary-800 dark:ax-border-secondary-200 dark:ax-text-secondary-200;
|
|
260
|
+
}
|
|
288
261
|
&:focus,
|
|
289
262
|
&:focus-within {
|
|
290
|
-
@apply ax-
|
|
263
|
+
@apply ax-text-secondary-900 dark:ax-text-secondary-500 ax-border-secondary-800 dark:ax-border-secondary-500 ax-ring-2 ax-ring-secondary-100 dark:ax-ring-secondary-900;
|
|
291
264
|
}
|
|
292
265
|
|
|
293
266
|
&:active {
|
|
294
|
-
@apply ax-
|
|
267
|
+
@apply ax-text-secondary-500 dark:ax-text-secondary-400 ax-border-secondary-500 dark:ax-border-secondary-400;
|
|
295
268
|
}
|
|
296
269
|
}
|
|
297
|
-
|
|
298
270
|
&.ax-state-selected {
|
|
299
|
-
@apply ax-bg-secondary-
|
|
271
|
+
@apply ax-bg-secondary-800 ax-text-secondary-fore;
|
|
300
272
|
}
|
|
301
273
|
}
|
|
302
274
|
|
|
303
|
-
|
|
304
|
-
|
|
275
|
+
// success
|
|
276
|
+
&.ax-success-default {
|
|
277
|
+
@apply ax-bg-success-500 ax-text-success-fore ax-border-transparent dark:ax-bg-success-800;
|
|
305
278
|
|
|
306
|
-
&:not(.ax-state-disabled) {
|
|
279
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
280
|
+
&:hover {
|
|
281
|
+
@apply ax-bg-success-600;
|
|
282
|
+
}
|
|
307
283
|
|
|
308
|
-
&:hover,
|
|
309
284
|
&:focus,
|
|
310
285
|
&:focus-within {
|
|
311
|
-
@apply ax-
|
|
286
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
|
|
312
287
|
}
|
|
313
288
|
|
|
314
289
|
&:active {
|
|
315
|
-
@apply ax-bg-
|
|
290
|
+
@apply ax-bg-success-800 ax-ring-2 ax-ring-offset-2 ax-ring-success-800;
|
|
316
291
|
}
|
|
317
292
|
}
|
|
318
|
-
|
|
319
293
|
&.ax-state-selected {
|
|
320
|
-
@apply ax-bg-
|
|
294
|
+
@apply ax-bg-success-800 dark:ax-bg-success-500;
|
|
321
295
|
}
|
|
322
296
|
}
|
|
297
|
+
&.ax-success-twotone {
|
|
298
|
+
@apply ax-bg-success-100 ax-text-success-500 ax-border-transparent dark:ax-bg-success-800 dark:ax-text-success-100;
|
|
323
299
|
|
|
324
|
-
|
|
325
|
-
@apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-300 dark:ax-text-danger-700;
|
|
326
|
-
|
|
327
|
-
&:not(.ax-state-disabled) {
|
|
328
|
-
|
|
300
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
329
301
|
&:hover,
|
|
330
302
|
&:focus,
|
|
331
303
|
&:focus-within {
|
|
332
|
-
@apply ax-bg-
|
|
304
|
+
@apply ax-bg-success-200 ax-text-success-700 dark:ax-bg-success-700 dark:ax-text-success-100;
|
|
333
305
|
}
|
|
334
306
|
|
|
335
307
|
&:active {
|
|
336
|
-
@apply ax-bg-
|
|
308
|
+
@apply ax-bg-success-300 ax-text-success-700 dark:ax-bg-success-500;
|
|
337
309
|
}
|
|
338
310
|
}
|
|
339
|
-
|
|
340
311
|
&.ax-state-selected {
|
|
341
|
-
@apply ax-bg-
|
|
312
|
+
@apply ax-bg-success-500 ax-text-success-fore;
|
|
342
313
|
}
|
|
343
314
|
}
|
|
315
|
+
&.ax-success-outline {
|
|
316
|
+
@apply ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
|
|
344
317
|
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
&:hover,
|
|
318
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
319
|
+
&:hover {
|
|
320
|
+
@apply ax-border-success-300 ax-text-success-300 dark:ax-text-success-200 dark:ax-border-success-500;
|
|
321
|
+
}
|
|
351
322
|
&:focus,
|
|
352
323
|
&:focus-within {
|
|
353
|
-
@apply ax-
|
|
324
|
+
@apply ax-border-success-400 ax-ring-2 ax-text-success-400 dark:ax-text-success-200 dark:ax-border-success-500 ax-ring-success-100 dark:ax-ring-success-900;
|
|
354
325
|
}
|
|
355
326
|
|
|
356
327
|
&:active {
|
|
357
|
-
@apply ax-
|
|
328
|
+
@apply ax-border-success-600 ax-text-success-800 dark:ax-border-success-400 dark:ax-text-success-100;
|
|
358
329
|
}
|
|
359
330
|
}
|
|
360
|
-
|
|
361
331
|
&.ax-state-selected {
|
|
362
|
-
@apply ax-bg-success-
|
|
332
|
+
@apply ax-bg-success-800 ax-text-success-fore ax-border-success-800;
|
|
363
333
|
}
|
|
364
334
|
}
|
|
335
|
+
&.ax-success-blank {
|
|
336
|
+
@apply ax-text-success-500 ax-border-transparent dark:ax-text-success-300;
|
|
365
337
|
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
&:hover,
|
|
338
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
339
|
+
&:hover {
|
|
340
|
+
@apply ax-text-success-600 dark:ax-text-success-100;
|
|
341
|
+
}
|
|
372
342
|
&:focus,
|
|
373
343
|
&:focus-within {
|
|
374
|
-
@apply ax-
|
|
344
|
+
@apply ax-text-success-700 dark:ax-text-success-200 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
|
|
375
345
|
}
|
|
376
346
|
|
|
377
347
|
&:active {
|
|
378
|
-
@apply ax-
|
|
348
|
+
@apply ax-text-success-700 ax-ring-0 dark:ax-text-success-300;
|
|
379
349
|
}
|
|
380
350
|
}
|
|
381
|
-
|
|
382
351
|
&.ax-state-selected {
|
|
383
|
-
@apply ax-bg-
|
|
352
|
+
@apply ax-bg-success-800 ax-text-success-fore;
|
|
384
353
|
}
|
|
385
354
|
}
|
|
355
|
+
&.ax-success-link {
|
|
356
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-success-500 ax-border-success-500 dark:ax-border-success-400 dark:ax-text-success-300;
|
|
386
357
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
&:hover {}
|
|
392
|
-
|
|
358
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
359
|
+
&:hover {
|
|
360
|
+
@apply ax-text-success-700 ax-border-success-800 dark:ax-border-success-200 dark:ax-text-success-200;
|
|
361
|
+
}
|
|
393
362
|
&:focus,
|
|
394
363
|
&:focus-within {
|
|
395
|
-
@apply ax-
|
|
364
|
+
@apply ax-text-success-900 dark:ax-text-success-500 ax-border-success-800 dark:ax-border-success-500 ax-ring-2 ax-ring-success-100 dark:ax-ring-success-900;
|
|
396
365
|
}
|
|
397
366
|
|
|
398
367
|
&:active {
|
|
399
|
-
@apply ax-
|
|
400
|
-
}
|
|
401
|
-
|
|
402
|
-
&.ax-state-selected {
|
|
403
|
-
@apply ax-bg-dark-300 ax-text-dark-fore;
|
|
368
|
+
@apply ax-text-success-500 dark:ax-text-success-400 ax-border-success-500 dark:ax-border-success-400;
|
|
404
369
|
}
|
|
405
370
|
}
|
|
371
|
+
&.ax-state-selected {
|
|
372
|
+
@apply ax-bg-success-800 ax-text-success-fore;
|
|
373
|
+
}
|
|
406
374
|
}
|
|
407
375
|
|
|
408
|
-
|
|
409
|
-
|
|
376
|
+
// warning
|
|
377
|
+
&.ax-warning-default {
|
|
378
|
+
@apply ax-bg-warning-500 ax-text-warning-fore ax-border-transparent dark:ax-bg-warning-800;
|
|
410
379
|
|
|
411
|
-
&:not(.ax-state-disabled) {
|
|
380
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
412
381
|
&:hover {
|
|
413
|
-
@apply ax-bg-
|
|
382
|
+
@apply ax-bg-warning-600;
|
|
414
383
|
}
|
|
415
384
|
|
|
416
385
|
&:focus,
|
|
417
386
|
&:focus-within {
|
|
418
|
-
@apply ax-
|
|
387
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
|
|
419
388
|
}
|
|
420
389
|
|
|
421
390
|
&:active {
|
|
422
|
-
@apply ax-bg-
|
|
391
|
+
@apply ax-bg-warning-800 ax-ring-2 ax-ring-offset-2 ax-ring-warning-800;
|
|
423
392
|
}
|
|
424
393
|
}
|
|
425
|
-
|
|
426
394
|
&.ax-state-selected {
|
|
427
|
-
@apply ax-bg-
|
|
395
|
+
@apply ax-bg-warning-800 dark:ax-bg-warning-500;
|
|
428
396
|
}
|
|
429
397
|
}
|
|
398
|
+
&.ax-warning-twotone {
|
|
399
|
+
@apply ax-bg-warning-100 ax-text-warning-900 ax-border-transparent dark:ax-bg-warning-700 dark:ax-text-warning-fore;
|
|
430
400
|
|
|
431
|
-
|
|
432
|
-
&.ax-primary-outline {
|
|
433
|
-
@apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
|
|
434
|
-
|
|
435
|
-
&:not(.ax-state-disabled) {
|
|
436
|
-
|
|
401
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
437
402
|
&:hover,
|
|
438
403
|
&:focus,
|
|
439
404
|
&:focus-within {
|
|
440
|
-
@apply ax-bg-
|
|
405
|
+
@apply ax-bg-warning-200 ax-text-warning-fore dark:ax-bg-warning-700 dark:ax-text-warning-fore;
|
|
441
406
|
}
|
|
442
407
|
|
|
443
408
|
&:active {
|
|
444
|
-
@apply ax-bg-
|
|
409
|
+
@apply ax-bg-warning-300 ax-text-warning-fore dark:ax-bg-warning-500 dark:ax-text-warning-fore;
|
|
445
410
|
}
|
|
446
411
|
}
|
|
447
|
-
|
|
448
412
|
&.ax-state-selected {
|
|
449
|
-
@apply ax-bg-
|
|
413
|
+
@apply ax-bg-warning-500 ax-text-warning-fore;
|
|
450
414
|
}
|
|
451
415
|
}
|
|
416
|
+
&.ax-warning-outline {
|
|
417
|
+
@apply ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
|
|
452
418
|
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
&:hover,
|
|
419
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
420
|
+
&:hover {
|
|
421
|
+
@apply ax-border-warning-300 ax-text-warning-300 dark:ax-text-warning-200 dark:ax-border-warning-500;
|
|
422
|
+
}
|
|
459
423
|
&:focus,
|
|
460
424
|
&:focus-within {
|
|
461
|
-
@apply ax-
|
|
425
|
+
@apply ax-border-warning-400 ax-ring-2 ax-text-warning-400 dark:ax-text-warning-200 dark:ax-border-warning-500 ax-ring-warning-100 dark:ax-ring-warning-900;
|
|
462
426
|
}
|
|
463
427
|
|
|
464
428
|
&:active {
|
|
465
|
-
@apply ax-
|
|
429
|
+
@apply ax-border-warning-600 ax-text-warning-800 dark:ax-border-warning-400 dark:ax-text-warning-100;
|
|
466
430
|
}
|
|
467
431
|
}
|
|
468
|
-
|
|
469
432
|
&.ax-state-selected {
|
|
470
|
-
@apply ax-bg-
|
|
433
|
+
@apply ax-bg-warning-800 ax-text-warning-fore ax-border-warning-800;
|
|
471
434
|
}
|
|
472
435
|
}
|
|
436
|
+
&.ax-warning-blank {
|
|
437
|
+
@apply ax-text-warning-500 ax-border-transparent dark:ax-text-warning-300;
|
|
473
438
|
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
&:hover,
|
|
439
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
440
|
+
&:hover {
|
|
441
|
+
@apply ax-text-warning-600 dark:ax-text-warning-100;
|
|
442
|
+
}
|
|
480
443
|
&:focus,
|
|
481
444
|
&:focus-within {
|
|
482
|
-
@apply ax-
|
|
445
|
+
@apply ax-text-warning-700 dark:ax-text-warning-200 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
|
|
483
446
|
}
|
|
484
447
|
|
|
485
448
|
&:active {
|
|
486
|
-
@apply ax-
|
|
449
|
+
@apply ax-text-warning-700 ax-ring-0 dark:ax-text-warning-300;
|
|
487
450
|
}
|
|
488
451
|
}
|
|
489
|
-
|
|
490
452
|
&.ax-state-selected {
|
|
491
|
-
@apply ax-bg-warning-
|
|
453
|
+
@apply ax-bg-warning-800 ax-text-warning-fore;
|
|
492
454
|
}
|
|
493
455
|
}
|
|
456
|
+
&.ax-warning-link {
|
|
457
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500 dark:ax-border-warning-400 dark:ax-text-warning-300;
|
|
494
458
|
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
&:hover,
|
|
459
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
460
|
+
&:hover {
|
|
461
|
+
@apply ax-text-warning-700 ax-border-warning-800 dark:ax-border-warning-200 dark:ax-text-warning-200;
|
|
462
|
+
}
|
|
501
463
|
&:focus,
|
|
502
464
|
&:focus-within {
|
|
503
|
-
@apply ax-
|
|
465
|
+
@apply ax-text-warning-900 dark:ax-text-warning-500 ax-border-warning-800 dark:ax-border-warning-500 ax-ring-2 ax-ring-warning-100 dark:ax-ring-warning-900;
|
|
504
466
|
}
|
|
505
467
|
|
|
506
468
|
&:active {
|
|
507
|
-
@apply ax-
|
|
469
|
+
@apply ax-text-warning-500 dark:ax-text-warning-400 ax-border-warning-500 dark:ax-border-warning-400;
|
|
508
470
|
}
|
|
509
471
|
}
|
|
510
|
-
|
|
511
472
|
&.ax-state-selected {
|
|
512
|
-
@apply ax-bg-
|
|
473
|
+
@apply ax-bg-warning-800 ax-text-warning-fore;
|
|
513
474
|
}
|
|
514
475
|
}
|
|
515
476
|
|
|
516
|
-
|
|
517
|
-
|
|
477
|
+
// danger
|
|
478
|
+
&.ax-danger-default {
|
|
479
|
+
@apply ax-bg-danger-500 ax-text-danger-fore ax-border-transparent dark:ax-bg-danger-800;
|
|
518
480
|
|
|
519
|
-
&:not(.ax-state-disabled) {
|
|
481
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
482
|
+
&:hover {
|
|
483
|
+
@apply ax-bg-danger-600;
|
|
484
|
+
}
|
|
520
485
|
|
|
521
|
-
&:hover,
|
|
522
486
|
&:focus,
|
|
523
487
|
&:focus-within {
|
|
524
|
-
@apply ax-
|
|
488
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
|
|
525
489
|
}
|
|
526
490
|
|
|
527
491
|
&:active {
|
|
528
|
-
@apply ax-bg-
|
|
492
|
+
@apply ax-bg-danger-800 ax-ring-2 ax-ring-offset-2 ax-ring-danger-800;
|
|
529
493
|
}
|
|
530
494
|
}
|
|
531
|
-
|
|
532
495
|
&.ax-state-selected {
|
|
533
|
-
@apply ax-bg-
|
|
496
|
+
@apply ax-bg-danger-800 dark:ax-bg-danger-500;
|
|
534
497
|
}
|
|
535
498
|
}
|
|
499
|
+
&.ax-danger-twotone {
|
|
500
|
+
@apply ax-bg-danger-100 ax-text-danger-500 ax-border-transparent dark:ax-bg-danger-800 dark:ax-text-danger-100;
|
|
536
501
|
|
|
537
|
-
|
|
538
|
-
@apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
|
|
539
|
-
|
|
540
|
-
&:not(.ax-state-disabled) {
|
|
541
|
-
|
|
502
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
542
503
|
&:hover,
|
|
543
504
|
&:focus,
|
|
544
505
|
&:focus-within {
|
|
545
|
-
@apply ax-bg-
|
|
506
|
+
@apply ax-bg-danger-200 ax-text-danger-700 dark:ax-bg-danger-700 dark:ax-text-danger-100;
|
|
546
507
|
}
|
|
547
508
|
|
|
548
509
|
&:active {
|
|
549
|
-
@apply ax-bg-
|
|
510
|
+
@apply ax-bg-danger-300 ax-text-danger-700 dark:ax-bg-danger-500;
|
|
550
511
|
}
|
|
551
512
|
}
|
|
552
|
-
|
|
553
513
|
&.ax-state-selected {
|
|
554
|
-
@apply ax-bg-
|
|
514
|
+
@apply ax-bg-danger-500 ax-text-danger-fore;
|
|
555
515
|
}
|
|
556
516
|
}
|
|
517
|
+
&.ax-danger-outline {
|
|
518
|
+
@apply ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
|
|
557
519
|
|
|
558
|
-
|
|
559
|
-
@apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500 hover:ax-bg-danger-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
|
|
560
|
-
|
|
561
|
-
&:not(.ax-state-disabled) {
|
|
520
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
562
521
|
&:hover {
|
|
563
|
-
@apply ax-
|
|
522
|
+
@apply ax-border-danger-300 ax-text-danger-300 dark:ax-text-danger-200 dark:ax-border-danger-500;
|
|
564
523
|
}
|
|
565
|
-
|
|
566
524
|
&:focus,
|
|
567
525
|
&:focus-within {
|
|
568
|
-
@apply ax-
|
|
526
|
+
@apply ax-border-danger-400 ax-ring-2 ax-text-danger-400 dark:ax-text-danger-200 dark:ax-border-danger-500 ax-ring-danger-100 dark:ax-ring-danger-900;
|
|
569
527
|
}
|
|
570
528
|
|
|
571
529
|
&:active {
|
|
572
|
-
@apply ax-
|
|
530
|
+
@apply ax-border-danger-600 ax-text-danger-800 dark:ax-border-danger-400 dark:ax-text-danger-100;
|
|
573
531
|
}
|
|
574
532
|
}
|
|
575
|
-
|
|
576
533
|
&.ax-state-selected {
|
|
577
|
-
@apply ax-bg-
|
|
534
|
+
@apply ax-bg-danger-800 ax-text-danger-fore ax-border-danger-800;
|
|
578
535
|
}
|
|
579
536
|
}
|
|
537
|
+
&.ax-danger-blank {
|
|
538
|
+
@apply ax-text-danger-500 ax-border-transparent dark:ax-text-danger-300;
|
|
580
539
|
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
&:hover,
|
|
540
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
541
|
+
&:hover {
|
|
542
|
+
@apply ax-text-danger-600 dark:ax-text-danger-100;
|
|
543
|
+
}
|
|
587
544
|
&:focus,
|
|
588
545
|
&:focus-within {
|
|
589
|
-
@apply ax-
|
|
546
|
+
@apply ax-text-danger-700 dark:ax-text-danger-200 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
|
|
590
547
|
}
|
|
591
548
|
|
|
592
549
|
&:active {
|
|
593
|
-
@apply ax-
|
|
550
|
+
@apply ax-text-danger-700 ax-ring-0 dark:ax-text-danger-300;
|
|
594
551
|
}
|
|
595
552
|
}
|
|
596
|
-
|
|
597
553
|
&.ax-state-selected {
|
|
598
|
-
@apply ax-bg-
|
|
554
|
+
@apply ax-bg-danger-800 ax-text-danger-fore;
|
|
599
555
|
}
|
|
600
556
|
}
|
|
557
|
+
&.ax-danger-link {
|
|
558
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-danger-500 ax-border-danger-500 dark:ax-border-danger-400 dark:ax-text-danger-300;
|
|
601
559
|
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
&:not(.ax-state-disabled) {
|
|
607
|
-
|
|
608
|
-
&:hover,
|
|
560
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
561
|
+
&:hover {
|
|
562
|
+
@apply ax-text-danger-700 ax-border-danger-800 dark:ax-border-danger-200 dark:ax-text-danger-200;
|
|
563
|
+
}
|
|
609
564
|
&:focus,
|
|
610
565
|
&:focus-within {
|
|
611
|
-
@apply ax-
|
|
566
|
+
@apply ax-text-danger-900 dark:ax-text-danger-500 ax-border-danger-800 dark:ax-border-danger-500 ax-ring-2 ax-ring-danger-100 dark:ax-ring-danger-900;
|
|
612
567
|
}
|
|
613
568
|
|
|
614
569
|
&:active {
|
|
615
|
-
@apply ax-
|
|
570
|
+
@apply ax-text-danger-500 dark:ax-text-danger-400 ax-border-danger-500 dark:ax-border-danger-400;
|
|
616
571
|
}
|
|
617
572
|
}
|
|
618
|
-
|
|
619
573
|
&.ax-state-selected {
|
|
620
|
-
@apply ax-bg-
|
|
574
|
+
@apply ax-bg-danger-800 ax-text-danger-fore;
|
|
621
575
|
}
|
|
622
576
|
}
|
|
623
577
|
|
|
624
|
-
|
|
625
|
-
|
|
578
|
+
// info
|
|
579
|
+
&.ax-info-default {
|
|
580
|
+
@apply ax-bg-info-500 ax-text-info-fore ax-border-transparent dark:ax-bg-info-800;
|
|
626
581
|
|
|
627
|
-
&:not(.ax-state-disabled) {
|
|
582
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
583
|
+
&:hover {
|
|
584
|
+
@apply ax-bg-info-600;
|
|
585
|
+
}
|
|
628
586
|
|
|
629
|
-
&:hover,
|
|
630
587
|
&:focus,
|
|
631
588
|
&:focus-within {
|
|
632
|
-
@apply ax-
|
|
589
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
|
|
633
590
|
}
|
|
634
591
|
|
|
635
592
|
&:active {
|
|
636
|
-
@apply ax-bg-
|
|
593
|
+
@apply ax-bg-info-800 ax-ring-2 ax-ring-offset-2 ax-ring-info-800;
|
|
637
594
|
}
|
|
638
595
|
}
|
|
639
|
-
|
|
640
596
|
&.ax-state-selected {
|
|
641
|
-
@apply ax-bg-
|
|
597
|
+
@apply ax-bg-info-800 dark:ax-bg-info-500;
|
|
642
598
|
}
|
|
643
599
|
}
|
|
600
|
+
&.ax-info-twotone {
|
|
601
|
+
@apply ax-bg-info-100 ax-text-info-500 ax-border-transparent dark:ax-bg-info-800 dark:ax-text-info-100;
|
|
644
602
|
|
|
645
|
-
|
|
646
|
-
@apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
|
|
647
|
-
|
|
648
|
-
&:not(.ax-state-disabled) {
|
|
649
|
-
|
|
603
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
650
604
|
&:hover,
|
|
651
605
|
&:focus,
|
|
652
606
|
&:focus-within {
|
|
653
|
-
@apply ax-bg-
|
|
607
|
+
@apply ax-bg-info-200 ax-text-info-700 dark:ax-bg-info-700 dark:ax-text-info-100;
|
|
654
608
|
}
|
|
655
609
|
|
|
656
610
|
&:active {
|
|
657
|
-
@apply ax-bg-
|
|
611
|
+
@apply ax-bg-info-300 ax-text-info-700 dark:ax-bg-info-500;
|
|
658
612
|
}
|
|
659
613
|
}
|
|
660
|
-
|
|
661
614
|
&.ax-state-selected {
|
|
662
|
-
@apply ax-bg-
|
|
615
|
+
@apply ax-bg-info-500 ax-text-info-fore;
|
|
663
616
|
}
|
|
664
617
|
}
|
|
618
|
+
&.ax-info-outline {
|
|
619
|
+
@apply ax-text-info-500 ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
|
|
665
620
|
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
&:hover,
|
|
621
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
622
|
+
&:hover {
|
|
623
|
+
@apply ax-border-info-300 ax-text-info-300 dark:ax-text-info-200 dark:ax-border-info-500;
|
|
624
|
+
}
|
|
672
625
|
&:focus,
|
|
673
626
|
&:focus-within {
|
|
674
|
-
@apply ax-
|
|
627
|
+
@apply ax-border-info-400 ax-ring-2 ax-text-info-400 dark:ax-text-info-200 dark:ax-border-info-500 ax-ring-info-100 dark:ax-ring-info-900;
|
|
675
628
|
}
|
|
676
629
|
|
|
677
630
|
&:active {
|
|
678
|
-
@apply ax-
|
|
631
|
+
@apply ax-border-info-600 ax-text-info-800 dark:ax-border-info-400 dark:ax-text-info-100;
|
|
679
632
|
}
|
|
680
633
|
}
|
|
681
|
-
|
|
682
634
|
&.ax-state-selected {
|
|
683
|
-
@apply ax-bg-
|
|
635
|
+
@apply ax-bg-info-800 ax-text-info-fore ax-border-info-800;
|
|
684
636
|
}
|
|
685
637
|
}
|
|
638
|
+
&.ax-info-blank {
|
|
639
|
+
@apply ax-text-info-500 ax-border-transparent dark:ax-text-info-300;
|
|
686
640
|
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
&:hover,
|
|
641
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
642
|
+
&:hover {
|
|
643
|
+
@apply ax-text-info-600 dark:ax-text-info-100;
|
|
644
|
+
}
|
|
693
645
|
&:focus,
|
|
694
646
|
&:focus-within {
|
|
695
|
-
@apply ax-
|
|
647
|
+
@apply ax-text-info-700 dark:ax-text-info-200 ax-ring-2 ax-ring-info-100 dark:ax-ring-info-900;
|
|
696
648
|
}
|
|
697
649
|
|
|
698
650
|
&:active {
|
|
699
|
-
@apply ax-
|
|
651
|
+
@apply ax-text-info-700 ax-ring-0 dark:ax-text-info-300;
|
|
700
652
|
}
|
|
701
653
|
}
|
|
702
|
-
|
|
703
654
|
&.ax-state-selected {
|
|
704
|
-
@apply ax-bg-
|
|
655
|
+
@apply ax-bg-info-800 ax-text-info-fore;
|
|
705
656
|
}
|
|
706
657
|
}
|
|
658
|
+
&.ax-info-link {
|
|
659
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-info-500 ax-border-info-500 dark:ax-border-info-400 dark:ax-text-info-300;
|
|
707
660
|
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
713
|
-
&:hover,
|
|
661
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
662
|
+
&:hover {
|
|
663
|
+
@apply ax-text-info-700 ax-border-info-800 dark:ax-border-info-200 dark:ax-text-info-200;
|
|
664
|
+
}
|
|
714
665
|
&:focus,
|
|
715
666
|
&:focus-within {
|
|
716
|
-
@apply ax-
|
|
667
|
+
@apply ax-text-info-900 dark:ax-text-info-500 ax-border-info-800 dark:ax-border-info-500 ax-ring-2 ax-ring-info-100 dark:ax-ring-info-900;
|
|
717
668
|
}
|
|
718
669
|
|
|
719
670
|
&:active {
|
|
720
|
-
@apply ax-
|
|
671
|
+
@apply ax-text-info-500 dark:ax-text-info-400 ax-border-info-500 dark:ax-border-info-400;
|
|
721
672
|
}
|
|
722
673
|
}
|
|
723
|
-
|
|
724
674
|
&.ax-state-selected {
|
|
725
|
-
@apply ax-bg-info-
|
|
675
|
+
@apply ax-bg-info-800 ax-text-info-fore;
|
|
726
676
|
}
|
|
727
677
|
}
|
|
728
678
|
|
|
729
|
-
|
|
730
|
-
|
|
679
|
+
// dark
|
|
680
|
+
&.ax-dark-default {
|
|
681
|
+
@apply ax-bg-dark-500 ax-text-dark-fore ax-border-transparent dark:ax-bg-dark-600;
|
|
731
682
|
|
|
732
|
-
&:not(.ax-state-disabled) {
|
|
683
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
684
|
+
&:hover {
|
|
685
|
+
@apply ax-bg-dark-500 dark:ax-bg-dark-400;
|
|
686
|
+
}
|
|
733
687
|
|
|
734
|
-
&:hover,
|
|
735
688
|
&:focus,
|
|
736
689
|
&:focus-within {
|
|
737
|
-
@apply ax-
|
|
690
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-400 dark:ax-bg-dark-400;
|
|
738
691
|
}
|
|
739
692
|
|
|
740
693
|
&:active {
|
|
741
|
-
@apply ax-bg-dark-
|
|
694
|
+
@apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-500 dark:ax-ring-dark-500 dark:ax-bg-dark-500;
|
|
742
695
|
}
|
|
743
696
|
}
|
|
744
|
-
|
|
745
697
|
&.ax-state-selected {
|
|
746
|
-
@apply ax-bg-dark-
|
|
698
|
+
@apply ax-bg-dark-300 ax-text-dark-fore;
|
|
747
699
|
}
|
|
748
700
|
}
|
|
701
|
+
&.ax-dark-twotone {
|
|
702
|
+
@apply ax-bg-dark-50 ax-text-dark-500 ax-border-transparent dark:ax-bg-dark-300 dark:ax-text-dark-700;
|
|
749
703
|
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
&:not(.ax-state-disabled) {
|
|
704
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
705
|
+
&:hover {
|
|
706
|
+
}
|
|
754
707
|
|
|
755
|
-
&:hover,
|
|
756
708
|
&:focus,
|
|
757
709
|
&:focus-within {
|
|
758
|
-
@apply ax-bg-
|
|
710
|
+
@apply ax-bg-dark-100 ax-text-dark-700;
|
|
759
711
|
}
|
|
760
712
|
|
|
761
713
|
&:active {
|
|
762
|
-
@apply ax-bg-
|
|
714
|
+
@apply ax-bg-dark-200 ax-text-dark-700;
|
|
763
715
|
}
|
|
764
716
|
}
|
|
765
|
-
|
|
766
717
|
&.ax-state-selected {
|
|
767
|
-
@apply ax-bg-
|
|
718
|
+
@apply ax-bg-dark-300 ax-text-dark-fore;
|
|
768
719
|
}
|
|
769
720
|
}
|
|
721
|
+
&.ax-dark-outline {
|
|
722
|
+
@apply ax-text-dark-500 ax-border-dark-500 dark:ax-text-dark-100 dark:ax-border-dark-100;
|
|
770
723
|
|
|
771
|
-
|
|
772
|
-
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
&:not(.ax-state-disabled) {
|
|
724
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
725
|
+
&:hover {
|
|
726
|
+
@apply ax-border-dark-100 ax-text-dark-100 dark:ax-border-dark-300 dark:ax-text-light-100;
|
|
727
|
+
}
|
|
776
728
|
|
|
777
|
-
&:hover,
|
|
778
729
|
&:focus,
|
|
779
730
|
&:focus-within {
|
|
780
|
-
@apply ax-text-
|
|
731
|
+
@apply ax-border-dark-200 ax-text-dark-200 dark:ax-border-dark-300;
|
|
781
732
|
}
|
|
782
733
|
|
|
783
734
|
&:active {
|
|
784
|
-
@apply ax-
|
|
735
|
+
@apply ax-border-dark-100;
|
|
785
736
|
}
|
|
786
737
|
}
|
|
787
|
-
|
|
788
738
|
&.ax-state-selected {
|
|
789
|
-
@apply ax-bg-
|
|
739
|
+
@apply ax-bg-dark-300 ax-border-dark-300 ax-text-dark-fore;
|
|
790
740
|
}
|
|
791
741
|
}
|
|
742
|
+
&.ax-dark-blank {
|
|
743
|
+
@apply ax-text-dark-500 ax-border-transparent dark:ax-text-dark-50;
|
|
792
744
|
|
|
793
|
-
|
|
794
|
-
@apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-secondary-500 ax-border-secondary-500;
|
|
795
|
-
|
|
796
|
-
&:not(.ax-state-disabled) {
|
|
797
|
-
|
|
745
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
798
746
|
&:hover,
|
|
799
747
|
&:focus,
|
|
800
748
|
&:focus-within {
|
|
801
|
-
@apply ax-text-
|
|
749
|
+
@apply ax-bg-dark-400 ax-text-dark-fore dark:ax-bg-transparent dark:ax-text-dark-100;
|
|
802
750
|
}
|
|
803
751
|
|
|
804
752
|
&:active {
|
|
805
|
-
@apply ax-text-
|
|
753
|
+
@apply ax-bg-dark-600 ax-text-dark-fore dark:ax-text-dark-50;
|
|
806
754
|
}
|
|
807
755
|
}
|
|
808
|
-
|
|
809
756
|
&.ax-state-selected {
|
|
810
|
-
@apply ax-bg-
|
|
757
|
+
@apply ax-bg-dark-300 ax-text-dark-fore;
|
|
811
758
|
}
|
|
812
759
|
}
|
|
760
|
+
&.ax-dark-link {
|
|
761
|
+
@apply ax-rounded-none ax-border-b ax-border-e-0 ax-border-s-0 ax-border-t-0 ax-text-dark-500 ax-border-dark-500 dark:ax-border-dark-50 dark:ax-text-dark-50;
|
|
813
762
|
|
|
814
|
-
|
|
815
|
-
@apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-warning-500 ax-border-warning-500;
|
|
816
|
-
|
|
817
|
-
&:not(.ax-state-disabled) {
|
|
818
|
-
|
|
763
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
819
764
|
&:hover,
|
|
820
765
|
&:focus,
|
|
821
766
|
&:focus-within {
|
|
822
|
-
@apply ax-text-
|
|
767
|
+
@apply ax-text-dark-200 ax-border-dark-200 dark:ax-border-dark-200 dark:ax-text-dark-200;
|
|
823
768
|
}
|
|
824
769
|
|
|
825
770
|
&:active {
|
|
826
|
-
@apply ax-text-
|
|
771
|
+
@apply ax-text-dark-300 ax-border-dark-300 dark:ax-border-dark-100 dark:ax-text-dark-100;
|
|
827
772
|
}
|
|
828
773
|
}
|
|
829
|
-
|
|
830
774
|
&.ax-state-selected {
|
|
831
|
-
@apply ax-bg-
|
|
775
|
+
@apply ax-bg-dark-300 ax-text-dark-fore;
|
|
832
776
|
}
|
|
833
777
|
}
|
|
834
778
|
|
|
835
|
-
|
|
836
|
-
|
|
779
|
+
// light
|
|
780
|
+
&.ax-light-default {
|
|
781
|
+
@apply ax-bg-light-100 ax-text-light-fore dark:ax-bg-light-800 dark:ax-border-light-800 dark:ax-text-light-100;
|
|
837
782
|
|
|
838
|
-
&:not(.ax-state-disabled) {
|
|
783
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
784
|
+
&:hover {
|
|
785
|
+
@apply ax-bg-light-200 dark:ax-bg-light-700;
|
|
786
|
+
}
|
|
839
787
|
|
|
840
|
-
&:hover,
|
|
841
788
|
&:focus,
|
|
842
789
|
&:focus-within {
|
|
843
|
-
@apply ax-
|
|
790
|
+
@apply ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-ring-light-600 dark:ax-bg-light-600;
|
|
844
791
|
}
|
|
845
792
|
|
|
846
793
|
&:active {
|
|
847
|
-
@apply ax-
|
|
794
|
+
@apply ax-bg-light-300 ax-ring-2 ax-ring-offset-2 ax-ring-light-300 dark:ax-bg-light-800 dark:ax-ring-light-800;
|
|
848
795
|
}
|
|
849
796
|
}
|
|
850
|
-
|
|
851
797
|
&.ax-state-selected {
|
|
852
|
-
@apply ax-bg-
|
|
798
|
+
@apply ax-bg-light-300 dark:ax-bg-light-500;
|
|
853
799
|
}
|
|
854
800
|
}
|
|
801
|
+
&.ax-light-twotone {
|
|
802
|
+
@apply ax-bg-light-200 ax-text-light-fore dark:ax-bg-light-600 dark:ax-border-light-600 dark:ax-text-light-100;
|
|
855
803
|
|
|
856
|
-
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
|
|
804
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
805
|
+
&:hover {
|
|
806
|
+
@apply ax-bg-light-100 dark:ax-bg-light-700;
|
|
807
|
+
}
|
|
860
808
|
|
|
861
|
-
&:hover,
|
|
862
809
|
&:focus,
|
|
863
810
|
&:focus-within {
|
|
864
|
-
@apply ax-
|
|
811
|
+
@apply ax-bg-light-300 dark:ax-bg-light-700;
|
|
865
812
|
}
|
|
866
813
|
|
|
867
814
|
&:active {
|
|
868
|
-
@apply ax-
|
|
815
|
+
@apply ax-bg-light-300 ax-ring-light-400 dark:ax-bg-light-600;
|
|
869
816
|
}
|
|
870
817
|
}
|
|
871
|
-
|
|
872
818
|
&.ax-state-selected {
|
|
873
|
-
@apply ax-bg-
|
|
819
|
+
@apply ax-bg-light-300 dark:ax-bg-light-500;
|
|
874
820
|
}
|
|
875
821
|
}
|
|
822
|
+
&.ax-light-outline {
|
|
823
|
+
@apply ax-text-light-fore ax-border ax-border-light-300 dark:ax-border-light-500 dark:ax-text-light-100;
|
|
876
824
|
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
825
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
826
|
+
&:hover {
|
|
827
|
+
@apply ax-border-light-400 ax-text-light-500 dark:ax-border-light-700 dark:ax-text-light-300;
|
|
828
|
+
}
|
|
881
829
|
|
|
882
|
-
&:hover,
|
|
883
830
|
&:focus,
|
|
884
831
|
&:focus-within {
|
|
885
|
-
@apply ax-text-
|
|
832
|
+
@apply ax-border-light-600 ax-text-light-600 dark:ax-border-light-700 dark:ax-text-light-400;
|
|
886
833
|
}
|
|
887
834
|
|
|
888
835
|
&:active {
|
|
889
|
-
@apply ax-text-
|
|
836
|
+
@apply ax-border-light-300 ax-text-light-400 dark:ax-border-light-600 dark:ax-text-light-300;
|
|
890
837
|
}
|
|
891
838
|
}
|
|
892
|
-
|
|
893
839
|
&.ax-state-selected {
|
|
894
|
-
@apply ax-bg-
|
|
840
|
+
@apply ax-bg-light-400 ax-border-light-400 dark:ax-bg-light-500 dark:ax-border-light-500;
|
|
895
841
|
}
|
|
896
842
|
}
|
|
843
|
+
&.ax-light-link {
|
|
844
|
+
@apply ax-text-light-fore ax-border-b ax-rounded-none ax-border-light-300 dark:ax-text-light-100 dark:ax-border-light-500;
|
|
897
845
|
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
846
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
847
|
+
&:hover {
|
|
848
|
+
@apply ax-border-light-500 ax-text-light-500 dark:ax-border-light-300 dark:ax-text-light-300;
|
|
849
|
+
}
|
|
902
850
|
|
|
903
|
-
&:hover,
|
|
904
851
|
&:focus,
|
|
905
852
|
&:focus-within {
|
|
906
|
-
@apply ax-
|
|
853
|
+
@apply ax-border-light-600 ax-text-light-600 dark:ax-border-light-400 dark:ax-text-light-400;
|
|
907
854
|
}
|
|
908
855
|
|
|
909
856
|
&:active {
|
|
910
|
-
@apply ax-
|
|
857
|
+
@apply ax-border-light-400 ax-text-light-400 dark:ax-border-light-300 dark:ax-text-light-300;
|
|
911
858
|
}
|
|
912
859
|
}
|
|
913
|
-
|
|
914
860
|
&.ax-state-selected {
|
|
915
|
-
@apply ax-bg-dark-
|
|
861
|
+
@apply ax-bg-light-300 ax-border-light-400 dark:ax-bg-light-500;
|
|
916
862
|
}
|
|
917
863
|
}
|
|
864
|
+
&.ax-light-blank {
|
|
865
|
+
@apply ax-text-light-fore dark:ax-border-light-600 dark:ax-text-light-100;
|
|
918
866
|
|
|
919
|
-
|
|
920
|
-
@apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-light-400 ax-border-light-400 dark:ax-border-light-50 dark:ax-text-light-50;
|
|
921
|
-
|
|
922
|
-
&:not(.ax-state-disabled) {
|
|
867
|
+
&:not(.ax-state-disabled, .ax-state-selected) {
|
|
923
868
|
&:hover {
|
|
924
|
-
@apply ax-
|
|
869
|
+
@apply ax-bg-light-100 dark:ax-bg-light-800;
|
|
925
870
|
}
|
|
926
871
|
|
|
927
872
|
&:focus,
|
|
928
873
|
&:focus-within {
|
|
929
|
-
@apply ax-
|
|
874
|
+
@apply ax-bg-light-200 dark:ax-bg-light-700;
|
|
930
875
|
}
|
|
931
876
|
|
|
932
877
|
&:active {
|
|
933
|
-
@apply ax-
|
|
878
|
+
@apply ax-bg-light-200 dark:ax-bg-light-600;
|
|
934
879
|
}
|
|
935
880
|
}
|
|
936
|
-
|
|
937
881
|
&.ax-state-selected {
|
|
938
|
-
@apply ax-bg-light-
|
|
882
|
+
@apply ax-bg-light-300 dark:ax-bg-light-500;
|
|
939
883
|
}
|
|
940
884
|
}
|
|
941
885
|
}
|
|
942
886
|
|
|
943
|
-
|
|
887
|
+
ax-button-group {
|
|
944
888
|
@apply ax-flex;
|
|
945
889
|
|
|
946
890
|
ax-button {
|
|
947
891
|
@apply ax-rounded-none;
|
|
948
892
|
|
|
949
893
|
&[class*="-link"] {
|
|
950
|
-
|
|
951
894
|
&:first-child,
|
|
952
895
|
&:last-child {
|
|
953
896
|
@apply ax-rounded-s-none ax-rounded-e-none;
|
|
@@ -967,4 +910,4 @@
|
|
|
967
910
|
}
|
|
968
911
|
}
|
|
969
912
|
}
|
|
970
|
-
}
|
|
913
|
+
}
|