@stackoverflow/stacks 3.0.0-beta.5 → 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 (8) hide show
  1. package/dist/css/stacks.css +71 -96
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/activity-indicator/activity-indicator.less +1 -17
  4. package/lib/components/badge/badge.less +59 -90
  5. package/lib/components/bling/bling.less +20 -10
  6. package/lib/components/button/button.less +1 -0
  7. package/lib/components/navigation/navigation.less +0 -4
  8. package/package.json +1 -1
package/dist/css/stacks.css CHANGED
@@ -420,7 +420,7 @@ fieldset {
420
420
  min-width: var(--_ai-min-size);
421
421
  min-height: var(--_ai-min-size);
422
422
  padding: var(--_ai-p);
423
- border-radius: 1000px;
423
+ border-radius: var(--br-pill);
424
424
  display: inline-flex;
425
425
  font-size: var(--fs-fine);
426
426
  font-weight: 600;
@@ -430,28 +430,15 @@ fieldset {
430
430
  justify-content: center;
431
431
  text-transform: uppercase;
432
432
  }
433
- body.theme-highcontrast .s-activity-indicator {
434
- --_ai-bg: var(--theme-secondary-500);
435
- }
436
433
  .s-activity-indicator.s-activity-indicator__danger {
437
434
  --_ai-bg: var(--red-400);
438
435
  }
439
- body.theme-highcontrast .s-activity-indicator.s-activity-indicator__danger {
440
- --_ai-bg: var(--red-500);
441
- }
442
436
  .s-activity-indicator.s-activity-indicator__success {
443
437
  --_ai-bg: var(--green-400);
444
438
  }
445
- body.theme-highcontrast .s-activity-indicator.s-activity-indicator__success {
446
- --_ai-bg: var(--green-500);
447
- }
448
439
  .s-activity-indicator.s-activity-indicator__warning {
449
440
  --_ai-bg: var(--yellow-400);
450
441
  }
451
- body.theme-highcontrast .s-activity-indicator.s-activity-indicator__warning {
452
- --_ai-bg: var(--yellow-500);
453
- --_ai-fc: var(--white);
454
- }
455
442
  .s-activity-indicator.s-activity-indicator__sm {
456
443
  --_ai-min-size: calc(var(--su-static8) + var(--su-static2));
457
444
  --_ai-p: 0;
@@ -632,81 +619,76 @@ body.theme-highcontrast .s-avatar .s-avatar--letter {
632
619
  }
633
620
  .s-badge {
634
621
  --_ba-as: unset;
635
- --_ba-bc: var(--bc-medium);
622
+ --_ba-bc: transparent;
636
623
  --_ba-bg: var(--black-150);
637
- --_ba-fc: var(--black-500);
624
+ --_ba-fc: var(--black-600);
638
625
  --_ba-fs: var(--fs-caption);
639
- --_ba-fw: normal;
640
- --_ba-g: 0.3em;
641
- --_ba-lh: 2;
642
626
  --_ba-px: var(--su6);
643
- --_ba-py: 0;
627
+ --_ba-py: var(--su4);
644
628
  --_ba-tt: unset;
645
629
  --_ba-wmn: 0;
630
+ --_ba-bl: 0;
631
+ --_ba-fw: unset;
646
632
  align-self: var(--_ba-as);
647
633
  background-color: var(--_ba-bg);
648
- border: var(--su-static1) solid var(--_ba-bc);
634
+ border-left: var(--_ba-bl) solid var(--_ba-bc);
649
635
  color: var(--_ba-fc);
650
636
  font-size: var(--_ba-fs);
651
- gap: var(--_ba-g);
652
637
  font-weight: var(--_ba-fw);
653
- line-height: var(--_ba-lh);
654
- min-width: var(--_ba-wmn);
638
+ gap: var(--_ba-px);
655
639
  padding: var(--_ba-py) var(--_ba-px);
640
+ line-height: var(--lh-md);
641
+ min-width: var(--_ba-wmn);
656
642
  text-transform: var(--_ba-tt);
657
643
  align-items: center;
658
- border-radius: var(--br-md);
659
644
  display: inline-flex;
660
645
  justify-content: center;
661
646
  text-decoration: none;
662
647
  vertical-align: middle;
663
648
  white-space: nowrap;
664
649
  }
665
- body.theme-highcontrast .s-badge__gold,
666
- body.theme-highcontrast .s-badge__silver,
667
- body.theme-highcontrast .s-badge__bronze,
668
- body.theme-highcontrast .s-badge__rep,
669
- body.theme-highcontrast .s-badge__rep-down,
670
- body.theme-highcontrast .s-badge__votes:not(.s-badge__answered),
671
- body.theme-highcontrast .s-badge__admin,
672
- body.theme-highcontrast .s-badge__moderator,
673
- body.theme-highcontrast .s-badge__staff {
674
- --_ba-bc: currentColor;
675
- }
676
- body.theme-highcontrast .s-badge__new {
677
- --_ba-fc: var(--purple-600);
678
- }
679
- .s-badge.s-badge__xs,
680
650
  .s-badge.s-badge__sm {
651
+ --_ba-wmn: calc(var(--su-static16) + var(--su-static2));
681
652
  --_ba-as: flex-start;
682
653
  --_ba-fs: var(--fs-fine);
654
+ --_ba-px: var(--su4);
655
+ --_ba-py: var(--su1);
683
656
  }
684
- .s-badge.s-badge__xs {
685
- --_ba-lh: 1.5;
686
- --_ba-px: var(--su2);
687
- --_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));
688
661
  }
