@stackoverflow/stacks 2.5.3 → 2.5.5

package/lib/components/button-group/button-group.less

@@ -1,82 +1,82 @@
-.s-btn-group {
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-sm({
-        .s-btn {
-            --_bu-px: 0.4em;
-
-            &.s-btn__dropdown {
-                padding-right: 1.2em;
-
-                &:after {
-                    right: var(--_bu-px);
-                }
-            }
-        }
-    }, @force-selector: true);
-
-    // CHILD ELEMENTS
-    form {
-        display: flex;
-        margin-right: calc(var(--su-static1) * -1); // -1px
-    }
-
-    //  --_bu-py values set below to ensure btn-group height matches same-sized button height
-    // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
-    .s-btn {
-        --_bu-br: var(--br-sm);
-        --_bu-bc-hover: transparent;
-        --_bu-px: calc(var(--su12) - var(--su1)); // 11px
-        --_bu-py: calc(var(--su6) + 0.65px); // 6.65px
-
-        &.s-btn__xs {
-            --_bu-px: calc(var(--su8) - var(--su1)); // 7px
-            --_bu-py: calc(var(--su2) + 0.9px); // 2.9px
-        }
-
-        &.s-btn__sm {
-            --_bu-px: calc(var(--su8) + var(--su1)); // 9px
-            --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px)); // 5.85px
-        }
-
-        &.s-btn__md {
-            --_bu-px: var(--su12);
-            --_bu-py: calc(var(--su8) + 0.15px); // 8.15px
-        }
-
-        &.is-selected,
-        &--radio:checked + .s-btn {
-            font-weight: bold;
-        }
-
-        .s-btn--badge {
-            // set negative margins so button height isn't affect by badge
-            margin-bottom: -100%;
-            margin-top: -100%;
-            font-weight: normal;
-        }
-
-        & .s-btn--text {
-            &:before {
-                content: attr(data-text);
-                content: attr(data-text) / "";
-                font-weight: bold;
-                height: 0;
-                pointer-events: none;
-                user-select: none;
-                visibility: hidden;
-            }
-
-            display: inline-flex;
-            flex-direction: column;
-        }
-
-        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
-    }
-
-    // STATIC COMPONENT STYLES
-    border: var(--su-static1) solid var(--black-300);
-    border-radius: var(--br-md);
-    display: inline-flex;
-    flex-wrap: wrap;
-    padding: calc(var(--su-static4) - var(--su-static1));
-}
+.s-btn-group {
+    // CONTEXTUAL STYLES
+    #stacks-internals #screen-sm({
+        .s-btn {
+            --_bu-px: 0.4em;
+
+            &.s-btn__dropdown {
+                padding-right: 1.2em;
+
+                &:after {
+                    right: var(--_bu-px);
+                }
+            }
+        }
+    }, @force-selector: true);
+
+    // CHILD ELEMENTS
+    form {
+        display: flex;
+        margin-right: calc(var(--su-static1) * -1); // -1px
+    }
+
+    //  --_bu-py values set below to ensure btn-group height matches same-sized button height
+    // See https://github.com/StackEng/StackOverflow/pull/18992#pullrequestreview-1947490680
+    .s-btn {
+        --_bu-br: var(--br-sm);
+        --_bu-bc-hover: transparent;
+        --_bu-px: calc(var(--su12) - var(--su1)); // 11px
+        --_bu-py: calc(var(--su6) + 0.65px); // 6.65px
+
+        &.s-btn__xs {
+            --_bu-px: calc(var(--su8) - var(--su1)); // 7px
+            --_bu-py: calc(var(--su2) + 0.9px); // 2.9px
+        }
+
+        &.s-btn__sm {
+            --_bu-px: calc(var(--su8) + var(--su1)); // 9px
+            --_bu-py: calc(var(--su4) + (var(--su2) - 0.15px)); // 5.85px
+        }
+
+        &.s-btn__md {
+            --_bu-px: var(--su12);
+            --_bu-py: calc(var(--su8) + 0.15px); // 8.15px
+        }
+
+        &.is-selected,
+        &--radio:checked + .s-btn {
+            font-weight: bold;
+        }
+
+        .s-btn--badge {
+            // set negative margins so button height isn't affect by badge
+            margin-bottom: -100%;
+            margin-top: -100%;
+            font-weight: normal;
+        }
+
+        & .s-btn--text {
+            &:before {
+                content: attr(data-text);
+                content: attr(data-text) / "";
+                font-weight: bold;
+                height: 0;
+                pointer-events: none;
+                user-select: none;
+                visibility: hidden;
+            }
+
+            display: inline-flex;
+            flex-direction: column;
+        }
+
+        white-space: nowrap; // When the buttons wrap, they get super tall and mess up the whole layout
+    }
+
+    // STATIC COMPONENT STYLES
+    border: var(--su-static1) solid var(--black-300);
+    border-radius: var(--br-md);
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: calc(var(--su-static4) - var(--su-static1));
+}

