From 84e7303ffce305c1fb1d524d44dd192dc02e8cce Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 20 Oct 2024 20:21:38 +0200
Subject: Expanded card

---
 src/objects/_card.scss | 30 +++++++++++++++++++++++++++---
 1 file changed, 27 insertions(+), 3 deletions(-)

(limited to 'src/objects')

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 2eb16bc..0e19dae 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -11,6 +11,7 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include iro.bem-object('card') {
+        position:         relative;
         display:          flex;
         flex-direction:   column;
         margin:           calc(-1 * props.get(vars.$key-focus--border-width));
@@ -25,6 +26,16 @@
             &:active,
             &:focus-visible {
                 transform: translateY(props.get(vars.$hover--offset-b));
+
+                @include iro.bem-elem('body') {
+                    @include iro.bem-modifier('hidden') {
+                        visibility: visible;
+                        opacity:    1;
+                        transition:
+                            opacity .2s ease,
+                            visibility .2s linear;
+                    }
+                }
             }
 
             &:focus-visible {
@@ -66,15 +77,28 @@
         }
 
         @include iro.bem-elem('body') {
-            flex:           1 0 auto;
-            padding-block:  props.get(vars.$pad-b);
-            padding-inline: props.get(vars.$pad-i);
+            flex:            1 0 auto;
+            padding-block:   props.get(vars.$pad-b);
+            padding-inline:  props.get(vars.$pad-i);
 
             &::before {
                 display:       block;
                 margin-block:  -100em 100em;
                 content:       '';
             }
+
+            @include iro.bem-modifier('hidden') {
+                position:         absolute;
+                inset-block-end:  0;
+                inset-inline:     0;
+                z-index:          10;
+                visibility:       hidden;
+                background-color: props.get(vars.$bg-color);
+                opacity:          0;
+                transition:
+                    opacity .2s ease,
+                    visibility 0s .2s linear;
+            }
         }
 
         @include iro.bem-elem('content') {
-- 
cgit v1.2.3-70-g09d2