@stackoverflow/stacks 1.4.2 → 1.6.0

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

@@ -0,0 +1,251 @@
+.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
+    --_sw-bc: var(--bc-medium);
+    --_sw-after-bc: var(--_sw-bc);
+    --_sw-content-bc: var(--bc-light);
+    --_sw-header-bc: var(--_sw-content-bc);
+
+    // VARIANTS
+    .alternate-color(blue);
+    .alternate-color(yellow);
+    .alternate-color(green);
+
+    // CHILD ELEMENTS
+    & &--action {
+        color: var(--blue);
+        float: right;
+        font-size: var(--fs-fine);
+        line-height: calc(var(--fs-body1) * 1.5); // 19.5px - line-height should be the same as in the outside element, so the header and action baselines line up
+        margin: 0 0 var(--su4) var(--su8);
+    }
+
+    & &--content {
+        &.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
+        }
+
+        &: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);
+    }
+
+    & &--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);
+            }
+
+            &[aria-expanded='true']:before {
+                transform: rotate(90deg);
+            }
+
+            cursor: pointer;
+        }
+
+        &.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
+            }
+
+            font-size: var(--fs-caption);
+            font-weight: bold;
+        }
+
+        &:first-child {
+            border-top-left-radius: var(--br-sm);
+            border-top-right-radius: var(--br-sm);
+        }
+
+        &:active {
+            outline: none;
+        }
+
+        background: var(--black-025);
+        border-top: var(--su-static1) solid var(--_sw-header-bc);
+        color: var(--black-600);
+        font-size: var(--fs-body2);
+        font-weight: normal;
+        margin: 0;
+        padding: var(--_sw-content-spacing-inner) var(--_sw-content-px);
+    }
+
+    & &--item {
+        &,
+        & > :first-child {
+            &[aria-current="true"],
+            &[aria-current="page"] {
+                &:before {
+                    border-left-color: var(--theme-primary-color);
+                    border-left-style: solid;
+                    border-left-width: calc(var(--su-static1) * 3); // 3px
+                    content: '';
+                    height: calc(100% + var(--_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);
+                    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;
+                }
+
+                color: var(--black);
+                font-weight: bold;
+                position: relative;
+            }
+        }
+
+        margin: var(--_sw-content-spacing-inner) 0;
+    }
+
+    & &--subnav {
+        li {
+            &[aria-current="page"],
+            &[aria-current="true"] {
+                a,
+                a:visited {
+                    color: inherit;
+                }
+
+                #stacks-internals #bullet-arrow(var(--theme-primary-color));
+                color: var(--black);
+                font-weight: bold;
+            }
+
+            #stacks-internals #bullet-arrow(var(--black-100));
+            background-position: 0 calc((1.2em - 10px) / 2);
+            background-repeat: no-repeat;
+            background-size: auto 10px;
+            margin-top: var(--su-static12);
+            padding-left: var(--su-static16);
+        }
+
+        list-style-type: none;
+        margin-left: var(--su8);
+        padding-left: 0;
+    }
+
+    & table&--content&__items {
+        tr.s-sidebarwidget--item {
+            td {
+                padding: 0;
+            }
+
+            display: table-row;
+        }
+
+        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);
+        }
+    }
+
+    &:before { // [1]
+        content: '';
+        display: block;
+        margin-top: calc(var(--su-static1) * -1); // -1px
+    }
+
+    &:after { // [2]
+        border: var(--su-static1) solid var(--_sw-after-bc);
+        border-radius: var(--br-sm);
+        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%); // [3]
+        content: '';
+        // TODO: this makes no sense. revisit.
+        height: calc(2px + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
+        left: calc(var(--su-static1) * -1); // -1px
+        pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
+        position: absolute;
+        right: calc(var(--su-static1) * -1); // -1px
+        top: calc(var(--su-static1) * -1); // -1px
+    }
+
+    background-color: var(--white);
+    border: var(--su-static1) solid var(--_sw-bc);
+    border-radius: var(--br-sm);
+    box-shadow: var(--bs-sm);
+    font-size: var(--fs-body1);
+    position: relative; // so that it's the positioning parent for the :after
+}
+
+
+// COLOR ALTERNATIVES
+.alternate-color(@name) {
+    &.s-sidebarwidget__@{name} {
+        --_sw-bc: var(~"--@{name}-200");
+
+        .highcontrast-mode({
+            --_sw-bc: var(~"--@{name}-700");
+        });
+
+        .s-sidebarwidget--header {
+            background-color: var(~"--@{name}-100");
+            color: var(--fc-medium);
+        }
+
+        .s-sidebarwidget--header,
+        .s-sidebarwidget--content,
+        &:after {
+            border-color: var(--_sw-bc);
+        }
+
+        background-color: var(~"--@{name}-050");
+        border-color: var(--_sw-bc);
+    }
+}
+
+// [1] We must support things like collapsible (in particular invisble) elements, wrapper elements,
+// etc. Therefore every .-content and .-header must stand on its own; we cannot rely on things
+// like :first-child, because the *first* child may not be the first *visible* child, and it may
+// also be the :first-child of some wrapper. This is why every .-header and .-content has a
+// border-top. But because you shouldn't see the first visible item's or header's top border
+// (the widget itself provides for that border), we shift everything up by one pixel with the following pseudo-element.
+
+// [2] The top item's divider line sits above the .s-sidebarwidget's top border.
+//  We could fix this by using overflow: hidden, but that would constrain users of
+// .s-sidebarwidget to never have things like tooltips, autocompletes or the like that reach
+// outside the widget boundaries.
+// What we do instead is re-create the widget's top border in an absolutely positioned :after,
+// which sits above our item's top border. Technically, a tiny corner of the item's border will
+// still be visible, but at its highest point, this corner has a height of 0.27 pixels. And for
+// this sub-pixel issues, we're talking about different shades of gray. So we can live with that.
+
+// [3] In order to perfectly recreate the inner corner shape, our pseudo-element needs
+// the border on all sides. But we can only do that if we're able to hide the bottom part.

