@stackoverflow/stacks 3.0.0-beta.6 → 3.0.0-beta.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 (6) hide show
  1. package/dist/css/stacks.css +69 -82
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/badge/badge.less +59 -90
  4. package/lib/components/bling/bling.less +20 -10
  5. package/lib/components/navigation/navigation.less +0 -4
  6. package/package.json +1 -1
package/dist/css/stacks.css CHANGED
@@ -619,81 +619,76 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
619
619
  }
620
620
  .s-badge {
621
621
  --_ba-as: unset;
622
- --_ba-bc: var(--bc-medium);
622
+ --_ba-bc: transparent;
623
623
  --_ba-bg: var(--black-150);
624
- --_ba-fc: var(--black-500);
624
+ --_ba-fc: var(--black-600);
625
625
  --_ba-fs: var(--fs-caption);
626
- --_ba-fw: normal;
627
- --_ba-g: 0.3em;
628
- --_ba-lh: 2;
629
626
  --_ba-px: var(--su6);
630
- --_ba-py: 0;
627
+ --_ba-py: var(--su4);
631
628
  --_ba-tt: unset;
632
629
  --_ba-wmn: 0;
630
+ --_ba-bl: 0;
631
+ --_ba-fw: unset;
633
632
  align-self: var(--_ba-as);
634
633
  background-color: var(--_ba-bg);
635
- border: var(--su-static1) solid var(--_ba-bc);
634
+ border-left: var(--_ba-bl) solid var(--_ba-bc);
636
635
  color: var(--_ba-fc);
637
636
  font-size: var(--_ba-fs);
638
- gap: var(--_ba-g);
639
637
  font-weight: var(--_ba-fw);
640
- line-height: var(--_ba-lh);
641
- min-width: var(--_ba-wmn);
638
+ gap: var(--_ba-px);
642
639
  padding: var(--_ba-py) var(--_ba-px);
640
+ line-height: var(--lh-md);
641
+ min-width: var(--_ba-wmn);
643
642
  text-transform: var(--_ba-tt);
644
643
  align-items: center;
645
- border-radius: var(--br-md);
646
644
  display: inline-flex;
647
645
  justify-content: center;
648
646
  text-decoration: none;
649
647
  vertical-align: middle;
650
648
  white-space: nowrap;
651
649
  }
652
- body.theme-highcontrast .s-badge__gold,
653
- body.theme-highcontrast .s-badge__silver,
654
- body.theme-highcontrast .s-badge__bronze,
655
- body.theme-highcontrast .s-badge__rep,
656
- body.theme-highcontrast .s-badge__rep-down,
657
- body.theme-highcontrast .s-badge__votes:not(.s-badge__answered),
658
- body.theme-highcontrast .s-badge__admin,
659
- body.theme-highcontrast .s-badge__moderator,
660
- body.theme-highcontrast .s-badge__staff {
661
- --_ba-bc: currentColor;
662
- }
663
- body.theme-highcontrast .s-badge__new {
664
- --_ba-fc: var(--purple-600);
665
- }
666
- .s-badge.s-badge__xs,
667
650
  .s-badge.s-badge__sm {
651
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
668
652
  --_ba-as: flex-start;
669
653
  --_ba-fs: var(--fs-fine);
654
+ --_ba-px: var(--su4);
655
+ --_ba-py: var(--su1);
670
656
  }
