@stackoverflow/stacks 2.5.3 → 2.5.5

package/lib/base/reset.less

@@ -1,20 +1,20 @@
-// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
-
-#stacks-internals() {
-    #include-css-reset(meyer) {
-        @import "reset-meyer.less";
-    }
-    #include-css-reset(normalize) {
-        @import "reset-normalize.less";
-    }
-    /* stylelint-disable block-no-empty */
-    #include-css-reset(none) {
-    }
-    /* stylelint-enable */
-}
-
-& {
-    #stacks-internals #load-static-config();
-    #stacks-internals #include-css-reset(@css-reset);
-}
-
+// the default CSS reset is normalize.css; other possibilities are the Eric Meyer reset, and no reset at all.
+
+#stacks-internals() {
+    #include-css-reset(meyer) {
+        @import "reset-meyer.less";
+    }
+    #include-css-reset(normalize) {
+        @import "reset-normalize.less";
+    }
+    /* stylelint-disable block-no-empty */
+    #include-css-reset(none) {
+    }
+    /* stylelint-enable */
+}
+
+& {
+    #stacks-internals #load-static-config();
+    #stacks-internals #include-css-reset(@css-reset);
+}
+

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

@@ -1,53 +1,53 @@
-.s-activity-indicator {
-    --_ai-translucent: var(--translucent-secondary);
-    --_ai-bg: var(--theme-secondary-400);
-    --_ai-fc: var(--white);
-
-    .highcontrast-mode({
-        --_ai-bg: var(--theme-secondary-500);
-    });
-
-    // VARIANTS
-    &&__danger {
-        --_ai-bg: var(--red-400);
-        --_ai-translucent: var(--translucent-error);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--red-500);
-        });
-    }
-
-    &&__success {
-        --_ai-bg: var(--green-400);
-        --_ai-translucent: var(--translucent-success);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--green-500);
-        });
-    }
-
-    &&__warning {
-        --_ai-bg: var(--yellow-400);
-        --_ai-fc: var(--_black-static);
-        --_ai-translucent: var(--translucent-warning);
-
-        .highcontrast-mode({
-            --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
-            --_ai-fc: var(--white);
-        });
-    }
-
-    background-color: var(--_ai-bg);
-    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
-    color: var(--_ai-fc);
-
-    border-radius: 1000px;
-    display: inline-block;
-    font-size: var(--fs-fine);
-    font-weight: 700;
-    line-height: 1.1; // Custom line-height to satisfy 1x screens
-    min-width: var(--su-static12);
-    min-height: var(--su-static12);
-    padding: var(--su2) var(--su4);
-    text-transform: uppercase;
-}
+.s-activity-indicator {
+    --_ai-translucent: var(--translucent-secondary);
+    --_ai-bg: var(--theme-secondary-400);
+    --_ai-fc: var(--white);
+
+    .highcontrast-mode({
+        --_ai-bg: var(--theme-secondary-500);
+    });
+
+    // VARIANTS
+    &&__danger {
+        --_ai-bg: var(--red-400);
+        --_ai-translucent: var(--translucent-error);
+
+        .highcontrast-mode({
+            --_ai-bg: var(--red-500);
+        });
+    }
+
+    &&__success {
+        --_ai-bg: var(--green-400);
+        --_ai-translucent: var(--translucent-success);
+
+        .highcontrast-mode({
+            --_ai-bg: var(--green-500);
+        });
+    }
+
+    &&__warning {
+        --_ai-bg: var(--yellow-400);
+        --_ai-fc: var(--_black-static);
+        --_ai-translucent: var(--translucent-warning);
+
+        .highcontrast-mode({
+            --_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
+            --_ai-fc: var(--white);
+        });
+    }
+
+    background-color: var(--_ai-bg);
+    box-shadow: 0 0 0 var(--su-static4) var(--_ai-translucent);
+    color: var(--_ai-fc);
+
+    border-radius: 1000px;
+    display: inline-block;
+    font-size: var(--fs-fine);
+    font-weight: 700;
+    line-height: 1.1; // Custom line-height to satisfy 1x screens
+    min-width: var(--su-static12);
+    min-height: var(--su-static12);
+    padding: var(--su2) var(--su4);
+    text-transform: uppercase;
+}

package/lib/components/anchor/anchor.less

