@stackoverflow/stacks 1.8.0 → 1.9.1

package/lib/{css/components/inputs.less → components/input_textarea/input_textarea.less}

@@ -1,297 +1,166 @@
-.s-input,
-.s-textarea {
-    --_in-bc: var(--bc-darker);
-    --_in-bc-focus: var(--theme-secondary-300);
-    --_in-bg: var(--white);
-    --_in-br: var(--br-sm);
-    --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
-    --_in-c: unset;
-    --_in-fc: var(--fc-dark);
-    --_in-fc-focus: var(--black);
-    --_in-fs: var(--fs-body1);
-    --_in-o: unset;
-    --_in-px: 0.7em;
-    --_in-py: 0.6em;
-    --_in-placeholder-fc: var(--black-200);
-
-    // 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-050);
-        --_in-bc: var(--bc-light);
-        --_in-fc: var(--black-200);
-        --_in-fc-focus: var(--_in-fc);
-    }
-
-    .validation-states(
-        in,
-        { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
-        { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
-        { .highcontrast-mode({ --_in-bc: var(--yellow-600); }); }
-    );
-
-    // Sizes
-    &&__sm {
-        .size-styles(sm; in; @styles: fs);
-    }
-
-    &&__md {
-        @supports (-webkit-overflow-scrolling: touch) {
-            --_in-fs: 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
-    &:focus{
-        border-color: var(--_in-bc-focus);
-        box-shadow: var(--_in-bs-focus);
-        color: var(--_in-fc-focus);
-        outline: 0;
-    }
-
-    @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);
-    });
-
-    &:focus-within {
-        .highcontrast-mode({
-            --_in-bc-focus: var(--black);
-        });
-
-        border-color: var(--_in-bc-focus);
-        box-shadow: var(--_in-bs-focus);
-        color: var(--_in-fc-focus);
-        outline: 0;
-    }
-
-    &&__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;
-    }
-}
-
-// Other input-related elements
-.s-input-fill {
-    --_if-bc: var(--bc-darker);
-    --_if-bg: var(--black-050);
-    --_if-blw: 0;
-    --_if-blr: 0;
-    --_if-brr: 0;
-    --_if-brw: 0;
-
-    &&__clear {
-        --_if-bc: transparent;
-        --_if-bg: transparent;
-    }
-
-    &.order-first {
-        --_if-blw: var(--su-static1);
-        --_if-blr: var(--br-sm);
-    }
-
-    &.order-last {
-        --_if-brw: var(--su-static1);
-        --_if-brr: var(--br-sm);
-    }
-
-    background-color: var(--_if-bg);
-    border: var(--su-static1) solid var(--_if-bc);
-    border-left-width: var(--_if-blw);
-    border-right-width: var(--_if-brw);
-    border-radius: var(--_if-blr) var(--_if-brr) var(--_if-brr) var(--_if-blr);
-
-    color: var(--fc-medium);
-    font-family: inherit;
-    line-height: var(--lh-sm);
-    padding: 0.6em 0.7em;
-    white-space: nowrap;
-}
-
-.s-input-icon {
-    --_ii-fc: unset;
-    --_ii-r: 0.7em;
-
-    // MODIFIERS
-    .has-error & {
-        --_ii-fc: var(--red-400);
-    }
-
-    .has-success & {
-        --_ii-fc: var(--green-400);
-    }
-
-    .has-warning & {
-        --_ii-fc: var(--yellow-600);
-    }
-
-    .is-disabled & {
-        --_ii-fc: var(--black-400);
-    }
-
-    .is-readonly & {
-        --_ii-fc: var(--black-200);
-
-        .highcontrast-mode({
-            --_ii-fc: var(--fc-light);
-        });
-    }
-
-    &&__creditcard,
-    &&__search {
-        --_ii-r: auto;
-
-        color: var(--black-400);
-        left: 0.7em;
-    }
-
-    color: var(--_ii-fc);
-    right: var(--_ii-r);
-
-    margin-top: -9px; // Half the icon's height at 18px for centering;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-}
-.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-500);
-        --_im-a-fc: var(--red-800);
-        --_im-a-fc-hover: var(--red-900);
-    }
-
-    .has-success & {
-        --_im-fc: var(--green-500);
-        --_im-a-fc: var(--green-800);
-        --_im-a-fc-hover: var(--green-900);
-    }
-
-    .has-warning & {
-        --_im-fc: var(--yellow-800);
-        --_im-a-fc: var(--yellow-900);
-    }
-
-    // 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,
+.s-textarea {
+    --_in-bc: var(--bc-darker);
+    --_in-bc-focus: var(--theme-secondary-300);
+    --_in-bg: var(--white);
+    --_in-br: var(--br-sm);
+    --_in-bs-focus: 0 0 0 var(--su-static4) var(--focus-ring);
+    --_in-c: unset;
+    --_in-fc: var(--fc-dark);
+    --_in-fc-focus: var(--black);
+    --_in-fs: var(--fs-body1);
+    --_in-o: unset;
+    --_in-px: 0.7em;
+    --_in-py: 0.6em;
+    --_in-placeholder-fc: var(--black-200);
+
+    // 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-050);
+        --_in-bc: var(--bc-light);
+        --_in-fc: var(--black-200);
+        --_in-fc-focus: var(--_in-fc);
+    }
+
+    .validation-states(
+        in,
+        { .highcontrast-mode({ --_in-bc: var(--red-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--green-400); }); },
+        { .highcontrast-mode({ --_in-bc: var(--yellow-600); }); }
+    );
+
+    // Sizes
+    &&__sm {
+        .size-styles(sm; in; @styles: fs);
+    }
+
+    &&__md {
+        @supports (-webkit-overflow-scrolling: touch) {
+            --_in-fs: 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
+    &:focus{
+        border-color: var(--_in-bc-focus);
+        box-shadow: var(--_in-bs-focus);
+        color: var(--_in-fc-focus);
+        outline: 0;
+    }
+
+    @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);
+    });
+
+    &:focus-within {
+        .highcontrast-mode({
+            --_in-bc-focus: var(--black);
+        });
+
+        border-color: var(--_in-bc-focus);
+        box-shadow: var(--_in-bs-focus);
+        color: var(--_in-fc-focus);
+        outline: 0;
+    }
+
+    &&__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/{css/components/labels.less → components/label/label.less}

