@stackoverflow/stacks 1.6.4 → 1.6.6

package/lib/css/components/expandable.less

@@ -1,75 +1,37 @@
-// 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 custom property "--_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 custom properties "--_ex-min-expected-height" and "--_ex-content-mb"
-
-.s-expandable {
-    // CONSTANTS
-    --_ex-clip-path: polygon(-1000000px -1000000px, 1000000px -1000000px, 1000000px 1000000px, -1000000px 1000000px);
-    --_ex-min-expected-height: 10px;
-    --_ex-transition-duration: 100ms;
-    // VARIABLES
+.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 var(--_ex-transition-duration) linear,
-        max-height 0s var(--_ex-transition-duration) linear;
+        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 var(--_ex-transition-duration) cubic-bezier(0, 0, 0, 1),
-        transform var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1),
-        opacity var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1);
+        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);
 
     &:not(.is-expanded) {
         --_ex-after-h: 0;
-        --_ex-after-hmx: var(--_ex-min-expected-height);
-        --_ex-after-transition: height var(--_ex-min-expected-height) linear;
+        --_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 var(--_ex-transition-duration) cubic-bezier(1, 0, 1, 1),
-            visibility 0s var(--_ex-transition-duration),
-            max-height 0s var(--_ex-transition-duration),
-            transform var(--_ex-transition-duration) cubic-bezier(0, 1, 1, 1),
-            opacity var(--_ex-transition-duration) cubic-bezier(0, 1, 1, 1);
+            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);
 
         & .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%))) {
@@ -83,6 +45,7 @@
         overflow: hidden;
         transition: none;
     }
+
     &:after {
         height: var(--_ex-after-h);
         max-height: var(--_ex-after-hmx);
@@ -92,6 +55,7 @@
         content: '';
         flex-basis: 0;
     }
+
     & &--content {
         max-height: var(--_ex-content-hmx);
         margin-bottom: var(--_ex-content-mb);
@@ -108,7 +72,45 @@
 
     align-items: flex-start; // see comment above
     display: flex;
-    -webkit-clip-path: var(--_ex-clip-path);
-    clip-path: var(--_ex-clip-path);
+    -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/css/components/labels.less

@@ -5,15 +5,17 @@
     &[for] {
         cursor: pointer;
     }
+
     fieldset[disabled] &,
     .is-disabled & {
-        cursor: not-allowed;
-        opacity: var(--_o-disabled-static);
-
         .s-description {
             opacity: unset;
         }
+
+        cursor: not-allowed;
+        opacity: var(--_o-disabled-static);
     }
+
     .is-readonly & {
         cursor: not-allowed;
     }
@@ -23,12 +25,15 @@
     &&__sm {
         --_la-fs: var(--fs-caption);
     }
+
     &&__md {
         --_la-fs: var(--fs-body3);
     }
+
     &&__lg {
         --_la-fs: var(--fs-title);
     }
+
     &&__xl {
         --_la-fs: var(--fs-headline1);
     }
@@ -51,19 +56,21 @@
             --_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);
@@ -81,6 +88,7 @@
         padding: var(--su2) var(--su8);
         vertical-align: text-bottom;
     }
+
     .s-description,
     .s-input-message {
         font-weight: normal;
@@ -100,4 +108,4 @@
 // [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.
+//     without the base label class.

package/lib/css/components/link-previews.less

@@ -30,6 +30,7 @@
             text-decoration: none;
         }
     }