package/lib/components/card/card.less

@@ -1,37 +1,37 @@
-.s-card {
-    --_ca-bc: var(--bc-medium);
-
-    // CONTEXTUAL STYLES
-    a& {
-        text-decoration: none !important;
-    }
-
-    // VARIANTS
-    &&__muted {
-        --_ca-bc: var(--bc-light);
-
-        //  Dim only the first child card content
-        > * {
-            opacity: 0.65;
-
-            .dark-mode({
-                opacity: 0.7;
-            });
-
-            .highcontrast-mode({
-                opacity: 0.75;
-            });
-        }
-    }
-
-    // CHILD ELEMENTS
-    > :last-child {
-        margin-bottom: 0;
-    }
-
-    border: var(--su-static1) solid var(--_ca-bc);
-
-    background-color: var(--white);
-    border-radius: var(--br-sm);
-    padding: var(--su12);
-}
+.s-card {
+    --_ca-bc: var(--bc-medium);
+
+    // CONTEXTUAL STYLES
+    a& {
+        text-decoration: none !important;
+    }
+
+    // VARIANTS
+    &&__muted {
+        --_ca-bc: var(--bc-light);
+
+        //  Dim only the first child card content
+        > * {
+            opacity: 0.65;
+
+            .dark-mode({
+                opacity: 0.7;
+            });
+
+            .highcontrast-mode({
+                opacity: 0.75;
+            });
+        }
+    }
+
+    // CHILD ELEMENTS
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    border: var(--su-static1) solid var(--_ca-bc);
+
+    background-color: var(--white);
+    border-radius: var(--br-sm);
+    padding: var(--su12);
+}

package/lib/components/check-control/check-control.less

@@ -1,17 +1,17 @@
-.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);
-}
+.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 +1,19 @@
-.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);
-}
+.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/checkbox_radio/checkbox_radio.less

