@stackoverflow/stacks 1.4.2 → 1.5.0

package/lib/css/atomic/flex.less

@@ -54,6 +54,8 @@
             #stacks-internals #flex-builder-helpers .create-flex-count-cols(@num, (@count + 1));
         }
 
+        // DEPRECATED - START
+        //
         //  --  FLEX GUTTERS
         //  ============================================================================
         //      We need two mixins to properly generate flex gutters:
@@ -151,6 +153,38 @@
             //      widths for the new gutters.
             #stacks-internals #flex-builder-helpers .flex-fixed-item-spacing(@spacing, @flex-cols);
         }
+        //
+        // DEPRECATED - END
+
+        //  -- FLEX GAP
+        //  ------------------------------------------------------------------------
+        //  [1] FIXED WIDTH ITEMS
+        //      This makes the fixed width items to account for gaps.
+        //
+        //  [2] UNIFORM CHILD FLEX ITEMS
+        //      This class allows you to uniformly state the width of `.flex--item`
+        //      divs within a `.d-flex` element. In particular we adjust the flex-basis
+        //      and max-width here to account for gaps.
+        //  ------------------------------------------------------------------------
+        .flex-fixed-item-spacing-gap(@spacing, @num, @count: 1) when (@count =< @num) {
+            @itemWidth: (@count * 100% / @num);
+            @gapRatio: ((@num - @count) / @num);
+
+            > .flex--item@{count},                                  // [1]
+            &.flex__allitems@{count} > .d-flex,                     // [2]
+            &.flex__allitems@{count} > .flex--item {                // [2]
+                flex-basis: calc(~"@{itemWidth} - (@{spacing} * @{gapRatio})");
+            }
+
+            #stacks-internals #flex-builder-helpers .flex-fixed-item-spacing-gap(@spacing, @num, (@count + 1));
+        }
+
+
+        .gap-spacing(@spacing) {
+            #stacks-internals #flex-builder-settings();
+
+            #stacks-internals #flex-builder-helpers .flex-fixed-item-spacing-gap(@spacing, @flex-cols);
+        }
     }
 }
 
@@ -194,9 +228,24 @@
 }
 //  ============================================================================
 //  $   FLEX SPACING
-//      Insert spaces or gutters in between flex items
+//      Insert spaces or gaps in between flex items
 //  ----------------------------------------------------------------------------
-// TODO: Make this play nice with spacing units… or yeet this in the age of gap
+.g0, .gx0, .gy0 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su0)); }
+.g1, .gx1, .gy1 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su1)); }
+.g2, .gx2, .gy2 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su2)); }
+.g4, .gx4, .gy4 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su4)); }
+.g6, .gx6, .gy6 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su6)); }
+.g8, .gx8, .gy8 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su8)); }
+.g12, .gx12, .gy12 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su12)); }
+.g16, .gx16, .gy16 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su16)); }
+.g24, .gx24, .gy24 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su24)); }
+.g32, .gx32, .gy32 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su32)); }
+.g48, .gx48, .gy48 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su48)); }
+.g64, .gx64, .gy64 { #stacks-internals #flex-builder-helpers .gap-spacing(var(--su64)); }
+
+
+// DEPRECATED - START
+//
 .gs2 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su2)); }
 .gs4 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su4)); }
 .gs6 { #stacks-internals #flex-builder-helpers .gutter-spacing(var(--su6)); }
@@ -227,6 +276,8 @@
         margin-left: 0;
     }
 }
+//
+// DEPRECATED - END
 
 
 //  ============================================================================

package/lib/css/components/activity-indicator.less

@@ -8,15 +8,15 @@
 
     // VARIANTS
     &&__success {
-        --_ai-bg-color: var(--green-500);
+        --_ai-bg: var(--green-500);
         --_ai-focus-ring: var(--focus-ring-success);
     }
     &&__warning {
-        --_ai-bg-color: var(--yellow-600);
+        --_ai-bg: var(--yellow-600);
         --_ai-focus-ring: var(--focus-ring-warning);
     }
     &&__danger {
-        --_ai-bg-color: var(--red-500);
+        --_ai-bg: var(--red-500);
         --_ai-focus-ring: var(--focus-ring-error);
     }
 

