Color adjustments, borderless cards

1 files changed, 23 insertions, 18 deletions

diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f56a96c..650ec3f 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -4,13 +4,16 @@
 @include iro.props-namespace('card') {
     @include iro.props-store((
         --dims: (
-            --border:   fn.global-dim(--border --thin),
             --divider:  fn.global-dim(--border --thin),
             --pad-i:    fn.global-dim(--size --300),
             --pad-b:    fn.global-dim(--size --250),
             --spacing:  fn.global-dim(--size --200),
             --rounding: fn.global-dim(--rounding),
 
+            --hover: (
+                --offset-b: calc(-1 * fn.global-dim(--size --65)),
+            ),
+
             --key-focus: (
                 --border:        fn.global-dim(--key-focus --border),
                 --border-offset: fn.global-dim(--key-focus --border-offset),
@@ -19,13 +22,8 @@
         ),
         --colors: (
             --bg:       fn.global-color(--bg-l2),
-            --border:   fn.global-color(--border-mute),
             --divider:  fn.global-color(--border-mute),
 
-            --hover: (
-                --border: fn.global-color(--border),
-            ),
-
             --key-focus: (
                 --label:   fn.global-color(--focus --text),
                 --border:  fn.global-color(--focus --border),
@@ -44,20 +42,22 @@
 
     @include iro.bem-object(iro.props-namespace()) {
         display:          block;
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
+        margin:           calc(-1 * fn.dim(--key-focus --border));
+        transition:       transform .2s;
+        border:           fn.dim(--key-focus --border-offset) solid transparent;
+        border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
         background-color: fn.color(--bg);
+        background-clip:  content-box;
 
         @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
-            &:focus-visible,
-            &:active {
-                border-color: fn.color(--hover --border);
+            &:active,
+            &:focus-visible {
+                transform: translateY(fn.dim(--hover --offset-b));
             }
 
             &:focus-visible {
-                border-color: fn.color(--key-focus --border);
-                outline:      fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border));
+                outline:      fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
                 box-shadow:   0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
             }
         }
@@ -71,15 +71,16 @@
             display:          block;
             inline-size:      100%;
             object-fit:       cover;
+            transition:       transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+                border-start-start-radius: fn.dim(--rounding);
+                border-start-end-radius:   fn.dim(--rounding);
             }
 
             &:last-child {
-                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+                border-end-start-radius: fn.dim(--rounding);
+                border-end-end-radius:   fn.dim(--rounding);
             }
 
             @include iro.bem-next-elem('avatar') {
@@ -123,8 +124,12 @@
 
             @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
-                &:active {
+                &:active,
+                &:focus-visible {
+                    transform: none;
+
                     @include iro.bem-elem('image') {
+                        transform:        translateY(fn.dim(--hover --offset-b));
                         opacity:          .75;
                         background-color: fn.color(--quiet --hover --image);
                     }