689
- .s-badge.s-badge__sm {
690
- --_ba-lh: 1.8;
691
- --_ba-px: var(--su4);
692
- --_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;
693
667
  }
694
668
  .s-badge.s-badge__gold,
695
669
  .s-badge.s-badge__silver,
696
670
  .s-badge.s-badge__bronze {
697
- --_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;
698
683
  }
699
684
  .s-badge.s-badge__gold {
700
685
  --_ba-bc: var(--yellow-300);
701
- --_ba-bg: var(--yellow-100);
702
686
  }
703
687
  .s-badge.s-badge__silver {
704
688
  --_ba-bc: var(--blue-300);
705
- --_ba-bg: var(--blue-100);
706
689
  }
707
690
  .s-badge.s-badge__bronze {
708
691
  --_ba-bc: var(--orange-300);
709
- --_ba-bg: var(--orange-100);
710
692
  }
711
693
  .s-badge.s-badge__answered,
712
694
  .s-badge.s-badge__bounty,
@@ -740,59 +722,47 @@ body.theme-highcontrast .s-badge__new {
740
722
  --_ba-bc: var(--black-250);
741
723
  --_ba-fc: var(--black-500);
742
724
  }
743
- .s-badge.s-badge__admin {
744
- --_ba-bc: var(--theme-primary-200);
745
- --_ba-bg: var(--theme-primary-100);
746
- --_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);
747
731
  }
748
732
  .s-badge.s-badge__moderator {
749
- --_ba-bc: var(--theme-secondary-300);
750
- --_ba-bg: var(--theme-secondary-200);
751
- --_ba-fc: var(--theme-secondary-600);
752
- --_ba-g: calc(var(--su-static4) - var(--su-static1));
753
- --_ba-before-h: calc(var(--su-static16) - var(--su-static2));
754
- --_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");
755
- --_ba-before-mt: calc(var(--su-static1) * -1);
756
- --_ba-before-w: var(--su-static12);
757
- }
758
- .s-badge.s-badge__moderator.s-badge__xs {
759
- --_ba-before-h: calc(var(--su-static8) + var(--su-static1));
760
- --_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");
761
- --_ba-before-mt: 0;
762
- --_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");
763
737
  }
764
738
  .s-badge.s-badge__moderator.s-badge__sm {
765
- --_ba-g: var(--su-static2);
766
- --_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));
767
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");
768
- --_ba-before-mt: 0;
769
- --_ba-before-w: calc(var(--su-static8) + var(--su-static1));
770
742
  }