@@ -1,68 +1,78 @@
-.s-anchors {
-    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
-    // --_an-a-fc
-    // --_an-a-fc-hover
-    --_an-a-fc-visited: var(--_an-a-fc);
-
-    // MODIFIERS
-    &&__underlined {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            text-decoration: underline;
-        }
-    }
-
-    // VARIANTS
-    &&__danger {
-        --_an-a-fc: var(--red-400);
-        --_an-a-fc-hover: var(--red-500);
-        --_an-a-fc-visited: var(--red-600);
-    }
-
-    &&__default {
-        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
-        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
-        --_an-a-fc-visited: var(--theme-link-color-visited, var(--theme-secondary-600));
-    }
-
-    &&__grayscale {
-        --_an-a-fc: var(--black-500);
-        --_an-a-fc-hover: var(--black-600);
-        --_an-a-fc-visited: var(--black-400);
-    }
-
-    &&__inherit {
-        --_an-a-fc: inherit;
-        --_an-a-fc-hover: inherit;
-        --_an-a-fc-visited: inherit;
-    }
-
-    &&__muted {
-        --_an-a-fc: var(--black-400);
-        --_an-a-fc-hover: var(--black-500);
-        --_an-a-fc-visited: var(--black-600);
-    }
-
-    &&__danger,
-    &&__default,
-    &&__grayscale,
-    &&__inherit,
-    &&__muted {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            color: var(--_an-a-fc, inherit);
-
-            &:hover,
-            &:active {
-                &,
-                &:visited {
-                    color: var(--_an-a-fc-hover);
-                }
-            }
-
-            &:visited {
-                color: var(--_an-a-fc-visited, inherit);
-            }
-        }
-    }
-}
+.s-anchors {
+    // CUSTOM PROPERTIED DEFINED WITHIN VARIANTS
+    // --_an-a-fc
+    // --_an-a-fc-hover
+    // --_an-a-fc-visited
+    // --_an-a-fc-hover-visited
+
+    // MODIFIERS
+    &&__underlined {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            text-decoration: underline;
+        }
+    }
+
+    // VARIANTS
+    &&__danger,
+    &&__grayscale,
+    &&__inherit,
+    &&__muted {
+        --_an-a-fc-hover-visited: var(--_an-a-fc-hover);
+    }
+
+    &&__danger {
+        --_an-a-fc: var(--red-400);
+        --_an-a-fc-hover: var(--red-500);
+        --_an-a-fc-visited: var(--red-600);
+    }
+
+    &&__default {
+        --_an-a-fc: var(--theme-link-color, var(--theme-secondary-400));
+        --_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
+        --_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
+        --_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));
+    }
+
+    &&__grayscale {
+        --_an-a-fc: var(--black-500);
+        --_an-a-fc-hover: var(--black-600);
+        --_an-a-fc-visited: var(--black-400);
+    }
+
+    &&__inherit {
+        --_an-a-fc: inherit;
+        --_an-a-fc-hover: inherit;
+        --_an-a-fc-visited: inherit;
+    }
+
+    &&__muted {
+        --_an-a-fc: var(--black-400);
+        --_an-a-fc-hover: var(--black-500);
+        --_an-a-fc-visited: var(--black-600);
+    }
+
+    &&__danger,
+    &&__default,
+    &&__grayscale,
+    &&__inherit,
+    &&__muted {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            &:active,
+            &:hover {
+                color: var(--_an-a-fc-hover);
+            }
+
+            color: var(--_an-a-fc, inherit);
+        }
+
+        a:not(.s-link):visited {
+            &:hover {
+                color: var(--_an-a-fc-hover-visited, inherit);
+            }
+
+            color: var(--_an-a-fc-visited, inherit);
+        }
+    }
+}

package/lib/components/avatar/avatar.less