package/lib/css/components/spinner.less

@@ -1,36 +1,39 @@
-//
-//  STACK OVERFLOW
-//  SPINNER
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//
-//  ============================================================================
-//  $   SPINNER BASE STYLE
-//  ----------------------------------------------------------------------------
-
 .s-spinner {
-    position: relative;
-    width: var(--su-static24);
-    height: var(--su-static24);
-    text-align: left; // 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.
+    --_sp-baw: calc(var(--su-static1) * 3); // 3px
+    --_sp-size: var(--su-static24);
+
+    // MODIFIERS
+    &&__xs {
+        --_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 {
+        border: var(--_sp-baw) solid currentColor;
+
+        border-radius: var(--br-circle);
         content: '';
+        height: 100%;
         position: absolute;
         width: 100%;
-        height: 100%;
-        border: 3px solid currentColor;
-        border-radius: var(--br-circle);
     }
     &:before {
         opacity: 0.25;
-        transform: rotate(90deg); // (*)
+        transform: rotate(90deg); // [1]
     }
     &:after {
         border-top-color: transparent;
@@ -39,99 +42,43 @@
         animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
     }
 
-    &.s-spinner__xs {
-        width: var(--su-static12);
-        height: var(--su-static12);
-        &:before,
-        &:after {
-            border-width: 1px;
-        }
-    }
-
-    &.s-spinner__sm {
-        width: var(--su-static16);
-        height: var(--su-static16);
-        &:before,
-        &:after {
-            border-width: var(--su-static2);
-        }
-    }
-
-    &.s-spinner__md {
-        width: var(--su-static32);
-        height: var(--su-static32);
-        &:before,
-        &:after {
-            border-width: var(--su-static4);
-        }
-    }
-
-    &.s-spinner__lg {
-        width: var(--su-static48);
-        height: var(--su-static48);
-        &:before,
-        &:after {
-            border-width: var(--su-static6);
-        }
-    }
+    height: var(--_sp-size);
+    width: var(--_sp-size);
 
-    // Cross-browser fixes. These are all practically no-ops, so we could just specify them
-    // without browser hacks, but that would be punishing non-broken browsers with extra
-    // unnecessary compositing work.
-    &,
-    &:before,
-    &:after {
-        // Safari: At least at 1dpp resolution, Safari crops the transformed elements
-        // too aggressively, leading to a very visible flat edge part of the circle.
-        // This invisible box shadow increases the area that the effects work on and thus
-        // makes the circle round again.
-        //
-        // Targeting only Safari:
-        // https://browserstrangeness.bitbucket.io/css_hacks.html#safari
-        @media not all and (min-resolution: 0.001dpcm) {
-            @supports (-webkit-appearance:none) and (stroke-color:transparent) {
-                box-shadow: 0 0 0 2px transparent;
-            }
-        }
-    }
+    position: relative;
+    text-align: left; // [2]
 }
 
 .is-loading {
-    position: relative;
-    padding-left: 2.2em;
+    --_li-offset: 0.6em;
+    --_il-size: 1.23076923em;
 
-    &:before {
+    &:before,
+    &:after {
+        border-radius: var(--br-circle);
+        border-style: solid;
+        border-width: var(--su-static2);
         content: "";
+        height: var(--_il-size);
+        left: var(--_li-offset);
         position: absolute;
-        opacity: 0.3;
-        left: 0.6em;
-        top: calc(50% - 0.6em);
-        width: 1.23076923em;
-        height: 1.23076923em;
-        border-width: 2px;
-        border-style: solid;
+        top: calc(50% - var(--_li-offset));
+        width: var(--_il-size);
+    }
+    &:before {
         border-color: currentColor;
-        border-radius: var(--br-circle);
+        opacity: 0.3;
     }
-
     &:after {
-        content: "";
-        position: absolute;
-        left: 0.6em;
-        top: calc(50% - 0.6em);
-        width: 1.23076923em;
-        height: 1.23076923em;
-        border-width: 2px;
-        border-style: solid;
+        animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
         border-color: transparent;
         border-left-color: currentColor;
-        border-radius: var(--br-circle);
-        animation: s-spinner-rotate 0.9s infinite
-            cubic-bezier(0.5, 0.1, 0.5, 0.9);
-        // see _stacks-spinner.less for an explanation of the following two
-        filter: invert(0); // (*)
-        transform-origin: 50% 50% 1px; // (*)
+        filter: invert(0); // [1]
+        transform-origin: 50% 50% 1px; // [1]
     }
+
+    padding-left: 2.2em;
+    position: relative;
 }
 
 // Keyframes
@@ -142,4 +89,7 @@
     to {
         transform: rotate(360deg);
     }
-}
+}
+
+// [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.

