@stackoverflow/stacks 2.7.3 → 2.7.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/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;
+}

package/lib/components/banner/banner.less

@@ -1,44 +1,44 @@
-// See also ./lib/components/notice/notice.less
-// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
-// This would reduce the amount of CSS we ship to the client and simplify our codebase
-.s-banner {
-    --_no-ty-offset: 0;
-    --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
-    .construct-notice-component(s-banner);
-
-    &[aria-hidden="true"] { // If you want to hide and reveal the banner
-        --_no-ty-offset: -1;
-        opacity: 0;
-        visibility: hidden;
-    }
-
-    &[aria-hidden="false"] {
-        --_no-ty-offset: 1;
-        opacity: 1;
-        visibility: visible;
-
-        &.is-pinned { //  If you want to put the banner above the topbar
-            --_no-ty-offset: 0;
-            z-index: calc(var(--zi-navigation-fixed) + 1);
-        }
-    }
-
-    &__body-pt {
-        padding-top: 93px;
-    }
-
-    & &--container { // When we want to keep hero content capped
-        margin: 0 auto;
-        max-width: calc(var(--s-step) * 10);
-        position: relative;
-        width: 100%;
-    }
-
-    border-width: 0 0 var(--su-static1);
-    inset: 0 0 auto 0;
-    padding: var(--su12);
-    position: fixed;
-    transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0);
-    width: 100%;
-    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
-}
+// See also ./lib/components/notice/notice.less
+// TODO deprecate .s-banner (by turning it into a modifier on .s-notice)
+// This would reduce the amount of CSS we ship to the client and simplify our codebase
+.s-banner {
+    --_no-ty-offset: 0;
+    --_no-ty: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
+    .construct-notice-component(s-banner);
+
+    &[aria-hidden="true"] { // If you want to hide and reveal the banner
+        --_no-ty-offset: -1;
+        opacity: 0;
+        visibility: hidden;
+    }
+
+    &[aria-hidden="false"] {
+        --_no-ty-offset: 1;
+        opacity: 1;
+        visibility: visible;
+
+        &.is-pinned { //  If you want to put the banner above the topbar
+            --_no-ty-offset: 0;
+            z-index: calc(var(--zi-navigation-fixed) + 1);
+        }
+    }
+
+    &__body-pt {
+        padding-top: 93px;
+    }
+
+    & &--container { // When we want to keep hero content capped
+        margin: 0 auto;
+        max-width: calc(var(--s-step) * 10);
+        position: relative;
+        width: 100%;
+    }
+
+    border-width: 0 0 var(--su-static1);
+    inset: 0 0 auto 0;
+    padding: var(--su12);
+    position: fixed;
+    transform: translate3d(0, calc(var(--_no-ty) * var(--_no-ty-offset)), 0);
+    width: 100%;
+    z-index: calc(var(--zi-navigation-fixed) - 1); // Tuck below topbar
+}