@stackoverflow/stacks 0.73.1 → 0.76.0

package/lib/css/components/_stacks-user-cards.less

@@ -1,193 +1,169 @@
-//
-//  STACK OVERFLOW
-//  USER CARDS
-//
-//  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/
-//
-//  ============================================================================
-//  $  BASE
-//  ----------------------------------------------------------------------------
-
-.s-user-card {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    grid-column-gap: @su8;
-    align-items: center;
-    line-height: 1;
-    padding: @su8;
-
-    //  ===========================================================================
-    //  $   STYLE VARIATIONS
-    //      Modify the presentation of the user card
-    //  ===========================================================================
-    //  $$  Highlighted
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__highlighted {
-        background-color: var(--theme-secondary-025);
-        border-radius: @br-md;
-
-        .s-user-card--type {
-            color: var(--black-700);
-        }
-    }
-
-    //  $$  Full meta data
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__full {
-        align-items: start;
-
-        .s-user-card--info {
-            grid-gap: @su4;
-        }
-
-        .s-user-card--link {
-            font-size: @fs-body2;
-        }
-    }
-
-    //  $$  Deleted
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__deleted {
-        color: var(--black-500);
-    }
-
-    //  $$  Small size
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__small {
-        display: flex;
-        align-items: center;
-        grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
-        padding: 0;
-
-        .s-user-card--time {
-            margin-right: @su6;
-            margin-bottom: 0;
-        }
-
-        .s-user-card--link {
-            margin-right: @su6;
-        }
-
-        .s-user-card--avatar {
-            margin-right: @su6;
-        }
-
-        .s-user-card--info {
-            display: flex;
-            align-items: center;
-            grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
-        }
-    }
-
-    //  $$  A minimal presentation
-    //  ---------------------------------------------------------------------------
-    &.s-user-card__minimal {
-        display: flex;
-        align-items: center;
-        grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
-        padding: 0;
-
-        .s-user-card--time {
-            margin-right: @su4;
-            margin-bottom: 0;
-            white-space: nowrap;
-        }
-
-        .s-user-card--link {
-            margin-right: @su4;
-            white-space: nowrap;
-        }
-
-        .s-user-card--avatar {
-            margin-right: @su4;
-        }
-
-        .s-user-card--rep {
-            padding: 0;
-            color: var(--black-600);
-        }
-
-        .s-user-card--info {
-            display: flex;
-            align-items: center;
-            grid-column-gap: unset; // Firefox flex layouts respect column gaps, so we need to reset this
-        }
-    }
-
-    .s-user-card--type {
-        grid-column: ~"1 / 3";
-        padding-top: @su4;
-        font-size: @fs-caption;
-        color: var(--theme-primary-400);
-    }
-}
-
-//  $   USER CARD TIME
-//      Optional element used for displaying time since an action happened
-//  ---------------------------------------------------------------------------
-.s-user-card--time {
-    grid-column: ~"1 / 3";
-    grid-row: ~"1 / 2";
-    color: var(--black-500);
-    font-size: @fs-caption;
-    margin-bottom: @su4;
-}
-
-//  $   USER INFO CONTAINER
-//      An optional container for extra meta info that applies a
-//      vertical grid layout
-//  ---------------------------------------------------------------------------
-.s-user-card--info {
-    display: grid;
-    grid-gap: @su2;
-}
-
-//  $   USER LINK
-//      Styles the link to the user's profile appropriately
-//  ---------------------------------------------------------------------------
-.s-user-card--link {
-    min-width: 0; // Allow things to wrap
-    font-size: @fs-caption;
-    align-items: center;
-    flex-wrap: wrap;
-    overflow-wrap: break-word;
-}
-
-//  $   AWARDS CONTAINER
-//      A container for reputation and various awards
-//  ---------------------------------------------------------------------------
-.s-user-card--awards {
-    .list-reset;
-    display: flex;
-    align-items: center;
-
-    li {
-        margin-right: @su6;
-        font-size: @fs-caption;
-    }
-}
-
-.s-user-card--rep {
-    font-weight: 700;
-}
-
-//  $   USER META DATA
-//      Add the proper styling to various user data
-//  ---------------------------------------------------------------------------
-.s-user-card--location,
-.s-user-card--role {
-    font-size: @fs-caption;
-    color: var(--black-500);
-}
-
-//  $   TAGS CONTAINER
-//      Apply layout to a bunch of child tags
-//  ---------------------------------------------------------------------------
-.s-user-card--tags {
-    padding-top: (@su2 / 2); // Optically align these a bit, but we can't use margin because of `gs[x]` being applied
-    min-width: 0; // Allow things to wrap
-    align-items: center;
-    flex-wrap: wrap;
-}
+//
+//  STACK OVERFLOW
+//  USER CARDS
+//
+//  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/
+//
+//  ============================================================================
+//  $  BASE
+//  ----------------------------------------------------------------------------
+
+.s-user-card {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    column-gap: @su8;
+    row-gap: @su4;
+    align-items: center;
+    line-height: 1;
+    padding: @su8;
+
+    //  ===========================================================================
+    //  $   STYLE VARIATIONS
+    //      Modify the presentation of the user card
+    //  ===========================================================================
+    //  $$  Highlighted
+    //  ---------------------------------------------------------------------------
+    &.s-user-card__highlighted {
+        background-color: var(--theme-secondary-050);
+        border-radius: @br-md;
+
+        .s-user-card--type {
+            color: var(--black-700);
+        }
+    }
+
+    //  $$  Full meta data
+    //  ---------------------------------------------------------------------------
+    &.s-user-card__full {
+        align-items: start;
+
+        .s-user-card--link {
+            font-size: @fs-body2;
+        }
+    }
+
+    //  $$  Deleted
+    //  ---------------------------------------------------------------------------
+    &.s-user-card__deleted {
+        color: var(--black-500);
+    }
+
+    //  $$  Small size
+    //  ---------------------------------------------------------------------------
+    &.s-user-card__small {
+        display: flex;
+        align-items: center;
+        gap: @su4;
+        padding: 0;
+
+        .s-user-card--info {
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+
+    //  $$  A minimal presentation
+    //  ---------------------------------------------------------------------------
+    &.s-user-card__minimal {
+        display: flex;
+        align-items: center;
+        gap: @su4;
+        padding: 0;
+
+        .s-user-card--time {
+            white-space: nowrap;
+        }
+
+        .s-user-card--link {
+            white-space: nowrap;
+        }
+
+        .s-user-card--rep {
+            color: var(--black-600);
+        }
+
+        .s-user-card--info {
+            flex-direction: row;
+            align-items: center;
+        }
+    }
+
+    .s-user-card--type {
+        grid-column: ~"1 / 3";
+        font-size: @fs-caption;
+        color: var(--theme-primary-400);
+
+        a {
+            color: inherit;
+        }
+    }
+}
+
+//  $   USER CARD TIME
+//      Optional element used for displaying time since an action happened
+//  ---------------------------------------------------------------------------
+.s-user-card--time {
+    grid-column: ~"1 / 3";
+    grid-row: ~"1 / 2";
+    color: var(--black-500);
+    font-size: @fs-caption;
+}
+
+//  $   USER INFO CONTAINER
+//      An optional container for extra meta info that applies a
+//      vertical grid layout
+//  ---------------------------------------------------------------------------
+.s-user-card--info {
+    display: flex;
+    flex-direction: column;
+    gap: @su4;
+}
+
+//  $   USER LINK
+//      Styles the link to the user's profile appropriately
+//  ---------------------------------------------------------------------------
+.s-user-card--link {
+    min-width: 0; // Allow things to wrap
+    font-size: @fs-caption;
+    align-items: center;
+    flex-wrap: wrap;
+    overflow-wrap: break-word;
+}
+
+//  $   AWARDS CONTAINER
+//      A container for reputation and various awards
+//  ---------------------------------------------------------------------------
+.s-user-card--awards {
+    .list-reset;
+    display: flex;
+    align-items: center;
+    gap: @su6;
+
+    li {
+        font-size: @fs-caption;
+    }
+}
+
+.s-user-card--rep {
+    font-weight: 700;
+}
+
+//  $   USER META DATA
+//      Add the proper styling to various user data
+//  ---------------------------------------------------------------------------
+.s-user-card--location,
+.s-user-card--role {
+    font-size: @fs-caption;
+    color: var(--black-500);
+}
+
+//  $   TAGS CONTAINER
+//      Apply layout to a bunch of child tags
+//  ---------------------------------------------------------------------------
+.s-user-card--tags {
+    min-width: 0; // Allow things to wrap
+    align-items: center;
+    flex-wrap: wrap;
+}

package/lib/css/components/_stacks-widget-dynamic.less

@@ -1,33 +1,33 @@
-//
-//  STACK OVERFLOW
-//  SIDEBAR WIDGET -- DYNAMIC 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 only sets the colors for the "current color" highlight when the
-//  widget is used for navigation. This is the only part of the widget that is
-//  dynamically configurable; the rest can be served in the static part of Stacks
-//  and is in _stacks-widget-static.less.
-
-.s-sidebarwidget--item {
-    &,
-    & > :first-child {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            &:before {
-                border-left-color: var(--theme-primary-color);
-            }
-        }
-    }
-}
-
-.s-sidebarwidget--subnav {
-    li {
-        &[aria-current="true"],
-        &[aria-current="page"] {
-            #stacks-internals #bullet-arrow(var(--theme-primary-color));
-        }
-    }
-}
+//
+//  STACK OVERFLOW
+//  SIDEBAR WIDGET -- DYNAMIC 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 only sets the colors for the "current color" highlight when the
+//  widget is used for navigation. This is the only part of the widget that is
+//  dynamically configurable; the rest can be served in the static part of Stacks
+//  and is in _stacks-widget-static.less.
+
+.s-sidebarwidget--item {
+    &,
+    & > :first-child {
+        &[aria-current="true"],
+        &[aria-current="page"] {
+            &:before {
+                border-left-color: var(--theme-primary-color);
+            }
+        }
+    }
+}
+
+.s-sidebarwidget--subnav {
+    li {
+        &[aria-current="true"],
+        &[aria-current="page"] {
+            #stacks-internals #bullet-arrow(var(--theme-primary-color));
+        }
+    }
+}