From 3b90048ff3592e2a5630a97f611106aa06be1cb6 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 21 Jul 2025 21:25:30 +0200 Subject: Improved card and card list --- src/_core.vars.scss | 3 ++- src/layouts/_card-list.scss | 28 +++++++++++++++++++++++++ src/objects/_action-button.vars.scss | 18 ++++++++-------- src/objects/_card.scss | 40 +++++++++++++++++++----------------- src/objects/_card.vars.scss | 5 +++++ 5 files changed, 65 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/_core.vars.scss b/src/_core.vars.scss index 04c0f63..7c546d7 100644 --- a/src/_core.vars.scss +++ b/src/_core.vars.scss @@ -99,7 +99,8 @@ $shadow--l2--y: props.def(--shadow--l2--y, 4px) !default; $shadow--l2--blur: props.def(--shadow--l2--blur, 8px) !default; $shadow--l2--grow: props.def(--shadow--l2--grow, -3px) !default; -$rounding: props.def(--rounding, 8px) !default; +$rounding: props.def(--rounding, 8px) !default; +$rounding--sm: props.def(--rounding--sm, 4px) !default; $key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default; $key-focus--border-width: props.def(--key-focus--border-width, props.get($border-width--medium)) !default; diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index 8ef40c5..a1655be 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -6,6 +6,7 @@ @forward 'card-list.vars'; @use 'card-list.vars' as vars; +@use '../objects/card.vars' as card; @mixin styles { @include materialize-at-root(meta.module-variables('vars')); @@ -15,6 +16,33 @@ flex-direction: column; gap: props.get(vars.$row-gap); + @include bem.modifier('merge') { + position: relative; + gap: 0; + + @include bem.elem('card') { + transition: none; + + &:not(:last-child) { + margin-bottom: calc(-1 * props.get(card.$border-width)); + border-end-start-radius: 0; + border-end-end-radius: 0; + } + + &:hover, + &:active, + &:focus-visible { + z-index: 10; + transform: none; + } + + @include bem.next-twin-elem { + border-start-start-radius: 0; + border-start-end-radius: 0; + } + } + } + @include bem.modifier('quiet') { row-gap: props.get(vars.$quiet--row-gap); } diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss index 1a9be25..72dc4a1 100644 --- a/src/objects/_action-button.vars.scss +++ b/src/objects/_action-button.vars.scss @@ -5,28 +5,28 @@ $line-height: props.def(--o-action-button--line-height, 1.4) !default; $border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; -$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; +$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding--sm)) !default; $pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--75)) !default; -$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default; -$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--100)) !default; +$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--10)) !default; +$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--115)) !default; $pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; $font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default; -$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--100)) !default; -$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default; +$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--115)) !default; +$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--40)) !default; $pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150)) !default; $pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; $font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; -$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--150)) !default; -$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--75)) !default; +$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--160)) !default; +$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--65)) !default; $pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--175)) !default; $pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; $font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default; -$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--175)) !default; -$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--100)) !default; +$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--200)) !default; +$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--85)) !default; $pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--225)) !default; $pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default; $font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default; diff --git a/src/objects/_card.scss b/src/objects/_card.scss index 4f8c7fb..aaf46b6 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -16,16 +16,17 @@ flex-direction: column; background-color: props.get(vars.$bg-color); background-clip: content-box; - border: 1px solid transparent; + border: props.get(vars.$border-width) solid transparent; border-color: props.get(vars.$border-color); border-radius: props.get(vars.$rounding); - transition: transform .2s; + transition: transform .2s, border-color .2s; @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { &:hover, &:active, &:focus-visible { - transform: translateY(props.get(vars.$hover--offset-b)); + transform: translateY(props.get(vars.$hover--offset-b)); + border-color: props.get(vars.$hover--border-color); @include bem.elem('body') { @include bem.modifier('hidden') { @@ -39,9 +40,9 @@ } &:focus-visible { - margin: calc(-1 * props.get(vars.$key-focus--border-width) + 1px); - border: props.get(vars.$key-focus--border-offset) solid transparent; - border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) - 1px); + margin: calc(-1 * props.get(vars.$key-focus--border-width)); + border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; + border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); box-shadow: 0 0 0 @@ -59,19 +60,20 @@ position: relative; display: block; flex: 0 0 auto; - inline-size: 100%; + 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) - 1px); - border-start-end-radius: calc(props.get(vars.$rounding) - 1px); + border-start-start-radius: props.get(vars.$rounding); + border-start-end-radius: props.get(vars.$rounding); } &:last-child { - border-end-start-radius: calc(props.get(vars.$rounding) - 1px); - border-end-end-radius: calc(props.get(vars.$rounding) - 1px); + border-end-start-radius: props.get(vars.$rounding); + border-end-end-radius: props.get(vars.$rounding); } @include bem.next-elem('avatar') { @@ -107,21 +109,21 @@ @include bem.modifier('hidden') { position: absolute; - inset-block-end: 0; - inset-inline: 0; + 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); + 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: calc(props.get(vars.$rounding) - 1px); - border-start-end-radius: calc(props.get(vars.$rounding) - 1px); + border-start-start-radius: props.get(vars.$rounding); + border-start-end-radius: props.get(vars.$rounding); } } } @@ -225,11 +227,11 @@ &:first-child { border-start-end-radius: 0; - border-end-start-radius: calc(props.get(vars.$rounding) - 1px); + border-end-start-radius: props.get(vars.$rounding); } &:last-child { - border-start-end-radius: calc(props.get(vars.$rounding) - 1px); + border-start-end-radius: props.get(vars.$rounding); border-end-start-radius: 0; } } diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss index 4f5cf40..ca603be 100644 --- a/src/objects/_card.vars.scss +++ b/src/objects/_card.vars.scss @@ -3,6 +3,8 @@ @use '../core.vars' as core; $divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; +$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default; +$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default; $pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; $pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; $spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; @@ -20,6 +22,9 @@ $bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), ' $border-color: props.def(--o-card--border-color, props.get(core.$theme, --border-mute), '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; + $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; $key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; -- cgit v1.2.3-70-g09d2