@stackoverflow/stacks 1.6.4 → 1.6.6

package/lib/css/components/sidebar-widgets.less

@@ -1,15 +1,24 @@
 .s-sidebarwidget {
-    // CONSTANTS
-    --_sw-content-px: calc(var(--su16) - var(--su1)); // subtract 1px for border
-    --_sw-content-spacing-inner: var(--su12); // the spacing between two adjacent simple items
-    --_sw-content-spacing-outer: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
-
-    // VARIABLES
+    // COMPONENT-SPECIFIC CONSTANTS
+    @sw-content-px: calc(var(--su16) - var(--su1)); // subtract 1px for border
+    @sw-content-spacing-inner: var(--su12); // the spacing between two adjacent simple items
+    @sw-content-spacing-outer: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
+    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_sw-bc: var(--bc-medium);
     --_sw-after-bc: var(--_sw-bc);
     --_sw-content-bc: var(--bc-light);
     --_sw-header-bc: var(--_sw-content-bc);
 
+    // MODIFIERS
+    &:not(.s-anchors) {
+        a:not(.button):not(.post-tag):not(.s-btn):not(.s-sidebarwidget--action):not(.s-user-card--link) {
+            &,
+            &:visited {
+                color: var(--black-500);
+            }
+        }
+    }
+
     // VARIANTS
     .alternate-color(blue);
     .alternate-color(yellow);
@@ -25,64 +34,66 @@
     }
 
     & &--content {
+        &:not(table) {
+            &:not(.s-sidebarwidget__items),
+            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
+                display: flex;
+            }
+        }
+
         &.s-sidebarwidget__items {
             &,
             &.s-sidebarwidget__block-items .s-sidebarwidget--item {
                 display: block;
             }
 
-            padding: calc(var(--_sw-content-spacing-outer) - var(--_sw-content-spacing-inner)) var(--_sw-content-px); // the items themselves provide part of the spacing, so the content padding needs to account for that
+            padding: calc(@sw-content-spacing-outer - @sw-content-spacing-inner) @sw-content-px; // the items themselves provide part of the spacing, so the content padding needs to account for that
         }
 
         &:active {
             outline: none;
         }
 
-        &:not(table) {
-            &:not(.s-sidebarwidget__items),
-            &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
-                display: flex;
-            }
-        }
-
         border-top: var(--su-static1) solid var(--_sw-content-bc);
         margin: 0;