package/lib/css/components/badges.less

@@ -13,17 +13,17 @@
     // CONTEXTUAL STYLES
     .highcontrast-mode({
         // Badge counts
-        &__gold,
-        &__silver,
-        &__bronze,
+        &&__gold,
+        &&__silver,
+        &&__bronze,
         // Number counts
-        &__rep,
-        &__rep-down,
-        &__votes,
+        &&__rep,
+        &&__rep-down,
+        &&__votes,
         // Users
-        &__admin,
-        &__moderator,
-        &__staff {
+        &&__admin,
+        &&__moderator,
+        &&__staff {
             --_ba-bc: currentColor;
         }
     });

package/lib/css/components/expandable.less

@@ -29,76 +29,86 @@
 // (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.
-
-@stacks-internals-s-expandable-transition-duration: 100ms;
+// see custom property "--_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.
-@stacks-internal-s-expandable-min-expected-height: 10px;
-@stacks-internal-s-expandable-max-expected-height: 1500px;
+// see custom properties "--_ex-min-expected-height" and "--_ex-content-mb"
 
 .s-expandable {
-    display: flex;
-    -webkit-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    align-items: flex-start; // see comment above
-    transition: clip-path 0s @stacks-internals-s-expandable-transition-duration, -webkit-clip-path 0s @stacks-internals-s-expandable-transition-duration;
+    // CONSTANTS
+    --_ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
+    --_ex-min-expected-height: 10px;
+    --_ex-transition-duration: 100ms;
+    // VARIABLES
+    --_ex-after-h: 10px;
+    --_ex-after-hmx: 0;
+    --_ex-after-transition:
+        height var(--_ex-transition-duration) linear,
+        max-height 0s var(--_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 var(--_ex-transition-duration) cubic-bezier(0, 0, 0, 1),
+        transform var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1),
+        opacity var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1);
 
+    &:not(.is-expanded) {
+        --_ex-after-h: 0;
+        --_ex-after-hmx: var(--_ex-min-expected-height);
+        --_ex-after-transition: height var(--_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 var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1),
+            visibility 0s var(--_ex-transition-duration),
+            max-height 0s var(--_ex-transition-duration),
+            transform var(--_ex-transition-duration) cubic-bezier(0, 1, 1, 1),
+            opacity var(--_ex-transition-duration) cubic-bezier(0, 1, 1, 1);
+
+        & .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: 1;
+                --_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 {
-        content: '';
+        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;
-        height: @stacks-internal-s-expandable-min-expected-height;
-        max-height: 0;
-        transition:
-            height @stacks-internals-s-expandable-transition-duration linear,
-            max-height 0s @stacks-internals-s-expandable-transition-duration linear;
     }
-}
-
-.s-expandable--content {
-    -ms-flex-preferred-size: 100%;
-    flex-basis: 100%;
-    max-height: 1000000px;
-    margin-bottom: 0;
-    -webkit-transform-origin: 0 0;
-    transform-origin: 0 0;
-    transition:
-        margin-bottom @stacks-internals-s-expandable-transition-duration cubic-bezier(0, 0, 0, 1),
-        transform @stacks-internals-s-expandable-transition-duration cubic-bezier(1, 0, 1, 1),
-        opacity @stacks-internals-s-expandable-transition-duration cubic-bezier(1, 0, 1, 1);
-}
+    & &--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);
 