+
     & &--body {
         *:last-child {
             margin-bottom: 0;
@@ -38,6 +39,7 @@
         font-size: var(--fs-body2);
         padding: var(--su12);
     }
+
     & &--code {
         pre {
             border-radius: 0 !important;
@@ -45,47 +47,54 @@
             max-height: 400px;
         }
     }
+
     & &--details {
         margin-top: var(--_lp-details-mt);
 
         color: var(--black-500);
         font-size: var(--fs-caption);
     }
+
     & &--footer {
         flex-direction: var(--_lp-footer-fd);
 
         background: var(--black-025);
         border-bottom-left-radius: var(--br-sm);
         border-bottom-right-radius: var(--br-sm);
-        border-top: 1px solid var(--bc-medium);
+        border-top: var(--su-static1) solid var(--bc-medium);
         display: flex;
         font-size: var(--fs-caption);
         justify-content: space-between;
         padding: var(--su12);
     }
+
     & &--header {
         background: var(--black-025);
-        border-bottom: 1px solid var(--bc-medium);
+        border-bottom: var(--su-static1) solid var(--bc-medium);
         border-top-left-radius: var(--br-sm);
         border-top-right-radius: var(--br-sm);
         display: flex;
         padding: var(--su12) var(--su8);
     }
+
     & &--icon {
         color: var(--black-800); // Set the default color of the integration's icon. Most likely this will be overridden by the integration icon's native colors.
         margin-right: var(--su8);
     }
+
     & &--misc {
         padding-left: var(--_lp-misc-pl);
         padding-top: var(--_lp-misc-pt);
 
         color: var(--black-500);
     }
+
     & &--title {
         color: var(--black-900);
         font-size: var(--fs-body3);
         font-weight: bold;
     }
+
     & a&--title {
         &:active,
         &:hover{
@@ -94,14 +103,19 @@
                 color: var(--theme-link-color-hover);
             }
         }
+
         &:active,
         &:hover,
         &.s-link__visited:active,
         &.s-link__visited:hover,
         &.s-link__visited:visited {
-            .highcontrast-mode({ text-decoration: underline; });
+            .highcontrast-mode({
+                text-decoration: underline;
+            });
+
             text-decoration: none;
         }
+
         &.s-link__visited:visited {
             color: var(--theme-link-color);
         }
@@ -110,6 +124,7 @@
         cursor: pointer;
         text-decoration: none;
     }
+
     & &--url {
         max-width: 100%;
         overflow: hidden;
@@ -117,7 +132,7 @@
         white-space: nowrap;
     }
 
-    border: 1px solid var(--bc-medium);
+    border: var(--su-static1) solid var(--bc-medium);
     border-radius: var(--br-sm);
     box-shadow: var(--bs-sm);
     text-align: left;

package/lib/css/components/menu.less

@@ -15,21 +15,24 @@
         height: var(--su-static1);
         margin: var(--su8) 0;
     }
+
     & &--label {
         &.is-disabled {
             --_me-label-cursor: not-allowed;
         }
 
+        border-top: var(--su-static1) solid var(--_me-label-btc);
         cursor: var(--_me-label-cursor);
-        border-top: 1px solid var(--_me-label-btc);
         padding: var(--su12);
     }
+
     & &--title {
         color: var(--black-600);
         font-size: var(--fs-fine);
         padding: var(--su8) var(--su12);
         text-transform: uppercase;
     }
+
     & li + &--title {
         margin-top: var(--su12);
     }

package/lib/css/components/modals.less

@@ -28,6 +28,7 @@
             .bg-confetti-animated;
         }
     }
+
     &&__full {
         --_mo-hmx: calc(100% - var(--su48));
         --_mo-wmx: calc(100% - var(--su48));
@@ -45,6 +46,7 @@
         color: var(--fc-medium);
         margin-bottom: var(--su24);
     }
