@stackoverflow/stacks 3.0.0-beta.3 → 3.0.0-beta.30

package/lib/components/post-summary/post-summary.less

@@ -1,458 +1,298 @@
 .s-post-summary {
-    // --_ps-state-* are custom properties to broadly override colors for a given post summary state
-    --_ps-bb: var(--su1) solid var(--bc-light);
-    --_ps-bg: unset;
-    --_ps-o: unset;
-    // Child components
-    --_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
-    --_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
-    --_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
-    --_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
-    --_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
-    --_ps-stats-ai: flex-end;
-    --_ps-stats-fc: var(--_ps-state-fc, var(--fc-light));
-    --_ps-stats-fd: column;
-    --_ps-stats-w: calc(var(--su96) + var(--su12));
-    // Stats item modifiers
-    --_ps-has-answers-bc: var(--green-400);
-    --_ps-has-answers-bg: unset;
-    --_ps-has-answers-fc: var(--green-400);
-    --_ps-has-accepted-answers-bc: var(--green-400);
-    --_ps-has-accepted-answers-bg: var(--green-400);
-    --_ps-has-accepted-answers-fc: var(--white);
-    --_ps-stats-item-emphasized-fc: var(--_ps-state-fc, var(--fc-dark));
-
-    // CONTEXTUAL STYLES
-    #stacks-internals #screen-md({
-        --_ps-stats-ai: center;
-        --_ps-stats-fd: row;
-        --_ps-stats-w: auto;
+    @psx-container-sm: 28rem;
+    --_ps-answer-icon-fc: unset;
+    --_ps-content-type-bc: var(--black-200);
+    --_ps-content-type-bg: var(--black-050);
+    --_ps-content-type-fc: var(--black-600);
+    --_ps-stats-answers-bg: unset;
+    --_ps-stats-answers-fc: var(--black-400);
+    --_ps-stats-answers-fw: unset;
+    --_ps-stats-answers-icon-fc: unset;
+    --_ps-title-link-fc: var(--theme-secondary-600);
+
+    // Conditional styles
+    .highcontrast-mode({
+        a[href] {
+            text-decoration: underline !important;
+        }
 
-        flex-direction: column;
+        &__deleted * {
+            --_ps-ignored-fc: var(--black-500);
+        }
     });
 
-    // MODIFIERS
-    &&__minimal,
-    & &--answer {
-        --_ps-stats-ai: center;
-        --_ps-stats-fd: row;
-        --_ps-stats-w: auto;
+    // Note: we cannot use CSS custom properties for container query values
+    @container post-summary (width <= @psx-container-sm) {
+        .s-post-summary--sm-hide {
+            display: none !important;
+        }
+        .s-post-summary--sm-show {
+            display: flex !important;
+        }
     }
 
-    &&__minimal {
-        .s-post-summary--content {
-            width: 100%;
+    @container post-summary (width > @psx-container-sm) {
+        .s-post-summary--sm-hide {
+            display: flex !important;
+        }
+        .s-post-summary--sm-show {
+            display: none !important;
         }
+    }
 
-        flex-direction: column;
+    // MODIFIERS
+    &&__answered {
+        --_ps-stats-answers-bg: var(--green-400);
+        --_ps-stats-answers-fc: var(--white);
+        --_ps-stats-answers-fw: 600;
+        --_ps-stats-answers-icon-fc: var(--green-400);
     }
 
-    // VARIANTS
     &&__deleted,
-    &&__ignored {
-        --_ps-o: 0.75;
-        --_ps-has-answers-bc: var(--black-350);
-        --_ps-has-answers-bg: transparent;
-        --_ps-has-answers-fc: var(--_ps-state-fc);
-        --_ps-has-accepted-answers-bc: transparent;
-        --_ps-has-accepted-answers-bg: var(--black-150);
-        --_ps-has-accepted-answers-fc: var(--_ps-state-fc);
-        --_ps-meta-tags-tag-bg: var(--black-150);
-        --_ps-meta-tags-tag-fc: var(--_ps-state-fc);
-        --_ps-state-fc: var(--black-400);
-
-        .s-post-summary--meta-tags {
-            a, // TODO: remove rule for `a` once Core replaces `.post-tag` with `.s-tag`
-            .post-tag,
-            .s-tag {
-                &,
-                &:active,
-                &:hover,
-                &:focus,
-                .focus-bordered {
-                    .highcontrast-mode({
-                        border-color: currentColor;
-                    });
-
-                    background-color: var(--_ps-meta-tags-tag-bg);
-                    color: var(--black-500);
-                    border-color: var(--black-300);
-                }
-            }
+    &:has(.s-tag.s-tag__ignored) {
+        --_ps-ignored-bg: var(--black-100);
+        --_ps-ignored-fc: var(--black-400);
+
+        &.s-post-summary__answered {
+            --_ps-stats-answers-bg: var(--_ps-ignored-bg);
+            --_ps-stats-answers-fc: var(--_ps-ignored-fc);
+            --_ps-stats-answers-icon-fc: var(--black-350);
         }
 
-        .s-user-card {
-            a,
-            .s-user-card--link,
-            .s-user-card--rep,
-            .s-user-card--time {
-                color: var(--_ps-state-fc);
-            }
-
-            .s-badge {
-                filter: grayscale(100%);
-            }
+        * {
+            color: var(--_ps-ignored-fc) !important;
         }
-    }
-    &&__deleted,
-    &&__watched {
-        background-color: var(--_ps-bg);
-    }
 
-    &&__deleted {
-        --_ps-bg: var(--red-100);
-        --_ps-has-accepted-answers-bg: var(--black-200);
-        --_ps-has-accepted-answers-fc: var(--black-500);
-        --_ps-meta-tags-tag-bg: var(--black-200);
-
-        .is-deleted,
-        .s-badge__danger.s-badge__filled {
-            .dark-mode({
-                background-color: var(--red-600);
-                color: var(--white);
-            });
+        .s-avatar {
+            opacity: 0.5;
+        }
 
-            background-color: var(--red-500);
+        .s-user-card--rep .s-bling:before {
+            background-color: var(--_ps-ignored-fc) !important;
         }
-    }
 
-    &&__watched {
-        &:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
-            --_ps-bg: var(--yellow-100);
-            --_ps-stats-fc: var(--black-400);
-            --_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
-            --_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
-            --_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
-            --_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));
-
-            .s-user-card {
-                a {
-                    &:active,
-                    &:hover {
-                        color: var(--_ps-content-title-a-fc-hover);
-                    }
-
-                    &:visited {
-                        &:hover {
-                            color: var(--_ps-content-title-a-fc-hover-visited);
-                        }
-
-                        color: var(--_ps-content-title-a-fc-visited);
-                    }
-
-                    color: var(--_ps-content-title-a-fc);
-                }
-
-                .s-user-card--rep,
-                .s-user-card--time {
-                    color: var(--black-500);
-                }
-            }
+        .s-badge,
+        .s-tag,
+        .s-post-summary--stats-bounty {
+            background-color: var(--_ps-ignored-bg) !important;
+            border-color: var(--_ps-ignored-bg) !important;
+            color: var(--_ps-ignored-fc) !important;
         }
     }
 
-    &:last-child {
-        --_ps-bb: none;
+    &&__deleted {
+        background-color: var(--red-100);
+        border: var(--su8) solid var(--red-100);
     }
 
-    // Child Elements
-    & & {
-        &--answer {
-            & + & {
-                margin-top: var(--su16);
-            }
+    // Child components
+    .s-tag.s-tag__watched {
+        --_ta-bc: var(--yellow-200);
+        --_ta-bg: var(--yellow-200);
+        --_ta-fc: var(--yellow-600);
+        --_ta-bc-hover: var(--yellow-200);
+        --_ta-bg-hover: var(--yellow-200);
+    }
 
-            &:before {
-                .highcontrast-mode({
-                    background: var(--black-500);
-                });
-
-                background: var(--black-250);
-                border-radius: var(--su8);
-                bottom: 0;
-                content: "";
-                display: block;
-                left: 0;
-                position: absolute;
-                top: 0;
-                width: var(--su4);
-            }
+    // TODO SHINE complete answers styling
+    & &--answers {
+        display: flex;
+        flex-direction: column;
+        gap: var(--su16);
+        padding-top: calc(var(--su8) + var(--su2)); // 10px
+    }
 
-            margin: var(--su16) 1em 0 1em;
-            padding: 0.5em 0 0.5em calc(1em + var(--su4));
-            position: relative;
+    & &--answer {
+        &__accepted {
+            --_ps-answer-icon-fc: var(--green-400);
         }
 
-        &--answer-excerpt {
-            .v-truncate4;
-            color: var(--black-500);
-            margin-bottom: var(--su8);
+        .s-post-summary--stats-answers--icon {
+            color: var(--_ps-answer-icon-fc);
         }
 
-        &--content {
-            > *:not(.s-post-summary--content-menu-button):not(.s-post-summary--meta):not(.s-popover) {
-                opacity: var(--_ps-o);
-            }
-
-            flex-grow: 1;
-            max-width: 100%;
-        }
+        border-left: var(--su4) solid var(--black-200);
+        display: flex;
+        flex-direction: column;
+        gap: var(--su6);
+        padding-left: var(--su8);
+    }
 
-        &--content-excerpt {
-            &.s-post-summary--content-excerpt {
-                &__sm {
-                    .v-truncate1;
-                }
+    & &--content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--su4);
+        width: 100%;
+    }
 
-                &__md {
-                    .v-truncate3;
-                }
+    & &--content-meta {
+        align-items: center;
+        color: var(--black-400);
+        display: flex;
+        flex-wrap: wrap;
+        font-size: var(--fs-caption);
+        gap: var(--su6);
+        margin-bottom: var(--su4);
+    }
 
-                &__lg {
-                    .v-truncate4;
-                }
-            }
+    & &--content-type {
+        &:focus-visible {
+            .focus-styles();
+        }
 
-            .break-word;
-            .v-truncate2;
-            color: var( --_ps-content-excerpt-fc);
-            font-family: var(--theme-post-body-font-family, var(--theme-body-font-family));
-            margin-top: calc(var(--su2) * -1);
-            margin-bottom: var(--su8);
+        &:hover {
+            --_ps-content-type-bc: var(--black-150);
+            --_ps-content-type-bg: var(--black-100);
+            --_ps-content-type-fc: var(--black-600);
         }
 
-        &--content-menu-button {
-            .svg-icon {
-                margin: 0 !important;
-            }
+        border: var(--su1) solid var(--_ps-content-type-bc);
+        background-color: var(--_ps-content-type-bg);
+        color: var(--_ps-content-type-fc);
 
-            &,
-            &.s-btn { // To override .s-btn class attributes
-                padding: var(--su8);
-                position: absolute;
-            }
+        display: flex;
+        align-items: center;
+        gap: var(--su4);
+        padding: 0 var(--su4);
+        font-size: var(--fs-caption);
+    }
 
-            right: var(--su8);
-            top: var(--su8);
-        }
+    & &--excerpt {
+        line-height: 1.25rem; // TODO use a standard line-height variable (currently 20px)
+        margin-bottom: 0;
+    }
 
-        &--content-title {
-            a {
-                &:active,
-                &:hover {
-                    color: var(--_ps-content-title-a-fc-hover);
-                }
-                &:visited {
-                    &:hover {
-                        color: var(--_ps-content-title-a-fc-hover-visited);
-                    }
-
-                    color: var(--_ps-content-title-a-fc-visited);
-                }
-
-                .break-word;
-                color: var(--_ps-content-title-a-fc);
-                font-family: var(--theme-post-title-font-family, var(--theme-body-font-family));
-            }
+    & &--stats {
+        &.s-post-summary--sm-hide {
+            .s-post-summary--stats-answers {
+                background-color: var(--_ps-stats-answers-bg);
+                color: var(--_ps-stats-answers-fc);
+                font-weight: var(--_ps-stats-answers-fw);
 
-            .iconShield {
-                color: var(--fc-light);
+                align-items: center;
+                display: flex;
+                gap: var(--su4);
+                justify-content: center;
+                padding: var(--su4);
             }
 
-            .svg-icon {
-                position: relative;
-                top: calc(var(--su1) * -1);
-                vertical-align: text-bottom; // Optical alignment
+            .s-post-summary--stats-bounty {
+                align-items: center;
+                background-color: var(--blue-400);
+                color: var(--white);
+                display: flex;
+                gap: var(--su2);
+                font-weight: 600;
+                justify-content: center;
+                padding: var(--su4);
             }
 
-            .break-word;
-            display: block;
-            font-size: var(--fs-body3);
-            font-weight: normal;
-            line-height: var(--lh-md);
-            margin-bottom: 0.3846rem;
-            margin-top: -0.15rem; // Optical alignment to compensate for title's containing block
-            padding-right: var(--su24);
-        }
-
-        &--content-type {
-            .svg-icon {
-                color: var(--fc-light);
-                margin-left: calc(var(--su2) * -1);
+            .s-post-summary--stats-votes {
+                align-items: center;
+                aspect-ratio: 1/1;
+                border: var(--su1) solid var(--black-200);
+                display: flex;
+                justify-content: center;
+                font-size: var(--fs-body2);
+                font-weight: 600;
+                margin-bottom: var(--su2);
+                padding: var(--su4);
+                width: calc(var(--su48) + var(--su8)); // 3.5rem
             }
 
-            color: var(--fc-medium);
-            margin-bottom: var(--su4);
+            flex-direction: column;
         }
 
-        &--meta {
-            > *:not(.s-post-summary--meta-tags):not(.s-user-card) > * {
-                opacity: var(--_ps-o);
-            }
-
-            .s-user-card {
-                > *:not(.magic-popup) {
-                    opacity: var(--_ps-o);
-                }
-
-                flex-wrap: wrap;
-                justify-content: flex-end;
-                margin-left: auto;
+        &.s-post-summary--sm-show {
+            .s-post-summary--stats-answers--icon {
+                color: var(--_ps-stats-answers-icon-fc);
             }
 
             align-items: center;
-            column-gap: var(--su6);
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            row-gap: var(--su8);
+            justify-content: center;
+            padding: var(--su4);
         }
 
-        &--meta-tags {
-            > ul > li > a,
-            > a,
-            .post-tag,
-            .s-tag {
-                opacity: var(--_ps-o);
-            }
-
+        .s-post-summary--stats-bounty {
+            align-items: center;
+            justify-content: center;
+            background-color: var(--blue-400);
+            color: var(--white);
             display: flex;
-            flex-wrap: wrap;
-            gap: var(--su4);
+            gap: var(--su1);
+            padding: 0 calc(var(--su4) - var(--su1));
         }
 
-        &--stats {
-            > *:not(.s-badge__danger) {
-                opacity: var(--_ps-o);
-            }
-    
-            align-items: var(--_ps-stats-ai);
-            color: var(--_ps-stats-fc);
-            flex-direction: var(--_ps-stats-fd);
-            width: var(--_ps-stats-w);
+        display: flex;
+        gap: var(--su6);
+        font-size: var(--fs-caption);
+    }
 
-            display: flex;
-            flex-shrink: 0;
-            flex-wrap: wrap;
-            font-size: var(--fs-body1);
-            gap: var(--su6);
-            margin-bottom: var(--su4);
-            margin-right: var(--su16);
+    & &--stats-item {
+        &:before {
+            aspect-ratio: 1/1;
+            background-color: var(--black-300);
+            content: "";
+            display: block;
+            height: var(--su4);
         }
 
-        &--stats-item {
-            &:not(.s-badge) {
-                &.is-deleted {
-                    color: var(--white);
-                }
-
-                align-items: center;
-                border: var(--su1) solid transparent;
-                display: inline-flex;
-                gap: 0.3em;
-                justify-content: center;
-                white-space: nowrap;
-            }
-
-            &.s-badge {
-                font-size: var(--fs-body1);
-                line-height: var(--lh-md);
-                padding: var(--su2) var(--su4);
-            }
-
-            &.has-answers,
-            &.has-bounty, // TODO DEPRECATED: Remove .has-bounty styling
-            &.is-archived,
-            &.is-closed,
-            &.is-deleted,
-            &.is-draft,
-            &.is-pinned,
-            &.is-published,
-            &.is-review {
-                border-radius: var(--br-md);
-                padding: var(--su2) var(--su4);
-            }
-
-            &.has-answers {
-                &.has-accepted-answer {
-                    background-color: var(--_ps-has-accepted-answers-bg);
-                    border-color: var(--_ps-has-accepted-answers-bc);
-                    color: var(--_ps-has-accepted-answers-fc);
-                }
-
-                background-color: var(--_ps-has-answers-bg);
-                border: var(--su1) solid var(--_ps-has-answers-bc);
-                color: var(--_ps-has-answers-fc);
-            }
-
-            &.has-bounty { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__bounty`
-                background-color: var(--blue-500);
-                color: var(--white);
-            }
-
-            // Hotness
-            &.is-warm {
-                color: var(--_ps-state-fc, var(--yellow-500));
-            }
-
-            &.is-hot {
-                color: var(--_ps-state-fc, var(--orange-500));
-            }
-
-            &.is-supernova {
-                color: var(--_ps-state-fc, var(--red-500));
-            }
-
-            // Status
-            &.is-archived { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__icon`
-                background-color: var(--black-225);
-                border-color: var(--black-500);
-                color: var(--black-600);
-            }
-
-            &.is-closed { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__danger s-badge__icon`
-                background-color: var(--red-300);
-                border-color: var(--red-500);
-                color: var(--red-600);
-            }
-
-            &.is-draft { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__info s-badge__icon`
-                background-color: var(--blue-300);
-                border-color: var(--blue-500);
-                color: var(--blue-600);
-            }
+        align-items: center;
+        display: flex;
+        gap: var(--su6);
+    }
 
-            &.is-pinned { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__muted s-badge__filled s-badge__icon`
-                background-color: var(--black-500);
-                color: var(--white);
-            }
+    & &--tags {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--su8);
+        margin-top: var(--su6);
+    }
 
-            &.is-published {
-                background-color: var(--black-150);
-                color: var(--black-600);
-            }
+    & &--title {
+        display: flex;
+        gap: var(--su6);
+        line-height: 1.563rem; // TODO use a standard line-height variable (currently 25px)
+        overflow-wrap: break-word;
+        hyphens: auto;
+    }
 
-            &.is-review { // TODO DEPRECATED: Remove and replace with references with `s-badge s-badge__warning s-badge__icon`
-                background-color: var(--yellow-300);
-                border-color: var(--yellow-500);
-                color: var(--yellow-600);
-            }
+    & &--title-link {
+        &:hover {
+            --_ps-title-link-fc: var(--theme-secondary-500);
 
-            &__emphasized {
-                color: var(--_ps-stats-item-emphasized-fc);
+            &:visited {
+                color: var(--theme-secondary-600);
             }
         }
 
-        &--stats-item-number {
-            font-weight: 500;
+        // TODO: Since custom property is not being applied for some reason, we're changing the color directly. Remove this once the custom property is fixed.
+        // I suspect this is because of restrictions on the `:visited` pseudo-class.
+        // See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:visited#privacy_restrictions
+        &:visited {
+            color: var(--theme-secondary-400);
         }
 
+        color: var(--_ps-title-link-fc);
+        display: flex;
+        font-size: var(--fs-body3);
+        font-weight: 600;
+        gap: var(--su4);
+        margin-top: var(--su2);
+        text-decoration: none;
+    }
+
+    & &--title-icon {
+        flex-shrink: 0;
     }
 
-    background-color: var(--_ps-bg);
-    border-bottom: var(--_ps-bb);
+    // Container query setup
+    container-type: inline-size;
+    container-name: post-summary;
 
+    color: var(--black-500);
     display: flex;
-    padding: var(--su16);
+    gap: var(--su16);
     position: relative;
+    width: 100%;
 }