-        padding: var(--_sw-content-spacing-outer) var(--_sw-content-px);
+        padding: @sw-content-spacing-outer @sw-content-px;
     }
 
     & &--header {
-        &.s-sidebarwidget__expanding-control {
-            &:before {
-                border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
-                border-left-color: var(--bc-darker);
-                border-right-width: 0;
-                content: '';
-                float: left;
-                margin-right: var(--su12);
-                margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
-                transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-            }
+        &:first-child {
+            border-top-left-radius: var(--br-sm);
+            border-top-right-radius: var(--br-sm);
+        }
 
-            &[aria-expanded='true']:before {
-                transform: rotate(90deg);
-            }
+        &.s-sidebarwidget {
+            &__expanding-control {
+                &:before {
+                    border: calc(var(--su-static4) + var(--su-static1)) solid transparent;
+                    border-left-color: var(--bc-darker);
+                    border-right-width: 0;
+                    content: '';
+                    float: left;
+                    margin-right: var(--su12);
+                    margin-top: calc(calc(var(--lh-base) * 1em) / 2 - 5px); // 1.3 is our standard line height
+                    transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
+                }
 
-            cursor: pointer;
-        }
+                &[aria-expanded='true']:before {
+                    transform: rotate(90deg);
+                }
 
-        &.s-sidebarwidget__small-bold-text {
-            .s-sidebarwidget--action {
-                font-weight: normal;
-                line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
+                cursor: pointer;
             }
 
-            font-size: var(--fs-caption);
-            font-weight: bold;
-        }
+            &__small-bold-text {
+                .s-sidebarwidget--action {
+                    font-weight: normal;
+                    line-height: calc(var(--lh-base) * var(--fs-caption)); // line-height should be the same as in the outside element, so the header and action baselines line up
+                }
 
-        &:first-child {
-            border-top-left-radius: var(--br-sm);
-            border-top-right-radius: var(--br-sm);
+                font-size: var(--fs-caption);
+                font-weight: bold;
+            }
         }
 
         &:active {
@@ -95,7 +106,7 @@
         font-size: var(--fs-body2);
         font-weight: normal;
         margin: 0;
-        padding: var(--_sw-content-spacing-inner) var(--_sw-content-px);
+        padding: @sw-content-spacing-inner @sw-content-px;
     }
 
     & &--item {
@@ -108,16 +119,18 @@
                     border-left-style: solid;
                     border-left-width: calc(var(--su-static1) * 3); // 3px
                     content: '';
-                    height: calc(100% + var(--_sw-content-spacing-inner));
+                    height: calc(100% + @sw-content-spacing-inner);
                     left: 0;
-                    margin-left: calc(var(--_sw-content-px) * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
-                    margin-top: calc(var(--_sw-content-spacing-inner) / 2 * -1);
+                    margin-left: calc(@sw-content-px * -1 - var(--su-static1)); // the orange selection indicator overlaps with the widget border
+                    margin-top: calc(@sw-content-spacing-inner / 2 * -1);
                     position: absolute;
                 }
 
-                a,
-                a:visited { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
-                    color: inherit;
+                a { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
+                    &,
+                    &:visited {
+                        color: inherit;
+                    }
                 }
 
                 color: var(--black);
@@ -126,16 +139,18 @@
             }
         }
 
-        margin: var(--_sw-content-spacing-inner) 0;
+        margin: @sw-content-spacing-inner 0;
     }
 
     & &--subnav {
         li {
             &[aria-current="page"],
             &[aria-current="true"] {
-                a,
-                a:visited {
-                    color: inherit;
+                a {
+                    &,
+                    &:visited {
+                        color: inherit;
+                    }
                 }
 
                 #stacks-internals #bullet-arrow(var(--theme-primary-color));
@@ -166,15 +181,8 @@
         }
 
         border-collapse: separate;
-        border-spacing: var(--_sw-content-spacing-inner);
-        padding: calc(var(--_sw-content-spacing-outer) - var(--_sw-content-spacing-inner)) calc(var(--_sw-content-px) - var(--_sw-content-spacing-inner));
-    }
-
-    &:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(&--action):not(.s-user-card--link) {
-        &,
-        &:visited {
-            color: var(--black-500);
-        }
+        border-spacing: @sw-content-spacing-inner;
+        padding: calc(@sw-content-spacing-outer - @sw-content-spacing-inner) calc(@sw-content-px - @sw-content-spacing-inner);
     }
 
     &:before { // [1]
@@ -215,15 +223,15 @@
             --_sw-bc: var(~"--@{name}-700");
         });
 
+        &:after,
+        .s-sidebarwidget--content,
         .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-100");
-            color: var(--fc-medium);
+            border-color: var(--_sw-bc);
         }
 
-        .s-sidebarwidget--header,
-        .s-sidebarwidget--content,
-        &:after {
-            border-color: var(--_sw-bc);
+        .s-sidebarwidget--header {
+            background-color: var(~"--@{name}-100");
+            color: var(--fc-medium);
         }
 
         background-color: var(~"--@{name}-050");

package/lib/css/components/spinner.less

@@ -7,22 +7,25 @@
         --_sp-baw: var(--su-static1);
         --_sp-size: var(--su-static12);
     }
+
     &&__sm {
         --_sp-baw: var(--su-static2);
         --_sp-size: var(--su-static16);
     }
+
     &&__md {
         --_sp-baw: var(--su-static4);
         --_sp-size: var(--su-static32);
     }
+
     &&__lg {
         --_sp-baw: var(--su-static6);
         --_sp-size: var(--su-static48);
     }
 
     // CHILD ELEMENTS
-    &:before,
-    &:after {
+    &:after,
+    &:before {
         border: var(--_sp-baw) solid currentColor;
 
         border-radius: var(--br-circle);
@@ -31,10 +34,7 @@
         position: absolute;
         width: 100%;
     }
-    &:before {
-        opacity: 0.25;
-        transform: rotate(90deg); // [1]
-    }
+
     &:after {
         border-top-color: transparent;
         border-right-color: transparent;
@@ -42,6 +42,11 @@
         animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
     }
 
+    &:before {
+        opacity: 0.25;
+        transform: rotate(90deg); // [1]
+    }
+
     height: var(--_sp-size);
     width: var(--_sp-size);
 
@@ -53,8 +58,8 @@
     --_li-offset: 0.6em;
     --_il-size: 1.23076923em;
 
-    &:before,
-    &:after {
+    &:after,
+    &:before {
         border-radius: var(--br-circle);
         border-style: solid;
         border-width: var(--su-static2);
@@ -65,10 +70,7 @@
         top: calc(50% - var(--_li-offset));
         width: var(--_il-size);
     }
-    &:before {
-        border-color: currentColor;
-        opacity: 0.3;
-    }
+
     &:after {
         animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
         border-color: transparent;
@@ -77,6 +79,11 @@
         transform-origin: 50% 50% 1px; // [1]
     }
 
+    &:before {
+        border-color: currentColor;
+        opacity: 0.3;
+    }
+
     padding-left: 2.2em;
     position: relative;
 }
@@ -92,4 +99,5 @@
 }
 
 // [1] no-op to reduce wobble in Edge. More info: https://github.com/StackExchange/Stacks/blob/d2af26aca06c47e3f1f7a638e49b221a9e28e450/lib/css/components/_stacks-spinner.less#L16-L26
-// [2] When within a parent that has text-align: center, the spinner's entire container spins, not just the spinner. Let's force text-align left so things spin internally.
+
+// [2] When within a parent that has text-align: center, the spinner's entire container spins, not just the spinner. Let's force text-align left so things spin internally.

package/lib/css/components/tags.less

@@ -1,25 +1,24 @@
 .s-tag {
     --_ta-bc: var(--theme-tag-border-color);
+    --_ta-bc-hover: var(--theme-tag-hover-border-color);
+    --_ta-bc-selected: transparent;
     --_ta-bg: var(--theme-tag-background-color);
+    --_ta-bg-hover: var(--theme-tag-hover-background-color);
+    --_ta-bg-selected: var(--theme-secondary-200);
     --_ta-br: var(--br-sm);
     --_ta-fc: var(--theme-tag-color);
+    --_ta-fc-hover: var(--theme-tag-hover-color);
+    --_ta-fc-selected: var(--theme-secondary-900);
     --_ta-fs: var(--fs-caption);
     --_ta-lh: 1.846153846;
     --_ta-pl: var(--_ta-px);
     --_ta-pr: var(--_ta-px);
     --_ta-px: var(--su4);
-    // hover, focus, active
-    --_ta-bc-hover: var(--theme-tag-hover-border-color);
-    --_ta-bg-hover: var(--theme-tag-hover-background-color);
-    --_ta-fc-hover: var(--theme-tag-hover-color);
-    // .is-selected
-    --_ta-bc-selected: transparent;
-    --_ta-bg-selected: var(--theme-secondary-200);
-    --_ta-fc-selected: var(--theme-secondary-900);
 
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         --_ta-bc: currentColor;
+
         text-decoration: none;
     });
 
@@ -30,13 +29,13 @@
         a&:active,
         a&:hover,
         a&:focus {
-            background-color: var(--_ta-bg-selected);
-            border-color: var(--_ta-bc-selected);
-            color: var(--_ta-fc-selected);
-
             .highcontrast-mode({
                 border-color: currentColor;
             });
+
+            background-color: var(--_ta-bg-selected);
+            border-color: var(--_ta-bc-selected);
+            color: var(--_ta-fc-selected);
         }
     }
 
