From 575278aba99139635adc3b1f9385befe57102541 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 11 Jun 2022 09:44:04 +0200
Subject: Re-implemented design via iro-design

---
 assets/css/components/_card.scss | 135 +++++++++++++++++----------------------
 1 file changed, 58 insertions(+), 77 deletions(-)

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

diff --git a/assets/css/components/_card.scss b/assets/css/components/_card.scss
index 20614e7..f8f106d 100644
--- a/assets/css/components/_card.scss
+++ b/assets/css/components/_card.scss
@@ -1,41 +1,46 @@
-@include namespace('card') {
-    @include store((
-        --colors: (
-            --bg:     prop(--colors --bg-lo, $global: true),
-            --fg:     prop(--colors --fg, $global: true),
-            --unread: prop(--colors --bg, $global: true),
-            --border: prop(--colors --obj-hi, $global: true),
-            --hover: (
-                --bg: prop(--colors --fg-lo, $global: true),
-                --fg: prop(--colors --bg-hi, $global: true),
-            ),
-        ),
+@use 'iro-sass/src/index' as iro;
+@use 'iro-design/src/functions' as fn;
+@use '../functions' as fn2;
+
+@include iro.props-namespace('card') {
+    @include iro.props-store((
         --dims: (
-            --pad-x:        1em,
-            --pad-y:        px-to-em(12px),
-            --hover-offset: px-to-em(-5px),
+            --hover-offset: fn2.px-to-em(-5px),
             --indicator: (
                 --width:  1em,
                 --height: 4px,
             ),
         )
-    ));
+    ), 'dims');
+
+    @include iro.props-store((
+        --colors: (
+            --bg:     fn.global-color(--bg-hi2),
+            --fg:     fn.global-color(--fg),
+            --unread: fn.global-color(--obj-hi),
+            --border: fn.global-color(--obj-hi),
+            --hover: (
+                --bg: fn.global-color(--fg-lo),
+                --fg: fn.global-color(--bg-hi2),
+            ),
+        )
+    ), 'colors');
 
-    @include store((
+    @include iro.props-store((
         --colors: (
-            --bg:     prop(--colors --bg-hi, $global: true),
-            --unread: prop(--colors --bg-lo, $global: true),
-            --border: prop(--colors --bg-lo, $global: true),
+            --bg:     fn.global-color(--obj-hi),
+            --unread: fn.global-color(--bg),
+            --border: fn.global-color(--obj-hi),
         )
-    ), 'light');
+    ), 'colors-dark');
 
-    @include component(namespace()) {
+    @include iro.bem-component(iro.props-namespace()) {
         display:          block;
         position:         relative;
         transform:        translateY(0);
         transition:       transform .2s, background-color .2s, color .2s, border-color .2s;
-        background-color: prop(--colors --bg);
-        color:            prop(--colors --fg);
+        background-color: fn.color(--bg);
+        color:            fn.color(--fg);
         line-height:      1.4;
 
         &::after {
@@ -45,7 +50,7 @@
             top:      100%;
             left:     0;
             width:    100%;
-            height:   calc(-1 * #{prop(--dims --hover-offset)});
+            height:   calc(-1 * fn.dim(--hover-offset));
         }
 
         small,
@@ -59,9 +64,9 @@
 
             &:hover,
             &:focus {
-                transform:        translateY(#{prop(--dims --hover-offset)});
-                background-color: prop(--colors --hover --bg);
-                color:            prop(--colors --hover --fg);
+                transform:        translateY(fn.dim(--hover-offset));
+                background-color: fn.color(--hover --bg);
+                color:            fn.color(--hover --fg);
 
                 &::after {
                     display: block;
@@ -69,35 +74,31 @@
 
                 small,
                 strong {
-                    color: prop(--colors --hover --fg);
+                    color: fn.color(--hover --fg);
                 }
 
-                @include element('row') {
-                    @include modifier('hidden') {
+                @include iro.bem-elem('row') {
+                    @include iro.bem-modifier('hidden') {
                         visibility: visible;
                         transition: opacity .2s;
                         opacity:    1;
                     }
                 }
 
-                @include element('block') {
-                    @include modifier('indicator') {
-                        color: prop(--colors --hover --fg);
-                    }
+                @include iro.bem-elem('indicator') {
+                    color: fn.color(--hover --fg);
                 }
             }
         }
 
         &:visited {
-            @include element('block') {
-                @include modifier('indicator') {
-                    color: prop(--colors --bg);
-                }
+            @include iro.bem-elem('indicator') {
+                color: fn.color(--bg);
             }
         }
 
-        @include modifier('outline') {
-            border:           1px solid prop(--colors --border);
+        @include iro.bem-modifier('outline') {
+            border:           1px solid fn.color(--border);
             background-color: transparent;
 
             &:link,
@@ -109,17 +110,8 @@
             }
         }
 
-        @include element('row') {
-            display:     flex;
-            align-items: center;
-            padding:     prop(--dims --pad-y) prop(--dims --pad-x);
-            gap:         prop(--dims --pad-x);
-
-            @include modifier('flush') {
-                padding: 0;
-            }
-
-            @include modifier('hidden') {
+        @include iro.bem-elem('row') {
+            @include iro.bem-modifier('hidden') {
                 visibility:       hidden;
                 position:         absolute;
                 z-index:          10;
@@ -128,7 +120,7 @@
                 left:             0;
                 transition:       opacity .2s, visibility 0s .2s;
                 opacity:          0;
-                background-color: prop(--colors --hover --bg);
+                background-color: fn.color(--hover --bg);
 
                 @media (hover: none) {
                     visibility:       visible;
@@ -139,14 +131,14 @@
             }
         }
 
-        @include element('thumbnail') {
+        @include iro.bem-elem('thumbnail') {
             position:    relative;
             width:       100%;
             height:      2em;
             padding-top: 46%;
         }
 
-        @include element('thumbnail-img') {
+        @include iro.bem-elem('thumbnail-img') {
             display:    block;
             position:   absolute;
             top:        0;
@@ -156,28 +148,17 @@
             object-fit: cover;
         }
 
-        @include element('block') {
-            flex:          0 0 auto;
-            overflow:      hidden;
-            text-overflow: ellipsis;
-
-            @include modifier('main') {
-                flex-shrink: 1;
-                width:       100%;
-            }
-
-            @include modifier('indicator') {
-                transition: color .2s;
-                color:      prop(--colors --unread);
-
-                &::before {
-                    content:          '';
-                    display:          block;
-                    width:            prop(--dims --indicator --width);
-                    height:           prop(--dims --indicator --height);
-                    border-radius:    prop(--dims --indicator --height);
-                    background-color: currentColor;
-                }
+        @include iro.bem-elem('indicator') {
+            transition: color .2s;
+            color:      fn.color(--unread);
+
+            &::before {
+                content:          '';
+                display:          block;
+                width:            fn.dim(--indicator --width);
+                height:           fn.dim(--indicator --height);
+                border-radius:    fn.dim(--indicator --height);
+                background-color: currentColor;
             }
         }
 
-- 
cgit v1.2.3-54-g00ecf