+
     & &--close {
         //  [1] To override .s-btn class attributes
         .svg-icon {
@@ -56,6 +58,7 @@
         right: var(--su8);
         top: var(--_mo-close-t);
     }
+
     & &--dialog {
         .dark-mode({
             --_mo-dialog-bg: var(--black-100);
@@ -78,9 +81,11 @@
         will-change: visibility, z-index, opacity, transform; // Not supported by Edge
         z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
     }
+
     & &--footer {
         margin-top: var(--su24);
     }
+
     & &--header {
         color: var(--_mo-header-fc);
 

package/lib/css/components/navigation.less

@@ -3,77 +3,71 @@
     --_na-fw: wrap;
     --_na-p: var(--su2) 0;
     --_na-gap: var(--su4);
+    --_na-item-bg: none;
+    --_na-item-fc: var(--black-600);
+    --_na-item-fs: unset;
+    --_na-item-p: var(--su6) var(--su12);
+    --_na-item-py: var(--su12);
+    --_na-item-ws: nowrap;
+    --_na-item-bg-hover: var(--black-075);
+    --_na-item-fc-hover: var(--_na-item-fc);
+    --_na-item-selected-bg: var(--theme-primary-color);
+    --_na-item-selected-fc: var(--white);
+    --_na-item-selected-bg-hover: var(--theme-primary-600);
+    --_na-title-mt: var(--su16);
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        --_na-item-bg-hover: var(--black-600);
+        --_na-item-fc-hover: var(--black-100);
+    });
 
     // MODIFIERS
     &&__scroll {
         --_na-fw: nowrap;
+
         overflow-x: auto;
         @scrollbar-styles();
     }
-    // Sizes
+
     &&__sm {
-        .s-navigation--item {
-            --_na-item-fs: var(--fs-caption);
-            --_na-item-p: var(--su4) var(--su12);
-        }
+        --_na-item-fs: var(--fs-caption);
+        --_na-item-p: var(--su4) var(--su12);
     }
-    // Orientation
+
     &&__vertical {
         --_na-fd: column;
         --_na-gap: 0;
         --_na-p: 0;
-
-        .s-navigation--item {
-            --_na-item-ws: normal;
-        }
+        --_na-item-ws: normal;
     }
 
     // VARIANTS
     &&__muted {
-        .s-navigation--item {
-            &.is-selected {
-                --_na-item-bg: var(--black-050);
-                --_na-item-fc: var(--black-800);
-                --_na-item-bg-hover: var(--_na-item-bg);
-                --_na-item-fc-hover: var(--_na-item-fc);
-
-                .highcontrast-mode({
-                    --_na-item-bg: var(--black-800);
-                    --_na-item-fc: var(--black-050);
-                });
-            }
-        }
-    }
-
-    // CHILD ELEMENTS
-    & &--item {
-        --_na-item-bg: none;
-        --_na-item-fc: var(--black-600);
-        --_na-item-fs: unset;
-        --_na-item-p: var(--su6) var(--su12);
-        --_na-item-py: var(--su12);
-        --_na-item-ws: nowrap;
-        // hover
-        --_na-item-bg-hover: var(--black-075);
-        --_na-item-fc-hover: var(--_na-item-fc);
+        --_na-item-selected-bg: var(--black-050);
+        --_na-item-selected-fc: var(--black-800);
+        --_na-item-selected-bg-hover: var(--_na-item-bg);
 
         .highcontrast-mode({
-            --_na-item-bg-hover: var(--black-600);
-            --_na-item-fc-hover: var(--black-100);
+            --_na-item-selected-bg: var(--black-800);
+            --_na-item-selected-fc: var(--black-050);
+            --_na-item-selected-bg-hover: var(--black-900);
         });
+    }
 
-        // STATES
+    // CHILD ELEMENTS
+    & &--item {
         &.is-selected {
-            --_na-item-bg: var(--theme-primary-color);
-            --_na-item-fc: var(--white);
-            --_na-item-bg-hover: var(--theme-primary-600);
+            --_na-item-bg: var(--_na-item-selected-bg);
+            --_na-item-fc: var(--_na-item-selected-fc);
+            --_na-item-fc-hover: var(--_na-item-fc);
+            --_na-item-bg-hover: var(--_na-item-selected-bg-hover);
 
             .highcontrast-mode({
                 text-decoration: none;
             });
         }
 
-        // MODIFIERS
         // TODO: include child component class (without variant) on selector
         &__dropdown {
             &:after {
@@ -91,7 +85,6 @@
             padding-right: 2em;
         }
 
-        // INTERACTION
         &:hover,
         &:active {
             background-color: var(--_na-item-bg-hover);
@@ -116,9 +109,8 @@
         position: relative;
         user-select: auto;
     }
-    & &--title {
-        --_na-title-mt: var(--su16);
 
+    & &--title {
         &:first-child {
             --_na-title-mt: 0;
         }