@stackoverflow/stacks 2.7.3 → 2.7.5

package/lib/components/expandable/expandable.less

@@ -1,119 +1,119 @@
-.s-expandable { // [1]
-    // COMPONENT-SPECIFIC CONSTANTS
-    @ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    @ex-min-expected-height: 10px;
-    @ex-transition-duration: 100ms;
-    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
-    --_ex-after-h: 10px;
-    --_ex-after-hmx: 0;
-    --_ex-after-transition:
-        height @ex-transition-duration linear,
-        max-height 0s @ex-transition-duration linear;
-    --_ex-content-hmx: 1000000px;
-    --_ex-content-mb: 0;
-    --_ex-content-o: unset;
-    --_ex-content-transform: unset;
-    --_ex-content-transition:
-        margin-bottom @ex-transition-duration cubic-bezier(0, 0, 0, 1),
-        transform @ex-transition-duration cubic-bezier(1, 0, 1, 1),
-        opacity @ex-transition-duration cubic-bezier(1, 0, 1, 1);
-    --_ex-content-v: unset;
-
-    &:not(.is-expanded) {
-        --_ex-after-h: 0;
-        --_ex-after-hmx: @ex-min-expected-height;
-        --_ex-after-transition: height @ex-min-expected-height linear;
-        --_ex-content-hmx: 0;
-        --_ex-content-mb: -1500px;
-        --_ex-content-o: 0;
-        --_ex-content-transform: scaleY(0);
-        --_ex-content-transition:
-            margin-bottom @ex-transition-duration cubic-bezier(1, 0, 1, 1),
-            visibility 0s @ex-transition-duration,
-            max-height 0s @ex-transition-duration,
-            transform @ex-transition-duration cubic-bezier(0, 1, 1, 1),
-            opacity @ex-transition-duration cubic-bezier(0, 1, 1, 1);
-        --_ex-content-v: hidden;
-
-        & .s-expandable--content {
-            @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
-                --_ex-content-o: 0;
-                --_ex-content-transform: none;
-            }
-        }
-
-        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
-        overflow: hidden;
-        transition: none;
-    }
-
-    &:after {
-        height: var(--_ex-after-h);
-        max-height: var(--_ex-after-hmx);
-        transition: var(--_ex-after-transition);
-
-        -ms-flex-preferred-size: 0;
-        content: '';
-        flex-basis: 0;
-    }
-
-    & &--content {
-        max-height: var(--_ex-content-hmx);
-        margin-bottom: var(--_ex-content-mb);
-        opacity: var(--_ex-content-o);
-        -webkit-transform: var(--_ex-content-transform);
-        transform: var(--_ex-content-transform);
-        visibility: var(--_ex-content-v);
-
-        -ms-flex-preferred-size: 100%;
-        flex-basis: 100%;
-        -webkit-transform-origin: 0 0;
-        transform-origin: 0 0;
-        transition: var(--_ex-content-transition);
-    }
-
-    align-items: flex-start; // see comment above
-    display: flex;
-    -webkit-clip-path: @ex-clip-path;
-    clip-path: @ex-clip-path;
-    transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
-}
-
-// [1] see http://stackoverflow.com/a/43965099 for how this works:
-
-// Notes on the clip-path stuff: What we would really like is overflow: hidden during the transition,
-// but not when the element is expanded. Unfortunately, although the CSS spec provides for it, there's
-// no browser support yet for transitioning non-interpolatable properties, and therefore we cannot say
-// "change overflow to visible *after* the transition".
-//
-// So we use clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%), which is essentially the same
-// as overflow: hidden, but unlike overflow, clip-path is interpolatable -- but only if the opposite state
-// is also a polygon, and has the same vertice count. So our version of overflow: visible is a rectangle
-// of 2x2 million pixels, which should be enough for everybody (TM).
-//
-// At the time of writing, clip-path works in Chrome, Firefox Beta, and Safari (with vendor prefix).
-//
-// In browsers that do not support this yet, we have to have another way to prevent the expandable content
-// from being visible below the bottom edge during the transition, and the best I could come up with is
-// transitioning to scaleY(0) with a timing function that's faster than the height-reducing transitions.
-// This does kinda look like a deliberate effect, even more so if we also transition to transparency
-// (which we therefore do), so I feel it's an okay fallback.
-//
-// We still set overflow to hidden in the collapsed state (which also applies to the collapsing transition),
-// we just can't do that for the expanding transition.
-//
-// A major drawback of clip-path is that even though the content is clipped (not visible), it will still
-// contribute to the document height. This caused a jumping around of the scrollbar (and possibly even
-// of the viewport) when the expandable was at the bottom of the page, because once the negative bottom
-// margin of the -expandable-group exceeds the actual height, any additional pixels were added on to the
-// bottom. The fix is to set the -expandable-group's flex alignment to flex-start, which forces the
-// (no longer visible) element itself to remain at the top, thereby forcing the excess pixels to be added
-// above the top, not below the bottom. And because extending content above the document top will not do
-// anything to the document height, there is no jumping during the transition.
-// see "@ex-transition-duration"
-
-// Per the answer referenced above, the component can only guarantee smooth transitions if above a minimum
-// height and can only guarantee the element will be hidden is below a maximimum height.
-// The minimum height has been set at 10px because that's below the height of a single line of text in an s-description.
+.s-expandable { // [1]
+    // COMPONENT-SPECIFIC CONSTANTS
+    @ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
+    @ex-min-expected-height: 10px;
+    @ex-transition-duration: 100ms;
+    // COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    --_ex-after-h: 10px;
+    --_ex-after-hmx: 0;
+    --_ex-after-transition:
+        height @ex-transition-duration linear,
+        max-height 0s @ex-transition-duration linear;
+    --_ex-content-hmx: 1000000px;
+    --_ex-content-mb: 0;
+    --_ex-content-o: unset;
+    --_ex-content-transform: unset;
+    --_ex-content-transition:
+        margin-bottom @ex-transition-duration cubic-bezier(0, 0, 0, 1),
+        transform @ex-transition-duration cubic-bezier(1, 0, 1, 1),
+        opacity @ex-transition-duration cubic-bezier(1, 0, 1, 1);
+    --_ex-content-v: unset;
+
+    &:not(.is-expanded) {
+        --_ex-after-h: 0;
+        --_ex-after-hmx: @ex-min-expected-height;
+        --_ex-after-transition: height @ex-min-expected-height linear;
+        --_ex-content-hmx: 0;
+        --_ex-content-mb: -1500px;
+        --_ex-content-o: 0;
+        --_ex-content-transform: scaleY(0);
+        --_ex-content-transition:
+            margin-bottom @ex-transition-duration cubic-bezier(1, 0, 1, 1),
+            visibility 0s @ex-transition-duration,
+            max-height 0s @ex-transition-duration,
+            transform @ex-transition-duration cubic-bezier(0, 1, 1, 1),
+            opacity @ex-transition-duration cubic-bezier(0, 1, 1, 1);
+        --_ex-content-v: hidden;
+
+        & .s-expandable--content {
+            @supports ((-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) or (clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%))) {
+                --_ex-content-o: 0;
+                --_ex-content-transform: none;
+            }
+        }
+
+        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
+        overflow: hidden;
+        transition: none;
+    }
+
+    &:after {
+        height: var(--_ex-after-h);
+        max-height: var(--_ex-after-hmx);
+        transition: var(--_ex-after-transition);
+
+        -ms-flex-preferred-size: 0;
+        content: '';
+        flex-basis: 0;
+    }
+
+    & &--content {
+        max-height: var(--_ex-content-hmx);
+        margin-bottom: var(--_ex-content-mb);
+        opacity: var(--_ex-content-o);
+        -webkit-transform: var(--_ex-content-transform);
+        transform: var(--_ex-content-transform);
+        visibility: var(--_ex-content-v);
+
+        -ms-flex-preferred-size: 100%;
+        flex-basis: 100%;
+        -webkit-transform-origin: 0 0;
+        transform-origin: 0 0;
+        transition: var(--_ex-content-transition);
+    }
+
+    align-items: flex-start; // see comment above
+    display: flex;
+    -webkit-clip-path: @ex-clip-path;
+    clip-path: @ex-clip-path;
+    transition: clip-path 0s var(--_ex-transition-duration), -webkit-clip-path 0s var(--_ex-transition-duration);
+}
+
+// [1] see http://stackoverflow.com/a/43965099 for how this works:
+
+// Notes on the clip-path stuff: What we would really like is overflow: hidden during the transition,
+// but not when the element is expanded. Unfortunately, although the CSS spec provides for it, there's
+// no browser support yet for transitioning non-interpolatable properties, and therefore we cannot say
+// "change overflow to visible *after* the transition".
+//
+// So we use clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%), which is essentially the same
+// as overflow: hidden, but unlike overflow, clip-path is interpolatable -- but only if the opposite state
+// is also a polygon, and has the same vertice count. So our version of overflow: visible is a rectangle
+// of 2x2 million pixels, which should be enough for everybody (TM).
+//
+// At the time of writing, clip-path works in Chrome, Firefox Beta, and Safari (with vendor prefix).
+//
+// In browsers that do not support this yet, we have to have another way to prevent the expandable content
+// from being visible below the bottom edge during the transition, and the best I could come up with is
+// transitioning to scaleY(0) with a timing function that's faster than the height-reducing transitions.
+// This does kinda look like a deliberate effect, even more so if we also transition to transparency
+// (which we therefore do), so I feel it's an okay fallback.
+//
+// We still set overflow to hidden in the collapsed state (which also applies to the collapsing transition),
+// we just can't do that for the expanding transition.
+//
+// A major drawback of clip-path is that even though the content is clipped (not visible), it will still
+// contribute to the document height. This caused a jumping around of the scrollbar (and possibly even
+// of the viewport) when the expandable was at the bottom of the page, because once the negative bottom
+// margin of the -expandable-group exceeds the actual height, any additional pixels were added on to the
+// bottom. The fix is to set the -expandable-group's flex alignment to flex-start, which forces the
+// (no longer visible) element itself to remain at the top, thereby forcing the excess pixels to be added
+// above the top, not below the bottom. And because extending content above the document top will not do
+// anything to the document height, there is no jumping during the transition.
+// see "@ex-transition-duration"
+
+// Per the answer referenced above, the component can only guarantee smooth transitions if above a minimum
+// height and can only guarantee the element will be hidden is below a maximimum height.
+// The minimum height has been set at 10px because that's below the height of a single line of text in an s-description.
 // see "@ex-min-expected-height" and "--_ex-content-mb"

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

