From 84e24e1df83806a139f4b402336cf1c8ada58d67 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Jul 2025 18:28:08 +0200 Subject: Various fixes --- src/objects/_card.scss | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) (limited to 'src/objects/_card.scss') diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 6b80e2f..966bcd0 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -14,7 +14,6 @@ position: relative; display: flex; flex-direction: column; - background-clip: content-box; background-color: props.get(vars.$bg-color); border: props.get(vars.$border-width) solid transparent; border-color: props.get(vars.$border-color); @@ -42,19 +41,31 @@ } } + @include bem.modifier('borderless') { + border-color: props.get(vars.$bg-color); + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active { + border-color: props.get(vars.$hover--bg-color); + } + } + } + @include bem.elem('avatar') { margin-block-start: props.get(vars.$pad-b); margin-inline-start: props.get(vars.$pad-i); } @include bem.elem('image') { - position: relative; - display: block; - flex: 0 0 auto; - inline-size: 100%; - overflow: hidden; - object-fit: cover; - transition: background-color .2s, transform .2s, opacity .2s; + position: relative; + display: block; + flex: 0 0 auto; + inline-size: calc(100% + 2 * props.get(vars.$border-width)); + margin: calc(-1 * props.get(vars.$border-width)); + overflow: hidden; + object-fit: cover; + transition: background-color .2s, transform .2s, opacity .2s; &:first-child { border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); @@ -121,7 +132,6 @@ margin-inline: 0; background-color: transparent; border: 0; - box-shadow: none; @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, @@ -141,7 +151,6 @@ margin: 0; outline: none; border: 0; - box-shadow: none; @include bem.elem('image') { margin: calc(-1 * props.get(vars.$key-focus--border-width)); @@ -179,8 +188,6 @@ @include bem.modifier('thumbnail') { @include bem.elem('image') { - inline-size: calc(100% + 2 * props.get(vars.$border-width)); - margin: calc(-1 * props.get(vars.$border-width)); border-radius: props.get(vars.$rounding); } -- cgit v1.2.3-70-g09d2