@@ -1,108 +1,108 @@
-.s-avatar {
-    --_av-size: var(--su-static16);
-    --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
-    --_av-br: var(--br-sm);
-    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
-    --_av-scale-badge: 1;
-
-    // CONTEXTUAL STYLES
-    .highcontrast-mode({
-        .s-avatar--letter {
-            color: var(--white);
-        }
-
-        background-color: var(--black);
-        box-shadow: 0 0 0 var(--su-static1) var(--black);
-        color: var(--white);
-    });
-
-    // MODIFIERS
-    // Sizes
-    &&__32,
-    &&__48 {
-        --_av-br: var(--br-md);
-    }
-
-    &&__96,
-    &&__128 {
-        --_av-br: calc(var(--br-lg) + var(--br-sm));
-        --_av-scale-badge: 3;
-    }
-
-    &&__24 {
-        --_av-size: var(--su-static24);
-        --_av-fs-letter: var(--su-static16);
-        --_av-scale-badge: 1.1;
-    }
-
-    &&__32 {
-        --_av-size: var(--su-static32);
-        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
-        --_av-scale-badge: 1.3;
-    }
-
-    &&__48 {
-        --_av-size: var(--su-static48);
-        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
-        --_av-scale-badge: 1.6;
-    }
-
-    &&__64 {
-        --_av-size: var(--su-static64);
-        --_av-br: var(--br-lg);
-        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
-        --_av-scale-badge: 2.4;
-    }
-
-    &&__96 {
-        --_av-size: var(--su-static96);
-        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
-    }
-
-    &&__128 {
-        --_av-size: var(--su-static128);
-        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
-    }
-
-    // CHILD ELEMENTS
-    & &--badge {
-        bottom: calc(var(--su-static4) * -1); // -4px
-        position: absolute;
-        right: calc(var(--su-static4) * -1); // -4px
-        -webkit-transform: scale(var(--_av-scale-badge));
-        transform: scale(var(--_av-scale-badge));
-    }
-
-    & &--image {
-        border-radius: var(--_av-br);
-        display: block;
-        height: var(--_av-size);
-        width: var(--_av-size);
-    }
-
-    & &--letter {
-        color: var(--_white-static); // Force a light appearance of text rendering
-        display: block; // Make sure we're treating the letter as a block-level element
-        font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
-        font-weight: bold;
-        line-height: 1.4; // Guards against some line-height trolling from the parent
-        text-align: center;
-        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
-        // We don't need text selection on our letter
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
-    }
-
-    background-color: var(--_av-bg); 
-    border-radius: var(--_av-br);
-    height: var(--_av-size);
-    width: var(--_av-size);
-
-    background-repeat: no-repeat;
-    background-size: 100%;
-    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
-    position: relative;
-    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
-}
+.s-avatar {
+    --_av-size: var(--su-static16);
+    --_av-bg: var(--_white-static); // Force a white background color for when we have transparent avatars
+    --_av-br: var(--br-sm);
+    --_av-fs-letter: calc(var(--su-static12) - var(--su-static1));
+    --_av-scale-badge: 1;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        .s-avatar--letter {
+            color: var(--white);
+        }
+
+        background-color: var(--black);
+        box-shadow: 0 0 0 var(--su-static1) var(--black);
+        color: var(--white);
+    });
+
+    // MODIFIERS
+    // Sizes
+    &&__32,
+    &&__48 {
+        --_av-br: var(--br-md);
+    }
+
+    &&__96,
+    &&__128 {
+        --_av-br: calc(var(--br-lg) + var(--br-sm));
+        --_av-scale-badge: 3;
+    }
+
+    &&__24 {
+        --_av-size: var(--su-static24);
+        --_av-fs-letter: var(--su-static16);
+        --_av-scale-badge: 1.1;
+    }
+
+    &&__32 {
+        --_av-size: var(--su-static32);
+        --_av-fs-letter: calc(var(--su-static24) - var(--su-static2));
+        --_av-scale-badge: 1.3;
+    }
+
+    &&__48 {
+        --_av-size: var(--su-static48);
+        --_av-fs-letter: calc(var(--su-static32) + var(--su-static2));
+        --_av-scale-badge: 1.6;
+    }
+
+    &&__64 {
+        --_av-size: var(--su-static64);
+        --_av-br: var(--br-lg);
+        --_av-fs-letter: calc(var(--su-static48) - var(--su-static4));
+        --_av-scale-badge: 2.4;
+    }
+
+    &&__96 {
+        --_av-size: var(--su-static96);
+        --_av-fs-letter: calc(var(--su-static64) + var(--su-static2));
+    }
+
+    &&__128 {
+        --_av-size: var(--su-static128);
+        --_av-fs-letter: calc(var(--su-static96) - var(--su-static8));
+    }
+
+    // CHILD ELEMENTS
+    & &--badge {
+        bottom: calc(var(--su-static4) * -1); // -4px
+        position: absolute;
+        right: calc(var(--su-static4) * -1); // -4px
+        -webkit-transform: scale(var(--_av-scale-badge));
+        transform: scale(var(--_av-scale-badge));
+    }
+
+    & &--image {
+        border-radius: var(--_av-br);
+        display: block;
+        height: var(--_av-size);
+        width: var(--_av-size);
+    }
+
+    & &--letter {
+        color: var(--_white-static); // Force a light appearance of text rendering
+        display: block; // Make sure we're treating the letter as a block-level element
+        font-size: var(--_av-fs-letter); // Force a font size so the avatar text doesn't get smaller as the window resizes
+        font-weight: bold;
+        line-height: 1.4; // Guards against some line-height trolling from the parent
+        text-align: center;
+        text-transform: uppercase; // Force uppercase in avatars when team name is lowercase
+        // We don't need text selection on our letter
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+    }
+
+    background-color: var(--_av-bg); 
+    border-radius: var(--_av-br);
+    height: var(--_av-size);
+    width: var(--_av-size);
+
+    background-repeat: no-repeat;
+    background-size: 100%;
+    display: inline-block; // Make sure the avatar has structure regardless of the element eg. span vs. div
+    position: relative;
+    vertical-align: bottom; // Make our avatars play more nicely with text next to it.
+}

package/lib/components/award-bling/award-bling.less

@@ -1,31 +1,31 @@
-.s-award-bling {
-    --_ab-before-bg: unset;
-
-    // VARIANTS
-    &&__gold {
-        --_ab-before-bg: var(--gold-300);
-    }
-
-    &&__silver {
-        --_ab-before-bg: var(--silver-300);
-    }
-
-    &&__bronze {
-        --_ab-before-bg: var(--bronze-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;
-}
+.s-award-bling {
+    --_ab-before-bg: unset;
+
+    // VARIANTS
+    &&__gold {
+        --_ab-before-bg: var(--gold-300);
+    }
+
+    &&__silver {
+        --_ab-before-bg: var(--silver-300);
+    }
+
+    &&__bronze {
+        --_ab-before-bg: var(--bronze-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;
+}