@@ -1,35 +1,35 @@
-.s-input-fill {
-    --_if-bc: var(--bc-dark);
-    --_if-bg: var(--black-150);
-    --_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-md);
-    }
-
-    &.order-last {
-        --_if-brw: var(--su-static1);
-        --_if-brr: var(--br-md);
-    }
-
-    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-fill {
+    --_if-bc: var(--bc-dark);
+    --_if-bg: var(--black-150);
+    --_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-md);
+    }
+
+    &.order-last {
+        --_if-brw: var(--su-static1);
+        --_if-brr: var(--br-md);
+    }
+
+    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;
+}

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

@@ -1,45 +1,45 @@
-.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-400);
-    }
-
-    .is-disabled & {
-        --_ii-fc: var(--black-400);
-    }
-
-    .is-readonly & {
-        --_ii-fc: var(--black-300);
-
-        .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: calc((var(--su-static8) + var(--su-static1)) * -1); // -9px - Half the icon's height at 18px for centering;
-    pointer-events: none;
-    position: absolute;
-    top: 50%;
-}
+.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-400);
+    }
+
+    .is-disabled & {
+        --_ii-fc: var(--black-400);
+    }
+
+    .is-readonly & {
+        --_ii-fc: var(--black-300);
+
+        .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: calc((var(--su-static8) + var(--su-static1)) * -1); // -9px - Half the icon's height at 18px for centering;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+}

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) !important;
-        }
-
-        color: var(--_im-a-fc) !important;
-    }
-
-    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

@@ -28,15 +28,9 @@
     });
 
     // MODIFIERS
-    fieldset[disabled] &,
-    &[disabled],
-    &[readonly],
-    .is-readonly & {
-        --_in-c: not-allowed;
-    }
-
     fieldset[disabled] &,
     &[disabled] {
+        --_in-c: not-allowed;
         --_in-o: var(--_o-disabled-static);
     }
 
@@ -48,6 +42,7 @@
 
         --_in-bg: var(--black-150);
         --_in-bc: var(--bc-light);
+        --_in-c: default;
         --_in-fc: var(--black-400);
     }