package/lib/css/components/tables.less

@@ -1,27 +1,3 @@
-//
-//  STACK OVERFLOW
-//  TABLES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  TABLE OF CONTENTS
-//  • CONTAINER
-//  • BASE TABLE STYLE
-//  • TABLE ALIGNMENT
-//    - Vertical alignment
-//    - Text alignment
-//  • LAYOUT VARIATIONS
-//    - Stripes
-//    - Spacing
-//    - Borders
-//    - Backgrounds
-//    - Totals row
-//    - Sortable tables
-//  • TABLE CELL SIZES
-//
-
 //  ============================================================================
 //  $    CONTAINER
 //  Give tables an optional container for responsive scrolling

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

@@ -1,145 +1,94 @@
-//
-//  STACK OVERFLOW
-//  TOGGLE SWITCHES
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
 .s-toggle-switch {
-    position: relative;
-
-    input[type="checkbox"] {
-        // Hide the checkbox underneath the .s-toggle-switch--indicator.
-        margin: 0; // guard against production adding 5px of margin to these
-        opacity: 0;
-        position: absolute;
-        left: 0;
-        top: 0;
-        width: 44px;
-        height: 24px;
-        cursor: pointer;
-
-        + .s-toggle-switch--indicator {
-            pointer-events: none;
-            outline: 0;
-            display: block;
-            width: 44px;
-            height: 24px;
-            position: relative;
-            background: var(--black-300);
-            border-radius: 1000px;
-            padding: 3px;
-            transition: left 0.2s ease;
-
-            &:after,
-            &:before {
-                position: relative;
-                display: block;
-                content: "";
-                width: 50%;
-                height: 100%;
-            }
-
-            &:after {
-                left: 0;
-                border-radius: 50%;
-                background: @white;
-                transition: left 0.1s ease;
-
-                .highcontrast-mode({
-                    background: var(--white);
-                });
-            }
-
-            &:before {
-                display: none;
-            }
-        }
-
-        &:checked + .s-toggle-switch--indicator {
-            background: var(--green-400);
-
-            &:after {
-                left: 50%;
+    --_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 {
+        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); }
+                }
             }
-        }
-
-        &:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-        }
-
-        &:checked:focus + .s-toggle-switch--indicator {
-            box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
-        }
-    }
 
