@acorex/styles 5.0.1 → 5.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.
Files changed (37) hide show
  1. package/index.scss +1 -0
  2. package/package.json +10 -10
  3. package/src/base/index.scss +5 -1
  4. package/src/components/_alert.scss +10 -1
  5. package/src/components/_badge.scss +6 -34
  6. package/src/components/_button.scss +569 -579
  7. package/src/components/_calendar.scss +82 -18
  8. package/src/components/_carousel.scss +5 -30
  9. package/src/components/_checkbox.scss +1 -1
  10. package/src/components/_datepicker.scss +2 -4
  11. package/src/components/_dialog.scss +3 -3
  12. package/src/components/_dropdown.scss +9 -46
  13. package/src/components/_editor-container.scss +30 -11
  14. package/src/components/_form.scss +4 -6
  15. package/src/components/_input.scss +5 -4
  16. package/src/components/_label.scss +1 -1
  17. package/src/components/_list.scss +6 -14
  18. package/src/components/_radio.scss +3 -14
  19. package/src/components/_range-slider.scss +14 -0
  20. package/src/components/_skeleton.scss +25 -0
  21. package/src/components/_switch.scss +99 -77
  22. package/src/components/_table.scss +2 -4
  23. package/src/components/_tabs.scss +157 -65
  24. package/src/components/_toast.scss +4 -14
  25. package/src/components/index.scss +3 -1
  26. package/src/icons/Read Me.txt +7 -0
  27. package/src/icons/demo-files/demo.css +152 -0
  28. package/src/icons/demo-files/demo.js +30 -0
  29. package/src/icons/demo.html +416 -0
  30. package/src/icons/fonts/acorex-icon.svg +37 -0
  31. package/src/icons/fonts/acorex-icon.ttf +0 -0
  32. package/src/icons/fonts/acorex-icon.woff +0 -0
  33. package/src/icons/selection.json +1 -0
  34. package/src/icons/style.css +107 -0
  35. package/src/icons/style.scss +164 -0
  36. package/src/icons/variables.scss +31 -0
  37. package/src/variables/_colors.scss +135 -1
package/src/components/_button.scss CHANGED
@@ -1,651 +1,641 @@
1
1
  @import "../variables/mixins";
