@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

package/lib/css/components/{_stacks-links.less → links.less}

@@ -1,218 +1,218 @@
-//
-//  STACK OVERFLOW
-//  TYPOGRAPHY
-//
-//  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/
-//
-//  TABLE OF CONTENTS
-//  • LINKS
-//
-
-//  ============================================================================
-//  $   LINKS
-//  ----------------------------------------------------------------------------
-
-a,
-.s-link {
-    text-decoration: none;
-    color: var(--theme-link-color);
-    cursor: pointer;
-    user-select: auto;
-
-    .highcontrast-mode({
-        text-decoration: underline;
-    });
-
-    &.s-link__visited:visited {
-        color: var(--theme-link-color-visited);
-    }
-
-    &:hover,
-    &.s-link__visited:hover,
-    &:active,
-    &.s-link__visited:active {
-        color: var(--theme-link-color-hover);
-    }
-
-    &.s-link__grayscale {
-        color: var(--black-800);
-
-        &.s-link__visited:visited {
-            color: var(--black-700);
-        }
-
-        &:hover,
-        &.s-link__visited:hover,
-        &:active,
-        &.s-link__visited:active {
-            color: var(--black-900);
-        }
-    }
-
-    &.s-link__muted {
-        color: var(--black-500);
-
-        &.s-link__visited:visited {
-            color: var(--black-700);
-        }
-
-        &:hover,
-        &.s-link__visited:hover,
-        &:active,
-        &.s-link__visited:active {
-            color: var(--black-600);
-        }
-    }
-
-    &.s-link__danger {
-        color: var(--red-500);
-
-        &.s-link__visited:visited {
-            color: var(--red-600);
-        }
-
-        &:hover,
-        &.s-link__visited:hover,
-        &:active,
-        &.s-link__visited:active {
-            color: var(--red-400);
-        }
-    }
-
-    &.s-link__inherit {
-        color: inherit !important;
-
-        &:hover,
-        &:active,
-        &.s-link__visited:visited {
-            color: inherit !important;
-        }
-    }
-
-    &.s-link__underlined {
-        text-decoration: underline !important;
-    }
-
-    &.s-link__dropdown {
-        position: relative;
-        padding-right: 0.9em;
-
-        &:after {
-            content: "";
-            position: absolute;
-            z-index: @zi-active;
-            top: calc(50% - 2px);
-            right: 0;
-            border-style: solid;
-            border-width: @su4;
-            border-top-width: @su4;
-            border-bottom-width: 0;
-            border-color: currentColor transparent;
-            pointer-events: none;
-        }
-    }
-}
-
-button.s-link {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    background: transparent;
-    border: 0;
-    padding: 0;
-    line-height: inherit;
-    user-select: auto;
-    font-family: inherit;
-
-    &:focus {
-        outline: none;
-    }
-}
-
-.s-anchors {
-    .colorize-all(@name, @normal, @hover) {
-        &.s-anchors__@{name},
-        & .s-anchors.s-anchors__@{name} {
-            a:not(.s-link),
-            .s-btn.s-btn__link {
-                color: @normal;
-
-                &:hover,
-                &:active {
-                    color: @hover;
-                }
-
-                &:visited {
-                    color: @normal;
-
-                    &:hover,
-                    &:active {
-                        color: @hover;
-                    }
-                }
-            }
-        }
-    }
-    &.s-anchors__underlined {
-        a:not(.s-link),
-        .s-btn.s-btn__link {
-            text-decoration: underline;
-        }
-    }
-    .colorize-all(default, var(--theme-link-color), var(--theme-link-color-hover));
-    .colorize-all(grayscale, var(--black-700), var(--black-600));
-    .colorize-all(inherit, inherit, inherit);
-    .colorize-all(muted, var(--black-500), var(--black-400));
-    .colorize-all(danger, var(--red-500), var(--red-400));
-}
-
-.s-block-link {
-    display: block;
-    width: 100%;
-    color: var(--black-600);
-    padding: @su6 @su12;
-
-    // Normalize for when applying to a button
-    cursor: pointer;
-    border: none;
-    background: transparent;
-    border-radius: 0;
-    text-align: left;
-    line-height: inherit;
-    font-family: inherit;
-
-    &:hover,
-    &:active {
-        color: var(--black-800);
-    }
-
-    @focus-styles();
-
-    &.is-selected {
-        color: var(--black-800);
-        font-weight: bold;
-        background-color: var(--black-050);
-
-        .dark-mode({
-            background-color: var(--black-025);
-        });
-
-        &.s-block-link__right {
-            box-shadow: inset -3px 0 0 var(--theme-primary-color);
-        }
-
-        &.s-block-link__left {
-            box-shadow: inset 3px 0 0 var(--theme-primary-color);
-        }
-    }
-
-    &.s-block-link__danger {
-        color: var(--red-500);
-
-        &:hover,
-        &:active {
-            color: var(--red-700);
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  TYPOGRAPHY
+//
+//  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/
+//
+//  TABLE OF CONTENTS
+//  • LINKS
+//
+
+//  ============================================================================
+//  $   LINKS
+//  ----------------------------------------------------------------------------
+
+a,
+.s-link {
+    text-decoration: none;
+    color: var(--theme-link-color);
+    cursor: pointer;
+    user-select: auto;
+
+    .highcontrast-mode({
+        text-decoration: underline;
+    });
+
+    &.s-link__visited:visited {
+        color: var(--theme-link-color-visited);
+    }
+
+    &:hover,
+    &.s-link__visited:hover,
+    &:active,
+    &.s-link__visited:active {
+        color: var(--theme-link-color-hover);
+    }
+
+    &.s-link__grayscale {
+        color: var(--black-800);
+
+        &.s-link__visited:visited {
+            color: var(--black-700);
+        }
+
+        &:hover,
+        &.s-link__visited:hover,
+        &:active,
+        &.s-link__visited:active {
+            color: var(--black-900);
+        }
+    }
+
+    &.s-link__muted {
+        color: var(--black-500);
+
+        &.s-link__visited:visited {
+            color: var(--black-700);
+        }
+
+        &:hover,
+        &.s-link__visited:hover,
+        &:active,
+        &.s-link__visited:active {
+            color: var(--black-600);
+        }
+    }
+
+    &.s-link__danger {
+        color: var(--red-500);
+
+        &.s-link__visited:visited {
+            color: var(--red-600);
+        }
+
+        &:hover,
+        &.s-link__visited:hover,
+        &:active,
+        &.s-link__visited:active {
+            color: var(--red-400);
+        }
+    }
+
+    &.s-link__inherit {
+        color: inherit !important;
+
+        &:hover,
+        &:active,
+        &.s-link__visited:visited {
+            color: inherit !important;
+        }
+    }
+
+    &.s-link__underlined {
+        text-decoration: underline !important;
+    }
+
+    &.s-link__dropdown {
+        position: relative;
+        padding-right: 0.9em;
+
+        &:after {
+            content: "";
+            position: absolute;
+            z-index: var(--zi-active);
+            top: calc(50% - 2px);
+            right: 0;
+            border-style: solid;
+            border-width: var(--su-static4);
+            border-top-width: var(--su-static4);
+            border-bottom-width: 0;
+            border-color: currentColor transparent;
+            pointer-events: none;
+        }
+    }
+}
+
+button.s-link {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    line-height: inherit;
+    user-select: auto;
+    font-family: inherit;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+.s-anchors {
+    .colorize-all(@name, @normal, @hover) {
+        &.s-anchors__@{name},
+        & .s-anchors.s-anchors__@{name} {
+            a:not(.s-link),
+            .s-btn.s-btn__link {
+                color: @normal;
+
+                &:hover,
+                &:active {
+                    color: @hover;
+                }
+
+                &:visited {
+                    color: @normal;
+
+                    &:hover,
+                    &:active {
+                        color: @hover;
+                    }
+                }
+            }
+        }
+    }
+    &.s-anchors__underlined {
+        a:not(.s-link),
+        .s-btn.s-btn__link {
+            text-decoration: underline;
+        }
+    }
+    .colorize-all(default, var(--theme-link-color), var(--theme-link-color-hover));
+    .colorize-all(grayscale, var(--black-700), var(--black-600));
+    .colorize-all(inherit, inherit, inherit);
+    .colorize-all(muted, var(--black-500), var(--black-400));
+    .colorize-all(danger, var(--red-500), var(--red-400));
+}
+
+.s-block-link {
+    display: block;
+    width: 100%;
+    color: var(--black-600);
+    padding: var(--su6) var(--su12);
+
+    // Normalize for when applying to a button
+    cursor: pointer;
+    border: none;
+    background: transparent;
+    border-radius: 0;
+    text-align: left;
+    line-height: inherit;
+    font-family: inherit;
+
+    &:hover,
+    &:active {
+        color: var(--black-800);
+    }
+
+    @focus-styles();
+
+    &.is-selected {
+        color: var(--black-800);
+        font-weight: bold;
+        background-color: var(--black-050);
+
+        .dark-mode({
+            background-color: var(--black-025);
+        });
+
+        &.s-block-link__right {
+            box-shadow: inset -3px 0 0 var(--theme-primary-color);
+        }
+
+        &.s-block-link__left {
+            box-shadow: inset 3px 0 0 var(--theme-primary-color);
+        }
+    }
+
+    &.s-block-link__danger {
+        color: var(--red-500);
+
+        &:hover,
+        &:active {
+            color: var(--red-700);
+        }
+    }
+}

package/lib/css/components/{_stacks-menu.less → menu.less}

@@ -1,47 +1,47 @@
-//
-//  STACK OVERFLOW
-//  MENU
-//
-//  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/
-//
-
-.s-menu {
-    .list-reset;
-
-    .s-menu--title {
-        padding: @su8 @su12;
-        text-transform: uppercase;
-        font-size: @fs-fine;
-        color: var(--black-600);
-    }
-
-    li + .s-menu--title {
-        margin-top: @su12;
-    }
-
-    .s-menu--divider {
-        margin: @su8 0;
-        height: 1px;
-        background-color: var(--bc-light);
-
-        .dark-mode({
-            background-color: var(--bc-lightest);
-        });
-    }
-
-    .s-menu--label {
-        cursor: pointer;
-        padding: @su12;
-        border-top: 1px solid var(--bc-light);
-
-        .dark-mode({
-            border-top-color: var(--bc-lightest);
-        });
-
-        &.is-disabled {
-            cursor: not-allowed;
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  MENU
+//
+//  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/
+//
+
+.s-menu {
+    .list-reset;
+
+    .s-menu--title {
+        padding: var(--su8) var(--su12);
+        text-transform: uppercase;
+        font-size: var(--fs-fine);
+        color: var(--black-600);
+    }
+
+    li + .s-menu--title {
+        margin-top: var(--su12);
+    }
+
+    .s-menu--divider {
+        margin: var(--su8) 0;
+        height: 1px;
+        background-color: var(--bc-light);
+
+        .dark-mode({
+            background-color: var(--bc-lightest);
+        });
+    }
+
+    .s-menu--label {
+        cursor: pointer;
+        padding: var(--su12);
+        border-top: 1px solid var(--bc-light);
+
+        .dark-mode({
+            border-top-color: var(--bc-lightest);
+        });
+
+        &.is-disabled {
+            cursor: not-allowed;
+        }
+    }
+}