@@ -89,12 +88,15 @@
             -webkit-mask-size: contain;
             mask-size: contain;
         }
+
         position: relative;
     }
+
     &__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
     &&__ignored {
         --_ta-before-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
     }
+
     // moderator overrides other muted and required, required overrides muted
     &&__moderator {
         --_ta-bc: var(--red-200);
@@ -107,6 +109,7 @@
         --_ta-bg-selected: var(--red-200);
         --_ta-fc-selected: var(--red-800);
     }
+
     &&__muted:not(&__moderator):not(&__required) {
         --_ta-bc: transparent;
         --_ta-bg: var(--black-075);
@@ -120,6 +123,7 @@
 
         .highcontrast-mode({ --_ta-bc: currentColor; }); // Specificity has bit us, so we need this override
     }
+
     &&__required:not(&__moderator) {
         --_ta-bc: var(--bc-darker);
         --_ta-bg: var(--black-075);
@@ -160,6 +164,7 @@
         padding: var(--su1);
         width: var(--su-static16);
     }
+
     & &--sponsor { // The small sponsor favicon displayed within a tag
         img,
         .svg-icon {
@@ -179,13 +184,13 @@
         &:hover,
         &:focus,
         &:active {
-            background-color: var(--_ta-bg-hover);
-            border-color: var(--_ta-bc-hover);
-            color: var(--_ta-fc-hover);
-
             .highcontrast-mode({
                 border-color: currentColor;
             });
+
+            background-color: var(--_ta-bg-hover);
+            border-color: var(--_ta-bc-hover);
+            color: var(--_ta-fc-hover);
         }
     }
 

package/lib/css/components/toggle-switches.less

@@ -2,29 +2,34 @@
     --_ts-bg: var(--black-300);
     --_ts-bg-ps: left center;
     --_ts-bs-color: transparent;
-    // multiple
     --_ts-multiple-bg: unset;
     --_ts-multiple-fc: var(--black-500);
 
-    // TODO split single and multiple toggle into two seperate components
-    &&__multiple {
+    &&__multiple { // TODO split single and multiple toggle into two seperate components
         input[type="radio"] {
             &:checked {
                 + label {
                     &.s-toggle-switch--label-off {
                         --_ts-multiple-bg: var(--black-500);
                         --_ts-multiple-fc: var(--white);
+
                         .dark-mode({ --_ts-multiple-bg: var(--black-350); });
                     }
+
                     &:not(.s-toggle-switch--label-off) {
                         --_ts-multiple-bg: var(--green-400);
                         --_ts-multiple-fc: @white;
+
                         .highcontrast-mode({ --_ts-multiple-fc: var(--white); });
                     }
                 }
+
                 &:focus + label {
                     --_ts-bs-color: var(--focus-ring-success);
-                    &.s-toggle-switch--label-off { --_ts-bs-color: var(--focus-ring-muted); }
+
+                    &.s-toggle-switch--label-off {
+                        --_ts-bs-color: var(--focus-ring-muted);
+                    }
                 }
             }
 
@@ -33,6 +38,7 @@
             opacity: 0;
             position: absolute;
         }
+
         label {
             background-color: var(--_ts-multiple-bg);
             box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
@@ -67,10 +73,12 @@
                 --_ts-bs-color: var(--focus-ring-success);
             }
         }
+
         &:focus {
             --_ts-bs-color: var(--focus-ring-muted);
             outline: none;
         }
+
         &[disabled] {
             cursor: default;
         }

package/lib/css/components/uploader.less

@@ -1,12 +1,16 @@
 .s-uploader {
+    // COMPONENT-SPECIFIC CONSTANTS
+    --_up-bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); // Keeping this a custom property to save a few bytes
+    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
     --_up-bg: var(--black-025);
     --_up-bg-focus: var(--black-050);
     --_up-bg-bc: var(--black-150);
     --_up-focus-ring-color: var(--focus-ring);
-    --_up-bg-b-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23000000' stroke-width='8' stroke-dasharray='7%2c 22' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
 
     // CONTEXTUAL STYLES
-    .highcontrast-mode({ --_up-bg-bc-hc: var(--black-400); });
+    .highcontrast-mode({
+        --_up-bg-bc-hc: var(--black-400);
+    });
 
     // STATES
     &.has-error,
@@ -16,6 +20,7 @@
             color: var(--_up-link-fc);
         }
     }
