From d61c6362949ecb49d81e608af698a5e0fa4643fe Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 21 Jul 2025 22:14:31 +0200 Subject: Improved card --- src/_config.defaults.scss | 8 +++ src/layouts/_card-list.vars.scss | 2 +- src/objects/_card.scss | 106 ++++++++++++++++++++------------------- src/objects/_card.vars.scss | 6 +-- 4 files changed, 66 insertions(+), 56 deletions(-) (limited to 'src') diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss index ac20cb9..c328355 100644 --- a/src/_config.defaults.scss +++ b/src/_config.defaults.scss @@ -124,6 +124,10 @@ $theme-light: ( --bg-l2: --base --50, --bg-l1: --base --100, --bg-base: --base --200, + + --box: ( + --border: --base --200, + ), )), --constants: ( @@ -179,6 +183,10 @@ $theme-dark: ( --bg-base: --base --50, --bg-l1: --base --75, --bg-l2: --base --100, + + --box: ( + --border: --base --75, + ), )), --constants: ( diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss index f77bfbf..b489596 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss @@ -1,7 +1,7 @@ @use 'iro-sass/src/props'; @use '../core.vars' as core; -$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default; +$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--50)) !default; $quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default; $grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default; diff --git a/src/objects/_card.scss b/src/objects/_card.scss index aaf46b6..d5d300d 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -15,28 +15,18 @@ display: flex; flex-direction: column; background-color: props.get(vars.$bg-color); - background-clip: content-box; border: props.get(vars.$border-width) solid transparent; border-color: props.get(vars.$border-color); border-radius: props.get(vars.$rounding); - transition: transform .2s, border-color .2s; + transition: transform .2s, background-color .2s, border-color .2s; @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, &:active, &:focus-visible { - transform: translateY(props.get(vars.$hover--offset-b)); - border-color: props.get(vars.$hover--border-color); - - @include bem.elem('body') { - @include bem.modifier('hidden') { - visibility: visible; - opacity: 1; - transition: - opacity .2s ease, - visibility .2s linear; - } - } + transform: translateY(props.get(vars.$hover--offset-b)); + background-color: props.get(vars.$hover--bg-color); + border-color: props.get(vars.$hover--border-color); } &:focus-visible { @@ -60,20 +50,19 @@ 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)); + inline-size: 100%; overflow: hidden; object-fit: cover; transition: background-color .2s, transform .2s, opacity .2s; &:first-child { - border-start-start-radius: props.get(vars.$rounding); - border-start-end-radius: props.get(vars.$rounding); + border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); } &:last-child { - border-end-start-radius: props.get(vars.$rounding); - border-end-end-radius: props.get(vars.$rounding); + border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); } @include bem.next-elem('avatar') { @@ -106,26 +95,6 @@ margin-block: -100em 100em; content: ''; } - - @include bem.modifier('hidden') { - position: absolute; - inset-block-end: calc(-1 * props.get(vars.$border-width)); - inset-inline: calc(-1 * props.get(vars.$border-width)); - z-index: 10; - visibility: hidden; - background-color: props.get(vars.$bg-color); - border-end-start-radius: props.get(vars.$rounding); - border-end-end-radius: props.get(vars.$rounding); - opacity: 0; - transition: - opacity .2s ease, - visibility 0s .2s linear; - - @include bem.next-elem('image') { - border-start-start-radius: props.get(vars.$rounding); - border-start-end-radius: props.get(vars.$rounding); - } - } } @include bem.elem('content') { @@ -157,19 +126,14 @@ &:hover, &:active, &:focus-visible { - transform: none; + transform: none; + background-color: transparent; @include bem.elem('image') { background-color: props.get(vars.$quiet--hover--image-color); opacity: .75; transform: translateY(props.get(vars.$hover--offset-b)); } - - @include bem.elem('body') { - @include bem.modifier('hidden') { - transform: translateY(props.get(vars.$hover--offset-b)); - } - } } &:focus-visible { @@ -205,11 +169,6 @@ @include bem.elem('body') { padding: 0; padding-block-start: props.get(vars.$spacing); - - @include bem.modifier('hidden') { - padding-block: props.get(vars.$pad-b); - padding-inline: props.get(vars.$pad-i); - } } @include bem.elem('footer') { @@ -217,6 +176,49 @@ } } + @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); + } + + @include bem.elem('body') { + position: absolute; + inset-block-end: calc(-1 * props.get(vars.$border-width)); + inset-inline: calc(-1 * props.get(vars.$border-width)); + z-index: 10; + visibility: hidden; + background-color: props.get(vars.$bg-color); + border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); + border-color: transparent; + border-style: solid; + border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); + opacity: 0; + transition: + border-color .2s ease, + opacity .2s ease, + visibility 0s .2s linear; + } + + @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { + &:hover, + &:active, + &:focus-visible { + @include bem.elem('body') { + border-color: props.get(vars.$hover--border-color); + visibility: visible; + opacity: 1; + transition: + border-color .2s ease, + opacity .2s ease, + visibility .2s linear; + } + } + } + } + @include bem.modifier('horizontal') { flex-direction: row; align-items: center; diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index ca603be..9810239 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -19,11 +19,11 @@ $key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.g $key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; -$border-color: props.def(--o-card--border-color, props.get(core.$theme, --border-mute), 'color') !default; +$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default; $divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; -$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border-strong), 'color') !default; -$hover--sub-border-color: props.def(--o-card--hover--sub-border-color, props.get(core.$theme, --focus, --outline), 'color') !default; +$hover--bg-color: props.def(--o-card--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default; +$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default; $key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; $key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; -- cgit v1.2.3-70-g09d2