@@ -1,159 +1,159 @@
-.s-checkbox,
-.s-radio {
-    --_ch-baw: var(--su-static1);
-    --_ch-bc: var(--bc-dark);
-    --_ch-bg: var(--white);
-    --_ch-bg-image: unset;
-
-    // CONTEXTUAL STYLES
-    fieldset[disabled] &,
-    &[disabled] {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
-    }
-
-    .s-check-control & {
-        &[disabled] + .s-label {
-            &:extend(.is-disabled .s-label);
-        }
-    }
-
-    .s-check-group & {
-        margin-top: calc(var(--su2) + var(--su1)); // 3px
-    }
-
-    input& {
-        flex-shrink: 0;
-    }
-
-    // INTERACTION
-    &:focus {
-        .focus-styles();
-    }
-
-    background-color: var(--_ch-bg);
-    border: var(--_ch-baw) solid var(--_ch-bc);
-
-    appearance: none;
-    cursor: pointer;
-    font-size: inherit;
-    height: 1em;
-    margin: 0; // A guard against Core's default margins
-    outline: 0;
-    vertical-align: middle;
-    width: 1em;
-}
-
-.s-checkbox {
-    // Less variables for check svg fill color
-    @ch-bg-image-fill: .set-white()[default];
-    @ch-bg-image-fill-dark: .set-white-dark()[default];
-
-    // CONTEXTUAL STYLES
-    .dark-mode({
-        &:checked {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
-        }
-        &:indeterminate {
-            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
-        }
-    });
-
-    .highcontrast-dark-mode({
-        &:checked, &:indeterminate {
-            --_ch-bc: var(--blue-500) !important;
-            --_ch-bg: var(--blue-400);
-        }
-    });
-
-    @media (forced-colors: active) {
-        &:checked,
-        &:indeterminate {
-            --_ch-bg: ButtonText !important;
-        }
-    }
-
-    // STATES
-    &:checked, &:indeterminate {
-        --_ch-bc: var(--theme-secondary-400) !important;
-        --_ch-bg: var(--theme-secondary-400);
-    }
-
-    &:checked {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
-    }
-
-    &:indeterminate {
-        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
-    }
-
-    background-image: var(--_ch-bg-image);
-
-    background-position: center center;
-    background-repeat: no-repeat;
-    background-size: contain;
-    border-radius: var(--br-sm);
-}
-
-.s-radio {
-
-    // CONTEXTUAL STYLES
-    .highcontrast-dark-mode({
-        &:checked {
-            --_ch-bc: var(--blue-400);
-            outline: var(--su-static1) solid var(--black);
-        }
-    });
-
-    // STATES
-    &:checked {
-        --_ch-baw: 0.30769231em;
-        --_ch-bc: var(--theme-secondary-400);
-        --_ch-bg: var(--white);
-    }
-
-    border-radius: var(--br-circle);
-}
-
-.s-checkbox,
-.s-radio:not(:checked) {
-    .validation-states(ch);
-}
-
-.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);
-}
-
-.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);
-}
+.s-checkbox,
+.s-radio {
+    --_ch-baw: var(--su-static1);
+    --_ch-bc: var(--bc-dark);
+    --_ch-bg: var(--white);
+    --_ch-bg-image: unset;
+
+    // CONTEXTUAL STYLES
+    fieldset[disabled] &,
+    &[disabled] {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    .s-check-control & {
+        &[disabled] + .s-label {
+            &:extend(.is-disabled .s-label);
+        }
+    }
+
+    .s-check-group & {
+        margin-top: calc(var(--su2) + var(--su1)); // 3px
+    }
+
+    input& {
+        flex-shrink: 0;
+    }
+
+    // INTERACTION
+    &:focus {
+        .focus-styles();
+    }
+
+    background-color: var(--_ch-bg);
+    border: var(--_ch-baw) solid var(--_ch-bc);
+
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    height: 1em;
+    margin: 0; // A guard against Core's default margins
+    outline: 0;
+    vertical-align: middle;
+    width: 1em;
+}
+
+.s-checkbox {
+    // Less variables for check svg fill color
+    @ch-bg-image-fill: .set-white()[default];
+    @ch-bg-image-fill-dark: .set-white-dark()[default];
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        &:checked {
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+        }
+        &:indeterminate {
+            --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
+        }
+    });
+
+    .highcontrast-dark-mode({
+        &:checked, &:indeterminate {
+            --_ch-bc: var(--blue-500) !important;
+            --_ch-bg: var(--blue-400);
+        }
+    });
+
+    @media (forced-colors: active) {
+        &:checked,
+        &:indeterminate {
+            --_ch-bg: ButtonText !important;
+        }
+    }
+
+    // STATES
+    &:checked, &:indeterminate {
+        --_ch-bc: var(--theme-secondary-400) !important;
+        --_ch-bg: var(--theme-secondary-400);
+    }
+
+    &:checked {
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+    }
+
+    &:indeterminate {
+        --_ch-bg-image: url("data:image/svg+xml;,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
+    }
+
+    background-image: var(--_ch-bg-image);
+
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    border-radius: var(--br-sm);
+}
+
+.s-radio {
+
+    // CONTEXTUAL STYLES
+    .highcontrast-dark-mode({
+        &:checked {
+            --_ch-bc: var(--blue-400);
+            outline: var(--su-static1) solid var(--black);
+        }
+    });
+
+    // STATES
+    &:checked {
+        --_ch-baw: 0.30769231em;
+        --_ch-bc: var(--theme-secondary-400);
+        --_ch-bg: var(--white);
+    }
+
+    border-radius: var(--br-circle);
+}
+
+.s-checkbox,
+.s-radio:not(:checked) {
+    .validation-states(ch);
+}
+
+.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);
+}
+
+.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);
+}