DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add .dt-card-badge positioning rule for card-level badge slot

Browse Source
This commit is contained in:
michael
2026-03-12 16:23:46 -07:00
parent 766266b799
commit 8a91b21a11
1 changed files with 27 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/web/src/components/bevels.css
View File

@@ -85,8 +85,8 @@
} }
/* Card children — ensure body content renders above the progress bar (::after z-index:1) */ /* Card children — ensure body content renders above the progress bar (::after z-index:1) */
[data-brand="dt"] .dt-bevel-card > *:not(.dt-card-badge), [data-brand="dt"] .dt-bevel-card > *:not(.dt-badge-bottom-right):not(.dt-card-badge),
[data-brand="dt"] .card > *:not(.dt-card-badge) { [data-brand="dt"] .card > *:not(.dt-badge-bottom-right):not(.dt-card-badge) {
position: relative; position: relative;
z-index: 2; z-index: 2;
} }
@@ -153,7 +153,7 @@
/* Bottom-right bevel on card body content. Clip-path matches /* Bottom-right bevel on card body content. Clip-path matches
the card's inner surface bevel so the 3px structural border is visible the card's inner surface bevel so the 3px structural border is visible
at the diagonal corner. Badge overlays are excluded. */ at the diagonal corner. Badge overlays are excluded. */
[data-brand="dt"] .card-body-flush > *:not(.dt-card-badge) { [data-brand="dt"] .card-body-flush > *:not(.dt-badge-bottom-right):not(.dt-card-badge) {
display: block; display: block;
clip-path: polygon( clip-path: polygon(
0% 0%, 0% 0%,
@@ -394,6 +394,14 @@
3px calc(var(--bevel-md) + 1px)); 3px calc(var(--bevel-md) + 1px));
} }
/* Video letterboxing — respect natural aspect ratio with black bars */
.dt-bevel-media > video {
width: 100%;
height: 100%;
object-fit: contain;
background: #000;
}
/* Media frame placeholder — shows when no image/video is present. /* Media frame placeholder — shows when no image/video is present.
Surface-colored background is already provided by ::before. Surface-colored background is already provided by ::before.
This adds centered "MISSING MEDIA" text via ::after. */ This adds centered "MISSING MEDIA" text via ::after. */
@@ -547,15 +555,17 @@
/* ============================================================================ /* ============================================================================
Card Badge — bottom-right product type chip (LAB, BUNDLE, etc.) Card Badge — bottom-right product type chip (LAB, BUNDLE, etc.)
Source: dt-shopify-storefront CyberProductCard LabChip / BundleChip Source: dt-shopify-storefront CyberProductCard LabChip / BundleChip
Plain flat rectangle. Inherits card color via --dt-card-color. Positioned at card level so the card's clip-path bevels the badge corner.
Consumer provides badge content/styling; card handles placement.
============================================================================ */ ============================================================================ */
/* Badge parent — provides position context for absolutely-positioned badges.
Use on the image container inside a card, or on any element that wraps content + badge. */ /* Legacy: standalone badge parent for non-card contexts */
.dt-badge-parent { .dt-badge-parent {
position: relative; position: relative;
} }
.dt-card-badge { /* Legacy: standalone badge positioning for non-card contexts */
.dt-badge-bottom-right {
position: absolute; position: absolute;
bottom: 8px; bottom: 8px;
right: 8px; right: 8px;
@@ -568,13 +578,16 @@
color: var(--color-bg); color: var(--color-bg);
} }
/* Inside card body-flush, offset badge position to compensate for the /* Card-level badge slot — positioned so the card's bevel clip-path
3px margin from the card edge. This makes the badge position relative clips the badge's bottom-right corner at 45 degrees.
to the card's bevel corner match the media frame's placement exactly bottom/right: 3px aligns with the inner frame border edge.
(8px from card edge in both cases). */ The badge extends into the bevel zone and gets clipped. */
.card-body-flush > .dt-card-badge { .card > .dt-card-badge,
bottom: 5px; .dt-bevel-card > .dt-card-badge {
right: 5px; position: absolute;
bottom: 3px;
right: 3px;
z-index: 4;
} }
/* ============================================================================ /* ============================================================================