@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/atomic/width-height.less

@@ -1,194 +0,0 @@
-//
-//  STACK OVERFLOW
-//  WIDTH & HEIGHT
-//
-//  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/
-//
-//  • WIDTH
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-WIDTH
-//  • MIN-WIDTH
-//  • HEIGHT
-//      • PERCENTAGE
-//      • STATIC
-//  • MAX-HEIGHT
-//  • MIN-HEIGHT
-//
-//  ============================================================================
-//  $  WIDTH
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.w0 { width: 0 !important; }
-.w10 { width: 10% !important; }
-.w20 { width: 20% !important; }
-#stacks-internals #responsify('.w25', { width: 25% !important; });
-.w30 { width: 30% !important; }
-#stacks-internals #responsify('.w33', { width: 33.33333% !important; });
-.w40 { width: 40% !important; }
-#stacks-internals #responsify('.w50', { width: 50% !important; });
-.w60 { width: 60% !important; }
-#stacks-internals #responsify('.w66', { width: 66.66667% !important; });
-.w70 { width: 70% !important; }
-#stacks-internals #responsify('.w75', { width: 75% !important; });
-.w80 { width: 80% !important; }
-.w90 { width: 90% !important; }
-#stacks-internals #responsify('.w100', { width: 100% !important; });
-#stacks-internals #responsify('.w-auto', { width: auto !important; });
-#stacks-internals #responsify('.w-screen', { width: 100vw !important; });
-
-//  $$  STATIC
-.ws0,
-.w0 { width: 0 !important; }
-.ws1 { width: var(--s-step) !important; }
-.ws2 { width: calc(var(--s-step) * 2) !important; }
-.ws3 { width: calc(var(--s-step) * 3) !important; }
-.ws4 { width: calc(var(--s-step) * 4) !important; }
-.ws5 { width: calc(var(--s-step) * 5) !important; }
-.ws6 { width: calc(var(--s-step) * 6) !important; }
-.ws7 { width: calc(var(--s-step) * 7) !important; }
-.ws8 { width: calc(var(--s-step) * 8) !important; }
-.ws9 { width: calc(var(--s-step) * 9) !important; }
-.ws10 { width: calc(var(--s-step) * 10) !important; }
-.ws11 { width: calc(var(--s-step) * 11) !important; }
-.ws12 { width: var(--s-full) !important; }
-
-//  $$  SPACING UNITS
-.w2 { width: var(--su-static2) !important; }
-.w4 { width: var(--su-static4) !important; }
-.w6 { width: var(--su-static6) !important; }
-.w8 { width: var(--su-static8) !important; }
-.w12 { width: var(--su-static12) !important; }
-.w16 { width: var(--su-static16) !important; }
-.w24 { width: var(--su-static24) !important; }
-.w32 { width: var(--su-static32) !important; }
-.w48 { width: var(--su-static48) !important; }
-.w64 { width: var(--su-static64) !important; }
-.w96 { width: var(--su-static96) !important; }
-.w128 { width: var(--su-static128) !important; }
-
-//  ============================================================================
-//  $  MAX-WIDTH
-//  ----------------------------------------------------------------------------
-.wmx0 { max-width: 0 !important; }
-.wmx1 { max-width: var(--s-step) !important; }
-.wmx2 { max-width: calc(var(--s-step) * 2) !important; }
-.wmx25 { max-width: 25% !important; }
-.wmx3 { max-width: calc(var(--s-step) * 3) !important; }
-.wmx4 { max-width: calc(var(--s-step) * 4) !important; }
-.wmx5 { max-width: calc(var(--s-step) * 5) !important; }
-.wmx50 { max-width: 50% !important; }
-.wmx6 { max-width: calc(var(--s-step) * 6) !important; }
-.wmx7 { max-width: calc(var(--s-step) * 7) !important; }
-.wmx75 { max-width: 75% !important; }
-.wmx8 { max-width: calc(var(--s-step) * 8) !important; }
-.wmx9 { max-width: calc(var(--s-step) * 9) !important; }
-.wmx10 { max-width: calc(var(--s-step) * 10) !important; }
-.wmx11 { max-width: calc(var(--s-step) * 11) !important; }
-.wmx12 { max-width: var(--s-full) !important; }
-#stacks-internals #responsify('.wmx100', { max-width: 100% !important; });
-#stacks-internals #responsify('.wmx-initial', { max-width: initial !important; });
-#stacks-internals #responsify('.wmx-screen', { max-width: 100vw !important; });
-
-//  ============================================================================
-//  $  MIN-WIDTH
-//  ----------------------------------------------------------------------------
-.wmn0 { min-width: 0 !important; }
-.wmn1 { min-width: var(--s-step) !important; }
-.wmn2 { min-width: calc(var(--s-step) * 2) !important; }
-.wmn25 { min-width: 25% !important; }
-.wmn3 { min-width: calc(var(--s-step) * 3) !important; }
-.wmn4 { min-width: calc(var(--s-step) * 4) !important; }
-.wmn5 { min-width: calc(var(--s-step) * 5) !important; }
-.wmn50 { min-width: 50% !important; }
-.wmn6 { min-width: calc(var(--s-step) * 6) !important; }
-.wmn7 { min-width: calc(var(--s-step) * 7) !important; }
-.wmn75 { min-width: 75% !important; }
-.wmn8 { min-width: calc(var(--s-step) * 8) !important; }
-.wmn9 { min-width: calc(var(--s-step) * 9) !important; }
-.wmn10 { min-width: calc(var(--s-step) * 10) !important; }
-.wmn11 { min-width: calc(var(--s-step) * 11) !important; }
-.wmn12 { min-width: var(--s-full) !important; }
-#stacks-internals #responsify('.wmn100', { min-width: 100% !important; });
-#stacks-internals #responsify('.wmn-initial', { min-width: initial !important; });
-
-//  ============================================================================
-//  $  HEIGHT
-//  ----------------------------------------------------------------------------
-//  $$  PERCENTAGE AND VIEWPORT UNITS
-.h0 { height: 0 !important; }
-#stacks-internals #responsify('.h100', { height: 100% !important; });
-#stacks-internals #responsify('.h-auto', { height: auto !important; });
-#stacks-internals #responsify('.h-screen', { height: 100vh !important; });
-
-//  $$  STATIC
-.hs0,
-.h0 { height: 0 !important; }
-.hs1 { height: var(--s-step) !important; }
-.hs2 { height: calc(var(--s-step) * 2) !important; }
-.hs3 { height: calc(var(--s-step) * 3) !important; }
-.hs4 { height: calc(var(--s-step) * 4) !important; }
-.hs5 { height: calc(var(--s-step) * 5) !important; }
-.hs6 { height: calc(var(--s-step) * 6) !important; }
-.hs7 { height: calc(var(--s-step) * 7) !important; }
-.hs8 { height: calc(var(--s-step) * 8) !important; }
-.hs9 { height: calc(var(--s-step) * 9) !important; }
-.hs10 { height: calc(var(--s-step) * 10) !important; }
-.hs11 { height: calc(var(--s-step) * 11) !important; }
-.hs12 { height: var(--s-full) !important; }
-
-//  $$  SPACING UNITS
-.h2 { height: var(--su-static2) !important; }
-.h4 { height: var(--su-static4) !important; }
-.h6 { height: var(--su-static6) !important; }
-.h8 { height: var(--su-static8) !important; }
-.h12 { height: var(--su-static12) !important; }
-.h16 { height: var(--su-static16) !important; }
-.h24 { height: var(--su-static24) !important; }
-.h32 { height: var(--su-static32) !important; }
-.h48 { height: var(--su-static48) !important; }
-.h64 { height: var(--su-static64) !important; }
-.h96 { height: var(--su-static96) !important; }
-.h128 { height: var(--su-static128) !important; }
-
-//  ============================================================================
-//  $  MAX-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmx0 { max-height: 0 !important; }
-.hmx1 { max-height: var(--s-step) !important; }
-.hmx2 { max-height: calc(var(--s-step) * 2) !important; }
-.hmx3 { max-height: calc(var(--s-step) * 3) !important; }
-.hmx4 { max-height: calc(var(--s-step) * 4) !important; }
-.hmx5 { max-height: calc(var(--s-step) * 5) !important; }
-.hmx6 { max-height: calc(var(--s-step) * 6) !important; }
-.hmx7 { max-height: calc(var(--s-step) * 7) !important; }
-.hmx8 { max-height: calc(var(--s-step) * 8) !important; }
-.hmx9 { max-height: calc(var(--s-step) * 9) !important; }
-.hmx10 { max-height: calc(var(--s-step) * 10) !important; }
-.hmx11 { max-height: calc(var(--s-step) * 11) !important; }
-.hmx12 { max-height: var(--s-full) !important; }
-#stacks-internals #responsify('.hmx100', { max-height: 100% !important; });
-#stacks-internals #responsify('.hmx-initial', { max-height: initial !important; });
-#stacks-internals #responsify('.hmx-screen', { max-height: 100vh !important; });
-
-//  ============================================================================
-//  $  MIN-HEIGHT
-//  ----------------------------------------------------------------------------
-.hmn0 { min-height: 0 !important; }
-.hmn1 { min-height: var(--s-step) !important; }
-.hmn2 { min-height: calc(var(--s-step) * 2) !important; }
-.hmn3 { min-height: calc(var(--s-step) * 3) !important; }
-.hmn4 { min-height: calc(var(--s-step) * 4) !important; }
-.hmn5 { min-height: calc(var(--s-step) * 5) !important; }
-.hmn6 { min-height: calc(var(--s-step) * 6) !important; }
-.hmn7 { min-height: calc(var(--s-step) * 7) !important; }
-.hmn8 { min-height: calc(var(--s-step) * 8) !important; }
-.hmn9 { min-height: calc(var(--s-step) * 9) !important; }
-.hmn10 { min-height: calc(var(--s-step) * 10) !important; }
-.hmn11 { min-height: calc(var(--s-step) * 11) !important; }
-.hmn12 { min-height: var(--s-full) !important; }
-#stacks-internals #responsify('.hmn100', { min-height: 100% !important; });
-#stacks-internals #responsify('.hmn-initial', { min-height: initial !important; });
-#stacks-internals #responsify('.hmn-screen', { min-height: 100vh !important; });

