From a6b944d7ed813a20d7042926fce38542a4df9e54 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 20 Oct 2024 17:37:56 +0200 Subject: Use flex for card --- src/objects/_card.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'src') diff --git a/src/objects/_card.scss b/src/objects/_card.scss index abc691b..2eb16bc 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss @@ -11,7 +11,8 @@ @include materialize-at-root(meta.module-variables('vars')); @include iro.bem-object('card') { - display: block; + display: flex; + flex-direction: column; margin: calc(-1 * props.get(vars.$key-focus--border-width)); background-color: props.get(vars.$bg-color); background-clip: content-box; @@ -43,10 +44,11 @@ } @include iro.bem-elem('image') { - display: block; - inline-size: 100%; - object-fit: cover; - transition: transform .2s, opacity .2s; + display: block; + flex: 0 0 auto; + inline-size: 100%; + object-fit: cover; + transition: transform .2s, opacity .2s; &:first-child { border-start-start-radius: props.get(vars.$rounding); @@ -64,6 +66,7 @@ } @include iro.bem-elem('body') { + flex: 1 0 auto; padding-block: props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); @@ -79,6 +82,7 @@ } @include iro.bem-elem('footer') { + flex: 0 0 auto; padding-block: 0 props.get(vars.$pad-b); padding-inline: props.get(vars.$pad-i); margin-block-start: calc(-1 * props.get(vars.$pad-b)); -- cgit v1.2.3-70-g09d2