@@ -1,111 +1,111 @@
-.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-050);
-        --_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-100);
-            --_la-status-fc: var(--blue-700);
-        }
-
-        &__new {
-            --_la-status-bg: var(--green-100);
-            --_la-status-fc: var(--green-700);
-
-            .dark-mode({
-                --_la-status-bg: var(--green-050);
-                --_la-status-fc: var(--green-800);
-            });
-        }
-
-        &__required {
-            --_la-status-bg: var(--red-100);
-            --_la-status-fc: var(--red-700);
-
-            .dark-mode({
-                --_la-status-bg: var(--red-050);
-                --_la-status-fc: var(--red-800);
-            });
-        }
-
-        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;
-    }
-
-    .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-dark);
-    font-family: inherit;
-    font-weight: 600;
-    padding: 0 var(--su2); // Helps the label visually line up with inputs
-}
-
-// [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-050);
+        --_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-100);
+            --_la-status-fc: var(--blue-700);
+        }
+
+        &__new {
+            --_la-status-bg: var(--green-100);
+            --_la-status-fc: var(--green-700);
+
+            .dark-mode({
+                --_la-status-bg: var(--green-050);
+                --_la-status-fc: var(--green-800);
+            });
+        }
+
+        &__required {
+            --_la-status-bg: var(--red-100);
+            --_la-status-fc: var(--red-700);
+
+            .dark-mode({
+                --_la-status-bg: var(--red-050);
+                --_la-status-fc: var(--red-800);
+            });
+        }
+
+        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;
+    }
+
+    .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-dark);
+    font-family: inherit;
+    font-weight: 600;
+    padding: 0 var(--su2); // Helps the label visually line up with inputs
+}
+
+// [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.