@acorex/styles 18.12.24 → 18.12.26
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/icons/fontawesome/_variables.scss +3 -0
- package/icons/huge/huge-bulk/_variables.scss +3 -0
- package/icons/huge/huge-duotone/_variables.scss +3 -0
- package/icons/huge/huge-solid/variables/_rounded-variables.scss +3 -0
- package/icons/huge/huge-solid/variables/_sharp-variables.scss +3 -0
- package/icons/huge/huge-solid/variables/_standard-variables.scss +3 -0
- package/icons/huge/huge-stroke/variables/_rounded-variables.scss +3 -0
- package/icons/huge/huge-stroke/variables/_sharp-variables.scss +3 -0
- package/icons/huge/huge-stroke/variables/_standard-variables.scss +3 -0
- package/icons/huge/huge-twotone/_variables.scss +3 -0
- package/icons/index.scss +9 -0
- package/icons/material/_variables.scss +3 -0
- package/index.css +363 -13
- package/index.min.css +1 -1
- package/package.json +1 -1
- package/src/shared/_color-look.scss +175 -4
- package/src/variables/_colors.scss +1 -1
|
@@ -110,7 +110,8 @@
|
|
|
110
110
|
&:hover {
|
|
111
111
|
&:not(.ax-state-disabled) {
|
|
112
112
|
// @apply ax-text-#{$color}-fore-tint;
|
|
113
|
-
color: rgba(var(--ax-color-#{$color}-
|
|
113
|
+
background-color: rgba(var(--ax-color-#{$color}-100));
|
|
114
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
114
115
|
}
|
|
115
116
|
}
|
|
116
117
|
}
|
|
@@ -197,6 +198,54 @@
|
|
|
197
198
|
}
|
|
198
199
|
}
|
|
199
200
|
}
|
|
201
|
+
|
|
202
|
+
@if ($look == 'link') {
|
|
203
|
+
.ax-el-#{$color}-#{$look} {
|
|
204
|
+
// @apply ax-text-#{$color}-500;
|
|
205
|
+
color: rgba(var(--ax-color-#{$color}-500));
|
|
206
|
+
|
|
207
|
+
&.ax-el-interactive {
|
|
208
|
+
&:hover {
|
|
209
|
+
&:not(.ax-state-disabled) {
|
|
210
|
+
// @apply ax-text-#{$color}-fore-tint;
|
|
211
|
+
color: rgba(var(--ax-color-#{$color}-700));
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
&.ax-state-selected {
|
|
217
|
+
// @apply ax-bg-#{$color}-700 ax-text-#{$color}-fore;
|
|
218
|
+
background-color: rgba(var(--ax-color-#{$color}-700));
|
|
219
|
+
color: rgba(var(--ax-color-#{$color}-fore));
|
|
220
|
+
}
|
|
221
|
+
.ax-ripple {
|
|
222
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
223
|
+
background-color: rgba(var(--ax-color-#{$color}-500), 0.3);
|
|
224
|
+
}
|
|
225
|
+
ax-loading-spinner {
|
|
226
|
+
.ax-loader {
|
|
227
|
+
// @apply ax-border-#{$color}-500 ax-border-b-transparent;
|
|
228
|
+
border-color: rgba(var(--ax-color-#{$color}-500));
|
|
229
|
+
border-bottom-color: transparent;
|
|
230
|
+
}
|
|
231
|
+
}
|
|
232
|
+
&:is(&:focus-visible, &.ax-state-focus) {
|
|
233
|
+
// @apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
234
|
+
outline-color: rgba(var(--ax-color-#{$color}-300));
|
|
235
|
+
outline-offset: 0;
|
|
236
|
+
}
|
|
237
|
+
& > button {
|
|
238
|
+
&:is(&:focus-visible, &.ax-state-focus) {
|
|
239
|
+
// @apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
240
|
+
outline-color: rgba(var(--ax-color-#{$color}-300));
|
|
241
|
+
outline-offset: 0;
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
&.ax-dropdown-button-marker {
|
|
245
|
+
border-inline-start-color: transparent;
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
}
|
|
200
249
|
}
|
|
201
250
|
}
|
|
202
251
|
|
|
@@ -309,6 +358,7 @@
|
|
|
309
358
|
&:hover {
|
|
310
359
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
311
360
|
// @apply ax-border-primary-700 ax-text-primary-700;
|
|
361
|
+
background-color: rgba(var(--ax-color-primary-200));
|
|
312
362
|
border-color: rgba(var(--ax-color-primary-700));
|
|
313
363
|
color: rgba(var(--ax-color-primary-700));
|
|
314
364
|
}
|
|
@@ -393,6 +443,53 @@
|
|
|
393
443
|
border-inline-start-color: rgba(var(--ax-color-border-default));
|
|
394
444
|
}
|
|
395
445
|
}
|
|
446
|
+
.ax-el-ghost-link {
|
|
447
|
+
// @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
|
|
448
|
+
border-style: none;
|
|
449
|
+
background-color: transparent;
|
|
450
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
451
|
+
|
|
452
|
+
&.ax-state-selected {
|
|
453
|
+
// @apply ax-bg-primary-500 ax-text-primary-fore;
|
|
454
|
+
background-color: rgba(var(--ax-color-primary-500));
|
|
455
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
456
|
+
}
|
|
457
|
+
&.ax-el-interactive {
|
|
458
|
+
&:hover {
|
|
459
|
+
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
460
|
+
// @apply ax-border-primary-700 ax-text-primary-700;
|
|
461
|
+
border-color: rgba(var(--ax-color-primary-700));
|
|
462
|
+
color: rgba(var(--ax-color-primary-700));
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
&:active {
|
|
466
|
+
// @apply ax-border-primary-800 ax-text-primary-800;
|
|
467
|
+
border-color: rgba(var(--ax-color-primary-800));
|
|
468
|
+
color: rgba(var(--ax-color-primary-800));
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.ax-ripple {
|
|
473
|
+
// @apply ax-bg-primary-500/30 #{!important};
|
|
474
|
+
background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
|
|
475
|
+
}
|
|
476
|
+
ax-loading-spinner {
|
|
477
|
+
.ax-loader {
|
|
478
|
+
// @apply ax-border-ghost-fore ax-border-b-transparent;
|
|
479
|
+
border-color: rgba(var(--ax-color-ghost-fore));
|
|
480
|
+
border-bottom-color: transparent;
|
|
481
|
+
}
|
|
482
|
+
}
|
|
483
|
+
& > button {
|
|
484
|
+
&:is(&:focus-visible, &.ax-state-focus) {
|
|
485
|
+
// @apply ax-outline-primary-500;
|
|
486
|
+
outline-color: rgba(var(--ax-color-primary-500));
|
|
487
|
+
}
|
|
488
|
+
}
|
|
489
|
+
&.ax-dropdown-button-marker {
|
|
490
|
+
border-inline-start-color: rgba(var(--ax-color-border-default));
|
|
491
|
+
}
|
|
492
|
+
}
|
|
396
493
|
|
|
397
494
|
@mixin color-look-dark-mode {
|
|
398
495
|
@each $color in $color_names {
|
|
@@ -481,7 +578,6 @@
|
|
|
481
578
|
}
|
|
482
579
|
}
|
|
483
580
|
}
|
|
484
|
-
|
|
485
581
|
@if ($look == 'blank') {
|
|
486
582
|
.ax-el-#{$color}-#{$look} {
|
|
487
583
|
// @apply ax-text-#{$color}-300 ax-bg-transparent;
|
|
@@ -492,7 +588,8 @@
|
|
|
492
588
|
&:hover {
|
|
493
589
|
&:not(.ax-state-disabled) {
|
|
494
590
|
// @apply ax-text-#{$color}-500;
|
|
495
|
-
color: rgba(var(--ax-color-#{$color}-
|
|
591
|
+
background-color: rgba(var(--ax-color-#{$color}-200));
|
|
592
|
+
color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
496
593
|
}
|
|
497
594
|
}
|
|
498
595
|
}
|
|
@@ -562,6 +659,44 @@
|
|
|
562
659
|
}
|
|
563
660
|
}
|
|
564
661
|
}
|
|
662
|
+
@if ($look == 'link') {
|
|
663
|
+
.ax-el-#{$color}-#{$look} {
|
|
664
|
+
// @apply ax-text-#{$color}-300 ax-bg-transparent;
|
|
665
|
+
|
|
666
|
+
color: rgba(var(--ax-color-#{$color}-300));
|
|
667
|
+
background-color: transparent;
|
|
668
|
+
&.ax-el-interactive {
|
|
669
|
+
&:hover {
|
|
670
|
+
&:not(.ax-state-disabled) {
|
|
671
|
+
// @apply ax-text-#{$color}-500;
|
|
672
|
+
color: rgba(var(--ax-color-#{$color}-400));
|
|
673
|
+
}
|
|
674
|
+
}
|
|
675
|
+
}
|
|
676
|
+
|
|
677
|
+
&.ax-state-selected {
|
|
678
|
+
// @apply ax-bg-#{$color}-500 ax-text-#{$color}-fore;
|
|
679
|
+
background-color: rgba(var(--ax-color-#{$color}-500));
|
|
680
|
+
color: rgba(var(--ax-color-#{$color}-fore));
|
|
681
|
+
}
|
|
682
|
+
.ax-ripple {
|
|
683
|
+
// @apply ax-bg-#{$color}-500/30 #{!important};
|
|
684
|
+
background-color: rgba(var(--ax-color-#{$color}-300), 0.3) !important;
|
|
685
|
+
}
|
|
686
|
+
ax-loading-spinner {
|
|
687
|
+
.ax-loader {
|
|
688
|
+
// @apply ax-border-#{$color}-fore-tint ax-border-b-transparent;
|
|
689
|
+
border-color: rgba(var(--ax-color-#{$color}-fore-tint));
|
|
690
|
+
border-bottom-color: transparent;
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
& > button {
|
|
694
|
+
&:is(&:focus-visible, &.ax-state-focus) {
|
|
695
|
+
// @apply ax-outline-#{$color}-300 ax-outline-offset-0;
|
|
696
|
+
}
|
|
697
|
+
}
|
|
698
|
+
}
|
|
699
|
+
}
|
|
565
700
|
}
|
|
566
701
|
}
|
|
567
702
|
.ax-el-ghost-solid {
|
|
@@ -633,7 +768,8 @@
|
|
|
633
768
|
&:hover {
|
|
634
769
|
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
635
770
|
border-color: rgba(var(--ax-color-primary-300));
|
|
636
|
-
color: rgba(var(--ax-color-primary-
|
|
771
|
+
background-color: rgba(var(--ax-color-primary-200));
|
|
772
|
+
color: rgba(var(--ax-color-primary-fore-tint));
|
|
637
773
|
}
|
|
638
774
|
}
|
|
639
775
|
&:active {
|
|
@@ -652,6 +788,7 @@
|
|
|
652
788
|
}
|
|
653
789
|
}
|
|
654
790
|
}
|
|
791
|
+
|
|
655
792
|
.ax-el-ghost-twotone {
|
|
656
793
|
border-color: transparent;
|
|
657
794
|
background-color: rgba(var(--ax-color-ghost-fore), 0.05);
|
|
@@ -680,6 +817,40 @@
|
|
|
680
817
|
background-color: rgba(var(--ax-color-primary-500), 0.3) !important;
|
|
681
818
|
}
|
|
682
819
|
|
|
820
|
+
& > button {
|
|
821
|
+
&:is(&:focus-visible, &.ax-state-focus) {
|
|
822
|
+
outline-color: rgba(var(--ax-color-primary-200));
|
|
823
|
+
}
|
|
824
|
+
}
|
|
825
|
+
}
|
|
826
|
+
.ax-el-ghost-link {
|
|
827
|
+
// @apply ax-border-none ax-bg-transparent ax-text-ghost-fore;
|
|
828
|
+
border-style: none;
|
|
829
|
+
background-color: transparent;
|
|
830
|
+
color: rgba(var(--ax-color-ghost-fore));
|
|
831
|
+
|
|
832
|
+
&.ax-state-selected {
|
|
833
|
+
// @apply ax-bg-primary-500 ax-text-primary-fore;
|
|
834
|
+
background-color: rgba(var(--ax-color-primary-500));
|
|
835
|
+
color: rgba(var(--ax-color-primary-fore));
|
|
836
|
+
}
|
|
837
|
+
&.ax-el-interactive {
|
|
838
|
+
&:hover {
|
|
839
|
+
&:not(&.ax-state-selected, &.ax-state-disabled) {
|
|
840
|
+
border-color: rgba(var(--ax-color-primary-300));
|
|
841
|
+
color: rgba(var(--ax-color-primary-300));
|
|
842
|
+
}
|
|
843
|
+
}
|
|
844
|
+
&:active {
|
|
845
|
+
border-color: rgba(var(--ax-color-primary-400));
|
|
846
|
+
color: rgba(var(--ax-color-primary-400));
|
|
847
|
+
}
|
|
848
|
+
}
|
|
849
|
+
|
|
850
|
+
.ax-ripple {
|
|
851
|
+
background-color: rgba(var(--ax-color-primary-200), 0.3) !important;
|
|
852
|
+
}
|
|
853
|
+
|
|
683
854
|
& > button {
|
|
684
855
|
&:is(&:focus-visible, &.ax-state-focus) {
|
|
685
856
|
outline-color: rgba(var(--ax-color-primary-200));
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
$color_names: 'primary', 'secondary', 'success', 'warning', 'danger', 'info';
|
|
2
|
-
$look_names: 'solid', 'twotone', 'outline', 'blank';
|
|
2
|
+
$look_names: 'solid', 'twotone', 'outline', 'blank', 'link';
|