package/lib/components/block-link/block-link.less

@@ -1,82 +0,0 @@
-a.s-block-link,
-.s-block-link {
-    --_bl-bs-color: var(--theme-primary);
-    --_bl-bg: transparent;
-    --_bl-fc: var(--black-500);
-    --_bl-fc-hover: var(--black-600);
-    --_bl-fc-visited: var(--_bl-fc);
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        &.is-selected {
-            --_bl-bg: var(--black-100);
-        }
-    });
-
-    // STATES
-    &.is-selected {
-        --_bl-bg: var(--black-150);
-        --_bl-fc: var(--black-600);
-
-        font-weight: bold;
-    }
-
-    // MODIFIERS
-    &&__left,
-    &&__right {
-        &.is-selected {
-            &:not(:focus-visible):not(.focus-inset) {
-                box-shadow: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--_bl-bs-color);
-            }
-        }
-    }
-
-    &&__right {
-        &.is-selected {
-            --_li-block-bs-offset-x: calc(var(--su-static1) - var(--su-static4)); // -3px
-        }
-    }
-
-    // VARIANTS
-    &&__danger {
-        --_bl-fc: var(--red-400);
-        --_bl-fc-hover: var(--red-500);
-        --_bl-fc-visited: var(--red-500);
-    }
-
-    &:active,
-    &:hover {
-        &,
-        &:visited {
-            color: var(--_bl-fc-hover);
-        }
-    }
-
-    &:visited {
-        color: var(--_bl-fc-visited);
-    }
-
-    &:focus-visible {
-        .focus-styles(true);
-    }
-
-    &:focus-visible,
-    &.focus-inset {
-        border-radius: var(--br-md);
-    }    
-
-    background-color: var(--_bl-bg); // [1]
-    color: var(--_bl-fc);
-
-    border-radius: 0; // [1]
-    border: none; // [1]
-    cursor: pointer; // [1]
-    display: block;
-    font-family: inherit; // [1]
-    line-height: inherit; // [1]
-    padding: var(--su6) var(--su12);
-    text-align: left; // [1]
-    width: 100%;
-}
-
-//  [1] Normalize for when applying to a button

