@stackoverflow/stacks 1.5.0 → 1.6.0

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

@@ -1,274 +0,0 @@
-//
-//  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;
-    margin: 0;
-
-    &: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");
-            });
-        }
-    }
-}