@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

package/lib/css/components/{_stacks-modals.less → modals.less}

@@ -1,133 +1,133 @@
-//
-//  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: @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 @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: @zi-modals;
-        opacity: 1;
-        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-        transition: opacity 100ms @te-smooth 10ms, z-index 0s 0s, visibility 0s 0s, transform 100ms @te-smooth 10ms, transform 100ms @te-smooth 10ms; // Transition in
-    }
-}
-
-.s-modal--dialog {
-    overflow-y: auto;
-    visibility: hidden;
-    z-index: @zi-hide; // Make sure it's also below everything so we can't interact with it.
-    max-width: 600px;
-    max-height: 100%;
-    padding: @su24;
-    border-radius: @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();
-
-    transition: opacity 200ms @te-smooth 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms @te-smooth 0s, transform 100ms @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
-    }
-}
-
-//  [1] To override .s-btn class attributes
-.s-modal--close {
-    position: absolute !important; // [1]
-    top: @su8;
-    right: @su8;
-    padding: @su12 !important; // [1]
-
-    .svg-icon {
-        margin: 0 !important;
-    }
-}
-
-//  ============================================================================
-//  $   DIALOG PIECES
-//  ----------------------------------------------------------------------------
-.s-modal--header {
-    margin-bottom: @su16;
-    color: var(--fc-dark);
-    font-size: @fs-headline1;
-    font-weight: normal;
-    line-height: @lh-sm;
-}
-
-.s-modal--body {
-    margin-bottom: @su24;
-    color: var(--fc-medium);
-}
-
-.s-modal--footer {
-    margin-top: @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);
-    }
-}
-
-.s-modal.s-modal__celebration .s-modal--dialog {
-    padding-top: @su64;
-    .bg-confetti-animated;
-
-    .s-modal--close {
-        top: @su48;
-    }
-}
-
-//  ============================================================================
-//  $   SIZES
-//  ----------------------------------------------------------------------------
-.s-modal__full {
-    max-width: calc(~"100% - @{su48}");
-    max-height: calc(~"100% - @{su48}");
-}
+//
+//  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
+    }
+}
+
+.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();
+
+    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
+    }
+}
+
+//  [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;
+    }
+}
+
+//  ============================================================================
+//  $   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);
+    }
+}
+
+.s-modal.s-modal__celebration .s-modal--dialog {
+    padding-top: var(--su64);
+    .bg-confetti-animated;
+
+    .s-modal--close {
+        top: var(--su48);
+    }
+}
+
+//  ============================================================================
+//  $   SIZES
+//  ----------------------------------------------------------------------------
+.s-modal__full {
+    max-width: calc(100% - var(--su48));
+    max-height: calc(100% - var(--su48));
+}

package/lib/css/components/{_stacks-navigation.less → navigation.less}