-.s-expandable:not(.is-expanded) {
-    overflow: hidden;
-    -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-    transition: none;
-
-    .s-expandable--content {
-        visibility: hidden;
-        max-height: 0;
-        margin-bottom: -@stacks-internal-s-expandable-max-expected-height;
-        opacity: 0;
-        -webkit-transform: scaleY(0);
-        transform: scaleY(0);
-        transition:
-            margin-bottom @stacks-internals-s-expandable-transition-duration cubic-bezier(1, 0, 1, 1),
-            visibility 0s @stacks-internals-s-expandable-transition-duration,
-            max-height 0s @stacks-internals-s-expandable-transition-duration,
-            transform @stacks-internals-s-expandable-transition-duration cubic-bezier(0, 1, 1, 1),
-            opacity @stacks-internals-s-expandable-transition-duration cubic-bezier(0, 1, 1, 1);
-        @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%))) {
-            opacity: 1;
-            -webkit-transform: none;
-            transform: none;
-        }
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        -webkit-transform-origin: 0 0;
+        transform-origin: 0 0;
+        transition: var(--_ex-content-transition);
     }
 
-    &:after {
-        height: 0;
-        max-height: @stacks-internal-s-expandable-min-expected-height;
-        transition: height @stacks-internals-s-expandable-transition-duration linear;
-    }
-}
+    align-items: flex-start; // see comment above
+    display: flex;
+    -webkit-clip-path: var(--_ex-clip-path);
+    clip-path: var(--_ex-clip-path);
+    transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
+  }

package/lib/css/components/modals.less

@@ -1,133 +1,108 @@
-//
-//  STACK OVERFLOW
-//  MODALS
-//
-//  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
-//  • LAYOUT TRANSITIONS
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
 .s-modal {
-    display: flex;
-    visibility: hidden;
-    position: fixed;
-    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
-
-    // This fills the entire viewport without having to worry about size.
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    align-items: center;
-    justify-content: center;
-    background-color: fade(@black-900, 50%); // Background remains fixed
-    opacity: 0;
-    backface-visibility: hidden;
-    transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms; // Transition out
-    will-change: visibility, z-index, opacity; // Not supported in Edge
-
-    &[aria-hidden="false"],
-    &[aria-hidden="false"] .s-modal--dialog {
-        visibility: visible;
-        z-index: var(--zi-modals);
-        opacity: 1;
-        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-        transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--te-smooth) 10ms, transform 100ms var(--te-smooth) 10ms; // Transition in
+    --_mo-bg: fade(@black-900, 50%); // Background remains fixed
+    --_mo-hmx: unset;
+    --_mo-wmx: unset;
+    --_mo-close-t: var(--su8);
+    --_mo-dialog-bg: var(--white);
+    --_mo-dialog-pt: var(--su24);
+    --_mo-header-fc: var(--fc-dark);
+
+    // CONTEXTUAL STYLES
+    &[aria-hidden="false"] {
+        &,
+        .s-modal--dialog {
+            opacity: 1;
+            transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
+            transition: opacity 100ms var(--te-smooth) 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms var(--te-smooth) 10ms, transform 100ms var(--te-smooth) 10ms; // Transition in
+            visibility: visible;
+            z-index: var(--zi-modals);
+        }
     }
-}
 
