@stackoverflow/stacks 1.6.5 → 1.6.7

package/lib/css/components/notices.less

@@ -1,5 +1,4 @@
 .construct-notice-component(@baseClass) {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_no-bc: var(--bc-medium);
     --_no-bg: var(--black-050);
     --_no-fc: var(--fc-medium);
@@ -11,13 +10,16 @@
         .dark-mode({
             --_no-bc: var(--_no-bg);
         });
+
         .highcontrast-mode({
             --_no-bc: currentColor;
         });
+
         .highcontrast-dark-mode({
             --_no-bc: currentColor;
         });
     }
+
     &__important {
         --_no-bc: var(--_no-bg);
         --_no-bg: var(--black-700);
@@ -42,6 +44,7 @@
                 --_no-bg: var(--red-200);
             });
         }
+
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--red-500);
@@ -52,12 +55,14 @@
                 --_no-bg: var(--red-400);
                 --_no-fc: var(--black-900);
             });
+
             .highcontrast-dark-mode({
                 --_no-bg: var(--red-500);
                 --_no-fc: var(--white);
             });
         }
     }
+
     &__info {
         --_no-bc: var(--theme-secondary-150);
         --_no-bg: var(--theme-secondary-050);
@@ -69,10 +74,12 @@
             .highcontrast-mode({
                 --_no-bg: var(--theme-secondary-100);
             });
+
             .highcontrast-dark-mode({
                 --_no-bg: var(--theme-secondary-100);
             });
         }
+
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--theme-secondary-400);
@@ -83,12 +90,14 @@
                 --_no-bg: var(--theme-secondary-300);
                 --_no-fc: var(--black-900);
             });
+
             .highcontrast-dark-mode({
                 --_no-bg: var(--theme-secondary-400);
                 --_no-fc: var(--white);
             });
         }
     }
+
     &__success {
         --_no-bc: var(--green-200);
         --_no-bg: var(--green-050);
@@ -100,6 +109,7 @@
                 --_no-bg: var(--green-200);
             });
         }
+
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--green-400);
@@ -111,12 +121,14 @@
                 --_no-bg: var(--green-500);
                 --_no-fc: var(--white);
             });
+
             .highcontrast-mode({
                 --_no-bg: var(--green-500);
                 --_no-fc: var(--white);
             });
         }
     }
+
     &__warning {
         --_no-bc: var(--yellow-300);
         --_no-bg: var(--yellow-050);
@@ -129,6 +141,7 @@
                 --_no-bg: var(--yellow-200);
             });
         }
+
         &.@{baseClass}__important {
             --_no-bc: var(--_no-bg);
             --_no-bg: var(--yellow-400);
@@ -140,6 +153,7 @@
                 --_no-bg: var(--yellow-600);
                 --_no-fc: var(--white);
             });
