Expanded card

1 files changed, 27 insertions, 3 deletions

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') {