@acorex/styles 6.0.5 → 6.0.8

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/_alert.scss +209 -1
  3. package/src/components/_fieldset.scss +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@acorex/styles",
3
- "version": "6.0.5",
3
+ "version": "6.0.8",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "author": "",
package/src/components/_alert.scss CHANGED
@@ -18,13 +18,15 @@
18
18
  .ax-icon {
19
19
  @apply ax-text-2xl;
20
20
  }
21
-
22
21
  }
23
22
 
24
23
  .ax-alert-body {
25
24
  @apply ax-flex-1 ax-p-3.5;
26
25
  .ax-icon {
27
26
  @apply ax-text-2xl;
27
+ &:first-child{
28
+ @apply ax-me-2
29
+ }
28
30
  }
29
31
  .ax-button {
30
32
  --ax-base-size: 6px;
@@ -88,6 +90,22 @@
88
90
  // @include color-look-generator();
89
91
 
90
92
  // primary
93
+ &.ax-primary-twotone,
94
+ &.ax-primary-outline,
95
+ &.ax-primary-link,
96
+ &.ax-primary-blank {
97
+ .ax-close-button {
98
+ .ax-icon {
99
+ @apply ax-text-primary-500;
100
+ &:hover {
101
+ @apply ax-text-primary-500/50;
102
+ }
103
+ &:active {
104
+ @apply ax-text-primary-500;
105
+ }
106
+ }
107
+ }
108
+ }
91
109
  &.ax-primary-default {
92
110
  @apply ax-bg-primary-500 ax-text-primary-fore dark:ax-bg-primary-800 dark:ax-text-primary-100;
93
111
  .ax-header {
@@ -96,6 +114,17 @@
96
114
  .ax-alert-progress {
97
115
  @apply ax-bg-primary-800 dark:ax-bg-primary-500;
98
116
  }
117
+ .ax-close-button {
118
+ .ax-icon {
119
+ @apply ax-text-primary-fore;
120
+ &:hover {
121
+ @apply ax-text-primary-50/50;
122
+ }
123
+ &:active {
124
+ @apply ax-text-primary-fore;
125
+ }
126
+ }
127
+ }
99
128
  }
100
129
  &.ax-primary-twotone {
101
130
  @apply ax-bg-primary-100 ax-text-primary-500 dark:ax-bg-primary-800 dark:ax-text-primary-100;
@@ -133,8 +162,25 @@
133
162
  @apply ax-bg-primary-200 dark:ax-bg-primary-800;
134
163
  }
135
164
  }
165
+
136
166
 
137
167
  // secondary
168
+ &.ax-secondary-twotone,
169
+ &.ax-secondary-outline,
170
+ &.ax-secondary-link,
171
+ &.ax-secondary-blank {
172
+ .ax-close-button {
173
+ .ax-icon {
174
+ @apply ax-text-secondary-500;
175
+ &:hover {
176
+ @apply ax-text-secondary-500/50;
177
+ }
178
+ &:active {
179
+ @apply ax-text-secondary-500;
180
+ }
181
+ }
182
+ }
183
+ }
138
184
  &.ax-secondary-default {
139
185
  @apply ax-bg-secondary-500 ax-text-secondary-fore dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
140
186
  .ax-header {
@@ -143,6 +189,17 @@
143
189
  .ax-alert-progress {
144
190
  @apply ax-bg-secondary-800 dark:ax-bg-secondary-500;
145
191
  }
192
+ .ax-close-button {
193
+ .ax-icon {
194
+ @apply ax-text-secondary-fore;
195
+ &:hover {
196
+ @apply ax-text-secondary-50/50;
197
+ }
198
+ &:active {
199
+ @apply ax-text-secondary-fore;
200
+ }
201
+ }
202
+ }
146
203
  }
147
204
  &.ax-secondary-twotone {
148
205
  @apply ax-bg-secondary-100 ax-text-secondary-500 dark:ax-bg-secondary-800 dark:ax-text-secondary-100;
@@ -182,6 +239,22 @@
182
239
  }
183
240
 
184
241
  // success
242
+ &.ax-success-twotone,
243
+ &.ax-success-outline,
244
+ &.ax-success-link,
245
+ &.ax-success-blank {
246
+ .ax-close-button {
247
+ .ax-icon {
248
+ @apply ax-text-success-500;
249
+ &:hover {
250
+ @apply ax-text-success-500/50;
251
+ }
252
+ &:active {
253
+ @apply ax-text-success-500;
254
+ }
255
+ }
256
+ }
257
+ }
185
258
  &.ax-success-default {
186
259
  @apply ax-bg-success-500 ax-text-success-fore dark:ax-bg-success-800 dark:ax-text-success-100;
187
260
  .ax-header {
@@ -190,6 +263,17 @@
190
263
  .ax-alert-progress {
191
264
  @apply ax-bg-success-800 dark:ax-bg-success-500;
192
265
  }
266
+ .ax-close-button {
267
+ .ax-icon {
268
+ @apply ax-text-success-fore;
269
+ &:hover {
270
+ @apply ax-text-success-50/50;
271
+ }
272
+ &:active {
273
+ @apply ax-text-success-fore;
274
+ }
275
+ }
276
+ }
193
277
  }
194
278
  &.ax-success-twotone {
195
279
  @apply ax-bg-success-100 ax-text-success-500 dark:ax-bg-success-800 dark:ax-text-success-100;
@@ -231,6 +315,22 @@
231
315
  }
232
316
 
233
317
  // warning
318
+ &.ax-warning-twotone,
319
+ &.ax-warning-outline,
320
+ &.ax-warning-link,
321
+ &.ax-warning-blank {
322
+ .ax-close-button {
323
+ .ax-icon {
324
+ @apply ax-text-warning-900;
325
+ &:hover {
326
+ @apply ax-text-warning-900/50;
327
+ }
328
+ &:active {
329
+ @apply ax-text-warning-900;
330
+ }
331
+ }
332
+ }
333
+ }
234
334
  &.ax-warning-default {
235
335
  @apply ax-bg-warning-800 ax-text-warning-fore dark:ax-bg-warning-800;
236
336
  .ax-header {
@@ -239,6 +339,17 @@
239
339
  .ax-alert-progress {
240
340
  @apply ax-bg-warning-800 dark:ax-bg-warning-500;
241
341
  }
342
+ .ax-close-button {
343
+ .ax-icon {
344
+ @apply ax-text-warning-fore;
345
+ &:hover {
346
+ @apply ax-text-warning-50/50;
347
+ }
348
+ &:active {
349
+ @apply ax-text-warning-fore;
350
+ }
351
+ }
352
+ }
242
353
  }
243
354
  &.ax-warning-twotone {
244
355
  @apply ax-bg-warning-100 ax-text-warning-900 dark:ax-bg-warning-800 dark:ax-text-warning-fore;
@@ -278,6 +389,22 @@
278
389
  }
279
390
 
280
391
  // danger
392
+ &.ax-danger-twotone,
393
+ &.ax-danger-outline,
394
+ &.ax-danger-link,
395
+ &.ax-danger-blank {
396
+ .ax-close-button {
397
+ .ax-icon {
398
+ @apply ax-text-danger-500;
399
+ &:hover {
400
+ @apply ax-text-danger-500/50;
401
+ }
402
+ &:active {
403
+ @apply ax-text-danger-500;
404
+ }
405
+ }
406
+ }
407
+ }
281
408
  &.ax-danger-default {
282
409
  @apply ax-bg-danger-500 ax-text-danger-fore dark:ax-bg-danger-800 dark:ax-text-danger-100;
283
410
  .ax-header {
@@ -286,6 +413,17 @@
286
413
  .ax-alert-progress {
287
414
  @apply ax-bg-danger-800 dark:ax-bg-danger-500;
288
415
  }
416
+ .ax-close-button {
417
+ .ax-icon {
418
+ @apply ax-text-danger-fore;
419
+ &:hover {
420
+ @apply ax-text-danger-50/50;
421
+ }
422
+ &:active {
423
+ @apply ax-text-danger-fore;
424
+ }
425
+ }
426
+ }
289
427
  }
290
428
  &.ax-danger-twotone {
291
429
  @apply ax-bg-danger-100 ax-text-danger-500 dark:ax-bg-danger-800 dark:ax-text-danger-100;
@@ -326,6 +464,22 @@
326
464
  }
327
465
 
328
466
  // info
467
+ &.ax-info-twotone,
468
+ &.ax-info-outline,
469
+ &.ax-info-link,
470
+ &.ax-info-blank {
471
+ .ax-close-button {
472
+ .ax-icon {
473
+ @apply ax-text-info-500;
474
+ &:hover {
475
+ @apply ax-text-info-500/50;
476
+ }
477
+ &:active {
478
+ @apply ax-text-info-500;
479
+ }
480
+ }
481
+ }
482
+ }
329
483
  &.ax-info-default {
330
484
  @apply ax-bg-info-500 ax-text-info-fore dark:ax-bg-info-800 dark:ax-text-info-100;
331
485
  .ax-header {
@@ -334,6 +488,17 @@
334
488
  .ax-alert-progress {
335
489
  @apply ax-bg-info-800 dark:ax-bg-info-500;
336
490
  }
491
+ .ax-close-button {
492
+ .ax-icon {
493
+ @apply ax-text-info-fore;
494
+ &:hover {
495
+ @apply ax-text-info-50/50;
496
+ }
497
+ &:active {
498
+ @apply ax-text-info-fore;
499
+ }
500
+ }
501
+ }
337
502
  }
338
503
  &.ax-info-twotone {
339
504
  @apply ax-bg-info-100 ax-text-info-500 dark:ax-bg-info-800 dark:ax-text-info-100;
@@ -373,6 +538,22 @@
373
538
  }
374
539
 
375
540
  // light
541
+ &.ax-light-twotone,
542
+ &.ax-light-outline,
543
+ &.ax-light-link,
544
+ &.ax-light-blank {
545
+ .ax-close-button {
546
+ .ax-icon {
547
+ @apply ax-text-light-500;
548
+ &:hover {
549
+ @apply ax-text-light-500/50;
550
+ }
551
+ &:active {
552
+ @apply ax-text-light-500;
553
+ }
554
+ }
555
+ }
556
+ }
376
557
  &.ax-light-default {
377
558
  @apply ax-bg-light-100 dark:ax-bg-light-800 ax-text-light-fore dark:ax-text-light-100 ax-border ax-border-light-200 dark:ax-border-light-900;
378
559
  .ax-header {
@@ -419,6 +600,22 @@
419
600
  }
420
601
  }
421
602
  // dark
603
+ &.ax-dark-twotone,
604
+ &.ax-dark-outline,
605
+ &.ax-dark-link,
606
+ &.ax-dark-blank {
607
+ .ax-close-button {
608
+ .ax-icon {
609
+ @apply ax-text-dark-500;
610
+ &:hover {
611
+ @apply ax-text-dark-500/50;
612
+ }
613
+ &:active {
614
+ @apply ax-text-dark-500;
615
+ }
616
+ }
617
+ }
618
+ }
422
619
  &.ax-dark-default {
423
620
  @apply ax-bg-dark-500 ax-text-dark-fore dark:ax-bg-dark-800 dark:ax-text-dark-100;
424
621
  .ax-header {
@@ -427,6 +624,17 @@
427
624
  .ax-alert-progress {
428
625
  @apply ax-bg-dark-50/30;
429
626
  }
627
+ .ax-close-button {
628
+ .ax-icon {
629
+ @apply ax-text-dark-fore;
630
+ &:hover {
631
+ @apply ax-text-dark-50/50;
632
+ }
633
+ &:active {
634
+ @apply ax-text-dark-fore;
635
+ }
636
+ }
637
+ }
430
638
  }
431
639
  &.ax-dark-twotone {
432
640
  @apply ax-bg-dark-100 ax-text-dark-500 dark:ax-bg-dark-800 dark:ax-text-dark-100;
package/src/components/_fieldset.scss CHANGED
@@ -1,8 +1,8 @@
1
- @layer components{
2
- .ax-fieldset{
3
- @apply ax-grid ax-col-span-6 ax-grid-cols-6 ax-gap-4 ax-border ax-border-solid ax-border-light-300 ax-p-3 ax-rounded dark:ax-border-white/10;
4
- legend{
1
+ @layer components {
2
+ .ax-fieldset {
3
+ @apply ax-border ax-border-solid ax-border-light-300 ax-p-3 ax-rounded dark:ax-border-white/10;
4
+ legend {
5
5
  @apply ax-text-sm ax-px-1;
6
6
  }
7
7
  }
8
- }
8
+ }