@stackoverflow/stacks 2.5.4 → 2.5.5

package/lib/components/input-message/input-message.less

@@ -1,49 +1,49 @@
-.s-input-message {
-    --_im-fc: unset;
-    --_im-a-fc: unset;
-    --_im-a-fc-hover: unset;
-
-    .input-states({
-        a {
-            text-decoration: underline;
-        }
-    });
-
-    fieldset[disabled] & {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
-    }
-
-    // MODIFIERS
-    .has-error & {
-        --_im-fc: var(--red-400);
-        --_im-a-fc: var(--red-600);
-        --_im-a-fc-hover: var(--red-500);
-    }
-
-    .has-success & {
-        --_im-fc: var(--green-400);
-        --_im-a-fc: var(--green-600);
-        --_im-a-fc-hover: var(--green-500);
-    }
-
-    .has-warning & {
-        --_im-fc: var(--yellow-500);
-        --_im-a-fc: var(--yellow-600);
-        --_im-a-fc-hover: var(--yellow-500);
-    }
-
-    // CHILD ELEMENTS
-    a {
-        &:hover {
-            color: var(--_im-a-fc-hover);
-        }
-
-        color: var(--_im-a-fc);
-    }
-
-    color: var(--_im-fc);
-
-    font-size: var(--fs-caption);
-    padding: var(--su2);
-}
+.s-input-message {
+    --_im-fc: unset;
+    --_im-a-fc: unset;
+    --_im-a-fc-hover: unset;
+
+    .input-states({
+        a {
+            text-decoration: underline;
+        }
+    });
+
+    fieldset[disabled] & {
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    // MODIFIERS
+    .has-error & {
+        --_im-fc: var(--red-400);
+        --_im-a-fc: var(--red-600);
+        --_im-a-fc-hover: var(--red-500);
+    }
+
+    .has-success & {
+        --_im-fc: var(--green-400);
+        --_im-a-fc: var(--green-600);
+        --_im-a-fc-hover: var(--green-500);
+    }
+
+    .has-warning & {
+        --_im-fc: var(--yellow-500);
+        --_im-a-fc: var(--yellow-600);
+        --_im-a-fc-hover: var(--yellow-500);
+    }
+
+    // CHILD ELEMENTS
+    a {
+        &:hover {
+            color: var(--_im-a-fc-hover) !important;
+        }
+
+        color: var(--_im-a-fc) !important;
+    }
+
+    color: var(--_im-fc);
+
+    font-size: var(--fs-caption);
+    padding: var(--su2);
+}

package/lib/components/input_textarea/input_textarea.less

@@ -1,150 +1,150 @@
-.s-input,
-.s-textarea {
-    --_in-bc: var(--bc-darker);
-    --_in-bg: var(--white);
-    --_in-br: var(--br-md);
-    --_in-c: unset;
-    --_in-fc: var(--fc-dark);
-    --_in-fs: var(--fs-body1);
-    --_in-o: unset;
-    --_in-px: 0.7em;
-    --_in-py: 0.6em;
-    --_in-placeholder-fc: var(--black-300);
-
-    // CONTEXTUAL STYLES
-    @supports (-webkit-overflow-scrolling: touch) {
-        --_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
-        --_in-px: 0.55em;
-        --_in-py: 0.36em;
-
-        &::-webkit-input-placeholder {
-            line-height: normal !important;
-        }
-    }
-
-    .highcontrast-mode({
-        --_in-bc: var(--black);
-        --_in-placeholder-fc: var(--black-400);
-    });
-
-    // MODIFIERS
-    fieldset[disabled] &,
-    &[disabled],
-    &[readonly],
-    .is-readonly & {
-        --_in-c: not-allowed;
-    }
-
-    fieldset[disabled] &,
-    &[disabled] {
-        --_in-o: var(--_o-disabled-static);
-    }
-
-    &[readonly],
-    .is-readonly & {
-        .highcontrast-mode({
-            --_in-fc: var(--fc-light);
-        });
-
-        --_in-bg: var(--black-150);
-        --_in-bc: var(--bc-light);
-        --_in-fc: var(--black-300);
-    }
-
-    .validation-states(
-        in,
-        { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
-        { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
-        { .highcontrast-mode({ --_in-bc: var(--yellow-500); }); }
-    );
-
-    // Sizes
-    &&__sm {
-        .size-styles(sm; in; @styles: fs);
-    }
-
-    &&__md {
-        @supports (-webkit-overflow-scrolling: touch) {
-            --_in-fs: calc(var(--su-static16) + var(--su-static1)); // 17px
-            --_in-py: 0.4em;
-        }
-
-        .size-styles(md; in; @styles: br, fs);
-    }
-
-    &&__lg {
-        .size-styles(lg; in; @styles: br, fs);
-        --_in-px: 0.6em;
-        --_in-py: 0.45em;
-    }
-
-    &&__xl {
-        .size-styles(xl; in; @styles: br, fs);
-        --_in-px: 0.5em;
-        --_in-py: 0.4em;
-    }
-
-    // CHILD ELEMENTS
-    .webkit-autofill();
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-        color: var(--_in-placeholder-fc);
-    }
-
-    &::placeholder {
-        opacity: 1;
-    }
-
-    &&__creditcard,
-    &&__search {
-        --_in-pl: var(--su-static32);
-    }
-
-    // INTERACTION
-    // Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core.
-    &:focus,
-    &:focus-within {
-        .focus-styles();
-    }
-
-    @scrollbar-styles();
-    background-color: var(--_in-bg);
-    border: var(--su-static1) solid var(--_in-bc);
-    border-radius: var(--_in-br);
-    color: var(--_in-fc);
-    cursor: var(--_in-c);
-    font-size: var(--_in-fs);
-    opacity: var(--_in-o);
-    padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
-
-    -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
-    font-family: inherit;
-    margin: 0; // A guard against Core's default margins
-    width: 100%;
-}
-
-.s-input {
-    .input-states({
-        padding-right: var(--su32);
-    });
-
-    &&__md {
-        --_in-py: 0.5em;
-    }
-}
-
-.s-textarea {
-    .input-states({
-        padding-right: var(--su48);
-    });
-
-    &&__md {
-        --_in-py: 0.72em;
-    }
-
-    ~ .s-input-icon {
-        right: 1.5em;
-        top: 1.5em;
-    }
-}
+.s-input,
+.s-textarea {
+    --_in-bc: var(--bc-darker);
+    --_in-bg: var(--white);
+    --_in-br: var(--br-md);
+    --_in-c: unset;
+    --_in-fc: var(--fc-dark);
+    --_in-fs: var(--fs-body1);
+    --_in-o: unset;
+    --_in-px: 0.7em;
+    --_in-py: 0.6em;
+    --_in-placeholder-fc: var(--black-300);
+
+    // CONTEXTUAL STYLES
+    @supports (-webkit-overflow-scrolling: touch) {
+        --_in-fs: var(--su-static16); // 16px — Increase font size for mobile safari. This keeps our inputs from zooming the page while focused.
+        --_in-px: 0.55em;
+        --_in-py: 0.36em;
+
+        &::-webkit-input-placeholder {
+            line-height: normal !important;
+        }
+    }
+
+    .highcontrast-mode({
+        --_in-bc: var(--black);
+        --_in-placeholder-fc: var(--black-400);
+    });
+
+    // MODIFIERS
+    fieldset[disabled] &,
+    &[disabled],
+    &[readonly],
+    .is-readonly & {
+        --_in-c: not-allowed;
+    }
+
+    fieldset[disabled] &,
+    &[disabled] {
+        --_in-o: var(--_o-disabled-static);
+    }
+
+    &[readonly],
+    .is-readonly & {
+        .highcontrast-mode({
+            --_in-fc: var(--fc-light);
+        });
+
+        --_in-bg: var(--black-150);
+        --_in-bc: var(--bc-light);
+        --_in-fc: var(--black-300);
+    }
+
+    .validation-states(
+        in,
+        { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--yellow-500); }); }
+    );
+
+    // Sizes
+    &&__sm {
+        .size-styles(sm; in; @styles: fs);
+    }
+
+    &&__md {
+        @supports (-webkit-overflow-scrolling: touch) {
+            --_in-fs: calc(var(--su-static16) + var(--su-static1)); // 17px
+            --_in-py: 0.4em;
+        }
+
+        .size-styles(md; in; @styles: br, fs);
+    }
+
+    &&__lg {
+        .size-styles(lg; in; @styles: br, fs);
+        --_in-px: 0.6em;
+        --_in-py: 0.45em;
+    }
+
+    &&__xl {
+        .size-styles(xl; in; @styles: br, fs);
+        --_in-px: 0.5em;
+        --_in-py: 0.4em;
+    }
+
+    // CHILD ELEMENTS
+    .webkit-autofill();
+
+    &::placeholder,
+    &::-webkit-input-placeholder {
+        color: var(--_in-placeholder-fc);
+    }
+
+    &::placeholder {
+        opacity: 1;
+    }
+
+    &&__creditcard,
+    &&__search {
+        --_in-pl: var(--su-static32);
+    }
+
+    // INTERACTION
+    // Note: We're applying the focus styles both on `:focus` and `:focus-within` since this component can sometimes be used on the parent of an input such as in our tag selector in Core.
+    &:focus,
+    &:focus-within {
+        .focus-styles();
+    }
+
+    @scrollbar-styles();
+    background-color: var(--_in-bg);
+    border: var(--su-static1) solid var(--_in-bc);
+    border-radius: var(--_in-br);
+    color: var(--_in-fc);
+    cursor: var(--_in-c);
+    font-size: var(--_in-fs);
+    opacity: var(--_in-o);
+    padding: var(--_in-py) var(--_in-px) var(--_in-py) var(--_in-pl, var(--_in-px));
+
+    -webkit-appearance: none; // Removes shadows we don't want in mobile Safari
+    font-family: inherit;
+    margin: 0; // A guard against Core's default margins
+    width: 100%;
+}
+
+.s-input {
+    .input-states({
+        padding-right: var(--su32);
+    });
+
+    &&__md {
+        --_in-py: 0.5em;
+    }
+}
+
+.s-textarea {
+    .input-states({
+        padding-right: var(--su48);
+    });
+
+    &&__md {
+        --_in-py: 0.72em;
+    }
+
+    ~ .s-input-icon {
+        right: 1.5em;
+        top: 1.5em;
+    }
+}

