1 files changed, 59 insertions, 0 deletions

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
new file mode 100644
index 0000000..4b3a094
--- /dev/null
+++ b/assets/css/components/_card.scss
@@ -0,0 +1,59 @@
+@include namespace('card') {
+    @include store((
+        --dims: (
+            --pad-x: 1.3em,
+            --pad-y: 1em
+        ),
+        --colors: (
+            --bg: prop(--colors --bg-lo, $global: true),
+            --flip: (
+                --bg: prop(--colors --bg-lo, $global: true),
+            )
+        )
+    ));
+
+    @include component(namespace()) {
+        display:          block;
+        position:         relative;
+        background-color: prop(--colors --bg);
+        line-height:      1.4;
+
+        &:hover {
+            @include element('content') {
+                @include modifier('flip') {
+                    visibility: visible;
+                    transition:
+                        visibility 0s,
+                        opacity    .2s;
+                    opacity:    1;
+                }
+            }
+        }
+
+        @include element('content') {
+            display:        flex;
+            box-sizing:     border-box;
+            flex-direction: row;
+            align-items:    center;
+            padding:        prop(--dims --pad-y) prop(--dims --pad-x);
+
+            @include modifier('flip') {
+                visibility:       hidden;
+                position:         absolute;
+                top:              0;
+                left:             0;
+                width:            100%;
+                height:           100%;
+                transition:
+                    visibility 0s linear .2s,
+                    opacity    .2s;
+                opacity:          0;
+                background-color: prop(--colors --flip --bg);
+            }
+        }
+
+        @include element('icon') {
+            margin-left: auto;
+        }
+    }
+}