package/lib/components/breadcrumbs/breadcrumbs.less

@@ -1,41 +0,0 @@
-.s-breadcrumbs {
-    --_br-divider-px: var(--su4);
-    --_br-link-fc: var(--fc-light);
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        --_br-divider-px: var(--su2);
-    });
-
-    // CHILD ELEMENTS
-    & &--divider {
-        .highcontrast-mode({
-            color: var(--fc-light);
-        });
-
-        margin-left: var(--_br-divider-px);
-        margin-right: var(--_br-divider-px);
-    }
-
-    & &--item {
-        align-items: center;
-        display: flex;
-        flex-wrap: nowrap;
-        margin-bottom: var(--su2);
-        margin-top: var(--su2);
-    }
-
-    & &--link {
-        color: var(--_br-link-fc);
-
-        &:hover {
-            --_br-link-fc: var(--fc-medium);
-        }
-    }
-
-    align-items: flex-start;
-    color: var(--black-300);
-    display: flex;
-    flex-wrap: wrap;
-    font-size: var(--fs-caption);
-}

package/lib/components/button-group/button-group.less

@@ -1,81 +0,0 @@
-.s-btn-group {
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        .s-btn {
-            --_bu-px: 0.4em;
-
-            &.s-btn__dropdown {
-                padding-right: 1.2em;
-
-                &:after {
-                    right: var(--_bu-px);
-                }
-            }
-        }
-    }, @force-selector: true);
-
-    // CHILD ELEMENTS
-    form {
-        display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
-    }
-
-    //  --_bu-py values set below to ensure btn-group height matches same-sized button height
-    // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
-    .s-btn {
-        --_bu-br: var(--br-md);
-        --_bu-bc-hover: transparent;
-        --_bu-px: calc(var(--su12) - var(--su1)); // 11px
-        --_bu-py: calc(var(--su6) + 0.65px); // 6.65px
-
-        &.s-btn__xs {
-            --_bu-px: calc(var(--su8) - var(--su1)); // 7px
-            --_bu-py: calc(var(--su2) + 0.9px); // 2.9px
-        }
-
-        &.s-btn__sm {
-            --_bu-px: calc(var(--su8) + var(--su1)); // 9px
-            --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px)); // 5.85px
-        }
-
-        &.s-btn__md {
-            --_bu-px: var(--su12);
-            --_bu-py: calc(var(--su8) + 0.15px); // 8.15px
-        }
-
-        &.is-selected,
-        &--radio:checked + .s-btn {
-            font-weight: bold;
-        }
-
-        .s-btn--badge {
-            // set negative margins so button height isn't affect by badge
-            margin-bottom: -100%;
-            margin-top: -100%;
-            font-weight: normal;
-        }
-
-        & .s-btn--text {
-            &:before {
-                content: attr(data-text);
-                font-weight: bold;
-                height: 0;
-                pointer-events: none;
-                user-select: none;
-                visibility: hidden;
-            }
-
-            display: inline-flex;
-            flex-direction: column;
-        }
-
-        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
-    }
-
-    // STATIC COMPONENT STYLES
-    border: var(--su-static1) solid var(--black-300);
-    border-radius: var(--br-md);
-    display: inline-flex;
-    flex-wrap: wrap;
-    padding: calc(var(--su-static4) - var(--su-static1));
-}

