summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-29 14:50:39 +0200
committerVolpeon <git@volpeon.ink>2024-06-29 14:50:39 +0200
commit0f2ff105bbd911ba04c717af92fd116472d2b2d9 (patch)
tree9c2fccc3bd5982094b3bf5d986bda4d7bcbf9332 /src/objects/_card.scss
parentUpdate (diff)
downloadiro-design-0f2ff105bbd911ba04c717af92fd116472d2b2d9.tar.gz
iro-design-0f2ff105bbd911ba04c717af92fd116472d2b2d9.tar.bz2
iro-design-0f2ff105bbd911ba04c717af92fd116472d2b2d9.zip
Update
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r--src/objects/_card.scss27
1 files changed, 8 insertions, 19 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index c6c47d7..b7829ff 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -32,12 +32,6 @@
32 --border: fn.global-color(--focus --border), 32 --border: fn.global-color(--focus --border),
33 --outline: fn.global-color(--focus --outline), 33 --outline: fn.global-color(--focus --outline),
34 ), 34 ),
35
36 --quiet: (
37 --hover: (
38 --border: fn.global-color(--text-disabled),
39 ),
40 ),
41 ), 35 ),
42 )); 36 ));
43 37
@@ -67,9 +61,9 @@
67 } 61 }
68 62
69 @include iro.bem-elem('image') { 63 @include iro.bem-elem('image') {
70 position: relative; 64 display: block;
71 inline-size: 100%; 65 inline-size: 100%;
72 overflow: hidden; 66 object-fit: cover;
73 background-color: fn.color(--image-bg); 67 background-color: fn.color(--image-bg);
74 68
75 &:first-child { 69 &:first-child {
@@ -87,13 +81,6 @@
87 } 81 }
88 } 82 }
89 83
90 @include iro.bem-elem('image-img') {
91 display: block;
92 object-fit: cover;
93 inline-size: 100%;
94 block-size: 100%;
95 }
96
97 @include iro.bem-elem('body') { 84 @include iro.bem-elem('body') {
98 padding-block: fn.dim(--pad-b); 85 padding-block: fn.dim(--pad-b);
99 padding-inline: fn.dim(--pad-i); 86 padding-inline: fn.dim(--pad-i);
@@ -130,12 +117,13 @@
130 117
131 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 118 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
132 &:hover, 119 &:hover,
120 &:focus-visible,
133 &:active { 121 &:active {
134 @include iro.bem-elem('image') { 122 @include iro.bem-elem('image') {
135 outline: fn.dim(--border) solid fn.color(--quiet --hover --border); 123 opacity: 0.75;
136 } 124 }
137 } 125 }
138 126
139 &:focus-visible { 127 &:focus-visible {
140 outline: none; 128 outline: none;
141 box-shadow: none; 129 box-shadow: none;
@@ -148,9 +136,10 @@
148 } 136 }
149 137
150 @include iro.bem-elem('image') { 138 @include iro.bem-elem('image') {
139 position: relative;
151 margin: calc(-1 * fn.dim(--key-focus --border)); 140 margin: calc(-1 * fn.dim(--key-focus --border));
152 border: fn.dim(--key-focus --border) solid transparent; 141 border: fn.dim(--key-focus --border-offset) solid transparent;
153 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border)); 142 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
154 background-clip: padding-box; 143 background-clip: padding-box;
155 } 144 }
156 145