@stackoverflow/stacks 3.0.0-beta.2 → 3.0.0-beta.21

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/award-bling/award-bling.less

@@ -1,32 +0,0 @@
-.s-award-bling {
-    --_ab-before-bg: unset;
-
-    // VARIANTS
-    // TODO SHINE expect a conflict with the award-bling updates. Prefer the changes in https://github.com/StackExchange/Stacks/pull/2013.
-    &&__gold {
-        --_ab-before-bg: var(--yellow-300);
-    }
-
-    &&__silver {
-        --_ab-before-bg: var(--blue-300);
-    }
-
-    &&__bronze {
-        --_ab-before-bg: var(--orange-300);
-    }
-
-    // CHILD ELEMENTS
-    &:before {
-        background-color: var(--_ab-before-bg);
-
-        border-radius: 100%;
-        content: "";
-        margin-right: var(--su4);
-        height: var(--su8);
-        width: var(--su8);
-    }
-
-    align-items: center;
-    color: inherit;
-    display: flex;
-}

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/skeleton/skeleton.less

@@ -1,73 +0,0 @@
-.s-skeleton {
-    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    // TODO verify colors with design
-    --_sk-bg-1: var(--black-400);
-    --_sk-bg-2: var(--black-350);
-    --_sk-bg-3: var(--black-300);
-    --_sk-o: 0.25;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        --_sk-o: 0.4;
-    });
-
-    @keyframes flow {
-        0% {
-            background-position: 400% 50%;
-        }
-        100% {
-            background-position: 0% 50%;
-        }
-    }
-
-    // VARIANTS
-    &&__ai {
-        --_sk-bg-1: #ac76f0;
-        --_sk-bg-2: #297fff;
-        --_sk-bg-3: #6abcf8;
-    }
-
-    &,
-    &:after,
-    &:before {
-        @media (prefers-reduced-motion: no-preference) {
-            animation: flow 8s linear infinite;
-        }
-
-        background-image: linear-gradient(
-            to right,
-            var(--_sk-bg-1) 8%,
-            var(--_sk-bg-2) 16%,
-            var(--_sk-bg-3) 25%,
-            var(--_sk-bg-1) 42%,
-            var(--_sk-bg-2) 58%,
-            var(--_sk-bg-3) 75%,
-            var(--_sk-bg-1) 83%
-        );
-        background-size: 400% 100%;
-        border-radius: var(--br-md);
-        display: block;
-        height: var(--su16);
-        position: relative;
-    }
-
-    &:after,
-    &:before {
-        content: '';
-        position: relative;
-    }
-
-    &:after {
-        top: calc(var(--su4));
-        width: calc(2/3 * 100%);
-    }
-
-    &:before {
-        top: calc(var(--su32) + var(--su8));
-        width: calc(1/3 * 100%);
-    }
-
-    margin-bottom: var(--su48);
-    opacity: var(--_sk-o);
-    width: 100%;
-}

package/lib/exports/spacing-mixins.less

@@ -1,67 +0,0 @@
-/**
- * Generate base and responsive atomic spacing classes.
- *
- * Usage example:
- * .generate-spacing('.m', margin, true);
- * .generate-spacing('.ml', margin-left, true, percent);
- * .generate-spacing('.mx'; margin-left, margin-right; true);
- * .generate-spacing('.pr', padding-right);
- *
- * @prefix - (required) What prefix to generate (e.g. `.m`, `.pr`, etc).
- * @properties - (required) What CSS properties to generate (e.g. `margin`, `margin-right, margin-left`, etc).
- * @includeNegative: bool - Boolean to include generation of negative value classes.
- * @type: px | percent - What set of value to generate.
- */
-.generate-spacing(@prefix, @properties, @includeNegative: false, @type: px) {
-  & when (@type = px) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: var(~"--su@{value}") !important;
-            })
-          } },
-          0 1 2 4 6 8 12 16 24 32 48 64 96 128
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: calc(var(~"--su@{value}") * -1) !important;
-              })
-            } },
-            1 2 4 6 8 12 16 24 32 48 64 96 128
-        );
-    }
-  }
-
-  & when (@type = percent) {
-      #stacks-internals #build-classes(
-          responsive,
-          @prefix,
-          { .template(@value) {
-            each(@properties, #(@prop) {
-                @{prop}: @value !important;
-            })
-          } },
-          50% 100%
-      );
-
-      & when (@includeNegative = true) {
-        #stacks-internals #build-classes(
-            responsive,
-            ~"@{prefix}n",
-            { .template(@value) {
-              each(@properties, #(@prop) {
-                  @{prop}: -@value !important;
-              })
-            } },
-            50% 100%
-        );
-    }
-  }
-}