@stackoverflow/stacks 2.7.3 → 2.7.4

package/lib/components/select/select.less

@@ -1,138 +1,138 @@
-.s-select {
-    --_se-arrow-bc: currentColor transparent;
-    --_se-arrow-size: var(--su-static4); // Constant
-    --_se-select-bc: var(--bc-darker);
-    --_se-select-bg: var(--white);
-    --_se-select-br: var(--br-md);
-    --_se-select-fc: var(--black);
-    --_se-select-px: 0.7em;
-    --_se-select-py: 0.6em;
-    --_se-select-fs: var(--fs-body1);
-
-    // CONTEXTUAL STYLES
-    @supports (-webkit-overflow-scrolling: touch) {
-        --_se-select-fs: var(--su-static16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
-        --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
-        --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
-    }
-
-    // MODIFIERS
-    .input-states({
-        position: relative;
-    });
-
-    .validation-states(se-select);
-
-    .is-disabled & {
-        --_se-arrow-bc: var(--bc-dark) transparent;
-    }
-
-    &&__sm {
-        .size-styles(sm; se-select; @styles: fs);
-        // --_se-select-fs: var(--fs-caption);
-    }
-
-    &&__md {
-        .size-styles(md; se-select; @styles: br, fs);
-        --_se-select-py: 0.5em;
-    }
-
-    &&__lg {
-        .size-styles(lg; se-select; @styles: br, fs);
-        --_se-select-px: 0.6em;
-        --_se-select-py: 0.45em;
-    }
-
-    &&__xl {
-        .size-styles(xl; se-select; @styles: br, fs);
-        --_se-select-px: 0.5em;
-        --_se-select-py: 0.4em;
-    }
-
-    // CHILD ELEMENTS
-    select&,
-    & > select {
-        .webkit-autofill();
-    }
-
-    &:before,
-    &:after { // menu arrows
-        border-color: var(--_se-arrow-bc);
-        border-style: solid;
-        border-width: var(--_se-arrow-size);
-        content: "";
-        pointer-events: none;
-        position: absolute;
-        right: calc(var(--su-static12) + var(--su-static1));
-        z-index: var(--zi-selected);
-    }
-
-    &:after {
-        border-bottom-width: 0;
-        top: calc(50% + var(--su-static1));
-    }
-
-    &:before {
-        border-top-width: 0;
-        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
-    }
-
-    > select { // Menu
-        // CONTEXTUAL STYLES
-        fieldset[disabled] &,
-        &[disabled] {
-            cursor: not-allowed;
-            opacity: var(--_o-disabled-static);
-        }
-
-        &[readonly],
-        .is-readonly & { // [1]
-            --_se-select-bc: var(--bc-light);
-            --_se-select-bg: var(--black-150);
-            --_se-select-fc: var(--black-300);
-
-            .highcontrast-mode({
-                --_se-select-fc: var(--fc-light);
-            });
-
-            cursor: not-allowed;
-        }
-
-        // INTERACTION
-        &:focus {
-            .focus-styles();
-        }
-
-        &:focus,
-        &.focus {
-            color: var(--black);
-        }
-
-        background-color: var(--_se-select-bg);
-        border: var(--su-static1) solid var(--_se-select-bc);
-        border-radius: var(--_se-select-br);
-        color: var(--_se-select-fc);
-        font-size: var(--_se-select-fs);
-        padding: var(--_se-select-py) var(--_se-select-px);
-
-        appearance: none;
-        font-family: inherit;
-        height: 100%; // Fill the height of its parent
-        line-height: var(--lh-sm);
-        outline: 0;
-        padding-right: var(--su32);
-        position: relative; // This prevents Firefox from requiring a second click to select options
-        width: 100%;
-    }
-
-    .s-input-icon {
-        right: var(--su32);
-    }
-
-    color: var(--fc-dark);
-    position: relative;
-}
-
-// [1] The readonly attribute is not supported on select elements
-//      See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
-//      and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086
+.s-select {
+    --_se-arrow-bc: currentColor transparent;
+    --_se-arrow-size: var(--su-static4); // Constant
+    --_se-select-bc: var(--bc-darker);
+    --_se-select-bg: var(--white);
+    --_se-select-br: var(--br-md);
+    --_se-select-fc: var(--black);
+    --_se-select-px: 0.7em;
+    --_se-select-py: 0.6em;
+    --_se-select-fs: var(--fs-body1);
+
+    // CONTEXTUAL STYLES
+    @supports (-webkit-overflow-scrolling: touch) {
+        --_se-select-fs: var(--su-static16); // Increase font size for mobile safari. This keeps our inputs from zooming the page while focused
+        --_se-select-px: 0.55em; // Compensate for the larger font size so we generally keep the input the same size
+        --_se-select-py: 0.4em; // Compensate for the larger font size so we generally keep the input the same size
+    }
+
+    // MODIFIERS
+    .input-states({
+        position: relative;
+    });
+
+    .validation-states(se-select);
+
+    .is-disabled & {
+        --_se-arrow-bc: var(--bc-dark) transparent;
+    }
+
+    &&__sm {
+        .size-styles(sm; se-select; @styles: fs);
+        // --_se-select-fs: var(--fs-caption);
+    }
+
+    &&__md {
+        .size-styles(md; se-select; @styles: br, fs);
+        --_se-select-py: 0.5em;
+    }
+
+    &&__lg {
+        .size-styles(lg; se-select; @styles: br, fs);
+        --_se-select-px: 0.6em;
+        --_se-select-py: 0.45em;
+    }
+
+    &&__xl {
+        .size-styles(xl; se-select; @styles: br, fs);
+        --_se-select-px: 0.5em;
+        --_se-select-py: 0.4em;
+    }
+
+    // CHILD ELEMENTS
+    select&,
+    & > select {
+        .webkit-autofill();
+    }
+
+    &:before,
+    &:after { // menu arrows
+        border-color: var(--_se-arrow-bc);
+        border-style: solid;
+        border-width: var(--_se-arrow-size);
+        content: "";
+        pointer-events: none;
+        position: absolute;
+        right: calc(var(--su-static12) + var(--su-static1));
+        z-index: var(--zi-selected);
+    }
+
+    &:after {
+        border-bottom-width: 0;
+        top: calc(50% + var(--su-static1));
+    }
+
+    &:before {
+        border-top-width: 0;
+        top: calc(50% - calc(var(--_se-arrow-size) + var(--su-static1)));
+    }
+
+    > select { // Menu
+        // CONTEXTUAL STYLES
+        fieldset[disabled] &,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: var(--_o-disabled-static);
+        }
+
+        &[readonly],
+        .is-readonly & { // [1]
+            --_se-select-bc: var(--bc-light);
+            --_se-select-bg: var(--black-150);
+            --_se-select-fc: var(--black-300);
+
+            .highcontrast-mode({
+                --_se-select-fc: var(--fc-light);
+            });
+
+            cursor: not-allowed;
+        }
+
+        // INTERACTION
+        &:focus {
+            .focus-styles();
+        }
+
+        &:focus,
+        &.focus {
+            color: var(--black);
+        }
+
+        background-color: var(--_se-select-bg);
+        border: var(--su-static1) solid var(--_se-select-bc);
+        border-radius: var(--_se-select-br);
+        color: var(--_se-select-fc);
+        font-size: var(--_se-select-fs);
+        padding: var(--_se-select-py) var(--_se-select-px);
+
+        appearance: none;
+        font-family: inherit;
+        height: 100%; // Fill the height of its parent
+        line-height: var(--lh-sm);
+        outline: 0;
+        padding-right: var(--su32);
+        position: relative; // This prevents Firefox from requiring a second click to select options
+        width: 100%;
+    }
+
+    .s-input-icon {
+        right: var(--su32);
+    }
+
+    color: var(--fc-dark);
+    position: relative;
+}
+
+// [1] The readonly attribute is not supported on select elements
+//      See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly
+//      and https://github.com/StackExchange/Stacks/pull/1040#discussion_r931144086

