@stackoverflow/stacks 3.0.0-beta.26 → 3.0.0-beta.27

package/dist/css/stacks.css

@@ -13424,7 +13424,8 @@ body.theme-highcontrast .s-modal {
   margin-bottom: var(--su16);
   margin-right: var(--su24);
 }
-.s-navigation {
+.s-navigation,
+.s-navigation ul {
   --_na-fd: row;
   --_na-fw: wrap;
   --_na-p: var(--su2) 0;
@@ -13441,7 +13442,6 @@ body.theme-highcontrast .s-modal {
   --_na-item-selected-bg-hover: var(--_na-item-bg-hover);
   --_na-item-selected-h: var(--su2);
   --_na-item-text-ta: center;
-  --_na-title-mt: var(--su24);
   --_na-after-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M11.35 4.35 6 9.71.65 4.35l.7-.7L6 8.29l4.65-4.64z'/%3E%3C/svg%3E");
   --_na-after-bg-color: var(--black-400);
   flex-direction: var(--_na-fd);
@@ -13452,40 +13452,67 @@ body.theme-highcontrast .s-modal {
   list-style: none;
   margin: 0;
 }
-body.theme-highcontrast .s-navigation {
+body.theme-highcontrast .s-navigation,
+body.theme-highcontrast .s-navigation ul {
   --_na-item-bg-hover: var(--black-500);
   --_na-item-fc-hover: var(--black-225);
 }
-body.theme-highcontrast .s-navigation a[href].s-navigation--item {
+body.theme-highcontrast .s-navigation a[href].s-navigation--item,
+body.theme-highcontrast .s-navigation ul a[href].s-navigation--item {
   text-decoration: underline;
 }
-.s-navigation.s-navigation__scroll {
+.s-navigation.s-navigation__scroll,
+.s-navigation.s-navigation ul__scroll,
+.s-navigation ul.s-navigation__scroll,
+.s-navigation ul.s-navigation ul__scroll {
   --_na-fw: nowrap;
   overflow-x: auto;
   scrollbar-color: var(--scrollbar) transparent;
 }
-.s-navigation.s-navigation__scroll::-webkit-scrollbar {
+.s-navigation.s-navigation__scroll::-webkit-scrollbar,
+.s-navigation.s-navigation ul__scroll::-webkit-scrollbar,
+.s-navigation ul.s-navigation__scroll::-webkit-scrollbar,
+.s-navigation ul.s-navigation ul__scroll::-webkit-scrollbar {
   width: calc(var(--su12) - var(--su2));
   height: calc(var(--su12) - var(--su2));
   background-color: transparent;
 }
-.s-navigation.s-navigation__scroll::-webkit-scrollbar-track {
+.s-navigation.s-navigation__scroll::-webkit-scrollbar-track,
+.s-navigation.s-navigation ul__scroll::-webkit-scrollbar-track,
+.s-navigation ul.s-navigation__scroll::-webkit-scrollbar-track,
+.s-navigation ul.s-navigation ul__scroll::-webkit-scrollbar-track {
   border-radius: calc(var(--su12) - var(--su2));
   background-color: transparent;
 }
-.s-navigation.s-navigation__scroll::-webkit-scrollbar-thumb {
+.s-navigation.s-navigation__scroll::-webkit-scrollbar-thumb,
+.s-navigation.s-navigation ul__scroll::-webkit-scrollbar-thumb,
+.s-navigation ul.s-navigation__scroll::-webkit-scrollbar-thumb,
+.s-navigation ul.s-navigation ul__scroll::-webkit-scrollbar-thumb {
   border-radius: calc(var(--su12) - var(--su2));
   background-color: var(--scrollbar);
 }
-.s-navigation.s-navigation__scroll::-webkit-scrollbar-corner {
+.s-navigation.s-navigation__scroll::-webkit-scrollbar-corner,
+.s-navigation.s-navigation ul__scroll::-webkit-scrollbar-corner,
+.s-navigation ul.s-navigation__scroll::-webkit-scrollbar-corner,
+.s-navigation ul.s-navigation ul__scroll::-webkit-scrollbar-corner {
   background-color: transparent;
   border-color: transparent;
 }
-.s-navigation.s-navigation__sm {
+.s-navigation.s-navigation__sm,
+.s-navigation.s-navigation ul__sm,
+.s-navigation ul.s-navigation__sm,
+.s-navigation ul.s-navigation ul__sm {
   --_na-item-fs: var(--fs-caption);
   --_na-item-p: var(--su6) var(--su4);
 }
-.s-navigation.s-navigation__vertical {
+.s-navigation.s-navigation__vertical,
+.s-navigation.s-navigation ul__vertical,
+.s-navigation ul.s-navigation__vertical,
+.s-navigation ul.s-navigation ul__vertical,
+.s-navigation.s-navigation__vertical ul,
+.s-navigation.s-navigation ul__vertical ul,
+.s-navigation ul.s-navigation__vertical ul,
+.s-navigation ul.s-navigation ul__vertical ul {
   --_na-fd: column;
   --_na-gap: 0;
   --_na-p: 0;
@@ -13495,16 +13522,40 @@ body.theme-highcontrast .s-navigation a[href].s-navigation--item {
   --_na-item-p: var(--su6) var(--su8);
   --_na-item-fc: var(--black-600);
 }
-.s-navigation.s-navigation__vertical .s-navigation--item.is-selected {
+.s-navigation.s-navigation__vertical .s-navigation--item.is-selected,
+.s-navigation.s-navigation ul__vertical .s-navigation--item.is-selected,
+.s-navigation ul.s-navigation__vertical .s-navigation--item.is-selected,
+.s-navigation ul.s-navigation ul__vertical .s-navigation--item.is-selected,
+.s-navigation.s-navigation__vertical ul .s-navigation--item.is-selected,
+.s-navigation.s-navigation ul__vertical ul .s-navigation--item.is-selected,
+.s-navigation ul.s-navigation__vertical ul .s-navigation--item.is-selected,
+.s-navigation ul.s-navigation ul__vertical ul .s-navigation--item.is-selected {
   --_na-item-bg: var(--black-150);
 }
-.s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--icon) {
+.s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--icon),
+.s-navigation.s-navigation ul__vertical .s-navigation--item:has(.s-navigation--icon),
+.s-navigation ul.s-navigation__vertical .s-navigation--item:has(.s-navigation--icon),
+.s-navigation ul.s-navigation ul__vertical .s-navigation--item:has(.s-navigation--icon),
+.s-navigation.s-navigation__vertical ul .s-navigation--item:has(.s-navigation--icon),
+.s-navigation.s-navigation ul__vertical ul .s-navigation--item:has(.s-navigation--icon),
+.s-navigation ul.s-navigation__vertical ul .s-navigation--item:has(.s-navigation--icon),
+.s-navigation ul.s-navigation ul__vertical ul .s-navigation--item:has(.s-navigation--icon) {
   --_na-item-p: calc(var(--su12) - var(--su1)) var(--su8);
 }
-.s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--avatar) {
+.s-navigation.s-navigation__vertical .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation.s-navigation ul__vertical .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation ul.s-navigation__vertical .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation ul.s-navigation ul__vertical .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation.s-navigation__vertical ul .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation.s-navigation ul__vertical ul .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation ul.s-navigation__vertical ul .s-navigation--item:has(.s-navigation--avatar),
+.s-navigation ul.s-navigation ul__vertical ul .s-navigation--item:has(.s-navigation--avatar) {
   --_na-item-p: var(--su12) var(--su8);
 }
-.s-navigation .s-navigation--item {
+.s-navigation .s-navigation--item,
+.s-navigation .s-navigation ul--item,
+.s-navigation ul .s-navigation--item,
+.s-navigation ul .s-navigation ul--item {
   background-color: var(--_na-item-bg);
   color: var(--_na-item-fc);
   font: unset;
@@ -13521,14 +13572,20 @@ body.theme-highcontrast .s-navigation a[href].s-navigation--item {
   text-decoration: none;
   user-select: auto;
 }
-.s-navigation .s-navigation--item.is-selected {
+.s-navigation .s-navigation--item.is-selected,
+.s-navigation .s-navigation ul--item.is-selected,
+.s-navigation ul .s-navigation--item.is-selected,
+.s-navigation ul .s-navigation ul--item.is-selected {
   --_na-item-bg: var(--_na-item-selected-bg);
   --_na-item-fc: var(--_na-item-selected-fc);
   --_na-item-fc-hover: var(--_na-item-fc);
   --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
   font-weight: bold;
 }
-.s-navigation .s-navigation--item.is-selected:before {
+.s-navigation .s-navigation--item.is-selected:before,
+.s-navigation .s-navigation ul--item.is-selected:before,
+.s-navigation ul .s-navigation--item.is-selected:before,
+.s-navigation ul .s-navigation ul--item.is-selected:before {
   content: "";
   position: absolute;
   bottom: 0;
@@ -13537,10 +13594,16 @@ body.theme-highcontrast .s-navigation a[href].s-navigation--item {
   height: var(--_na-item-selected-h);
   background-color: var(--_na-item-selected-fc);
 }
-body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
+body.theme-highcontrast .s-navigation .s-navigation--item.is-selected,
+body.theme-highcontrast .s-navigation .s-navigation ul--item.is-selected,
+body.theme-highcontrast .s-navigation ul .s-navigation--item.is-selected,
+body.theme-highcontrast .s-navigation ul .s-navigation ul--item.is-selected {
   --_na-item-fc-hover: var(--white);
 }
-.s-navigation .s-navigation--item__dropdown:after {
+.s-navigation .s-navigation--item__dropdown:after,
+.s-navigation .s-navigation ul--item__dropdown:after,
+.s-navigation ul .s-navigation--item__dropdown:after,
+.s-navigation ul .s-navigation ul--item__dropdown:after {
   mask-image: var(--_na-after-mask);
   mask-size: contain;
   mask-repeat: no-repeat;
@@ -13551,24 +13614,45 @@ body.theme-highcontrast .s-navigation .s-navigation--item.is-selected {
   margin-left: var(--su8);
 }
 .s-navigation .s-navigation--item:hover,
-.s-navigation .s-navigation--item:active {
+.s-navigation .s-navigation ul--item:hover,
+.s-navigation ul .s-navigation--item:hover,
+.s-navigation ul .s-navigation ul--item:hover,
+.s-navigation .s-navigation--item:active,
+.s-navigation .s-navigation ul--item:active,
+.s-navigation ul .s-navigation--item:active,
+.s-navigation ul .s-navigation ul--item:active {
   background-color: var(--_na-item-bg-hover);
   color: var(--_na-item-fc-hover);
 }
 body.theme-highcontrast .s-navigation .s-navigation--item:hover,
-body.theme-highcontrast .s-navigation .s-navigation--item:active {
+body.theme-highcontrast .s-navigation .s-navigation ul--item:hover,
+body.theme-highcontrast .s-navigation ul .s-navigation--item:hover,
+body.theme-highcontrast .s-navigation ul .s-navigation ul--item:hover,
+body.theme-highcontrast .s-navigation .s-navigation--item:active,
+body.theme-highcontrast .s-navigation .s-navigation ul--item:active,
+body.theme-highcontrast .s-navigation ul .s-navigation--item:active,
+body.theme-highcontrast .s-navigation ul .s-navigation ul--item:active {
   --_na-after-bg-color: var(--white);
 }
-.s-navigation .s-navigation--item:focus-visible {
+.s-navigation .s-navigation--item:focus-visible,
+.s-navigation .s-navigation ul--item:focus-visible,
+.s-navigation ul .s-navigation--item:focus-visible,
+.s-navigation ul .s-navigation ul--item:focus-visible {
   box-shadow: inset 0 0 0 var(--su2) var(--focus-theme), inset 0 0 0 var(--su4) var(--focus-neutral);
   outline: var(--su2) solid transparent !important;
 }
-.s-navigation .s-navigation--item-text {
+.s-navigation .s-navigation--item-text,
+.s-navigation .s-navigation ul--item-text,
+.s-navigation ul .s-navigation--item-text,
+.s-navigation ul .s-navigation ul--item-text {
   display: inline-flex;
   flex-direction: column;
   text-align: var(--_na-item-text-ta);
 }
-.s-navigation .s-navigation--item-text:before {
+.s-navigation .s-navigation--item-text:before,
+.s-navigation .s-navigation ul--item-text:before,
+.s-navigation ul .s-navigation--item-text:before,
+.s-navigation ul .s-navigation ul--item-text:before {
   content: attr(data-text);
   font-weight: bold;
   height: 0;
@@ -13576,23 +13660,37 @@ body.theme-highcontrast .s-navigation .s-navigation--item:active {
   user-select: none;
   visibility: hidden;
 }
-.s-navigation .s-navigation--title {
-  margin-top: var(--_na-title-mt);
+.s-navigation .s-navigation--title,
+.s-navigation .s-navigation ul--title,
+.s-navigation ul .s-navigation--title,
+.s-navigation ul .s-navigation ul--title {
+  margin-bottom: 0;
   font-size: var(--fs-fine);
+  font-weight: normal;
   color: var(--black-400);
   padding: calc(var(--su16) + var(--su2)) var(--su8);
 }
-.s-navigation .s-navigation--title:first-child {
-  --_na-title-mt: 0;
-}
-.s-navigation .s-navigation--title .s-btn {
+.s-navigation .s-navigation--title .s-btn,
+.s-navigation .s-navigation ul--title .s-btn,
+.s-navigation ul .s-navigation--title .s-btn,
+.s-navigation ul .s-navigation ul--title .s-btn {
   color: var(--black-400);
 }
-.s-navigation .s-navigation--icon {
+.s-navigation > li ~ li .s-navigation--title,
+.s-navigation ul > li ~ li .s-navigation--title {
+  margin-top: var(--su24);
+}
+.s-navigation .s-navigation--icon,
+.s-navigation .s-navigation ul--icon,
+.s-navigation ul .s-navigation--icon,
+.s-navigation ul .s-navigation ul--icon {
   color: inherit;
   margin-right: var(--su4);
 }
-.s-navigation .s-navigation--avatar {
+.s-navigation .s-navigation--avatar,
+.s-navigation .s-navigation ul--avatar,
+.s-navigation ul .s-navigation--avatar,
+.s-navigation ul .s-navigation ul--avatar {
   margin-right: var(--su8);
   background: transparent;
 }