@stackoverflow/stacks 1.4.2 → 1.5.0

package/lib/css/components/popovers.less

@@ -1,197 +1,148 @@
-//
-//  STACK OVERFLOW
-//  POPOVERS
-//
-//  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
-//  • VARIABLES
-//  • BASE STYLE
-//  • ARROWS
-//  • LOCATIONS
-//
-//  ============================================================================
-//  $   BASE STYLES
-//  ----------------------------------------------------------------------------
 .s-popover {
-    display: none;
-    position: absolute;
-    max-width: 24rem;
-    padding: var(--su12);
-    z-index: var(--zi-popovers);
-    border-radius: var(--br-md);
-    border: 1px solid var(--bc-medium);
-    background-color: var(--white);
-    box-shadow: var(--bs-md);
-    color: var(--fc-dark);
-    font-size: var(--fs-body1);
-    min-width: 12rem;
-    width: 100%;
-
-    // Guard against popovers being in a container with white-space: nowrap
-    // Without this, the content pops *out* of the popover.
-    white-space: normal; 
-
+    --_po-bg: var(--white);
+    --_po-bc: var(--bc-medium);
+    --_po-bs: var(--bs-md);
+    --_po-d: none;
+    --_po-wmn: 12rem;
+    --_po-w: 100%;
+    // arrow
+    --_po-arrow-fc: var(--white);
+    --_po-arrow-b: unset;
+    --_po-arrow-l: unset;
+    --_po-arrow-r: unset;
+    --_po-arrow-t: unset;
+    --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
+    --_po-arrow-after-b: unset;
+    --_po-arrow-after-l: unset;
+    --_po-arrow-after-r: unset;
+    --_po-arrow-after-t: unset;
+    --_po-arrow-after-bs: unset;
+  
+    // CONTEXTUAL STYLES
     .dark-mode({
-        background-color: var(--black-075);
-        border-color: var(--bc-light);
-        box-shadow: var(--bs-lg);
+        --_po-bg: var(--black-075);
+        --_po-bc: var(--bc-light);
+        --_po-bs: var(--bs-lg);
+        --_po-arrow-fc: var(--black-075);
     });
-
-    &.s-popover__tooltip {
-        width: auto;
-        min-width: unset;
-    }
-
+  
+    // MODIFIERS
     &.is-visible {
-        display: block;
+        --_po-d: block;
     }
-
-    &[data-popper-placement^="top"] > .s-popover--arrow,
-    .s-popover--arrow__bc,
-    .s-popover--arrow__bl,
-    .s-popover--arrow__br {
-        bottom: calc(var(--su6) * -1);
-
-        &:after {
-            bottom: 1px;
-            box-shadow: 2px 2px 5px 0 hsla(0, 0, 0, 0.07), 2px 2px 2px -1px hsla(0, 0, 0, 0.1);
-
-            .highcontrast-mode({
-                box-shadow: 1px 1px 0 0 var(--bc-medium);
-            });
-        }
+    &&__tooltip {
+        --_po-wmn: unset;
+        --_po-w: auto;
     }
-
-    &[data-popper-placement^="bottom"] > .s-popover--arrow,
-    .s-popover--arrow__tc,
-    .s-popover--arrow__tl,
-    .s-popover--arrow__tr {
-        top: calc(var(--su6) * -1);
-
-        &:after {
-            top: 1px;
-            box-shadow: -1px -1px 1px 0 hsla(0, 0, 0, 0.12);
-
-            .highcontrast-mode({
-                box-shadow: -1px -1px 0 0 var(--bc-medium);
-            });
-        }
+  
+    // CHILD ELEMENTS
+    // Arrow
+    &[data-popper-placement^="top"] > &--arrow,
+    & &--arrow__bc,
+    & &--arrow__bl,
+    & &--arrow__br {
+        --_po-arrow-b: var(--_po-arrow-ps);
+        --_po-arrow-after-b: var(--su-static1);
+        --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
+        .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
     }
-
-    &[data-popper-placement^="left"] > .s-popover--arrow,
-    .s-popover--arrow__rc,
-    .s-popover--arrow__rt,
-    .s-popover--arrow__rb {
-        right: calc(var(--su6) * -1);
-
-        &:after {
-            right: 1px;
-            box-shadow: 2px -2px 5px 0 hsla(0, 0, 0, 0.07), 2px -2px 2px -1px hsla(0, 0, 0, 0.1);
-
-            .highcontrast-mode({
-                box-shadow: 1px -1px 0 0 var(--bc-medium);
-            });
-        }
+    &[data-popper-placement^="bottom"] > &--arrow,
+    & &--arrow__tc,
+    & &--arrow__tl,
+    & &--arrow__tr {
+        --_po-arrow-t: var(--_po-arrow-ps);
+        --_po-arrow-after-t: var(--su-static1);
+        --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
+        .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
     }
-
-    &[data-popper-placement^="right"] > .s-popover--arrow,
-    .s-popover--arrow__lc,
-    .s-popover--arrow__lt,
-    .s-popover--arrow__lb {
-        left: calc(var(--su6) * -1);
-
-        &:after {
-            left: 1px;
-            box-shadow: -2px 2px 5px 0 hsla(0, 0, 0, 0.07), -2px 2px 2px -1px hsla(0, 0, 0, 0.1);
-
-            .highcontrast-mode({
-                box-shadow: -1px 1px 0 0 var(--bc-medium);
-            });
-        }
+    &[data-popper-placement^="left"] > &--arrow,
+    & &--arrow__rc,
+    & &--arrow__rt,
+    & &--arrow__rb {
+        --_po-arrow-r: var(--_po-arrow-ps);
+        --_po-arrow-after-r: var(--su-static1);
+        --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
+        .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
     }
-
-    .s-popover--arrow__tc,
-    .s-popover--arrow__bc {
-        left: calc(50% - var(--su6));
+    &[data-popper-placement^="right"] > &--arrow,
+    & &--arrow__lc,
+    & &--arrow__lt,
+    & &--arrow__lb {
+        --_po-arrow-l: var(--_po-arrow-ps);
+        --_po-arrow-after-l: var(--su-static1);
+        --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
+        .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
     }
-
-    .s-popover--arrow__lc,
-    .s-popover--arrow__rc {
-        top: calc(50% - var(--su6));
+    & &--arrow__tc,
+    & &--arrow__bc {
+        --_po-arrow-l: calc(50% - var(--su6));
     }
-
-    .s-popover--arrow__tr,
+    & &--arrow__lc,
+    & &--arrow__rc {
+        --_po-arrow-t: calc(50% - var(--su6));
+    }
+    & &--arrow__tr,
     .s-popover--arrow__br {
-        right: var(--su12);
+        --_po-arrow-r: var(--su12);
     }
-
-    .s-popover--arrow__rb,
-    .s-popover--arrow__lb {
-        bottom: var(--su12);
+    & &--arrow__rb,
+    & &--arrow__lb {
+        --_po-arrow-b: var(--su12);
     }
-}
-
-//  ============================================================================
-//  $   CLOSE BUTTON
-//  ----------------------------------------------------------------------------
-
-.s-popover--close {
-    float: right; // Use floats for title wrapping
-    top: calc(var(--su8) * -1); // Compensate for s-popover's padding
-    right: calc(var(--su8) * -1); // Compensate for s-popover's padding
-    padding: var(--su8) !important;
-}
-
-//  ============================================================================
-//  $   ARROWS
-//  ----------------------------------------------------------------------------
-//
-//  TABLE OF CONTENTS
-//  • BASE STYLE
-//  • LOCATIONS
-//      • TOP
-//      • BOTTOM
-//      • TOP & BOTTOM DIRECTIONS (Left, Center, Right)
-//      • LEFT
-//      • RIGHT
-//      • LEFT & RIGHT DIRECTIONS (Top, Center, Bottom)
-//
-//  ============================================================================
-//  $   BASE STYLE
-//      Sets the base arrow style for tooltips, popovers, and dropdowns.
-//  ----------------------------------------------------------------------------
+    & &--arrow {
+        &,
+        &:before,
+        &:after {
+            display: block;
+            height: var(--su12);
+            position: absolute;
+            width: var(--su12);
+            z-index: -1;
+        }
+        &:before, // This renders our border
+        &:after {
+            content: '';
+            transform: rotate(45deg);
+        }
+        &:after { // This renders our foreground color
+            bottom: var(--_po-arrow-after-b);
+            box-shadow: var(--_po-arrow-after-bs);
+            left: var(--_po-arrow-after-l);
+            right: var(--_po-arrow-after-r);
+            top: var(--_po-arrow-after-t);
+
+            background: currentColor;
+            border-radius: calc(var(--su-static1) * 1.5);
+        }
 
-.s-popover--arrow,
-.s-popover--arrow:before,
-.s-popover--arrow:after {
+        bottom: var(--_po-arrow-b);
+        color: var(--_po-arrow-fc);
+        left: var(--_po-arrow-l);
+        right: var(--_po-arrow-r);
+        top: var(--_po-arrow-t);
+    }
+    // Close btn
+    & &--close {
+        float: right; // Use floats for title wrapping
+        top: calc(var(--su8) * -1); // Compensate for s-popover's padding
+        right: calc(var(--su8) * -1); // Compensate for s-popover's padding
+        padding: var(--su8) !important;
+    }
+  
+    background-color: var(--_po-bg);
+    border: 1px solid var(--_po-bc);
+    box-shadow: var(--_po-bs);
+    display: var(--_po-d);
+    min-width: var(--_po-wmn);
+    width: var(--_po-w);
+  
+    border-radius: var(--br-md);
+    color: var(--fc-dark);
+    font-size: var(--fs-body1);
+    max-width: 24rem;
+    padding: var(--su12);
     position: absolute;
-    display: block;
-    width: var(--su12);
-    height: var(--su12);
-    z-index: -1;
-}
-
-.s-popover--arrow {
-    color: var(--white);
-
-    .dark-mode({
-        color: var(--black-075);
-    });
-}
-
-.s-popover--arrow:before {
-    // This renders our border
-    content: '';
-    transform: rotate(45deg);
-}
-
-.s-popover--arrow:after {
-    // This renders our foreground color
-    content: '';
-    transform: rotate(45deg);
-    border-radius: 1.5px;
-    background: currentColor;
-}
+    white-space: normal; // Guard against popovers being in a container with white-space: nowrap. Without this, the content pops *out* of the popover.
+    z-index: var(--zi-popovers);
+  }
+  

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.