package/lib/components/card/card.less

@@ -1,37 +0,0 @@
-.s-card {
-    --_ca-bc: var(--bc-medium);
-
-    // CONTEXTUAL STYLES
-    a& {
-        text-decoration: none !important;
-    }
-
-    // VARIANTS
-    &&__muted {
-        --_ca-bc: var(--bc-light);
-
-        //  Dim only the first child card content
-        > * {
-            opacity: 0.65;
-
-            .dark-mode({
-                opacity: 0.7;
-            });
-
-            .highcontrast-mode({
-                opacity: 0.75;
-            });
-        }
-    }
-
-    // CHILD ELEMENTS
-    > :last-child {
-        margin-bottom: 0;
-    }
-
-    border: var(--su-static1) solid var(--_ca-bc);
-
-    background-color: var(--white);
-    border-radius: var(--br-md);
-    padding: var(--su12);
-}

package/lib/components/check-control/check-control.less

@@ -1,17 +0,0 @@
-.s-check-control { // TODO would _love_ to use .s-check instead, with no class on the input itself
-    --_cc-ai: center;
-
-    // CONTEXTUAL STYLES
-    .s-check-group & {
-        --_cc-ai: flex-start; // manually align the checkboxes and radios to the top of the group
-    }
-
-    // CHILD ELEMENTS
-    .s-label {
-        font-weight: normal;
-    }
-
-    align-items: var(--_cc-ai);
-    display: flex;
-    gap: var(--su8);
-}