671
- .s-badge.s-badge__xs {
672
- --_ba-lh: 1.5;
673
- --_ba-px: var(--su2);
674
- --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
657
+ .s-badge.s-badge__lg {
658
+ --_ba-fs: var(--fs-body1);
659
+ --_ba-px: var(--su8);
660
+ --_ba-py: calc(var(--su4) + var(--su1));
675
661
  }
676
- .s-badge.s-badge__sm {
677
- --_ba-lh: 1.8;
678
- --_ba-px: var(--su4);
679
- --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
662
+ .s-badge .s-bling__filled {
663
+ margin: calc(var(--_ba-py) * -1) 0 calc(var(--_ba-py) * -1) calc(var(--_ba-px) * -1);
664
+ }
665
+ .s-badge:has(.s-bling__rep) {
666
+ --_ba-fw: 600;
680
667
  }
681
668
  .s-badge.s-badge__gold,
682
669
  .s-badge.s-badge__silver,
683
670
  .s-badge.s-badge__bronze {
684
- --_ba-fc: var(--black-500);
671
+ --_ba-bl: var(--su4);
672
+ }
673
+ .s-badge.s-badge__gold .s-bling__gold,
674
+ .s-badge.s-badge__silver .s-bling__gold,
675
+ .s-badge.s-badge__bronze .s-bling__gold,
676
+ .s-badge.s-badge__gold .s-bling__silver,
677
+ .s-badge.s-badge__silver .s-bling__silver,
678
+ .s-badge.s-badge__bronze .s-bling__silver,
679
+ .s-badge.s-badge__gold .s-bling__bronze,
680
+ .s-badge.s-badge__silver .s-bling__bronze,
681
+ .s-badge.s-badge__bronze .s-bling__bronze {
682
+ margin-left: -2px;
685
683
  }
686
684
  .s-badge.s-badge__gold {
687
685
  --_ba-bc: var(--yellow-300);
688
- --_ba-bg: var(--yellow-100);
689
686
  }
690
687
  .s-badge.s-badge__silver {
691
688
  --_ba-bc: var(--blue-300);
692
- --_ba-bg: var(--blue-100);
693
689
  }
694
690
  .s-badge.s-badge__bronze {
695
691
  --_ba-bc: var(--orange-300);
696
- --_ba-bg: var(--orange-100);
697
692
  }
698
693
  .s-badge.s-badge__answered,
699
694
  .s-badge.s-badge__bounty,
@@ -727,59 +722,47 @@ body.theme-highcontrast .s-badge__new {
727
722
  --_ba-bc: var(--black-250);
728
723
  --_ba-fc: var(--black-500);
729
724
  }
730
- .s-badge.s-badge__admin {
731
- --_ba-bc: var(--theme-primary-200);
732
- --_ba-bg: var(--theme-primary-100);
733
- --_ba-fc: var(--theme-primary-500);
725
+ .s-badge.s-badge__admin,
726
+ .s-badge.s-badge__moderator,
727
+ .s-badge.s-badge__staff,
728
+ .s-badge.s-badge__ai,
729
+ .s-badge.s-badge__bot {
730
+ --_ba-bl: var(--su4);
734
731
  }
735
732
  .s-badge.s-badge__moderator {
736
- --_ba-bc: var(--theme-secondary-300);
737
- --_ba-bg: var(--theme-secondary-200);
738
- --_ba-fc: var(--theme-secondary-600);
739
- --_ba-g: calc(var(--su-static4) - var(--su-static1));
740
- --_ba-before-h: calc(var(--su-static16) - var(--su-static2));
741
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='12' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
742
- --_ba-before-mt: calc(var(--su-static1) * -1);
743
- --_ba-before-w: var(--su-static12);
744
- }
745
- .s-badge.s-badge__moderator.s-badge__xs {
746
- --_ba-before-h: calc(var(--su-static8) + var(--su-static1));
747
- --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='7' height='9' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 .246c.3-.329.701-.327 1 0L6.776 4c.3.329.298.672 0 1L4 8.75c-.299.329-.702.327-1 0L.224 5c-.284-.324-.285-.675 0-1L3 .246z' fill='%23fff'/%3E%3C/svg%3E");
748
- --_ba-before-mt: 0;
749
- --_ba-before-w: calc(var(--su-static8) - var(--su-static1));
733
+ --_ba-bc: var(--blue-500);
734
+ --_ba-before-h: calc(var(--su12) + var(--su1));
735
+ --_ba-before-w: calc(var(--su12) - var(--su1));
736
+ --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='11' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.528.746c.257-.329.675-.327.93 0l4.42 5.66c.258.329.257.864 0 1.192l-4.42 5.66c-.256.328-.674.327-.93 0l-4.42-5.66c-.257-.329-.256-.865 0-1.192l4.42-5.66z' fill='%23fff'/%3E%3C/svg%3E");
750
737
  }
751
738
  .s-badge.s-badge__moderator.s-badge__sm {
752
- --_ba-g: var(--su-static2);
753
- --_ba-before-h: calc(var(--su-static12) - var(--su-static1));
739
+ --_ba-before-h: calc(var(--su12) - var(--su1));
740
+ --_ba-before-w: calc(var(--su8) + var(--su1));
754
741
  --_ba-before-icon: url("data:image/svg+xml;,%3Csvg width='9' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55.246c.257-.329.647-.327.903 0l3.36 4.66c.256.329.256.864 0 1.192L4.45 10.75c-.257.329-.644.327-.9 0L.192 6.098c-.256-.329-.256-.865 0-1.192L3.55.246z' fill='%23fff'/%3E%3C/svg%3E");
755
- --_ba-before-mt: 0;
756
- --_ba-before-w: calc(var(--su-static8) + var(--su-static1));
757
742
  }
758
743
  .s-badge.s-badge__moderator:before {
759
744
  height: var(--_ba-before-h);
760
- margin-top: var(--_ba-before-mt);
745
+ margin-top: calc(var(--su1) * -1);
761
746
  width: var(--_ba-before-w);
762
747
  content: "";
763
748
  display: inline-block;
764
- background-color: currentColor;
749
+ background-color: var(--_ba-bc);
765
750
  -webkit-mask: var(--_ba-before-icon) no-repeat center;
766
751
  mask: var(--_ba-before-icon) no-repeat center;
767
752
  -webkit-mask-size: contain;
768
753
  mask-size: contain;
769
754
  }
770
755
  .s-badge.s-badge__staff {
771
- --_ba-bc: var(--orange-300);
772
- --_ba-bg: var(--orange-200);
773
- --_ba-fc: var(--orange-600);
756
+ --_ba-bc: var(--orange-400);
757
+ }
758
+ .s-badge.s-badge__admin {
759
+ --_ba-bc: var(--theme-primary-500, var(--orange-500));
774
760
  }
775
761
  .s-badge.s-badge__ai {
776
- --_ba-bc: var(--_ba-fc);
777
- --_ba-bg: var(--black-050);
778
- --_ba-fc: var(--orange-500);
779
- --_ba-tt: uppercase;
762
+ --_ba-bc: var(--purple-400);
780
763
  }
781
764
  .s-badge.s-badge__bot {
782
- --_ba-bc: var(--black-300);
765
+ --_ba-bc: var(--black-400);
783
766
  }
784
767
  .s-badge.s-badge__danger.s-badge__filled,
785
768
  .s-badge.s-badge__muted.s-badge__filled {
@@ -817,7 +800,6 @@ body.theme-highcontrast .s-badge__new {
817
800
  --_ba-bc: var(--_ba-bg);
818
801
  --_ba-bg: var(--purple-100);
819
802
  --_ba-fc: var(--purple-400);
820
- --_ba-fw: bold;
821
803
  --_ba-tt: uppercase;
822
804
  }
823
805
  .s-badge--image,
@@ -1061,10 +1043,6 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1061
1043
  display: inline-flex;
1062
1044
  justify-content: center;
1063
1045
  }
1064
- .s-bling.s-bling__gold,
1065
- .s-bling.s-bling__silver {
1066
- --_bl-icon-size: calc(var(--su8) + var(--su2));
1067
- }
1068
1046
  .s-bling.s-bling__activity {
1069
1047
  --_bl-icon-bg: var(--pink-400);
1070
1048
  }
@@ -1104,13 +1082,26 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1104
1082
  --_bl-bg: var(--orange-300);
1105
1083
  --_bl-icon-bg: var(--orange-600);
1106
1084
  }
1107
- .s-bling.s-bling__sm {
1108
- --_bl-icon-size: var(--su6);
1085
+ .s-bling.s-bling__sm:not(.s-bling__filled) {
1086
+ --_bl-size: var(--su8);
1087
+ }
1088
+ .s-bling.s-bling__sm.s-bling__filled {
1109
1089
  --_bl-size: var(--su16);
1110
1090
  }
1111
- .s-bling.s-bling__lg {
1091
+ .s-bling.s-bling__lg.s-bling__filled {
1112
1092
  --_bl-size: calc(var(--su24) + var(--su4));
1113
1093
  }
1094
+ .s-bling.s-bling__sm {
1095
+ --_bl-icon-size: var(--su6);
1096
+ }
1097
+ .s-bling.s-bling__sm.s-bling__gold,
1098
+ .s-bling.s-bling__sm.s-bling__silver {
1099
+ --_bl-icon-size: calc(var(--su6) + var(--su1));
1100
+ }
1101
+ .s-bling.s-bling__gold:not(.s-bling__sm),
1102
+ .s-bling.s-bling__silver:not(.s-bling__sm) {
1103
+ --_bl-icon-size: calc(var(--su8) + var(--su1));
1104
+ }
1114
1105
  .s-bling:before {
1115
1106
  -webkit-mask: var(--_bl-icon) no-repeat center;
1116
1107
  mask: var(--_bl-icon) no-repeat center;
@@ -3130,12 +3121,8 @@ body.theme-highcontrast .s-navigation {
3130
3121
  height: var(--_na-item-selected-h);
3131
3122
  background-color: var(--_na-item-selected-fc);
3132
3123
  }
3133
- body.theme-highcontrast .s-navigation .s-navigation--item.is-selected:before {
3134
- height: 0;
3135
- }
3136
3124
  body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3137
3125
  --_na-item-fc-hover: var(--white);
3138
- box-shadow: inset 0 0 0 var(--su-static1) var(--black-500);
3139
3126
  }
3140
3127
  .s-navigation .s-navigation--item__dropdown:after {
3141
3128
  mask-image: var(--_na-after-mask);