771
743
  .s-badge.s-badge__moderator:before {
772
744
  height: var(--_ba-before-h);
773
- margin-top: var(--_ba-before-mt);
745
+ margin-top: calc(var(--su1) * -1);
774
746
  width: var(--_ba-before-w);
775
747
  content: "";
776
748
  display: inline-block;
777
- background-color: currentColor;
749
+ background-color: var(--_ba-bc);
778
750
  -webkit-mask: var(--_ba-before-icon) no-repeat center;
779
751
  mask: var(--_ba-before-icon) no-repeat center;
780
752
  -webkit-mask-size: contain;
781
753
  mask-size: contain;
782
754
  }
783
755
  .s-badge.s-badge__staff {
784
- --_ba-bc: var(--orange-300);
785
- --_ba-bg: var(--orange-200);
786
- --_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));
787
760
  }
788
761
  .s-badge.s-badge__ai {
789
- --_ba-bc: var(--_ba-fc);
790
- --_ba-bg: var(--black-050);
791
- --_ba-fc: var(--orange-500);
792
- --_ba-tt: uppercase;
762
+ --_ba-bc: var(--purple-400);
793
763
  }
794
764
  .s-badge.s-badge__bot {
795
- --_ba-bc: var(--black-300);
765
+ --_ba-bc: var(--black-400);
796
766
  }
797
767
  .s-badge.s-badge__danger.s-badge__filled,
798
768
  .s-badge.s-badge__muted.s-badge__filled {
@@ -830,7 +800,6 @@ body.theme-highcontrast .s-badge__new {
830
800
  --_ba-bc: var(--_ba-bg);
831
801
  --_ba-bg: var(--purple-100);
832
802
  --_ba-fc: var(--purple-400);
833
- --_ba-fw: bold;
834
803
  --_ba-tt: uppercase;
835
804
  }
836
805
  .s-badge--image,
@@ -1074,10 +1043,6 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1074
1043
  display: inline-flex;
1075
1044
  justify-content: center;
1076
1045
  }
1077
- .s-bling.s-bling__gold,
1078
- .s-bling.s-bling__silver {
1079
- --_bl-icon-size: calc(var(--su8) + var(--su2));
1080
- }
1081
1046
  .s-bling.s-bling__activity {
1082
1047
  --_bl-icon-bg: var(--pink-400);
1083
1048
  }
@@ -1117,13 +1082,26 @@ body.theme-highcontrast .s-banner__warning.s-banner__important {
1117
1082
  --_bl-bg: var(--orange-300);
1118
1083
  --_bl-icon-bg: var(--orange-600);
1119
1084
  }
1120
- .s-bling.s-bling__sm {
1121
- --_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 {
1122
1089
  --_bl-size: var(--su16);
1123
1090
  }
1124
- .s-bling.s-bling__lg {
1091
+ .s-bling.s-bling__lg.s-bling__filled {
1125
1092
  --_bl-size: calc(var(--su24) + var(--su4));
1126
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
+ }
1127
1105
  .s-bling:before {
1128
1106
  -webkit-mask: var(--_bl-icon) no-repeat center;
1129
1107
  mask: var(--_bl-icon) no-repeat center;
@@ -1270,6 +1248,7 @@ body.theme-highcontrast .s-breadcrumbs .s-breadcrumbs--divider {
1270
1248
  gap: var(--_bu-g);
1271
1249
  padding: var(--_bu-py) var(--_bu-px);
1272
1250
  align-items: center;
1251
+ align-self: center;
1273
1252
  border-radius: var(--_bu-br);
1274
1253
  border-style: solid;
1275
1254
  cursor: pointer;
@@ -3142,12 +3121,8 @@ body.theme-highcontrast .s-navigation {
3142
3121
  height: var(--_na-item-selected-h);
3143
3122
  background-color: var(--_na-item-selected-fc);
3144
3123
  }
3145
- body.theme-highcontrast .s-navigation .s-navigation--item.is-selected:before {
3146
- height: 0;
3147
- }
3148
3124
  body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
3149
3125
  --_na-item-fc-hover: var(--white);
3150
- box-shadow: inset 0 0 0 var(--su-static1) var(--black-500);
3151
3126
  }
3152
3127
  .s-navigation .s-navigation--item__dropdown:after {
3153
3128
  mask-image: var(--_na-after-mask);