@stackoverflow/stacks 1.4.2 → 1.6.0

package/lib/css/atomic/colors.less

@@ -7,7 +7,7 @@
 //  visit https://stackoverflow.design/
 //
 //  ============================================================================
-//  UTLITY OVERRIDES
+//  UTILITY OVERRIDES
 //  Instead of re-adding colors to unique class names, use these atomic classes
 //  for text and background colors
 //  ============================================================================

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:not(&__answered),
         // Users
-        &__admin,
-        &__moderator,
-        &__staff {
+        &&__admin,
+        &&__moderator,
+        &&__staff {
             --_ba-bc: currentColor;
         }
     });
@@ -76,7 +76,7 @@
     }
     &&__rep,
     &&__rep-down,
-    &&__votes {
+    &&__votes:not(&__answered) {
         --_ba-bg: var(--white);
     }
     &&__answered {
@@ -96,7 +96,7 @@
         --_ba-bc: var(--red-400);
         --_ba-fc: var(--red-500);
     }
-    &&__votes {
+    &&__votes:not(&__answered) {
         --_ba-bc: var(--black-150);
         --_ba-fc: var(--black-700);
     }

package/lib/css/components/button-groups.less

@@ -1,104 +1,80 @@
-//
-//  STACK OVERFLOW
-//  BUTTON GROUPS
-//
-//  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
-//  • BUTTON GROUP CONTAINER
-
-//  ============================================================================
-//  $   CONTAINER
-//  ----------------------------------------------------------------------------
 .s-btn-group {
-    display: flex;
-    flex-wrap: wrap;
-    margin-bottom: 1px; // Compensate for buttons having a margin bottom of -1px to account for row wrapping
-
-    .s-btn {
-        margin-bottom: -1px; // When wrapping we need to account for the border
-        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        .s-btn {
+            &.s-btn__dropdown {
+                padding-right: 1.2em;
 
-        // If it isn't the last button, we should slide the button over to account for border thickness
-        &:not(:last-child) {
-            margin-right: -1px;
-        }
+                &:after {
+                    right: 0.4em;
+                }
+            }
 
-        // We don't want border-radii on interior buttons
-        &:not(:first-child):not(:last-child) {
-            border-radius: 0;
+            padding-left: 0.4em;
+            padding-right: 0.4em;
         }
+    }, @force-selector: true);
 
-        // Kill the right border radius on the first button
-        &:first-child:not(:only-child) {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
+    // VARIANTS
+    &:not(&--radio) .s-btn:not(:first-child):not(:last-child),
+    &&--radio .s-btn:not(:first-of-type):not(:last-of-type) {
+        border-radius: 0;
+    }
 
-        // Kill the left border radius on the last button
-        &:last-child:not(:only-child) {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
+    &:not(&--radio) .s-btn:first-child:not(:only-child),
+    &&--radio .s-btn:first-of-type:not(:last-of-type) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
 
-        // When the button is active or selected, it should pop above its siblings
-        &.is-selected {
-            z-index: var(--zi-selected);
-        }
+    &:not(&--radio) .s-btn:last-child:not(:only-child),
+    &&--radio .s-btn:last-of-type:not(:first-of-type) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
 
-        .highcontrast-mode({
-            &.is-selected {
-                background-color: var(--black-400);
-                color: var(--white);
+    &:not(&--radio) .s-btn:not(:last-child),
+    &&--radio .s-btn:not(:last-of-type) {
+        margin-right: calc(var(--su-static1) * -1);
+    }
 
-                .s-btn--number {
-                    color: var(--black);
-                }
+    // CHILD ELEMENTS
+    form {
+        &:not(:first-child):not(:last-child) {
+            .s-btn {
+                border-radius: 0;
             }
-        });
-
-        &:active {
-            z-index: var(--zi-active);
         }
-
-        #stacks-internals #screen-sm({
-            padding-left: 0.4em;
-            padding-right: 0.4em;
-        }, @force-selector: true);
-    }
-
-    #stacks-internals #screen-sm({
-        .s-btn.s-btn__dropdown {
-            padding-right: 1.2em;
-
-            &:after {
-                right: 0.4em;
+        &:last-child:not(:only-child) {
+            .s-btn:not(:last-child) {
+                border-radius: 0;
+            }
+        }
+        &:first-child:not(:only-child) {
+            .s-btn:not(:first-child) {
+                border-radius: 0;
             }
         }
-    }, @force-selector: true);
 
-    .s-btn-group--container {
         display: flex;
+        margin-right: calc(var(--su-static1) * -1); // -1px
+    }
 
-        .s-btn {
-            margin-right: -1px; // We should slide buttons over to account for border thickness
+    .s-btn {
+        &:active {
+            z-index: var(--zi-active);
         }
-
-        &:not(:first-child):not(:last-child) .s-btn {
-            border-radius: 0;
+        &.is-selected,
+        &--radio:checked + .s-btn {
+            z-index: var(--zi-selected); // When the button is active or selected, it should pop above its siblings
         }
 
-        &:first-child .s-btn {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            margin-left: 0;
-        }
-
-        &:last-child .s-btn {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
+        margin-bottom: calc(var(--su-static1) * -1); // When wrapping we need to account for the border
+        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
     }
+
+    // STATIC COMPONENT STYLES
+    display: flex;
+    flex-wrap: wrap;
+    margin-bottom: var(--su-static1); // Compensate for buttons having a margin bottom of -1px to account for row wrapping
 }