summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/objects/_card.scss24
1 files changed, 16 insertions, 8 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index b7829ff..1d2817d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -19,7 +19,6 @@
19 ), 19 ),
20 --colors: ( 20 --colors: (
21 --bg: fn.global-color(--bg-l2), 21 --bg: fn.global-color(--bg-l2),
22 --image-bg: fn.global-color(--border-mute),
23 --border: fn.global-color(--border-mute), 22 --border: fn.global-color(--border-mute),
24 --divider: fn.global-color(--border-mute), 23 --divider: fn.global-color(--border-mute),
25 24
@@ -32,6 +31,14 @@
32 --border: fn.global-color(--focus --border), 31 --border: fn.global-color(--focus --border),
33 --outline: fn.global-color(--focus --outline), 32 --outline: fn.global-color(--focus --outline),
34 ), 33 ),
34
35 --quiet: (
36 --image: fn.global-color(--bg-base),
37
38 --hover: (
39 --image: fn.global-color(--border),
40 ),
41 )
35 ), 42 ),
36 )); 43 ));
37 44
@@ -64,7 +71,6 @@
64 display: block; 71 display: block;
65 inline-size: 100%; 72 inline-size: 100%;
66 object-fit: cover; 73 object-fit: cover;
67 background-color: fn.color(--image-bg);
68 74
69 &:first-child { 75 &:first-child {
70 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 76 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
@@ -120,7 +126,8 @@
120 &:focus-visible, 126 &:focus-visible,
121 &:active { 127 &:active {
122 @include iro.bem-elem('image') { 128 @include iro.bem-elem('image') {
123 opacity: 0.75; 129 opacity: .75;
130 background-color: fn.color(--quiet --hover --image);
124 } 131 }
125 } 132 }
126 133
@@ -136,11 +143,12 @@
136 } 143 }
137 144
138 @include iro.bem-elem('image') { 145 @include iro.bem-elem('image') {
139 position: relative; 146 position: relative;
140 margin: calc(-1 * fn.dim(--key-focus --border)); 147 margin: calc(-1 * fn.dim(--key-focus --border));
141 border: fn.dim(--key-focus --border-offset) solid transparent; 148 border: fn.dim(--key-focus --border-offset) solid transparent;
142 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 149 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
143 background-clip: padding-box; 150 background-color: fn.color(--quiet --image);
151 background-clip: padding-box;
144 } 152 }
145 153
146 @include iro.bem-elem('body') { 154 @include iro.bem-elem('body') {