@stackoverflow/stacks 1.6.7 → 1.7.1

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

@@ -0,0 +1,80 @@
+a.s-block-link,
+.s-block-link {
+    @bl-bs: inset var(--_li-block-bs-offset-x, 3px) 0 0 var(--theme-primary-color);
+    --_bl-bg: transparent;
+    --_bl-fc: var(--black-600);
+    --_bl-fc-hover: var(--black-800);
+    --_bl-fc-visited: var(--_bl-fc);
+
+    // CONTEXTUAL STYLES
+    .dark-mode({
+        &.is-selected {
+            --_bl-bg: var(--black-025);
+        }
+    });
+
+    // STATES
+    &.is-selected {
+        --_bl-bg: var(--black-050);
+        --_bl-fc: var(--black-800);
+
+        font-weight: bold;
+    }
+
+    // MODIFIERS
+    &&__left,
+    &&__right {
+        &.is-selected {
+            &:focus:not(:focus-visible),
+            &:focus-visible {
+                outline: none;
+            }
+
+            &:focus-visible {
+                box-shadow: @bl-bs, 0 0 0 var(--su-static4) var(--focus-ring-muted);
+            }
+
+            box-shadow: @bl-bs;
+        }
+    }
+
+    &&__right {
+        &.is-selected {
+            --_li-block-bs-offset-x: -3px;
+        }
+    }
+
+    // VARIANTS
+    &&__danger {
+        --_bl-fc: var(--red-500);
+        --_bl-fc-hover: var(--red-700);
+    }
+
+    &:active,
+    &:hover {
+        &,
+        &:visited {
+            color: var(--_bl-fc-hover);
+        }
+    }
+
+    &:visited {
+        color: var(--_bl-fc-focus);
+    }
+
+    @focus-styles();
+    background-color: var(--_bl-bg); // [1]
+    color: var(--_bl-fc);
+
+    border-radius: 0; // [1]
+    border: none; // [1]
+    cursor: pointer; // [1]
+    display: block;
+    font-family: inherit; // [1]
+    line-height: inherit; // [1]
+    padding: var(--su6) var(--su12);
+    text-align: left; // [1]
+    width: 100%;
+}
+
+//  [1] Normalize for when applying to a button

package/lib/css/components/buttons.less

@@ -81,6 +81,8 @@
             margin-left: -23px;
             opacity: 0; // [2]
         }
+
+        padding-left: 2.2em;
     }
 
     &.is-selected,
@@ -452,6 +454,16 @@
             background-color: var(--_bu-bg-active);
             color: var(--_bu-fc-active);
         }
+
+        &:visited:not(:hover):not(:focus) {
+            &.s-btn__filled {
+                background-color: var(--_bu-filled-bg);
+                color: var(--_bu-filled-fc);
+            }
+
+            background-color: var(--_bu-bg);
+            color: var(--_bu-fc);
+        }
     }
 
     &:focus,

package/lib/css/components/inputs.less

@@ -306,6 +306,10 @@ fieldset {
         cursor: pointer;
     }
 
+    input& {
+        flex-shrink: 0;
+    }
+
     //  Disabled
     &[disabled] {
         opacity: var(--_o-disabled-static);

package/lib/css/components/link.less

@@ -0,0 +1,112 @@
+// TODO we *really* shouldn't be apply styles directly onto `<a>` like this, but
+// it's tech debt that'll take some doing in comsumer's code to pay down.
+a,
+.s-link {
+    --_li-fc: var(--theme-link-color);
+    --_li-fc-hover: var(--theme-link-color-hover);
+    --_li-fc-visited: var(--theme-link-color-visited);
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        text-decoration: underline;
+    });
+
+    // STATES
+    &.s-link {
+        &__danger,
+        &__grayscale,
+        &__inherit,
+        &__muted,
+        &__visited {
+            &:visited {
+                &:active,
+                &:hover {
+                    color: var(--_li-fc-hover);
+                }
+
+                color: var(--_li-fc-visited);
+            }
+        }
+
+        // MODIFIERS
+        &__dropdown {
+            &:after {
+                border-width: var(--su-static4); // this needs to come before any below border modifications
+                border-bottom-width: 0;
+                border-color: currentColor transparent;
+                border-style: solid;
+                border-top-width: var(--su-static4);
+                content: "";
+                pointer-events: none;
+                position: absolute;
+                right: 0;
+                top: calc(50% - var(--su-static2));
+                z-index: var(--zi-active);
+            }
+
+            padding-right: 0.9em;
+            position: relative;
+        }
+
+        &__underlined {
+            text-decoration: underline !important;
+        }
+
+        &__visited { // TODO can we get rid of this? It's only in 3 places in Core and seems to me it doesn't even serve a purpose.
+            --_li-fc-hover: var(--theme-link-color-hover);
+            --_li-fc-visited: var(--theme-link-color-visited);
+        }
+
+        // VARIANTS
+        &__danger {
+            --_li-fc: var(--red-500);
+            --_li-fc-hover: var(--red-400);
+            --_li-fc-visited: var(--red-600);
+        }
+
+        &__grayscale {
+            --_li-fc: var(--black-800);
+            --_li-fc-hover: var(--black-900);
+            --_li-fc-visited: var(--black-700);
+        }
+
+        &__inherit {
+            --_li-fc: inherit !important;
+            --_li-fc-hover: inherit !important;
+            --_li-fc-visited: inherit !important;
+        }
+
+        &__muted {
+            --_li-fc: var(--black-500);
+            --_li-fc-hover: var(--black-600);
+            --_li-fc-visited: var(--black-700);
+        }
+    }
+
+    // INTERACTION
+    &:active,
+    &:hover {
+        color: var(--_li-fc-hover);
+    }
+
+    color: var(--_li-fc);
+    cursor: pointer;
+    text-decoration: none;
+    user-select: auto;
+}
+
+.s-link {
+    button& {
+        &:focus {
+            outline: none;
+        }
+
+        appearance: none;
+        background: transparent;
+        border: 0;
+        font-family: inherit;
+        line-height: inherit;
+        padding: 0;
+        user-select: auto;
+    }
+}