@@ -1,146 +1,146 @@
-//
-//  STACK OVERFLOW
-//  NAVIGATION
-//
-//  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
-//  • MUTED STYLE
-//
-//  ============================================================================
-//  $   BASE STYLE
-//  ----------------------------------------------------------------------------
-.s-navigation {
-    display: flex;
-    margin: -@su2;
-    padding: @su2 0;
-    flex-wrap: wrap;
-
-    // If the s-navigation is a list, let's reset all the properties
-    list-style: none;
-
-    .s-navigation--item {
-        display: flex;
-        align-items: center;
-        padding: @su6 @su12;
-        position: relative;
-
-        // Reset some things for when the navigation item is also a button
-        border: none;
-        font: unset;
-        background: none;
-        box-shadow: none;
-        cursor: pointer;
-        user-select: auto;
-        border-radius: 1000px;
-        margin: @su2;
-        white-space: nowrap;
-        color: var(--black-600);
-
-        &:hover,
-        &:active {
-            background: var(--black-075);
-            color: var(--black-600);
-
-            .highcontrast-mode({
-                background: var(--black-600);
-                color: var(--black-100);
-            });
-        }
-
-        @focus-styles();
-
-        &.is-selected {
-            background: var(--theme-primary-color);
-            color: var(--white);
-
-            &:hover,
-            &:active {
-                background: var(--theme-primary-600);
-                color: var(--white);
-            }
-
-            .highcontrast-mode({ text-decoration: none; });
-        }
-
-        &.s-navigation--item__dropdown {
-            padding-right: 2em;
-
-            &:after {
-                content: "";
-                position: absolute;
-                z-index: @zi-active;
-                top: calc(50% - 2px);
-                right: 0.9em;
-                border-style: solid;
-                border-width: @su4;
-                border-top-width: @su4;
-                border-bottom-width: 0;
-                border-color: currentColor transparent;
-                pointer-events: none;
-            }
-        }
-    }
-
-    &.s-navigation__scroll {
-        overflow-x: auto;
-        flex-wrap: nowrap;
-
-        @scrollbar-styles();
-    }
-
-    &.s-navigation__vertical {
-        flex-direction: column;
-        padding: 0;
-        margin: 0;
-
-        .s-navigation--item {
-            margin: 0;
-            white-space: normal;
-        }
-    }
-
-    .s-navigation--title {
-        font-size: @fs-fine;
-        font-weight: bold;
-        margin-top: @su16;
-        padding: @su6 @su12;
-        text-transform: uppercase;
-
-        &:first-child {
-            margin-top: 0;
-        }
-    }
-
-    //  ============================================================================
-    //  $   MUTED STYLE
-    //  ----------------------------------------------------------------------------
-    &.s-navigation__muted .s-navigation--item {
-        &.is-selected {
-            background: var(--black-050);
-            color: var(--black-800);
-
-            .highcontrast-mode({
-                background: var(--black-800);
-                color: var(--black-050);
-            });
-        }
-    }
-
-    //  ============================================================================
-    //  $   SMALL SIZE
-    //  ----------------------------------------------------------------------------
-    &.s-navigation__sm {
-        .s-navigation--item {
-            padding: @su4 @su12;
-            font-size: @fs-caption;
-
-            &.s-navigation--item__dropdown {
-                padding-right: 2em;
-            }
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  NAVIGATION
+//
+//  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
+//  • MUTED STYLE
+//
+//  ============================================================================
+//  $   BASE STYLE
+//  ----------------------------------------------------------------------------
+.s-navigation {
+    display: flex;
+    margin: calc(var(--su2) * -1);
+    padding: var(--su2) 0;
+    flex-wrap: wrap;
+
+    // If the s-navigation is a list, let's reset all the properties
+    list-style: none;
+
+    .s-navigation--item {
+        display: flex;
+        align-items: center;
+        padding: var(--su6) var(--su12);
+        position: relative;
+
+        // Reset some things for when the navigation item is also a button
+        border: none;
+        font: unset;
+        background: none;
+        box-shadow: none;
+        cursor: pointer;
+        user-select: auto;
+        border-radius: 1000px;
+        margin: var(--su2);
+        white-space: nowrap;
+        color: var(--black-600);
+
+        &:hover,
+        &:active {
+            background: var(--black-075);
+            color: var(--black-600);
+
+            .highcontrast-mode({
+                background: var(--black-600);
+                color: var(--black-100);
+            });
+        }
+
+        @focus-styles();
+
+        &.is-selected {
+            background: var(--theme-primary-color);
+            color: var(--white);
+
+            &:hover,
+            &:active {
+                background: var(--theme-primary-600);
+                color: var(--white);
+            }
+
+            .highcontrast-mode({ text-decoration: none; });
+        }
+
+        &.s-navigation--item__dropdown {
+            padding-right: 2em;
+
+            &:after {
+                content: "";
+                position: absolute;
+                z-index: var(--zi-active);
+                top: calc(50% - 2px);
+                right: 0.9em;
+                border-style: solid;
+                border-width: var(--su-static4);
+                border-top-width: var(--su-static4);
+                border-bottom-width: 0;
+                border-color: currentColor transparent;
+                pointer-events: none;
+            }
+        }
+    }
+
+    &.s-navigation__scroll {
+        overflow-x: auto;
+        flex-wrap: nowrap;
+
+        @scrollbar-styles();
+    }
+
+    &.s-navigation__vertical {
+        flex-direction: column;
+        padding: 0;
+        margin: 0;
+
+        .s-navigation--item {
+            margin: 0;
+            white-space: normal;
+        }
+    }
+
+    .s-navigation--title {
+        font-size: var(--fs-fine);
+        font-weight: bold;
+        margin-top: var(--su16);
+        padding: var(--su6) var(--su12);
+        text-transform: uppercase;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    //  ============================================================================
+    //  $   MUTED STYLE
+    //  ----------------------------------------------------------------------------
+    &.s-navigation__muted .s-navigation--item {
+        &.is-selected {
+            background: var(--black-050);
+            color: var(--black-800);
+
+            .highcontrast-mode({
+                background: var(--black-800);
+                color: var(--black-050);
+            });
+        }
+    }
+
+    //  ============================================================================
+    //  $   SMALL SIZE
+    //  ----------------------------------------------------------------------------
+    &.s-navigation__sm {
+        .s-navigation--item {
+            padding: var(--su4) var(--su12);
+            font-size: var(--fs-caption);
+
+            &.s-navigation--item__dropdown {
+                padding-right: 2em;
+            }
+        }
+    }
+}