package/lib/components/spinner/spinner.less

@@ -1,103 +1,103 @@
-.s-spinner {
-    --_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
-    &:after,
-    &:before {
-        border: var(--_sp-baw) solid currentColor;
-
-        border-radius: var(--br-circle);
-        content: '';
-        height: 100%;
-        position: absolute;
-        width: 100%;
-    }
-
-    &:after {
-        border-top-color: transparent;
-        border-right-color: transparent;
-        border-bottom-color: transparent;
-        animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-    }
-
-    &:before {
-        opacity: 0.25;
-        transform: rotate(90deg); // [1]
-    }
-
-    height: var(--_sp-size);
-    width: var(--_sp-size);
-
-    position: relative;
-    text-align: left; // [2]
-}
-
-.is-loading {
-    --_li-offset: 0.6em;
-    --_il-size: 1.23076923em;
-
-    &:after,
-    &:before {
-        border-radius: var(--br-circle);
-        border-style: solid;
-        border-width: var(--su-static2);
-        content: "";
-        height: var(--_il-size);
-        left: var(--_li-offset);
-        position: absolute;
-        top: calc(50% - var(--_li-offset));
-        width: var(--_il-size);
-    }
-
-    &:after {
-        animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
-        border-color: transparent;
-        border-left-color: currentColor;
-        filter: invert(0); // [1]
-        transform-origin: 50% 50% var(--su-static1); // [1]
-    }
-
-    &:before {
-        border-color: currentColor;
-        opacity: 0.3;
-    }
-
-    padding-left: 2.2em;
-    position: relative;
-}
-
-// Keyframes
-@keyframes s-spinner-rotate {
-    from {
-        transform: rotate(0deg);
-    }
-    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.
+.s-spinner {
+    --_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
+    &:after,
+    &:before {
+        border: var(--_sp-baw) solid currentColor;
+
+        border-radius: var(--br-circle);
+        content: '';
+        height: 100%;
+        position: absolute;
+        width: 100%;
+    }
+
+    &:after {
+        border-top-color: transparent;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+    }
+
+    &:before {
+        opacity: 0.25;
+        transform: rotate(90deg); // [1]
+    }
+
+    height: var(--_sp-size);
+    width: var(--_sp-size);
+
+    position: relative;
+    text-align: left; // [2]
+}
+
+.is-loading {
+    --_li-offset: 0.6em;
+    --_il-size: 1.23076923em;
+
+    &:after,
+    &:before {
+        border-radius: var(--br-circle);
+        border-style: solid;
+        border-width: var(--su-static2);
+        content: "";
+        height: var(--_il-size);
+        left: var(--_li-offset);
+        position: absolute;
+        top: calc(50% - var(--_li-offset));
+        width: var(--_il-size);
+    }
+
+    &:after {
+        animation: s-spinner-rotate 0.9s infinite cubic-bezier(0.5, 0.1, 0.5, 0.9);
+        border-color: transparent;
+        border-left-color: currentColor;
+        filter: invert(0); // [1]
+        transform-origin: 50% 50% var(--su-static1); // [1]
+    }
+
+    &:before {
+        border-color: currentColor;
+        opacity: 0.3;
+    }
+
+    padding-left: 2.2em;
+    position: relative;
+}
+
+// Keyframes
+@keyframes s-spinner-rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    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.