-.s-modal--dialog {
-    overflow-y: auto;
-    visibility: hidden;
-    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
-    max-width: 600px;
-    max-height: 100%;
-    padding: var(--su24);
-    border-radius: var(--br-lg);
-    background-color: var(--white);
-    box-shadow: var(--bs-lg);
-    opacity: 0;
-    backface-visibility: hidden;
-    transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
-
-    .dark-mode({
-        background-color: var(--black-100);
-    });
-
-    @scrollbar-styles();
+    // MODIFIERS
+    &&__celebration {
+        --_mo-close-t: var(--su48);
+        --_mo-dialog-pt: var(--su64);
 
-    transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s; // Transition out
-    will-change: visibility, z-index, opacity, transform; // Not supported by Edge
-
-    .s-modal[aria-hidden="false"] & {
-        transform: translate3d(0, 0, 0) scale3d(1, 1, 1); // Transition in
+        .s-modal--dialog {
+            .bg-confetti-animated;
+        }
     }
-}
-
-//  [1] To override .s-btn class attributes
-.s-modal--close {
-    position: absolute !important; // [1]
-    top: var(--su8);
-    right: var(--su8);
-    padding: var(--su12) !important; // [1]
-
-    .svg-icon {
-        margin: 0 !important;
+    &&__full {
+        --_mo-hmx: calc(100% - var(--su48));
+        --_mo-wmx: calc(100% - var(--su48));
     }
-}
 
-//  ============================================================================
-//  $   DIALOG PIECES
-//  ----------------------------------------------------------------------------
-.s-modal--header {
-    margin-bottom: var(--su16);
-    color: var(--fc-dark);
-    font-size: var(--fs-headline1);
-    font-weight: normal;
-    line-height: var(--lh-sm);
-}
-
-.s-modal--body {
-    margin-bottom: var(--su24);
-    color: var(--fc-medium);
-}
-
-.s-modal--footer {
-    margin-top: var(--su24);
-}
-
-
-//  ============================================================================
-//  $   STATES
-//  ----------------------------------------------------------------------------
-.s-modal.has-danger,
-.s-modal.s-modal__danger {
-    background-color: darken(fade(@red-900, 50%), 23%);
-
-    .s-modal--header {
-        color: var(--red-600);
+    // VARIANTS
+    &.has-danger,
+    &&__danger {
+        --_mo-bg: darken(fade(@red-900, 50%), 23%);
+        --_mo-header-fc: var(--red-600);
     }
-}
 
-.s-modal.s-modal__celebration .s-modal--dialog {
-    padding-top: var(--su64);
-    .bg-confetti-animated;
+    // CHILD ELEMENTS
+    & &--body {
+        color: var(--fc-medium);
+        margin-bottom: var(--su24);
+    }
+    & &--close {
+        //  [1] To override .s-btn class attributes
+        .svg-icon {
+            margin: 0 !important;
+        }
+
+        padding: var(--su12) !important; // [1]
+        position: absolute !important; // [1]
+        right: var(--su8);
+        top: var(--_mo-close-t);
+    }
+    & &--dialog {
+        .dark-mode({
+            --_mo-dialog-bg: var(--black-100);
+        });
+
+        padding: var(--_mo-dialog-pt) var(--su24) var(--su24);
+
+        @scrollbar-styles();
+        backface-visibility: hidden;
+        background-color: var(--_mo-dialog-bg);
+        border-radius: var(--br-lg);
+        box-shadow: var(--bs-lg);
+        max-height: 100%;
+        max-width: 600px;
+        opacity: 0;
+        overflow-y: auto;
+        transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
+        transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s; // Transition out
+        visibility: hidden;
+        will-change: visibility, z-index, opacity, transform; // Not supported by Edge
+        z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
+    }
+    & &--footer {
+        margin-top: var(--su24);
+    }
+    & &--header {
+        color: var(--_mo-header-fc);
 
-    .s-modal--close {
-        top: var(--su48);
+        font-size: var(--fs-headline1);
+        font-weight: normal;
+        line-height: var(--lh-sm);
+        margin-bottom: var(--su16);
     }
-}
 
-//  ============================================================================
-//  $   SIZES
-//  ----------------------------------------------------------------------------
-.s-modal__full {
-    max-width: calc(100% - var(--su48));
-    max-height: calc(100% - var(--su48));
+    background-color: var(--_mo-bg);
+    max-height: var(--_mo-hmx);
+    max-width: var(--_mo-wmx);
+
+    align-items: center;
+    backface-visibility: hidden;
+    display: flex;
+    inset: 0; // This fills the entire viewport without having to worry about size.
+    justify-content: center;
+    opacity: 0;
+    position: fixed;
+    transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms; // Transition out
+    visibility: hidden;
+    will-change: visibility, z-index, opacity; // Not supported in Edge
+    z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
 }