2
2
  @layer components {
3
3
  ax-button {
4
- @apply ax-contents;
5
- button {
6
- height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
7
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
8
- @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-gray-300 ax-text-gray-600;
9
- ax-prefix {
10
- @apply ax-flex ax-flex-row ax-pe-2;
11
- }
4
+ height: calc(var(--ax-base-size) * var(--ax-base-ratio)) !important;
5
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2) !important;
6
+ @apply ax-relative ax-inline-flex ax-items-center ax-justify-center ax-rounded-md ax-border ax-px-4 ax-text-sm ax-font-medium ax-border-light-300 ax-text-light-600 ax-select-none ax-whitespace-nowrap;
7
+ @include respond(mobile) {
8
+ @apply ax-text-base;
9
+ }
10
+ ax-prefix {
11
+ @apply ax-flex ax-flex-row ax-pe-2;
12
+ }
13
+ ax-suffix {
14
+ @apply ax-flex ax-flex-row ax-ps-2;
15
+ }
16
+ .ax-badge {
17
+ @apply ax-text-xs;
18
+ }
19
+ &:focus {
20
+ @apply ax-outline-none ax-z-10;
21
+ }
22
+ &.ax-rounded {
23
+ @apply ax-rounded-full;
24
+ }
25
+ &.ax-button-icon {
26
+ ax-prefix,
12
27
  ax-suffix {
13
- @apply ax-flex ax-flex-row ax-ps-2;
28
+ @apply ax-p-0;
14
29
  }
15
- &:focus {
16
- @apply ax-outline-none ax-z-10;
30
+ @apply ax-px-2;
31
+ [class*=" ax-ic-"],
32
+ [class^=ax-ic-] {
33
+ @apply ax-text-2xl;
17
34
  }
18
- &.ax-rounded {
19
- @apply ax-rounded-full;
35
+ }
36
+ &.ax-sm {
37
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - var(--ax-base-size)) !important;
38
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - var(--ax-base-size)) !important;
39
+ @apply ax-text-sm;
40
+ .ax-ic {
41
+ @apply ax-text-sm;
20
42
  }
43
+ }
44
+ &.ax-lg {
45
+ height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + var(--ax-base-size)) !important;
46
+ line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + var(--ax-base-size)) !important;
47
+ @apply ax-text-lg;
21
48
  &.ax-button-icon {
22
- ax-prefix,
23
- ax-suffix {
24
- @apply ax-p-0;
25
- }
26
- @apply ax-px-2;
27
- [class*=" ax-ic-"],
28
- [class^=ax-ic-] {
29
- @apply ax-text-2xl
30
- }
49
+ @apply ax-px-3;
31
50
  }
32
- ax-loading-spinner {
33
- @apply ax-flex ax-pe-1;
34
- svg {
35
- width: calc(var(--ax-base-size) * 3);
36
- height: calc(var(--ax-base-size) * 3);
37
- @apply ax-fill-current;
38
- }
51
+ .ax-ic {
52
+ @apply ax-text-3xl;
53
+ }
54
+ }
55
+ ax-loading-spinner {
56
+ @apply ax-flex ax-pe-1;
57
+ svg {
58
+ width: calc(var(--ax-base-size) * 3);
59
+ height: calc(var(--ax-base-size) * 3);
60
+ @apply ax-fill-current;
61
+ }
62
+ }
63
+ // states
64
+ &.ax-state-selected {
65
+ @apply ax-z-10;
66
+ }
67
+ &.ax-state-loading {
68
+ @apply ax-cursor-not-allowed;
69
+ }
70
+ &.ax-state-disabled {
71
+ @apply ax-cursor-not-allowed ax-opacity-60;
72
+ }
73
+ // normal
74
+ &.ax-primary {
75
+ @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
76
+ &:hover {
77
+ @apply ax-bg-primary-600;
78
+ }
79
+ &:focus {
80
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
81
+ }
82
+ &:active {
83
+ @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
39
84
  }
40
85
  &.ax-state-selected {
41
- @apply ax-z-10;
86
+ @apply ax-bg-primary-700;
42
87
  }
43
- &.ax-sm {
44
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) - 10px) !important;
45
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 - 10px) !important;
46
- @apply ax-text-sm;
47
- .ax-ic {
48
- @apply ax-text-sm;
49
- }
88
+ }
89
+ &.ax-secondary {
90
+ @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
91
+ &:hover {
92
+ @apply ax-bg-secondary-600;
50
93
  }
51
- &.ax-lg {
52
- height: calc((var(--ax-base-size) * var(--ax-base-ratio)) + 10px) !important;
53
- line-height: calc((var(--ax-base-size) * var(--ax-base-ratio)) / 2 + 10px) !important;
54
- @apply ax-text-lg;
55
- &.ax-button-icon {
56
- @apply ax-px-3;
57
- }
58
- .ax-ic {
59
- @apply ax-text-3xl;
60
- }
94
+ &:focus {
95
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
61
96
  }
62
- @include respond(mobile) {
63
- @apply ax-text-base;
97
+ &:active {
98
+ @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
64
99
  }
65
- // states
66
- &.ax-state-loading {
67
- @apply ax-cursor-not-allowed;
100
+ &.ax-state-selected {
101
+ @apply ax-bg-secondary-700;
68
102
  }
69
- &.ax-state-disabled {
70
- @apply ax-cursor-not-allowed ax-opacity-60;
103
+ }
104
+ &.ax-warning {
105
+ @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
106
+ &:hover {
107
+ @apply ax-bg-warning-400;
71
108
  }
72
- // normal
73
- &.ax-primary {
74
- @apply ax-shadow-sm ax-bg-primary-500 ax-text-primary-fore ax-border-transparent;
75
- &:hover {
76
- @apply ax-bg-primary-600;
77
- }
78
- &:focus {
79
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-primary-500;
80
- }
81
- &:active {
82
- @apply ax-bg-primary-700 ax-ring-2 ax-ring-offset-2 ax-ring-primary-700;
83
- }
84
- &.ax-state-selected {
85
- @apply ax-bg-primary-700;
86
- }
109
+ &:focus {
110
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
87
111
  }
88
- &.ax-secondary {
89
- @apply ax-shadow-sm ax-bg-secondary-500 ax-text-secondary-fore ax-border-transparent;
90
- &:hover {
91
- @apply ax-bg-secondary-600;
92
- }
93
- &:focus {
94
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-secondary-500;
95
- }
96
- &:active {
97
- @apply ax-bg-secondary-700 ax-ring-2 ax-ring-offset-2 ax-ring-secondary-700;
98
- }
99
- &.ax-state-selected {
100
- @apply ax-bg-secondary-700;
101
- }
112
+ &:active {
113
+ @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
102
114
  }
103
- &.ax-warning {
104
- @apply ax-shadow-sm ax-bg-warning-500 ax-text-warning-fore ax-border-transparent;
105
- &:hover {
106
- @apply ax-bg-warning-400;
107
- }
108
- &:focus {
109
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-warning-500;
110
- }
111
- &:active {
112
- @apply ax-bg-warning-600 ax-text-warning-100 ax-ring-2 ax-ring-offset-2 ax-ring-warning-700;
113
- }
114
- &.ax-state-selected {
115
- @apply ax-bg-warning-700 ax-text-warning-50;
116
- }
115
+ &.ax-state-selected {
116
+ @apply ax-bg-warning-700 ax-text-warning-50;
117
117
  }
118
- &.ax-danger {
119
- @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
120
- &:hover {
121
- @apply ax-bg-danger-600;
122
- }
123
- &:focus {
124
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
125
- }
126
- &:active {
127
- @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
128
- }
129
- &.ax-state-selected {
130
- @apply ax-bg-danger-700;
131
- }
118
+ }
119
+ &.ax-danger {
120
+ @apply ax-shadow-sm ax-bg-danger-500 ax-text-danger-fore ax-border-transparent;
121
+ &:hover {
122
+ @apply ax-bg-danger-600;
132
123
  }
133
- &.ax-success {
134
- @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
135
- &:hover {
136
- @apply ax-bg-success-600;
137
- }
138
- &:focus {
139
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
140
- }
141
- &:active {
142
- @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
143
- }
144
- &.ax-state-selected {
145
- @apply ax-bg-success-700;
146
- }
124
+ &:focus {
125
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-danger-500;
147
126
  }
148
- &.ax-info {
149
- @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
150
- &:hover {
151
- @apply ax-bg-info-600;
152
- }
153
- &:focus {
154
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
155
- }
156
- &:active {
157
- @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
158
- }
159
- &.ax-state-selected {
160
- @apply ax-bg-info-700;
161
- }
127
+ &:active {
128
+ @apply ax-bg-danger-700 ax-ring-2 ax-ring-offset-2 ax-ring-danger-700;
162
129
  }
163
- &.ax-dark {
164
- @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
165
- &:hover {
166
- @apply ax-bg-dark-400;
167
- }
168
- &:focus {
169
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
170
- }
171
- &:active {
172
- @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
173
- }
174
- &.ax-state-selected {
175
- @apply ax-bg-dark-300;
176
- }
130
+ &.ax-state-selected {
131
+ @apply ax-bg-danger-700;
177
132
  }
178
- &.ax-light {
179
- @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-default;
180
- &:hover {
181
- @apply ax-bg-light-100;
182
- }
183
- &:focus {
184
- @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
185
- }
186
- &:active {
187
- @apply ax-bg-light-300 ax-ring-2 ax-ring-offset-2 ax-ring-light-300;
188
- }
189
- &.ax-state-selected {
190
- @apply ax-bg-light-600 ax-text-white;
191
- }
133
+ }
134
+ &.ax-success {
135
+ @apply ax-shadow-sm ax-bg-success-500 ax-text-success-fore ax-border-transparent;
136
+ &:hover {
137
+ @apply ax-bg-success-600;
192
138
  }
193
- // twotone
194
- &.ax-primary-twotone {
195
- @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent;
196
- &:hover,
197
- &:focus {
198
- @apply ax-bg-primary-100 ax-text-primary-700;
199
- }
200
- &:active {
201
- @apply ax-bg-primary-200 ax-text-primary-700;
202
- }
203
- &.ax-state-selected {
204
- @apply ax-bg-primary-200 ax-text-primary-700;
205
- }
139
+ &:focus {
140
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-success-500;
206
141
  }
207
- &.ax-secondary-twotone {
208
- @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent;
209
- &:hover,
210
- &:focus {
211
- @apply ax-bg-secondary-100 ax-text-secondary-700;
212
- }
213
- &:active {
214
- @apply ax-bg-secondary-200 ax-text-secondary-700;
215
- }
216
- &.ax-state-selected {
217
- @apply ax-bg-secondary-200 ax-text-secondary-700;
218
- }
142
+ &:active {
143
+ @apply ax-bg-success-700 ax-ring-2 ax-ring-offset-2 ax-ring-success-700;
219
144
  }
220
- &.ax-warning-twotone {
221
- @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent;
222
- &:hover,
223
- &:focus {
224
- @apply ax-bg-warning-100 ax-text-warning-700;
225
- }
226
- &:active {
227
- @apply ax-bg-warning-200 ax-text-warning-700;
228
- }
229
- &.ax-state-selected {
230
- @apply ax-bg-warning-200 ax-text-warning-700;
231
- }
145
+ &.ax-state-selected {
146
+ @apply ax-bg-success-700;
232
147
  }
233
- &.ax-danger-twotone {
234
- @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent;
235
- &:hover,
236
- &:focus {
237
- @apply ax-bg-danger-100 ax-text-danger-700;
238
- }
239
- &:active {
240
- @apply ax-bg-danger-200 ax-text-danger-700;
241
- }
242
- &.ax-state-selected {
243
- @apply ax-bg-danger-200 ax-text-danger-700;
244
- }
148
+ }
149
+ &.ax-info {
150
+ @apply ax-shadow-sm ax-bg-info-500 ax-text-info-fore ax-border-transparent;
151
+ &:hover {
152
+ @apply ax-bg-info-600;
245
153
  }
246
- &.ax-success-twotone {
247
- @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent;
248
- &:hover,
249
- &:focus {
250
- @apply ax-bg-success-100 ax-text-success-700;
251
- }
252
- &:active {
253
- @apply ax-bg-success-200 ax-text-success-700;
254
- }
255
- &.ax-state-selected {
256
- @apply ax-bg-success-200 ax-text-success-700;
257
- }
154
+ &:focus {
155
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-info-500;
258
156
  }
259
- &.ax-info-twotone {
260
- @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent;
261
- &:hover,
262
- &:focus {
263
- @apply ax-bg-info-100 ax-text-primary-700;
264
- }
265
- &:active {
266
- @apply ax-bg-info-200 ax-text-primary-700;
267
- }
268
- &.ax-state-selected {
269
- @apply ax-bg-info-200 ax-text-primary-700;
270
- }
157
+ &:active {
158
+ @apply ax-bg-info-700 ax-ring-2 ax-ring-offset-2 ax-ring-info-700;
271
159
  }
272
- &.ax-dark-twotone {
273
- @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
274
- &:hover {}
275
- &:focus {
276
- @apply ax-bg-dark-100 ax-text-dark-700;
277
- }
278
- &:active {
279
- @apply ax-bg-dark-200 ax-text-dark-700;
280
- }
281
- &.ax-state-selected {
282
- @apply ax-bg-dark-300 ax-text-dark-fore;
283
- }
160
+ &.ax-state-selected {
161
+ @apply ax-bg-info-700;
284
162
  }
285
- &.ax-light-twotone {
286
- @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
287
- &:hover {
288
- @apply ax-bg-light-300;
289
- }
290
- &:focus {
291
- @apply ax-bg-light-200;
292
- }
293
- &:active {
294
- @apply ax-bg-light-300;
295
- }
296
- &.ax-state-selected {
297
- @apply ax-bg-light-400;
298
- }
163
+ }
164
+ &.ax-dark {
165
+ @apply ax-shadow-sm ax-bg-dark-500 ax-text-dark-fore ax-border-transparent;
166
+ &:hover {
167
+ @apply ax-bg-dark-400;
299
168
  }
300
- // outline
301
- &.ax-primary-outline {
302
- @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
303
- &:hover,
304
- &:focus {
305
- @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
306
- }
307
- &:active {
308
- @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
309
- }
310
- &.ax-state-selected {
311
- @apply ax-bg-primary ax-text-primary-fore;
312
- }
169
+ &:focus {
170
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-dark-500;
313
171
  }
314
- &.ax-secondary-outline {
315
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
316
- &:hover,
317
- &:focus {
318
- @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
319
- }
320
- &:active {
321
- @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
322
- }
323
- &.ax-state-selected {
324
- @apply ax-bg-secondary ax-text-secondary-fore;
325
- }
172
+ &:active {
173
+ @apply ax-bg-dark-700 ax-ring-2 ax-ring-offset-2 ax-ring-dark-700;
326
174
  }
327
- &.ax-warning-outline {
328
- @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
329
- &:hover,
330
- &:focus {
331
- @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
332
- }
333
- &:active {
334
- @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
335
- }
336
- &.ax-state-selected {
337
- @apply ax-bg-warning ax-text-warning-fore;
338
- }
175
+ &.ax-state-selected {
176
+ @apply ax-bg-dark-300;
339
177
  }
340
- &.ax-danger-outline {
341
- @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
342
- &:hover,
343
- &:focus {
344
- @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
345
- }
346
- &:active {
347
- @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
348
- }
349
- &.ax-state-selected {
350
- @apply ax-bg-danger ax-text-danger-fore;
351
- }
178
+ }
179
+ &.ax-light {
180
+ @apply ax-shadow-sm ax-bg-light-50 ax-text-light-fore ax-border ax-border-default;
181
+ &:hover {
182
+ @apply ax-bg-light-100;
352
183
  }
353
- &.ax-success-outline {
354
- @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
355
- &:hover,
356
- &:focus {
357
- @apply ax-bg-success ax-border-success ax-text-success-fore;
358
- }
359
- &:active {
360
- @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
361
- }
362
- &.ax-state-selected {
363
- @apply ax-bg-success ax-text-success-fore;
364
- }
184
+ &:focus {
185
+ @apply ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
365
186
  }
366
- &.ax-info-outline {
367
- @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
368
- &:hover,
369
- &:focus {
370
- @apply ax-bg-info ax-border-info ax-text-info-fore;
371
- }
372
- &:active {
373
- @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
374
- }
375
- &.ax-state-selected {
376
- @apply ax-bg-info ax-text-info-fore;
377
- }
187
+ &:active {
188
+ @apply ax-bg-light-200 ax-ring-2 ax-ring-offset-2 ax-ring-light-200;
378
189
  }
379
- &.ax-dark-outline {
380
- @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500;
381
- &:hover {
382
- @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
383
- }
384
- &:focus {
385
- @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
386
- }
387
- &:active {
388
- @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
389
- }
390
- &.ax-state-selected {
391
- @apply ax-bg-dark ax-text-dark-fore;
392
- }
190
+ &.ax-state-selected {
191
+ @apply ax-bg-light-600 ax-text-light-50;
393
192
  }
394
- &.ax-light-outline {
395
- @apply ax-bg-transparent ax-text-light-fore ax-border-light-200;
396
- &:hover,
397
- &:focus {
398
- @apply ax-bg-light-200 ax-border-light-200 ax-text-light-fore;
399
- }
400
- &:active {
401
- @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
402
- }
403
- &.ax-state-selected {
404
- @apply ax-bg-light-300 ax-text-light-fore;
405
- }
193
+ }
194
+ // twotone
195
+ &.ax-primary-twotone {
196
+ @apply ax-bg-primary-50 ax-text-primary-500 ax-border-transparent;
197
+ &:hover,
198
+ &:focus {
199
+ @apply ax-bg-primary-100 ax-text-primary-700;
406
200
  }
407
- // blank
408
- &.ax-primary-blank {
409
- @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
410
- &:hover,
411
- &:focus {
412
- @apply ax-bg-primary-50 ax-text-primary-600;
413
- }
414
- &:active {
415
- @apply ax-bg-primary-100 ax-text-primary-700;
416
- }
417
- &.ax-state-selected {
418
- @apply ax-bg-primary-200;
419
- }
201
+ &:active {
202
+ @apply ax-bg-primary-200 ax-text-primary-700;
420
203
  }
421
- &.ax-secondary-blank {
422
- @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
423
- &:hover,
424
- &:focus {
425
- @apply ax-bg-secondary-50 ax-text-secondary-600;
426
- }
427
- &:active {
428
- @apply ax-bg-secondary-100 ax-text-secondary-700;
429
- }
430
- &.ax-state-selected {
431
- @apply ax-bg-secondary-200;
432
- }
204
+ &.ax-state-selected {
205
+ @apply ax-bg-primary-200 ax-text-primary-700;
433
206
  }
434
- &.ax-warning-blank {
435
- @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
436
- &:hover,
437
- &:focus {
438
- @apply ax-bg-warning-50 ax-text-warning-600;
439
- }
440
- &:active {
441
- @apply ax-bg-warning-100 ax-text-warning-700;
442
- }
443
- &.ax-state-selected {
444
- @apply ax-bg-warning-200;
445
- }
207
+ }
208
+ &.ax-secondary-twotone {
209
+ @apply ax-bg-secondary-50 ax-text-secondary-500 ax-border-transparent;
210
+ &:hover,
211
+ &:focus {
212
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
446
213
  }
447
- &.ax-danger-blank {
448
- @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
449
- &:hover,
450
- &:focus {
451
- @apply ax-bg-danger-50 ax-text-danger-600;
452
- }
453
- &:active {
454
- @apply ax-bg-danger-100 ax-text-danger-700;
455
- }
456
- &.ax-state-selected {
457
- @apply ax-bg-danger-200;
458
- }
214
+ &:active {
215
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
459
216
  }
460
- &.ax-success-blank {
461
- @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
462
- &:hover,
463
- &:focus {
464
- @apply ax-bg-success-50 ax-text-success-600;
465
- }
466
- &:active {
467
- @apply ax-bg-success-100 ax-text-success-700;
468
- }
469
- &.ax-state-selected {
470
- @apply ax-bg-success-200;
471
- }
217
+ &.ax-state-selected {
218
+ @apply ax-bg-secondary-200 ax-text-secondary-700;
472
219
  }
473
- &.ax-info-blank {
474
- @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
475
- &:hover,
476
- &:focus {
477
- @apply ax-bg-info-50 ax-text-info-600;
478
- }
479
- &:active {
480
- @apply ax-bg-info-100 ax-text-info-700;
481
- }
482
- &.ax-state-selected {
483
- @apply ax-bg-info-200;
484
- }
220
+ }
221
+ &.ax-warning-twotone {
222
+ @apply ax-bg-warning-50 ax-text-warning-500 ax-border-transparent;
223
+ &:hover,
224
+ &:focus {
225
+ @apply ax-bg-warning-100 ax-text-warning-700;
485
226
  }
486
- &.ax-dark-blank {
487
- @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
488
- &:hover,
489
- &:focus {
490
- @apply ax-bg-dark-400 ax-text-dark-fore;
491
- }
492
- &:active {
493
- @apply ax-bg-dark-600 ax-text-dark-fore;
494
- }
495
- &.ax-state-selected {
496
- @apply ax-bg-dark-200;
497
- }
227
+ &:active {
228
+ @apply ax-bg-warning-200 ax-text-warning-700;
498
229
  }
499
- &.ax-light-blank {
500
- @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
501
- &:hover,
502
- &:focus {
503
- @apply ax-bg-light-100 ax-text-light-500;
504
- }
505
- &:active {
506
- @apply ax-bg-light-200 ax-text-light-700;
507
- }
508
- &.ax-state-selected {
509
- @apply ax-bg-light-600;
510
- }
230
+ &.ax-state-selected {
231
+ @apply ax-bg-warning-200 ax-text-warning-700;
511
232
  }
512
- // link
513
- &.ax-primary-link {
514
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary;
515
- &:hover,
516
- &:focus {
517
- @apply ax-text-primary-600 ax-border-primary-600;
518
- }
519
- &:active {
520
- @apply ax-text-primary-500 ax-border-primary-500;
521
- }
522
- &.ax-state-selected {
523
- @apply ax-bg-primary-200;
524
- }
233
+ }
234
+ &.ax-danger-twotone {
235
+ @apply ax-bg-danger-50 ax-text-danger-500 ax-border-transparent;
236
+ &:hover,
237
+ &:focus {
238
+ @apply ax-bg-danger-100 ax-text-danger-700;
525
239
  }
526
- &.ax-secondary-link {
527
- @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;
528
- &:hover,
529
- &:focus {
530
- @apply ax-text-secondary-600 ax-border-secondary-600;
531
- }
532
- &:active {
533
- @apply ax-text-secondary-500 ax-border-secondary-500;
534
- }
535
- &.ax-state-selected {
536
- @apply ax-bg-secondary-200;
537
- }
240
+ &:active {
241
+ @apply ax-bg-danger-200 ax-text-danger-700;
538
242
  }
539
- &.ax-warning-link {
540
- @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;
541
- &:hover,
542
- &:focus {
543
- @apply ax-text-warning-600 ax-border-warning-600;
544
- }
545
- &:active {
546
- @apply ax-text-warning-500 ax-border-warning-500;
547
- }
548
- &.ax-state-selected {
549
- @apply ax-bg-warning-200;
550
- }
243
+ &.ax-state-selected {
244
+ @apply ax-bg-danger-200 ax-text-danger-700;
551
245
  }
552
- &.ax-danger-link {
553
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger;
554
- &:hover,
555
- &:focus {
556
- @apply ax-text-danger-600 ax-border-danger-600;
557
- }
558
- &:active {
559
- @apply ax-text-danger-500 ax-border-danger-500;
560
- }
561
- &.ax-state-selected {
562
- @apply ax-bg-danger-200;
563
- }
246
+ }
247
+ &.ax-success-twotone {
248
+ @apply ax-bg-success-50 ax-text-success-500 ax-border-transparent;
249
+ &:hover,
250
+ &:focus {
251
+ @apply ax-bg-success-100 ax-text-success-700;
564
252
  }
565
- &.ax-success-link {
566
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success;
567
- &:hover,
568
- &:focus {
569
- @apply ax-text-success-600 ax-border-success-600;
570
- }
571
- &:active {
572
- @apply ax-text-success-500 ax-border-success-500;
573
- }
574
- &.ax-state-selected {
575
- @apply ax-bg-success-200;
576
- }
253
+ &:active {
254
+ @apply ax-bg-success-200 ax-text-success-700;
577
255
  }
578
- &.ax-info-link {
579
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info;
580
- &:hover,
581
- &:focus {
582
- @apply ax-text-info-600 ax-border-info-600;
583
- }
584
- &:active {
585
- @apply ax-text-info-500 ax-border-info-500;
586
- }
587
- &.ax-state-selected {
588
- @apply ax-bg-info-200;
589
- }
256
+ &.ax-state-selected {
257
+ @apply ax-bg-success-200 ax-text-success-700;
590
258
  }
591
- &.ax-dark-link {
592
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark;
593
- &:hover,
594
- &:focus {
595
- @apply ax-text-dark-600 ax-border-dark-600;
596
- }
597
- &:active {
598
- @apply ax-text-dark-300 ax-border-dark-300;
599
- }
600
- &.ax-state-selected {
601
- @apply ax-bg-dark-200;
602
- }
259
+ }
260
+ &.ax-info-twotone {
261
+ @apply ax-bg-info-50 ax-text-info-500 ax-border-transparent;
262
+ &:hover,
263
+ &:focus {
264
+ @apply ax-bg-info-100 ax-text-primary-700;
603
265
  }
604
- &.ax-light-link {
605
- @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-light-200 ax-border-light-200;
606
- &:hover {
607
- @apply ax-text-light-300 ax-border-light-300;
608
- }
609
- &:focus {
610
- @apply ax-text-light-400 ax-border-light-400;
611
- }
612
- &:active {
613
- @apply ax-text-light-300 ax-border-light-300;
614
- }
615
- &.ax-state-selected {
616
- @apply ax-bg-light-600;
617
- }
266
+ &:active {
267
+ @apply ax-bg-info-200 ax-text-primary-700;
268
+ }
269
+ &.ax-state-selected {
270
+ @apply ax-bg-info-200 ax-text-primary-700;
271
+ }
272
+ }
273
+ &.ax-dark-twotone {
274
+ @apply ax-bg-dark-100 ax-text-dark ax-border-transparent;
275
+ &:hover {}
276
+ &:focus {
277
+ @apply ax-bg-dark-100 ax-text-dark-700;
278
+ }
279
+ &:active {
280
+ @apply ax-bg-dark-200 ax-text-dark-700;
281
+ }
282
+ &.ax-state-selected {
283
+ @apply ax-bg-dark-300 ax-text-dark-fore;
284
+ }
285
+ }
286
+ &.ax-light-twotone {
287
+ @apply ax-bg-light-200 ax-text-light-fore ax-border-transparent;
288
+ &:hover {
289
+ @apply ax-bg-light-300;
290
+ }
291
+ &:focus {
292
+ @apply ax-bg-light-200;
293
+ }
294
+ &:active {
295
+ @apply ax-bg-light-300;
296
+ }
297
+ &.ax-state-selected {
298
+ @apply ax-bg-light-400;
299
+ }
300
+ }
301
+ // outline
302
+ &.ax-primary-outline {
303
+ @apply ax-bg-transparent ax-text-primary-500 ax-border-primary-500;
304
+ &:hover,
305
+ &:focus {
306
+ @apply ax-bg-primary ax-border-primary ax-text-primary-fore;
307
+ }
308
+ &:active {
309
+ @apply ax-bg-primary-700 ax-border-primary-700 ax-text-primary-fore;
310
+ }
311
+ &.ax-state-selected {
312
+ @apply ax-bg-primary ax-text-primary-fore;
313
+ }
314
+ }
315
+ &.ax-secondary-outline {
316
+ @apply ax-bg-transparent ax-text-secondary-500 ax-border-secondary-500;
317
+ &:hover,
318
+ &:focus {
319
+ @apply ax-bg-secondary ax-border-secondary ax-text-secondary-fore;
320
+ }
321
+ &:active {
322
+ @apply ax-bg-secondary-700 ax-border-secondary-700 ax-text-primary-fore;
323
+ }
324
+ &.ax-state-selected {
325
+ @apply ax-bg-secondary ax-text-secondary-fore;
326
+ }
327
+ }
328
+ &.ax-warning-outline {
329
+ @apply ax-bg-transparent ax-text-warning-500 ax-border-warning-500;
330
+ &:hover,
331
+ &:focus {
332
+ @apply ax-bg-warning ax-border-warning ax-text-warning-fore;
333
+ }
334
+ &:active {
335
+ @apply ax-bg-warning-700 ax-border-warning-700 ax-text-primary-fore;
336
+ }
337
+ &.ax-state-selected {
338
+ @apply ax-bg-warning ax-text-warning-fore;
339
+ }
340
+ }
341
+ &.ax-danger-outline {
342
+ @apply ax-bg-transparent ax-text-danger-500 ax-border-danger-500;
343
+ &:hover,
344
+ &:focus {
345
+ @apply ax-bg-danger ax-border-danger ax-text-danger-fore;
346
+ }
347
+ &:active {
348
+ @apply ax-bg-danger-700 ax-border-danger-700 ax-text-primary-fore;
349
+ }
350
+ &.ax-state-selected {
351
+ @apply ax-bg-danger ax-text-danger-fore;
352
+ }
353
+ }
354
+ &.ax-success-outline {
355
+ @apply ax-bg-transparent ax-text-success-500 ax-border-success-500;
356
+ &:hover,
357
+ &:focus {
358
+ @apply ax-bg-success ax-border-success ax-text-success-fore;
359
+ }
360
+ &:active {
361
+ @apply ax-bg-success-700 ax-border-success-700 ax-text-success-fore;
362
+ }
363
+ &.ax-state-selected {
364
+ @apply ax-bg-success ax-text-success-fore;
365
+ }
366
+ }
367
+ &.ax-info-outline {
368
+ @apply ax-bg-transparent ax-text-info-500 ax-border-info-500;
369
+ &:hover,
370
+ &:focus {
371
+ @apply ax-bg-info ax-border-info ax-text-info-fore;
372
+ }
373
+ &:active {
374
+ @apply ax-bg-info-700 ax-border-info-700 ax-text-info-fore;
375
+ }
376
+ &.ax-state-selected {
377
+ @apply ax-bg-info ax-text-info-fore;
378
+ }
379
+ }
380
+ &.ax-dark-outline {
381
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-dark-500;
382
+ &:hover {
383
+ @apply ax-bg-dark-50 ax-border-dark ax-text-dark;
384
+ }
385
+ &:focus {
386
+ @apply ax-bg-dark-500 ax-border-dark-500 ax-text-dark-fore;
387
+ }
388
+ &:active {
389
+ @apply ax-bg-dark-700 ax-border-dark-700 ax-text-dark-fore;
390
+ }
391
+ &.ax-state-selected {
392
+ @apply ax-bg-dark ax-text-dark-fore;
393
+ }
394
+ }
395
+ &.ax-light-outline {
396
+ @apply ax-bg-transparent ax-text-light-fore ax-border-light-200;
397
+ &:hover,
398
+ &:focus {
399
+ @apply ax-bg-light-200 ax-border-light-200 ax-text-light-fore;
400
+ }
401
+ &:active {
402
+ @apply ax-bg-light-300 ax-border-light-300 ax-text-light-fore;
403
+ }
404
+ &.ax-state-selected {
405
+ @apply ax-bg-light-300 ax-text-light-fore;
406
+ }
407
+ }
408
+ // blank
409
+ &.ax-primary-blank {
410
+ @apply ax-bg-transparent ax-text-primary-500 ax-border-transparent;
411
+ &:hover,
412
+ &:focus {
413
+ @apply ax-bg-primary-50 ax-text-primary-600;
414
+ }
415
+ &:active {
416
+ @apply ax-bg-primary-100 ax-text-primary-700;
417
+ }
418
+ &.ax-state-selected {
419
+ @apply ax-bg-primary-200;
420
+ }
421
+ }
422
+ &.ax-secondary-blank {
423
+ @apply ax-bg-transparent ax-text-secondary-500 ax-border-transparent;
424
+ &:hover,
425
+ &:focus {
426
+ @apply ax-bg-secondary-50 ax-text-secondary-600;
427
+ }
428
+ &:active {
429
+ @apply ax-bg-secondary-100 ax-text-secondary-700;
430
+ }
431
+ &.ax-state-selected {
432
+ @apply ax-bg-secondary-200;
433
+ }
434
+ }
435
+ &.ax-warning-blank {
436
+ @apply ax-bg-transparent ax-text-warning-500 ax-border-transparent;
437
+ &:hover,
438
+ &:focus {
439
+ @apply ax-bg-warning-50 ax-text-warning-600;
440
+ }
441
+ &:active {
442
+ @apply ax-bg-warning-100 ax-text-warning-700;
443
+ }
444
+ &.ax-state-selected {
445
+ @apply ax-bg-warning-200;
446
+ }
447
+ }
448
+ &.ax-danger-blank {
449
+ @apply ax-bg-transparent ax-text-danger-500 ax-border-transparent;
450
+ &:hover,
451
+ &:focus {
452
+ @apply ax-bg-danger-50 ax-text-danger-600;
453
+ }
454
+ &:active {
455
+ @apply ax-bg-danger-100 ax-text-danger-700;
456
+ }
457
+ &.ax-state-selected {
458
+ @apply ax-bg-danger-200;
459
+ }
460
+ }
461
+ &.ax-success-blank {
462
+ @apply ax-bg-transparent ax-text-success-500 ax-border-transparent;
463
+ &:hover,
464
+ &:focus {
465
+ @apply ax-bg-success-50 ax-text-success-600;
466
+ }
467
+ &:active {
468
+ @apply ax-bg-success-100 ax-text-success-700;
469
+ }
470
+ &.ax-state-selected {
471
+ @apply ax-bg-success-200;
472
+ }
473
+ }
474
+ &.ax-info-blank {
475
+ @apply ax-bg-transparent ax-text-info-500 ax-border-transparent;
476
+ &:hover,
477
+ &:focus {
478
+ @apply ax-bg-info-50 ax-text-info-600;
479
+ }
480
+ &:active {
481
+ @apply ax-bg-info-100 ax-text-info-700;
482
+ }
483
+ &.ax-state-selected {
484
+ @apply ax-bg-info-200;
485
+ }
486
+ }
487
+ &.ax-dark-blank {
488
+ @apply ax-bg-transparent ax-text-dark-500 ax-border-transparent;
489
+ &:hover,
490
+ &:focus {
491
+ @apply ax-bg-dark-400 ax-text-dark-fore;
492
+ }
493
+ &:active {
494
+ @apply ax-bg-dark-600 ax-text-dark-fore;
495
+ }
496
+ &.ax-state-selected {
497
+ @apply ax-bg-dark-200;
498
+ }
499
+ }
500
+ &.ax-light-blank {
501
+ @apply ax-bg-transparent ax-text-light-fore ax-border-transparent;
502
+ &:hover,
503
+ &:focus {
504
+ @apply ax-bg-light-100 ax-text-light-500;
505
+ }
506
+ &:active {
507
+ @apply ax-bg-light-200 ax-text-light-700;
508
+ }
509
+ &.ax-state-selected {
510
+ @apply ax-bg-light-600;
511
+ }
512
+ }
513
+ // link
514
+ &.ax-primary-link {
515
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-primary-500 ax-border-primary;
516
+ &:hover,
517
+ &:focus {
518
+ @apply ax-text-primary-600 ax-border-primary-600;
519
+ }
520
+ &:active {
521
+ @apply ax-text-primary-500 ax-border-primary-500;
522
+ }
523
+ &.ax-state-selected {
524
+ @apply ax-bg-primary-200;
525
+ }
526
+ }
527
+ &.ax-secondary-link {
528
+ @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;
529
+ &:hover,
530
+ &:focus {
531
+ @apply ax-text-secondary-600 ax-border-secondary-600;
532
+ }
533
+ &:active {
534
+ @apply ax-text-secondary-500 ax-border-secondary-500;
535
+ }
536
+ &.ax-state-selected {
537
+ @apply ax-bg-secondary-200;
538
+ }
539
+ }
540
+ &.ax-warning-link {
541
+ @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;
542
+ &:hover,
543
+ &:focus {
544
+ @apply ax-text-warning-600 ax-border-warning-600;
545
+ }
546
+ &:active {
547
+ @apply ax-text-warning-500 ax-border-warning-500;
548
+ }
549
+ &.ax-state-selected {
550
+ @apply ax-bg-warning-200;
551
+ }
552
+ }
553
+ &.ax-danger-link {
554
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-danger-500 ax-border-danger;
555
+ &:hover,
556
+ &:focus {
557
+ @apply ax-text-danger-600 ax-border-danger-600;
558
+ }
559
+ &:active {
560
+ @apply ax-text-danger-500 ax-border-danger-500;
561
+ }
562
+ &.ax-state-selected {
563
+ @apply ax-bg-danger-200;
564
+ }
565
+ }
566
+ &.ax-success-link {
567
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-success-500 ax-border-success;
568
+ &:hover,
569
+ &:focus {
570
+ @apply ax-text-success-600 ax-border-success-600;
571
+ }
572
+ &:active {
573
+ @apply ax-text-success-500 ax-border-success-500;
574
+ }
575
+ &.ax-state-selected {
576
+ @apply ax-bg-success-200;
577
+ }
578
+ }
579
+ &.ax-info-link {
580
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-info-500 ax-border-info;
581
+ &:hover,
582
+ &:focus {
583
+ @apply ax-text-info-600 ax-border-info-600;
584
+ }
585
+ &:active {
586
+ @apply ax-text-info-500 ax-border-info-500;
587
+ }
588
+ &.ax-state-selected {
589
+ @apply ax-bg-info-200;
590
+ }
591
+ }
592
+ &.ax-dark-link {
593
+ @apply ax-rounded-none ax-border-b ax-border-r-0 ax-border-l-0 ax-border-t-0 ax-text-dark-500 ax-border-dark;
594
+ &:hover,
595
+ &:focus {
596
+ @apply ax-text-dark-600 ax-border-dark-600;
597
+ }
598
+ &:active {
599
+ @apply ax-text-dark-300 ax-border-dark-300;
600
+ }
601
+ &.ax-state-selected {
602
+ @apply ax-bg-dark-200;
603
+ }
604
+ }
605
+ &.ax-light-link {
606
+ @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;
607
+ &:hover {
608
+ @apply ax-text-light-300 ax-border-light-300;
609
+ }
610
+ &:focus {
611
+ @apply ax-text-light-500 ax-border-light-500;
612
+ }
613
+ &:active {
614
+ @apply ax-text-light-600 ax-border-light-600;
615
+ }
616
+ &.ax-state-selected {
617
+ @apply ax-bg-light-600;
618
618
  }
619
619
  }
620
620
  }
621
621
  .ax-button-group {
622
622
  @apply ax-flex;
623
623
  ax-button {
624
- button {
625
- &[class*="-link"] {
626
- &:first-child,
627
- &:last-child {
628
- @apply ax-rounded-s-none ax-rounded-e-none;
629
- }
624
+ @apply ax-rounded-none;
625
+ &[class*="-link"] {
626
+ &:first-child,
627
+ &:last-child {
628
+ @apply ax-rounded-s-none ax-rounded-e-none;
630
629
  }
631
630
  }
632
631
  &:not(:first-child):not(:last-child) {
633
- button {
634
- @apply ax-border-s-0;
635
- }
636
- }
637
- button {
638
- @apply ax-rounded-none;
632
+ @apply ax-border-s-0;
639
633
  }
640
634
  &:first-child {
641
- button {
642
- @apply ax-rounded-s-md;
643
- }
635
+ @apply ax-rounded-s-md;
644
636
  }
645
637
  &:last-child {
646
- button {
647
- @apply ax-rounded-e-md ax-border-s-0;
648
- }
638
+ @apply ax-rounded-e-md ax-border-s-0;
649
639
  }
650
640
  }
651
641
  }