package/lib/components/check-group/check-group.less

@@ -1,19 +0,0 @@
-.s-check-group {
-    --_cg-fd: column;
-
-    // MODIFIERS
-    &&__horizontal {
-        --_cg-fd: row;
-    }
-
-    // CHILD ELEMENTS
-    // TODO HACK? <legend> isn't respecting gap...
-    legend.s-label {
-        margin-bottom: var(--su8);
-    }
-
-    flex-direction: var(--_cg-fd);
-
-    display: flex;
-    gap: var(--su8);
-}

package/lib/components/expandable/expandable.less

@@ -1,119 +0,0 @@
-.s-expandable { // [1]
-    // COMPONENT-SPECIFIC CONSTANTS
-    @ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    @ex-min-expected-height: 10px;
-    @ex-transition-duration: 100ms;
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_ex-after-h: 10px;
-    --_ex-after-hmx: 0;
-    --_ex-after-transition:
-        height @ex-transition-duration linear,
-        max-height 0s @ex-transition-duration linear;
-    --_ex-content-hmx: 1000000px;
-    --_ex-content-mb: 0;
-    --_ex-content-o: unset;
-    --_ex-content-transform: unset;
-    --_ex-content-transition:
-        margin-bottom @ex-transition-duration cubic-bezier(0, 0, 0, 1),
-        transform @ex-transition-duration cubic-bezier(1, 0, 1, 1),
-        opacity @ex-transition-duration cubic-bezier(1, 0, 1, 1);
-    --_ex-content-v: unset;
-
-    &:not(.is-expanded) {
-        --_ex-after-h: 0;
-        --_ex-after-hmx: @ex-min-expected-height;
-        --_ex-after-transition: height @ex-min-expected-height linear;
-        --_ex-content-hmx: 0;
-        --_ex-content-mb: -1500px;
-        --_ex-content-o: 0;
-        --_ex-content-transform: scaleY(0);
-        --_ex-content-transition:
-            margin-bottom @ex-transition-duration cubic-bezier(1, 0, 1, 1),
-            visibility 0s @ex-transition-duration,
-            max-height 0s @ex-transition-duration,
-            transform @ex-transition-duration cubic-bezier(0, 1, 1, 1),
-            opacity @ex-transition-duration cubic-bezier(0, 1, 1, 1);
-        --_ex-content-v: hidden;
-
-        & .s-expandable--content {
-            @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
-                --_ex-content-o: 0;
-                --_ex-content-transform: none;
-            }
-        }
-
-        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-        overflow: hidden;
-        transition: none;
-    }
-
-    &:after {
-        height: var(--_ex-after-h);
-        max-height: var(--_ex-after-hmx);
-        transition: var(--_ex-after-transition);
-
-        -ms-flex-preferred-size: 0;
-        content: '';
-        flex-basis: 0;
-    }
-
-    & &--content {
-        max-height: var(--_ex-content-hmx);
-        margin-bottom: var(--_ex-content-mb);
-        opacity: var(--_ex-content-o);
-        -webkit-transform: var(--_ex-content-transform);
-        transform: var(--_ex-content-transform);
-        visibility: var(--_ex-content-v);
-
-        -ms-flex-preferred-size: 100%;
-        flex-basis: 100%;
-        -webkit-transform-origin: 0 0;
-        transform-origin: 0 0;
-        transition: var(--_ex-content-transition);
-    }
-
-    align-items: flex-start; // see comment above
-    display: flex;
-    -webkit-clip-path: @ex-clip-path;
-    clip-path: @ex-clip-path;
-    transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
-}
-
-// [1] see http://stackoverflow.com/a/43965099 for how this works:
-
-// Notes on the clip-path stuff: What we would really like is overflow: hidden during the transition,
-// but not when the element is expanded. Unfortunately, although the CSS spec provides for it, there's
-// no browser support yet for transitioning non-interpolatable properties, and therefore we cannot say
-// "change overflow to visible *after* the transition".
-//
-// So we use clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%), which is essentially the same
-// as overflow: hidden, but unlike overflow, clip-path is interpolatable -- but only if the opposite state
-// is also a polygon, and has the same vertice count. So our version of overflow: visible is a rectangle
-// of 2x2 million pixels, which should be enough for everybody (TM).
-//
-// At the time of writing, clip-path works in Chrome, Firefox Beta, and Safari (with vendor prefix).
-//
-// In browsers that do not support this yet, we have to have another way to prevent the expandable content
-// from being visible below the bottom edge during the transition, and the best I could come up with is
-// transitioning to scaleY(0) with a timing function that's faster than the height-reducing transitions.
-// This does kinda look like a deliberate effect, even more so if we also transition to transparency
-// (which we therefore do), so I feel it's an okay fallback.
-//
-// We still set overflow to hidden in the collapsed state (which also applies to the collapsing transition),
-// we just can't do that for the expanding transition.
-//
-// A major drawback of clip-path is that even though the content is clipped (not visible), it will still
-// contribute to the document height. This caused a jumping around of the scrollbar (and possibly even
-// of the viewport) when the expandable was at the bottom of the page, because once the negative bottom
-// margin of the -expandable-group exceeds the actual height, any additional pixels were added on to the
-// bottom. The fix is to set the -expandable-group's flex alignment to flex-start, which forces the
-// (no longer visible) element itself to remain at the top, thereby forcing the excess pixels to be added
-// above the top, not below the bottom. And because extending content above the document top will not do
-// anything to the document height, there is no jumping during the transition.
-// see "@ex-transition-duration"
-
-// Per the answer referenced above, the component can only guarantee smooth transitions if above a minimum
-// height and can only guarantee the element will be hidden is below a maximimum height.
-// The minimum height has been set at 10px because that's below the height of a single line of text in an s-description.
-// see "@ex-min-expected-height" and "--_ex-content-mb"