+
     &.has-error {
         --_up-bg: var(--red-050);
         --_up-bg-focus: var(--red-100);
@@ -24,6 +29,7 @@
         --_up-focus-ring-color: var(--focus-ring-error);
         --_up-link-fc: var(--red-900);
     }
+
     &.has-success {
         --_up-bg: var(--green-025);
         --_up-bg-focus: var(--green-050);
@@ -32,6 +38,7 @@
         --_up-focus-ring-color: var(--focus-ring-success);
         --_up-link-fc: var(--green-900);
     }
+
     &.has-warning {
         --_up-bg: var(--yellow-050);
         --_up-bg-focus: var(--yellow-100);
@@ -40,26 +47,27 @@
         --_up-focus-ring-color: var(--focus-ring-warning);
         --_up-link-fc: var(--yellow-900);
     }
+
     &.is-active {
         --_up-bg: var(--black-050);
         --_up-bg-bc: var(--black-200);
     }
+
     &.is-disabled {
         opacity: var(--_o-disabled-static);
     }
 
-
     //  CHILD ELEMENTS
     & &--container {
         &:before { // Add the dashed border as an SVG background mask
             -webkit-mask-image: var(--_up-bg-b-image);
             mask-image: var(--_up-bg-b-image);
             background-color: var(--_up-bg-bc-hc-state, var(--_up-bg-bc-hc, var(--_up-bg-bc)));
-            content: '';
             border-radius: var(--br-lg);
+            content: '';
             display: block;
-            position: absolute;
             inset: 0;
+            position: absolute;
         }
 
         align-items: center;
@@ -73,6 +81,7 @@
         position: relative;
         text-align: center;
     }