package/lib/components/label/label.less

@@ -1,110 +1,110 @@
-.s-label {
-    --_la-fs: var(--fs-body2);
-
-    // CONTEXTUAL STYLES
-    &[for] {
-        cursor: pointer;
-    }
-
-    fieldset[disabled] &,
-    .is-disabled & {
-        .s-description {
-            opacity: unset;
-        }
-
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
-    }
-
-    .is-readonly & {
-        cursor: not-allowed;
-    }
-
-    // MODIFIERS
-    // Sizes
-    &&__sm {
-        .size-styles(sm; la; @styles: fs);
-    }
-
-    &&__md {
-        .size-styles(md; la; @styles: fs);
-    }
-
-    &&__lg {
-        .size-styles(lg; la; @styles: fs);
-    }
-
-    &&__xl {
-        .size-styles(xl; la; @styles: fs);
-    }
-
-    // CHILD ELEMENTS
-    // Label status flag
-    // Is this form item required or optional? Flag the status for users.
-    // Default styling is optional.
-    &--status { // TODO convert to require parent class for styling [1]
-        --_la-status-b: none;
-        --_la-status-bg: var(--black-150);
-        --_la-status-fc: var(--fc-medium);
-
-        .highcontrast-mode({
-            --_la-status-b: var(--su-static1) solid currentColor;
-        });
-
-        // TODO: include child component class (without variant) on selector
-        &__beta {
-            --_la-status-bg: var(--blue-200);
-            --_la-status-fc: var(--blue-500);
-        }
-
-        &__new {
-            --_la-status-bg: var(--green-200);
-            --_la-status-fc: var(--green-500);
-        }
-
-        &__required {
-            --_la-status-bg: var(--red-200);
-            --_la-status-fc: var(--red-500);
-        }
-
-        background-color: var(--_la-status-bg);
-        border: var(--_la-status-b);
-        color: var(--_la-status-fc);
-
-        border-radius: 1000px;
-        font-size: var(--fs-caption);
-        font-weight: 400;
-        margin-left: var(--su4);
-        padding: var(--su2) var(--su8);
-        vertical-align: text-bottom;
-    }
-
-    // TODO we shouldn't support descriptions and messages within labels
-    .s-description,
-    .s-input-message {
-        font-weight: normal;
-        margin-bottom: 0;
-        margin-top: var(--su4);
-        padding: 0;
-    }
-
-    font-size: var(--_la-fs);
-
-    color: var(--fc-medium);
-    font-family: inherit;
-    font-weight: 700;
-    padding: 0 var(--su2); // Helps the label visually line up with inputs
-}
-
-.s-required-symbol {
-    color: var(--red-400);
-    font-size: 125%;
-    font-weight: normal;
-    line-height: 0;
-    text-decoration: none !important;
-}
-
-// [1] In Core, we have *many* instances of `.s-label--status` used without the `.s-label` parent.
-//     While I'd prefer to enforce the requirement of the parent class, it's too much of a lift at this moment.
-//     We'll come back to it, hopefully when we have a pill component to replace the current usage of `.s-label--status`
-//     without the base label class.
+.s-label {
+    --_la-fs: var(--fs-body2);
+
+    // CONTEXTUAL STYLES
+    &[for] {
+        cursor: pointer;
+    }
+
+    fieldset[disabled] &,
+    .is-disabled & {
+        .s-description {
+            opacity: unset;
+        }
+
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
+    }
+
+    .is-readonly & {
+        cursor: not-allowed;
+    }
+
+    // MODIFIERS
+    // Sizes
+    &&__sm {
+        .size-styles(sm; la; @styles: fs);
+    }
+
+    &&__md {
+        .size-styles(md; la; @styles: fs);
+    }
+
+    &&__lg {
+        .size-styles(lg; la; @styles: fs);
+    }
+
+    &&__xl {
+        .size-styles(xl; la; @styles: fs);
+    }
+
+    // CHILD ELEMENTS
+    // Label status flag
+    // Is this form item required or optional? Flag the status for users.
+    // Default styling is optional.
+    &--status { // TODO convert to require parent class for styling [1]
+        --_la-status-b: none;
+        --_la-status-bg: var(--black-150);
+        --_la-status-fc: var(--fc-medium);
+
+        .highcontrast-mode({
+            --_la-status-b: var(--su-static1) solid currentColor;
+        });
+
+        // TODO: include child component class (without variant) on selector
+        &__beta {
+            --_la-status-bg: var(--blue-200);
+            --_la-status-fc: var(--blue-500);
+        }
+
+        &__new {
+            --_la-status-bg: var(--green-200);
+            --_la-status-fc: var(--green-500);
+        }
+
+        &__required {
+            --_la-status-bg: var(--red-200);
+            --_la-status-fc: var(--red-500);
+        }
+
+        background-color: var(--_la-status-bg);
+        border: var(--_la-status-b);
+        color: var(--_la-status-fc);
+
+        border-radius: 1000px;
+        font-size: var(--fs-caption);
+        font-weight: 400;
+        margin-left: var(--su4);
+        padding: var(--su2) var(--su8);
+        vertical-align: text-bottom;
+    }
+
+    // TODO we shouldn't support descriptions and messages within labels
+    .s-description,
+    .s-input-message {
+        font-weight: normal;
+        margin-bottom: 0;
+        margin-top: var(--su4);
+        padding: 0;
+    }
+
+    font-size: var(--_la-fs);
+
+    color: var(--fc-medium);
+    font-family: inherit;
+    font-weight: 700;
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
+}
+
+.s-required-symbol {
+    color: var(--red-400);
+    font-size: 125%;
+    font-weight: normal;
+    line-height: 0;
+    text-decoration: none !important;
+}
+
+// [1] In Core, we have *many* instances of `.s-label--status` used without the `.s-label` parent.
+//     While I'd prefer to enforce the requirement of the parent class, it's too much of a lift at this moment.
+//     We'll come back to it, hopefully when we have a pill component to replace the current usage of `.s-label--status`
+//     without the base label class.