+
             .highcontrast-mode({
                 --_no-bg: var(--yellow-700);
                 --_no-fc: var(--white);
@@ -151,18 +165,21 @@
     code {
         background: var(--_no-code-bg, transparent);
     }
+
     & &--btn {
         // TODO: decouple .s-notice--btn from .s-btn
         &:not(:focus) {
             box-shadow: none; // This will prevent default .s-btn box-shadow from showing
         }
+
+        &:active {
+            background: var(--_no-btn-bg-active);
+        }
+
         &:focus,
         &:hover {
             background: var(--_no-btn-bg-focus);
         }
-        &:active {
-            background: var(--_no-btn-bg-active);
-        }
 
         color: inherit;
         padding: var(--su8);
@@ -189,17 +206,21 @@
         opacity: 0;
         visibility: hidden;
     }
+
     &[aria-hidden="false"] {
         --_no-x-offset: calc(var(--su48) + var(--su1)); // 49px
         opacity: 1;
         visibility: visible;
     }
+
     &.is-pinned { //  If you want to put the banner above the topbar
         z-index: calc(var(--zi-navigation-fixed) + 1);
     }
+
     &__body-pt {
         padding-top: 93px;
     }
+
     & &--container { // When we want to keep hero content capped
         margin: 0 auto;
         max-width: calc(var(--s-step) * 10);
@@ -207,13 +228,12 @@
         width: 100%;
     }
 
-    -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
-    transform: translate3d(0, var(--_no-x-offset), 0);
-
     border-width: var(--su-static1) 0;
     inset: 0 0 auto 0;
     padding: var(--su12);
     position: fixed;
+    -webkit-transform: translate3d(0, var(--_no-x-offset), 0);
+    transform: translate3d(0, var(--_no-x-offset), 0);
     width: 100%;
     z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
 }
@@ -232,6 +252,7 @@
     @media (prefers-reduced-motion) {
         transform: none !important;
     }
+
     &[aria-hidden="false"] {
         opacity: 1;
         transform: translate3d(0, 0, 0);

package/lib/css/components/pagination.less

@@ -16,14 +16,14 @@
             --_pa-item-bc: transparent;
             --_pa-item-fc: var(--white);
         }
-        &&__clear {
+        &.s-pagination--item__clear {
             --_pa-item-bg: transparent;
             --_pa-item-bc: transparent;
             --_pa-item-fc: inherit;
         }
         // override hover styles to match base styles
         &.is-selected,
-        &&__clear {
+        &.s-pagination--item__clear {
             --_pa-item-bc-hover: var(--_pa-item-bc);
             --_pa-item-bg-hover: var(--_pa-item-bg);
             --_pa-item-fc-hover: var(--_pa-item-fc);

package/lib/css/components/progress-bars.less

@@ -1,5 +1,7 @@
 .s-progress {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    // COMPONENT-SPECIFIC CONSTANTS
+    @pr-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
+    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_pr-bar: var(--br-sm);
     --_pr-bg: var(--black-200);
     --_pr-h: unset;
@@ -20,17 +22,21 @@
     &&__brand {
         --_pr-bar-bg: var(--orange-500);
     }
+
     &&__bronze {
         --_pr-bar-bg: var(--bronze-lighter);
         --_pr-label-bc: var(--bronze-darker);
     }
+
     &&__gold {
         --_pr-bar-bg: var(--gold-lighter);
         --_pr-label-bc: var(--gold-darker);
     }
+
     &&__info {
         --_pr-bar-bg: var(--blue-500);
     }
+
     &&__silver {
         --_pr-bar-bg: var(--silver-lighter);
         --_pr-label-bc: var(--silver-darker);
@@ -47,6 +53,7 @@
         --_pr-label-d: flex;
         --_pr-label-g: var(--su4);
     }
+
     &&__badge {
         --_pr-label-ai: center;
         --_pr-label-px: 1em;
@@ -58,23 +65,26 @@
             }
         }
     }
+
     &&__circular {
         --_pr-bg: transparent;
         --_pr-size: var(--su-static32);
         --s-progress-value: 0;
-        @s-progress-circle-circumference: (2 * pi() * 14); // 2πr, r = 14.
 
         &.s-progress {
             &__sm {
                 --_pr-size: var(--su-static24);
             }
+
             &__md {
                 --_pr-size: var(--su-static48);
             }
+
             &__lg {
                 --_pr-size: var(--su-static64);
             }
         }
+
         // TODO: consider renaming to `.s-progress--bar`
         .s-progress-bar { // It may necessitate wrapping element in a `&:not(&__circular)`
             circle {
@@ -84,8 +94,8 @@
                 }
                 &:nth-of-type(2) {
                     stroke: currentColor;
-                    stroke-dasharray: @s-progress-circle-circumference; // [1]
-                    stroke-dashoffset: calc(((1 - var(--s-progress-value)) * @s-progress-circle-circumference) * 1px); // Multiply everything by 1px since Safari and Firefox require these to be in pixels
+                    stroke-dasharray: @pr-circle-circumference; // [1]
+                    stroke-dashoffset: calc(((1 - var(--s-progress-value)) * @pr-circle-circumference) * 1px); // Multiply everything by 1px since Safari and Firefox require these to be in pixels
                 }
 
                 fill: none;
@@ -96,6 +106,7 @@
             transform: rotate(270deg); // Make everything originate from the top of the circle
         }
     }
+
     &&__privilege {
         --_pr-bar-bg: var(--green-050);
         --_pr-label-ai: center;
@@ -104,6 +115,7 @@
 
         .highcontrast-mode({ --_pr-bar-bg: var(--green-200); });
     }
+
     // TODO move `.s-progress__stepped` to entirely separate component (or consider deprecating)
     &&__stepped { // There's so little overlap with the base .s-progress that it doesn't make sense as a variant
         background: transparent;
@@ -116,6 +128,7 @@
                         left: 0;
                         right: 50%;
                     }
+
                     &__right {
                         left: 50%;
                         right: 0;
@@ -129,6 +142,7 @@
                 top: calc(var(--su-static8) + var(--su-static1));
                 z-index: var(--zi-base);
             }
+
             &--label { // Override a ton of properties
                 border: 0;
                 border-radius: 0;
@@ -142,27 +156,32 @@
                 width: auto;
                 z-index: var(--zi-base);
             }
+
             &--step {
                 &.is-active {
                     .s-progress {
                         &--bar.s-progress--bar__left {
                             background: var(--theme-secondary-400);
                         }
+
                         &--label {
                             color: var(--fc-dark);
                         }
+
                         &--stop {
                             background: var(--theme-secondary-400);
                             box-shadow: 0 0 0 var(--su-static6) var(--focus-ring);
                         }
                     }
                 }
+
                 &.is-complete {
                     .s-progress {
                         &--bar,
                         &--stop {
                             background: var(--theme-secondary-400);
                         }
+
                         &--label {
                             color: var(--fc-dark);
                         }
@@ -177,6 +196,7 @@
                 flex-shrink: 1;
                 position: relative;
             }
+
             &--stop {
                 .highcontrast-mode({
                     color: var(--white);
@@ -206,6 +226,7 @@
         min-width: var(--su-static6);
         position: relative;
     }
+
     & &--label {
         align-items: var(--_pr-label-ai);
         border: var(--su-static1) solid var(--_pr-label-bc);
@@ -224,6 +245,7 @@
         width: 100%;
         z-index: calc(var(--zi-base) + 2);
     }
+
     & &--segments { // DEPRECATED: AFAICT, this is unused in core (as well as it's intended parent variant class `.s-progress__segmented`)
         li {
             &:not(:first-child):not(:last-child):before {
@@ -231,7 +253,7 @@
                 content: "";
                 display: block;
                 height: 100%;
-                left: calc(var(--su-static) * -1); // -1px
+                left: calc(var(--su-static1) * -1); // -1px
                 position: absolute;
                 top: 0;
                 width: var(--su-static4);

package/lib/css/components/prose.less

@@ -1,4 +1,9 @@
 .s-prose {
+    // CONSTANTS
+    @pr-spacing: 1.1em;
+    @pr-spacing-condensed: calc(@pr-spacing / 2); // Reduce the base spacing by half in the context of lists, etc.
+    @pr-spoiler-transition: opacity 0.1s ease-in-out;
+    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_pr-fs: calc(var(--su-static16) - var(--su-static1)); // Force a font size that doesn’t change at the smallest breakpoint;
     --_pr-lh: 1.5;
     --_pr-blockquote-ml: 1em;
@@ -12,7 +17,7 @@
     --_pr-h5-fs: var(--fs-body2);
     --_pr-h6-fs: var(--fs-body1);
     --_pr-hr-bg: var(--black-100); // used for both background-color and color properties
-    --_pr-img-mb: var(--_pr-spacing);
+    --_pr-img-mb: @pr-spacing;
     --_pr-kbd-bc: var(--black-300);
     --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.15), inset 0 1px 0 0 @white;
     --_pr-spoiler-cursor: pointer;
@@ -20,13 +25,9 @@
     --_pr-soiler-after-o: unset;
     --_pr-soiler-child-o: 0;
     --_pr-soiler-child-visibility: hidden;
-    // CONSTANTS
-    --_pr-spacing: 1.1em;
-    --_pr-spacing-condensed: calc(var(--_pr-spacing) / 2); // Reduce the base spacing by half in the context of lists, etc.
-    --_pr-spoiler-transition: opacity 0.1s ease-in-out;
     // TEMP HOT FIX FOR .s-editor [1]
-    --s-prose-spacing: var(--_pr-spacing); // TODO remove once addressed in StackExchange/Stacks-Editor
-    --s-prose-spacing-condensed: var(--_pr-spacing-condensed); // TODO remove once addressed in StackExchange/Stacks-Editor
+    --s-prose-spacing: @pr-spacing; // TODO remove once addressed in StackExchange/Stacks-Editor
+    --s-prose-spacing-condensed: @pr-spacing-condensed; // TODO remove once addressed in StackExchange/Stacks-Editor
 
     // CONDITIONAL STYLES
     .dark-mode({
@@ -34,10 +35,12 @@
         --_pr-kbd-btc: @black-500;
         --_pr-kbd-bs: 0 var(--su-static1) var(--su-static1) hsla(210, 8%, 5%, 0.8);
     });
+
     .highcontrast-mode({
         --_pr-blockquote-before-bg: var(--black-600);
         --_pr-hr-bg: var(--black-500);
     });
+
     #stacks-internals #screen-sm({
         --_pr-spoiler-after-t: calc(var(--su8) + var(--su1)); // Adjust the position in the smallest breakpoint
     });
@@ -52,14 +55,17 @@
         --_pr-h4-fs: var(--fs-body3-relative);
         --_pr-h5-fs: var(--fs-body2-relative);
     }
+
     &&__xs {
         --_pr-fs: var(--fs-caption);
         --_pr-lh: var(--lh-sm);
     }
+
     &&__sm {
         --_pr-fs: var(--fs-body1);
         --_pr-lh: var(--lh-md);
     }
+
     &&__md {
         --_pr-fs: var(--fs-body3);
         --_pr-lh: var(--lh-xl);
@@ -67,16 +73,18 @@
 
     // CHILD ELEMENTS
     *:not(.s-code-block) {
+        > a code {
+            color: var(--theme-link-color); // When contained within a link, we want the code to be link-colored
+        }
+
         > code {
             padding: var(--su2) var(--su4);
             color: var(--black-800);
             background-color: var(--black-075);
             border-radius: var(--br-sm);
         }
-        > a code {
-            color: var(--theme-link-color); // When contained within a link, we want the code to be link-colored
-        }
     }
+
     // Last/only child
     blockquote,
     dl,
@@ -100,6 +108,7 @@
             margin-bottom: 0;
         }
     }
+
     // Headings
     blockquote,
     dd,
@@ -127,6 +136,7 @@
             margin-top: 1.6667em;
         }
     }
+
     h1,
     h2,
     h3,
@@ -138,25 +148,31 @@
         font-weight: bold !important;
         margin-bottom: 0.5em;
     }
+
     h1 {
         font-size: var(--_pr-h1-fs);
         margin-bottom: 0.6em;
     }
+
     h2 {
         font-size: var(--_pr-h2-fs);
         margin-bottom: 0.7em;
     }
+
     h3 {
         font-size: var(--_pr-h3-fs);
         margin-bottom: 0.74em;
     }
+
     h4 {
         font-size: var(--_pr-h4-fs);
         margin-bottom: 1em;
     }
+
     h5 {
         font-size: var(--_pr-h5-fs);
     }
+
     h6 {
         font-size: var(--_pr-h6-fs);
     }
@@ -166,12 +182,14 @@
     q {
         quotes: none;
     }
+
     dd,
     dl,
     .s-table-container,
     .s-link-preview {
-        margin-bottom: var(--_pr-spacing); // TODO: make sure this overrides margin set on dd
+        margin-bottom: @pr-spacing; // TODO: make sure this overrides margin set on dd
     }
+
     ol,
     ul {
         blockquote,
@@ -186,6 +204,7 @@
                 margin-bottom: 0;
             }
         }
+
         blockquote,
         dd,
         dl,
@@ -195,28 +214,33 @@
         p,
         table,
         ul {
-            margin-bottom: var(--_pr-spacing-condensed); // Within lists, we shouldn't have so much spacing  in between block-level elements.
+            margin-bottom: @pr-spacing-condensed; // Within lists, we shouldn't have so much spacing  in between block-level elements.
         }
+
         li {
             &:last-child {
                 margin-bottom: 0;
             }
+
             ol,
             ul {
-                margin-top: var(--_pr-spacing-condensed);
+                margin-top: @pr-spacing-condensed;
             }
         }
+
         pre {
-            margin-bottom: calc(var(--_pr-spacing-condensed) + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment
+            margin-bottom: calc(@pr-spacing-condensed + 0.1em); // Add some more spacing on the bottom for a little extra optical alignment
         }
 
-        margin-bottom: var(--_pr-spacing);
+        margin-bottom:@pr-spacing;
         margin-top: 0;
     }
+
     sub,
     sup {
         --_pr-code-fs: 90%;
     }
+
     blockquote {
         --_pr-img-mb: 0;
 
@@ -232,23 +256,27 @@
             top: 0;
             width: var(--su4);
         }
+
         *:last-child {
             margin-bottom: 0;
         }
+
         blockquote {
             --_pr-blockquote-ml: 0; // We don't need the intial indentation on nested blockquotes
         }
 
         color: var(--black-600);
-        margin: var(--_pr-blockquote-mt) 1em var(--_pr-spacing) var(--_pr-blockquote-ml);
+        margin: var(--_pr-blockquote-mt) 1em @pr-spacing var(--_pr-blockquote-ml);
         padding: 0.8em 0.8em 0.8em 1em;
         position: relative;
     }
+
     code {
         font-size: var(--_pr-code-fs);
 
         font-family: var(--ff-mono);
     }
+
     dd {
         &:last-child {
             margin-bottom: 0;
@@ -257,26 +285,31 @@
         margin: 0;
         padding: 0;
     }
+
     dl {
         margin-top: 0;
     }
+
     dt {
         font-weight: bold;
     }
+
     hr {
         background-color: var(--_pr-hr-bg);
         color: var(--_pr-hr-bg); // value set for background-color reused for color intentionally
 
         border: 0;
         height: var(--su-static1);
-        margin-bottom: var(--_pr-spacing);
+        margin-bottom: @pr-spacing;
     }
+
     img {
         margin-bottom: var(--_pr-img-mb);
 
         max-width: 100%;
         vertical-align: bottom;
     }
+
     kbd {
         border: var(--su-static1) solid var(--_pr-kbd-bc);
         border-top-color: var(--_pr-kbd-btc, var(--_pr-kbd-bc));
@@ -294,8 +327,9 @@
         padding: 0.1em 0.6em;
         text-shadow: 0 var(--su-static1) 0 var(--white);
     }
+
     li {
-        --_pr-blockquote-mt: var(--_pr-spacing-condensed);
+        --_pr-blockquote-mt: @pr-spacing-condensed;
         --_pr-img-mb: 0;
 
         pre {
@@ -304,11 +338,13 @@
 
         overflow-wrap: break-word;
     }
+
     p {
         --_pr-img-mb: 0;
 
-        margin-bottom: var(--_pr-spacing);
+        margin-bottom: @pr-spacing;
     }
+
     pre {
         &:not(.s-code-block) {
             code { // Reset the code element when contained within a <pre>
@@ -330,19 +366,21 @@
         }
 
         margin-top: 0;
-        margin-bottom: calc(var(--_pr-spacing) + 0.4em); // Increase this spacing for better optical alignment
+        margin-bottom: calc(@pr-spacing + 0.4em); // Increase this spacing for better optical alignment
         overflow-wrap: normal;
     }
+
     .soundcloud-embed iframe {
         height: 116px;
         max-width: 640px;
         width: 100%;
     }
+
     .spoiler {
         &:after {
             opacity: var(--_pr-soiler-after-o);
             top: var(--_pr-spoiler-after-t);
-            transition: var(--_pr-spoiler-transition);
+            transition: @pr-spoiler-transition;
 
             background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' fill='rgb(132, 141, 149)' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M9 17A8 8 0 119 1a8 8 0 010 16zM8 4v6h2V4H8zm0 8v2h2v-2H8z'%3E%3C/path%3E%3C/svg%3E");
             background-position: center right;
@@ -355,15 +393,17 @@
             position: absolute;
             right: 1em;
         }
+
         &.is-visible {
             --_pr-spoiler-cursor: auto;
             --_pr-soiler-after-o: 0;
             --_pr-soiler-child-o: 1;
             --_pr-soiler-child-visibility: visible;
         }
+
         > * {
             opacity: var(--_pr-soiler-child-o);
-            transition: var(--_pr-spoiler-transition);
+            transition: @pr-spoiler-transition;
             visibility: var(--_pr-soiler-child-visibility); // hidden elements don't respond to mouse events, but still retain their space
         }
 
@@ -374,6 +414,7 @@
         color: var(--black-800);
         min-height: var(--su-static48); // TODO: Let's find a solution that doesn't have a magic number
     }
+
     .youtube-embed { // [2]
         > div {
             iframe {
@@ -381,6 +422,7 @@
                 position: absolute;
                 width: 100%;
             }
+
             height: 35px;
             padding-bottom: 56.25%;
             position: relative;