@stackoverflow/stacks 1.0.0-beta.0 → 1.1.0

package/lib/css/components/widget-static.less

@@ -1,273 +1,273 @@
-//
-//  STACK OVERFLOW
-//  SIDEBAR WIDGET -- STATIC PARTS
-//
-//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
-//  Stack Overflow. For documentation of all these classes and how to contribute,
-//  visit https://stackoverflow.design/
-//
-//  This file contains almost all the CSS for the sidebar widget. The only exception
-//  is the "current color" highlight when the widget is used for navigation. That
-//  part is configurable and is in the dynamic part of Stacks as
-//  widget-dynamic.less.
-
-.s-sidebarwidget {
-    --s-sidebarwidget-content-padding: calc(var(--su16) - var(--su1)); // subtract 1px for border
-    --s-sidebarwidget-content-inner-spacing: var(--su12); // the spacing between two adjacent simple items
-    --s-sidebarwidget-content-outer-spacing: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
-
-    --s-sidebarwidget-outer-border-color: var(--bc-medium);
-    --s-sidebarwidget-content-separator-color: var(--bc-light);
-    --s-sidebarwidget-header-background-color: var(--black-025);
-
-    position: relative; // so that it's the positioning parent for the :after
-    border: 1px solid var(--s-sidebarwidget-outer-border-color);
-    border-radius: var(--br-sm);
-    box-shadow: var(--bs-sm);
-    font-size: var(--fs-body1);
-    background-color: var(--white);
-
-    &:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link) {
-        &,
-        &:visited {
-            color: var(--black-500);
-        }
-    }
-
-    // We must support things like collapsible (in particular invisble) elements, wrapper elements,
-    // etc. Therefore every .-content and .-header must stand on its own; we cannot rely on things
-    // like :first-child, because the *first* child may not be the first *visible* child, and it may
-    // also be the :first-child of some wrapper. This is why every .-header and .-content has a
-    // border-top. But because you shouldn't see the first visible item's or header's top border
-    // (the widget itself provides for that border), we shift everything up by one pixel with the following pseudo-element.
-    &:before {
-        content: '';
-        display: block;
-        margin-top: -1px;
-    }
-
-    // However, because of the above, the top item's divider line now sits above the .s-sidebarwidget's top
-    // border. We could fix this by using overflow: hidden, but that would constrain users of
-    // .s-sidebarwidget to never have things like tooltips, autocompletes or the like that reach outside
-    // the widget boundaries.
-    // What we do instead is re-create the widget's top border in an absolutely positioned :after,
-    // which sits above our item's top border. Technically, a tiny corner of the item's border will
-    // still be visible, but at its highest point, this corner has a height of 0.27 pixels. And for
-    // this sub-pixel issues, we're talking about different shades of gray. So we can live with that.
-    &:after {
-        content: '';
-        position: absolute;
-        top: -1px;
-        right: -1px;
-        left: -1px;
-        // TODO: this makes no sense. revisit.
-        height: calc(2px + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
-        border-top: 1px solid var(--s-sidebarwidget-outer-border-color);
-        border-radius: var(--br-sm);
-        pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
-
-        // In order to also perfectly recreate the inner corner shape, our pseudo-element needs
-        // the border on all sides. But we can only do that if we're able to hide the bottom part,
-        // so this only works in browsers that support clip-path.
-        @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%))) or (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
-            -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
-            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
-            border: 1px solid var(--s-sidebarwidget-outer-border-color);
-        }
-    }
-}
-
-.s-sidebarwidget--header,
-.s-sidebarwidget--content {
-    border-top: 1px solid var(--s-sidebarwidget-content-separator-color);
-
-    &:active {
-        outline: none;
-    }
-}
-
-
-.s-sidebarwidget--header {
-    padding: var(--s-sidebarwidget-content-inner-spacing) var(--s-sidebarwidget-content-padding);
-    background: var(--s-sidebarwidget-header-background-color);
-    color: var(--black-600);
-    font-size: var(--fs-body2);
-    font-weight: normal;
-
-    &:first-child {
-        border-top-left-radius: var(--br-sm);
-        border-top-right-radius: var(--br-sm);
-    }
-
-    &.s-sidebarwidget__small-bold-text {
-        font-size: var(--fs-caption);
-        font-weight: bold;
-        .-action {
-            font-weight: normal;
-            line-height: calc(1.3 * var(--fs-caption));  // line-height should be the same as in the outside element, so the header and action baselines line up
-        }
-    }
-
-    &.s-sidebarwidget__expanding-control {
-        cursor: pointer;
-        &:before {
-            content: '';
-            float: left;
-            margin-top: ~"calc(1.3em / 2 - 5px)"; // 1.3 is our standard line height
-            margin-right: var(--su12);
-            border: 5px solid transparent;
-            border-left-color: var(--bc-darker);
-            border-right-width: 0;
-            transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-            transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-            transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
-        }
-        &[aria-expanded='true']:before {
-            -webkit-transform: rotate(90deg);
-            transform: rotate(90deg);
-        }
-    }
-}
-
-.s-sidebarwidget--action {
-    float: right;
-    margin: 0 0 var(--su4) var(--su8);
-    color: var(--blue);
-    font-size: var(--fs-fine);
-    line-height: 1.3 * 15px; // line-height should be the same as in the outside element, so the header and action baselines line up
-}
-
-table.s-sidebarwidget--content.s-sidebarwidget__items {
-    padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) calc(var(--s-sidebarwidget-content-padding) - var(--s-sidebarwidget-content-inner-spacing));
-    border-collapse: separate;
-    border-spacing: var(--s-sidebarwidget-content-inner-spacing);
-
-    tr.-item {
-        display: table-row;
-        td {
-            padding: 0;
-        }
-    }
-}
-
-.s-sidebarwidget--content:not(table) {
-    &:not(.s-sidebarwidget__items) {
-        display: flex;
-    }
-    &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
-        display: flex;
-    }
-}
-
-.s-sidebarwidget--content {
-    margin: 0;
-    padding: var(--s-sidebarwidget-content-outer-spacing) var(--s-sidebarwidget-content-padding);
-
-    &.s-sidebarwidget__items {
-        display: block;
-        // the items themselves provide part of the spacing, so the content padding needs to account for that
-        padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) var(--s-sidebarwidget-content-padding);
-        &.s-sidebarwidget__block-items .s-sidebarwidget--item {
-            .d-block;
-        }
-    }
-}
-
-.s-sidebarwidget--item {
-    margin: var(--s-sidebarwidget-content-inner-spacing) 0;
-
-    &,
-    & > :first-child {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            position: relative;
-            color: var(--black);
-            font-weight: bold;
-
-            &:before {
-                content: '';
-                position: absolute;
-                left: 0;
-                height: calc(100% + var(--s-sidebarwidget-content-inner-spacing));
-                margin-top: calc(var(--s-sidebarwidget-content-inner-spacing) / 2 * -1);
-                margin-left: calc(var(--s-sidebarwidget-content-padding) * -1 - 1px); // the orange selection indicator overlaps with the widget border
-                border-left-width: 3px;
-                border-left-style: solid;
-                // border-left-color is set in widget-dynamic.less
-            }
-
-            a,
-            a:visited { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
-                color: inherit;
-            }
-        }
-    }
-}
-
-.s-sidebarwidget--subnav {
-    list-style-type: none;
-    padding-left: 0;
-    margin-left: var(--su8);
-
-    li {
-        margin-top: 12px;
-        padding-left: 16px;
-        background-position: 0 calc((1.2em - 10px) / 2);
-        background-repeat: no-repeat;
-        background-size: auto 10px;
-
-        #stacks-internals #bullet-arrow(var(--black-100));
-
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            // this is given a bullet-arrow in the primary color in widget-dynamic.less
-            color: var(--black);
-            font-weight: bold;
-
-            a,
-            a:visited { // TODO: see above
-                color: inherit;
-            }
-        }
-    }
-}
-
-// COLOR ALTERNATIVES
-// todo: use CSS custom properties for this once we don't care about IE anymore
-
-.alternate-color(blue);
-.alternate-color(yellow);
-.alternate-color(green);
-
-.alternate-color(@name) {
-    &.s-sidebarwidget__@{name} {
-        border-color: var(~"--@{name}-200");
-        background-color: var(~"--@{name}-050");
-
-        .highcontrast-mode({
-            border-color: var(~"--@{name}-700");
-        });
-
-        .s-sidebarwidget--header {
-            background-color: var(~"--@{name}-100");
-            color: var(--fc-medium);
-        }
-
-        .s-sidebarwidget--header,
-        .s-sidebarwidget--content {
-            border-color: var(~"--@{name}-200");
-
-            .highcontrast-mode({
-                border-color: var(~"--@{name}-700");
-            });
-        }
-
-        &:after {
-            border-color: var(~"--@{name}-200");
-
-            .highcontrast-mode({
-                border-color: var(~"--@{name}-700");
-            });
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  SIDEBAR WIDGET -- STATIC PARTS
+//
+//  This CSS comes from Stacks, our CSS & Pattern library for rapidly building
+//  Stack Overflow. For documentation of all these classes and how to contribute,
+//  visit https://stackoverflow.design/
+//
+//  This file contains almost all the CSS for the sidebar widget. The only exception
+//  is the "current color" highlight when the widget is used for navigation. That
+//  part is configurable and is in the dynamic part of Stacks as
+//  widget-dynamic.less.
+
+.s-sidebarwidget {
+    --s-sidebarwidget-content-padding: calc(var(--su16) - var(--su1)); // subtract 1px for border
+    --s-sidebarwidget-content-inner-spacing: var(--su12); // the spacing between two adjacent simple items
+    --s-sidebarwidget-content-outer-spacing: var(--su16); // the spacing at the start/end of a group of simple items, as well as between a complex item and its separator line
+
+    --s-sidebarwidget-outer-border-color: var(--bc-medium);
+    --s-sidebarwidget-content-separator-color: var(--bc-light);
+    --s-sidebarwidget-header-background-color: var(--black-025);
+
+    position: relative; // so that it's the positioning parent for the :after
+    border: 1px solid var(--s-sidebarwidget-outer-border-color);
+    border-radius: var(--br-sm);
+    box-shadow: var(--bs-sm);
+    font-size: var(--fs-body1);
+    background-color: var(--white);
+
+    &:not(.s-anchors) a:not(.button):not(.s-btn):not(.post-tag):not(.s-sidebarwidget--action):not(.s-user-card--link) {
+        &,
+        &:visited {
+            color: var(--black-500);
+        }
+    }
+
+    // We must support things like collapsible (in particular invisble) elements, wrapper elements,
+    // etc. Therefore every .-content and .-header must stand on its own; we cannot rely on things
+    // like :first-child, because the *first* child may not be the first *visible* child, and it may
+    // also be the :first-child of some wrapper. This is why every .-header and .-content has a
+    // border-top. But because you shouldn't see the first visible item's or header's top border
+    // (the widget itself provides for that border), we shift everything up by one pixel with the following pseudo-element.
+    &:before {
+        content: '';
+        display: block;
+        margin-top: -1px;
+    }
+
+    // However, because of the above, the top item's divider line now sits above the .s-sidebarwidget's top
+    // border. We could fix this by using overflow: hidden, but that would constrain users of
+    // .s-sidebarwidget to never have things like tooltips, autocompletes or the like that reach outside
+    // the widget boundaries.
+    // What we do instead is re-create the widget's top border in an absolutely positioned :after,
+    // which sits above our item's top border. Technically, a tiny corner of the item's border will
+    // still be visible, but at its highest point, this corner has a height of 0.27 pixels. And for
+    // this sub-pixel issues, we're talking about different shades of gray. So we can live with that.
+    &:after {
+        content: '';
+        position: absolute;
+        top: -1px;
+        right: -1px;
+        left: -1px;
+        // TODO: this makes no sense. revisit.
+        height: calc(2px + var(--br-sm)); // we need 2px border + 2px border radius to have the correct corner shape
+        border-top: 1px solid var(--s-sidebarwidget-outer-border-color);
+        border-radius: var(--br-sm);
+        pointer-events: none; // if the top item is clickable, then we don't want to prevent clicking the top 2 pixels
+
+        // In order to also perfectly recreate the inner corner shape, our pseudo-element needs
+        // the border on all sides. But we can only do that if we're able to hide the bottom part,
+        // so this only works in browsers that support clip-path.
+        @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%))) or (-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)) {
+            -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
+            clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
+            border: 1px solid var(--s-sidebarwidget-outer-border-color);
+        }
+    }
+}
+
+.s-sidebarwidget--header,
+.s-sidebarwidget--content {
+    border-top: 1px solid var(--s-sidebarwidget-content-separator-color);
+
+    &:active {
+        outline: none;
+    }
+}
+
+
+.s-sidebarwidget--header {
+    padding: var(--s-sidebarwidget-content-inner-spacing) var(--s-sidebarwidget-content-padding);
+    background: var(--s-sidebarwidget-header-background-color);
+    color: var(--black-600);
+    font-size: var(--fs-body2);
+    font-weight: normal;
+
+    &:first-child {
+        border-top-left-radius: var(--br-sm);
+        border-top-right-radius: var(--br-sm);
+    }
+
+    &.s-sidebarwidget__small-bold-text {
+        font-size: var(--fs-caption);
+        font-weight: bold;
+        .-action {
+            font-weight: normal;
+            line-height: calc(1.3 * var(--fs-caption));  // line-height should be the same as in the outside element, so the header and action baselines line up
+        }
+    }
+
+    &.s-sidebarwidget__expanding-control {
+        cursor: pointer;
+        &:before {
+            content: '';
+            float: left;
+            margin-top: ~"calc(1.3em / 2 - 5px)"; // 1.3 is our standard line height
+            margin-right: var(--su12);
+            border: 5px solid transparent;
+            border-left-color: var(--bc-darker);
+            border-right-width: 0;
+            transition: -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
+            transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
+            transition: transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1), -webkit-transform 0.3s cubic-bezier(0.4, 0.4, 0.6, 1);
+        }
+        &[aria-expanded='true']:before {
+            -webkit-transform: rotate(90deg);
+            transform: rotate(90deg);
+        }
+    }
+}
+
+.s-sidebarwidget--action {
+    float: right;
+    margin: 0 0 var(--su4) var(--su8);
+    color: var(--blue);
+    font-size: var(--fs-fine);
+    line-height: 1.3 * 15px; // line-height should be the same as in the outside element, so the header and action baselines line up
+}
+
+table.s-sidebarwidget--content.s-sidebarwidget__items {
+    padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) calc(var(--s-sidebarwidget-content-padding) - var(--s-sidebarwidget-content-inner-spacing));
+    border-collapse: separate;
+    border-spacing: var(--s-sidebarwidget-content-inner-spacing);
+
+    tr.-item {
+        display: table-row;
+        td {
+            padding: 0;
+        }
+    }
+}
+
+.s-sidebarwidget--content:not(table) {
+    &:not(.s-sidebarwidget__items) {
+        display: flex;
+    }
+    &:not(.s-sidebarwidget__block-items) .s-sidebarwidget--item {
+        display: flex;
+    }
+}
+
+.s-sidebarwidget--content {
+    margin: 0;
+    padding: var(--s-sidebarwidget-content-outer-spacing) var(--s-sidebarwidget-content-padding);
+
+    &.s-sidebarwidget__items {
+        display: block;
+        // the items themselves provide part of the spacing, so the content padding needs to account for that
+        padding: calc(var(--s-sidebarwidget-content-outer-spacing) - var(--s-sidebarwidget-content-inner-spacing)) var(--s-sidebarwidget-content-padding);
+        &.s-sidebarwidget__block-items .s-sidebarwidget--item {
+            .d-block;
+        }
+    }
+}
+
+.s-sidebarwidget--item {
+    margin: var(--s-sidebarwidget-content-inner-spacing) 0;
+
+    &,
+    & > :first-child {
+        &[aria-current="true"],
+        &[aria-current="page"] {
+            position: relative;
+            color: var(--black);
+            font-weight: bold;
+
+            &:before {
+                content: '';
+                position: absolute;
+                left: 0;
+                height: calc(100% + var(--s-sidebarwidget-content-inner-spacing));
+                margin-top: calc(var(--s-sidebarwidget-content-inner-spacing) / 2 * -1);
+                margin-left: calc(var(--s-sidebarwidget-content-padding) * -1 - 1px); // the orange selection indicator overlaps with the widget border
+                border-left-width: 3px;
+                border-left-style: solid;
+                // border-left-color is set in widget-dynamic.less
+            }
+
+            a,
+            a:visited { // TODO: this isn't the best way to go about this. There should be a "is current" highlight without font modification for more complex cases
+                color: inherit;
+            }
+        }
+    }
+}
+
+.s-sidebarwidget--subnav {
+    list-style-type: none;
+    padding-left: 0;
+    margin-left: var(--su8);
+
+    li {
+        margin-top: 12px;
+        padding-left: 16px;
+        background-position: 0 calc((1.2em - 10px) / 2);
+        background-repeat: no-repeat;
+        background-size: auto 10px;
+
+        #stacks-internals #bullet-arrow(var(--black-100));
+
+        &[aria-current="true"],
+        &[aria-current="page"] {
+            // this is given a bullet-arrow in the primary color in widget-dynamic.less
+            color: var(--black);
+            font-weight: bold;
+
+            a,
+            a:visited { // TODO: see above
+                color: inherit;
+            }
+        }
+    }
+}
+
+// COLOR ALTERNATIVES
+// todo: use CSS custom properties for this once we don't care about IE anymore
+
+.alternate-color(blue);
+.alternate-color(yellow);
+.alternate-color(green);
+
+.alternate-color(@name) {
+    &.s-sidebarwidget__@{name} {
+        border-color: var(~"--@{name}-200");
+        background-color: var(~"--@{name}-050");
+
+        .highcontrast-mode({
+            border-color: var(~"--@{name}-700");
+        });
+
+        .s-sidebarwidget--header {
+            background-color: var(~"--@{name}-100");
+            color: var(--fc-medium);
+        }
+
+        .s-sidebarwidget--header,
+        .s-sidebarwidget--content {
+            border-color: var(~"--@{name}-200");
+
+            .highcontrast-mode({
+                border-color: var(~"--@{name}-700");
+            });
+        }
+
+        &:after {
+            border-color: var(~"--@{name}-200");
+
+            .highcontrast-mode({
+                border-color: var(~"--@{name}-700");
+            });
+        }
+    }
+}