diff options
-rw-r--r-- | src/objects/_card.scss | 24 |
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') { |