From f75839fbd1b103bf849b4b6636fa03cc50bb9402 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 2 Mar 2026 19:48:29 +0100 Subject: Add highlight mod to o-card --- src/objects/_card.scss | 34 ++++++++++++++++++++++++++++++---- 1 file changed, 30 insertions(+), 4 deletions(-) (limited to 'src/objects/_card.scss') diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 1dd394f..c4d8c85 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -67,6 +67,27 @@ } } + @include bem.modifier('highlight') { + border-color: props.get(vars.$highlight--border-color); + outline-width: calc(props.get(vars.$highlight--border-width) - props.get(vars.$border-width)); + outline-style: solid; + outline-color: props.get(vars.$highlight--border-color); + box-shadow: + props.get(vars.$highlight--shadow-x) + props.get(vars.$highlight--shadow-y) + props.get(vars.$highlight--shadow-blur) + props.get(vars.$highlight--shadow-grow) + props.get(vars.$highlight--shadow-color); + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') { + &:hover, + &:active, + &:focus-visible { + border-color: props.get(vars.$highlight--border-color); + } + } + } + @include bem.elem('avatar') { margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); @@ -113,7 +134,7 @@ } @include bem.elem('body') { - flex: 1 0 auto; + flex: 0 0 auto; padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); @@ -128,6 +149,12 @@ display: none; } } + + @include bem.modifier('main') { + flex-shrink: 1; + block-size: 100%; + min-block-size: 0; + } } @include bem.elem('content') { @@ -270,10 +297,9 @@ } @include bem.elem('body') { - flex: 0 0 auto; - @include bem.modifier('main') { - flex-shrink: 1; + block-size: auto; + min-block-size: none; inline-size: 100%; min-inline-size: 0; } -- cgit v1.2.3-70-g09d2