+
     & &--input {
         &:focus:focus-visible + .s-uploader--container {
             background-color: var(--_up-bg-focus);
@@ -87,12 +96,16 @@
         width: 100%;
         z-index: var(--zi-selected);
     }
+
     & &--preview {
         max-width: 100%;
         pointer-events: none;
     }
+
     & &--preview-thumbnail {
-        .highcontrast-mode({ border: 1px solid var(--black); });
+        .highcontrast-mode({
+            border: var(--su-static1) solid var(--black);
+        });
 
         &:is(img) {
             object-fit: scale-down;
@@ -112,6 +125,7 @@
         text-overflow: ellipsis;
         white-space: nowrap;
     }
+
     & &--previews {
         &.has-multiple {
             display: block;
@@ -120,11 +134,6 @@
             width: 100%;
 
             .s-uploader--preview {
-                align-items: center;
-                display: flex;
-                padding: var(--su6) 0;
-                width: 100%;
-
                 &:after {
                     content: attr(data-filename);
                     display: block;
@@ -134,13 +143,14 @@
                     text-overflow: ellipsis;
                     white-space: nowrap;
                 }
+
+                align-items: center;
+                display: flex;
+                padding: var(--su6) 0;
+                width: 100%;
             }
-            .s-uploader--preview-thumbnail {
-                color: transparent;
-                height: var(--su-static32);
-                flex-shrink: 0;
-                width: var(--su-static32);
 
+            .s-uploader--preview-thumbnail {
                 &:is(img) {
                     object-fit: cover;
                 }
@@ -149,24 +159,32 @@
                     background-position: center;
                     background-repeat: no-repeat;
                 }
+
+                color: transparent;
+                height: var(--su-static32);
+                flex-shrink: 0;
+                width: var(--su-static32);
             }
         }
 
         max-width: 100%;
         text-align: left;
     }
+
     & &--previews-heading {
         color: var(--black-900);
         font-size: var(--fs-body2);
         font-weight: 600;
         padding-bottom: var(--su8);
     }
+
     & &--reset {
         position: absolute;
         right: var(--su8);
         top: var(--su8);
         z-index: var(--zi-active);
     }
+
     // This is for safari shadow DOM
     // see https://github.com/StackExchange/Stacks/pull/690#issuecomment-861028193
     input[type="file"]::file-selector-button {