-    &.s-toggle-switch__multiple {
-        display: flex;
-        align-items: stretch;
-
-        //  First hide the radio buttons
-        input[type="radio"] {
-            position: absolute;
             left: -999em;
-            opacity: 0;
             margin: 0;
+            opacity: 0;
+            position: absolute;
         }
-
-        //  Next modifications to option cells
         label {
-            //  Style the base label
-            width: 100%;
-            margin: 0;
-            padding: 0.5em 0.7em;
+            background-color: var(--_ts-multiple-bg);
+            box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
+            color: var(--_ts-multiple-fc);
+
             border-radius: 1000px;
-            color: var(--black-500);
+            cursor: pointer;
             font-size: var(--fs-body1);
             font-weight: 400;
             line-height: 1;
+            margin: 0;
+            padding: 0.5em 0.7em;
             text-align: center;
             white-space: nowrap;
-            cursor: pointer;
-
+            width: 100%;
             -webkit-touch-callout: none;
             -webkit-user-select: none;
             user-select: none;
         }
 
-        //  If the input is selected, style its label accordingly.
-        input[type="radio"]:checked {
-            + label {
-                &.s-toggle-switch--label-off {
-                    background-color: var(--black-500);
-                    color: var(--white);
-
-                    .dark-mode({
-                        background-color: var(--black-350);
-                        // color: var(--black);
-                    });
-                }
+        align-items: stretch;
+        display: flex;
+    }
 
-                // Color activated options green
-                &:not(.s-toggle-switch--label-off) {
-                    background-color: var(--green-400);
-                    color: @white;
+    input[type="checkbox"], // TODO DEPRECATED: drop support for nested input[type="checkbox"]
+    input[type="checkbox"]& {
+        &:checked {
+            --_ts-bg: var(--green-400);
+            --_ts-bg-ps: right center;
 
-                    .highcontrast-mode({
-                        color: var(--white);
-                    });
-                }
+            &:focus {
+                --_ts-bs-color: var(--focus-ring-success);
             }
+        }
+        &:focus {
+            --_ts-bs-color: var(--focus-ring-muted);
+            outline: none;
+        }
+        &[disabled] {
+            cursor: default;
+        }
 
-            &:focus + label.s-toggle-switch--label-off {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-muted);
-            }
+        background-color: var(--_ts-bg);
+        background-position: var(--_ts-bg-ps);
+        box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
 
-            &:focus + label:not(.s-toggle-switch--label-off) {
-                box-shadow: 0 0 0 var(--su-static4) var(--focus-ring-success);
-            }
-        }
+        appearance: none;
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); // The white dot within the toggle
+        background-size: contain;
+        background-repeat: no-repeat;
+        border-radius: 1000px;
+        cursor: pointer;
+        height: var(--su-static24);
+        margin: 0; // guard against production adding 5px of margin to these
+        transition: background-position 0.2s ease;
+        vertical-align: top;
+        width: calc(var(--su-static48) - var(--su-static4));
     }
 }