From 7588b3b71d01093507a2776e36ede1e6550dedd7 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 27 Mar 2021 22:03:08 +0100
Subject: WIP: Redesign

---
 assets/css/components/_card.scss | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

(limited to 'assets/css/components/_card.scss')

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 21eeb9f..6260518 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,8 +1,8 @@
 @include namespace('card') {
     @include store((
         --dims: (
-            --pad-x: 1.3em,
-            --pad-y: 1em
+            --pad-x: 1.1em,
+            --pad-y: .8em
         ),
         --colors: (
             --bg: prop(--colors --bg-lo, $global: true),
@@ -13,8 +13,9 @@
     ));
 
     @include component(namespace()) {
-        display:          block;
+        display:          flex;
         position:         relative;
+        align-items:      center;
         background-color: prop(--colors --bg);
         line-height:      1.4;
 
@@ -37,18 +38,15 @@
         }
 
         @include element('content') {
-            display:        flex;
-            box-sizing:     border-box;
-            flex-direction: row;
-            align-items:    center;
-            padding:        prop(--dims --pad-y) prop(--dims --pad-x);
+            box-sizing: border-box;
+            width:      100%;
+            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,
@@ -56,10 +54,17 @@
                 opacity:          0;
                 background-color: prop(--colors --flip --bg);
             }
+
+            @include sibling-element('icon') {
+                padding-right: prop(--dims --pad-x);
+                padding-left:  0;
+            }
         }
 
         @include element('icon') {
-            margin-left: auto;
+            display: block;
+            flex:    0 0 auto;
+            padding: prop(--dims --pad-y) 0 prop(--dims --pad-y) prop(--dims --pad-x);
         }
     }
 }
-- 
cgit v1.2.3-54-g00ecf