summaryrefslogtreecommitdiffstats
path: root/src/objects/_card.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_card.scss')
-rw-r--r--src/objects/_card.scss389
1 files changed, 173 insertions, 216 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 3275bc8..b8bc727 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,95 +1,84 @@
1@use "sass:meta"; 1@use 'sass:meta';
2@use "pkg:iro-sass/bem"; 2@use 'pkg:iro-sass/src/bem';
3@use "pkg:iro-sass/props"; 3@use 'pkg:iro-sass/src/props';
4@use "../props" as *; 4@use '../props' as *;
5@use "avatar.vars" as avatar; 5@use 'avatar.vars' as avatar;
6 6
7@forward "card.vars"; 7@forward 'card.vars';
8@use "card.vars" as vars; 8@use 'card.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables("vars")); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object("card") { 13 @include bem.object('card') {
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 background-color: props.get(vars.$bg-color); 17 background-color: props.get(vars.$bg-color);
18 border: props.get(vars.$border-width) solid transparent; 18 border: props.get(vars.$border-width) solid transparent;
19 border-color: props.get(vars.$border-color); 19 border-color: props.get(vars.$border-color);
20 border-radius: props.get(vars.$rounding); 20 border-radius: props.get(vars.$rounding);
21 transition: 21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22 transform 0.2s,
23 background-color 0.2s,
24 border-color 0.2s,
25 box-shadow 0.2s;
26 22
27 @include bem.multi( 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
28 "&:link, &:visited, &:enabled",
29 "modifier" "interactive",
30 "modifier" "collapsible"
31 ) {
32 &:hover, 24 &:hover,
33 &:active, 25 &:active,
34 &:focus-visible { 26 &:focus-visible {
35 background-color: props.get(vars.$hover--bg-color); 27 background-color: props.get(vars.$hover--bg-color);
36 border-color: props.get(vars.$hover--border-color); 28 border-color: props.get(vars.$hover--border-color);
37 box-shadow: none; 29 box-shadow: none;
38 transform: translateY(props.get(vars.$hover--offset-b)); 30 transform: translateY(props.get(vars.$hover--offset-b));
39 } 31 }
40 32
41 &:focus-visible { 33 &:focus-visible {
42 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
43 outline: props.get(vars.$key-focus--border-color) solid 35 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
44 props.get(vars.$key-focus--border-width); 36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
45 border: calc( 37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
46 props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width) 38 box-shadow:
47 ) 39 0 0 0
48 solid transparent; 40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
49 border-radius: calc(
50 props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
51 );
52 box-shadow: 0 0 0
53 calc(
54 props.get(vars.$key-focus--border-width) +
55 props.get(vars.$key-focus--outline-width)
56 )
57 props.get(vars.$key-focus--outline-color); 41 props.get(vars.$key-focus--outline-color);
58 transition: transform 0.2s; 42 transition: transform .2s;
59 } 43 }
60 } 44 }
61 45
62 @include bem.modifier("borderless") { 46 @include bem.modifier('borderless') {
63 border-color: props.get(vars.$bg-color); 47 border-color: props.get(vars.$bg-color);
64 } 48 }
65 49
66 @include bem.modifier("shadow") { 50 @include bem.modifier('shadow') {
67 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) 51 box-shadow:
68 props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) 52 props.get(vars.$shadow-x)
53 props.get(vars.$shadow-y)
54 props.get(vars.$shadow-blur)
55 props.get(vars.$shadow-grow)
69 props.get(vars.$shadow-color); 56 props.get(vars.$shadow-color);
70 57
71 @include bem.modifier("quiet") { 58 @include bem.modifier('quiet') {
72 @include bem.elem("image") { 59 @include bem.elem('image') {
73 box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y) 60 box-shadow:
74 props.get(vars.$shadow-blur) props.get(vars.$shadow-grow) 61 props.get(vars.$shadow-x)
62 props.get(vars.$shadow-y)
63 props.get(vars.$shadow-blur)
64 props.get(vars.$shadow-grow)
75 props.get(vars.$shadow-color); 65 props.get(vars.$shadow-color);
76 } 66 }
77 } 67 }
78 } 68 }
79 69
80 @include bem.modifier("highlight") { 70 @include bem.modifier('highlight') {
81 margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width)); 71 margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width));
82 border-color: props.get(vars.$highlight--border-color); 72 border-color: props.get(vars.$highlight--border-color);
83 border-width: props.get(vars.$highlight--border-width); 73 border-width: props.get(vars.$highlight--border-width);
84 box-shadow: props.get(vars.$highlight--shadow-x) props.get(vars.$highlight--shadow-y) 74 box-shadow:
85 props.get(vars.$highlight--shadow-blur) props.get(vars.$highlight--shadow-grow) 75 props.get(vars.$highlight--shadow-x)
76 props.get(vars.$highlight--shadow-y)
77 props.get(vars.$highlight--shadow-blur)
78 props.get(vars.$highlight--shadow-grow)
86 props.get(vars.$highlight--shadow-color); 79 props.get(vars.$highlight--shadow-color);
87 80
88 @include bem.multi( 81 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
89 "&:link, &:visited, &:enabled",
90 "modifier" "interactive",
91 "modifier" "collapsible"
92 ) {
93 &:hover, 82 &:hover,
94 &:active { 83 &:active {
95 border-color: props.get(vars.$highlight--border-color); 84 border-color: props.get(vars.$highlight--border-color);
@@ -97,238 +86,207 @@
97 } 86 }
98 } 87 }
99 88
100 @include bem.elem("avatar") { 89 @include bem.elem('avatar') {
101 margin-block-start: props.get(vars.$pad-b); 90 margin-block-start: props.get(vars.$pad-b);
102 margin-inline-start: props.get(vars.$pad-i); 91 margin-inline-start: props.get(vars.$pad-i);
103 } 92 }
104 93
105 @include bem.elem("image") { 94 @include bem.elem('image') {
106 position: relative; 95 position: relative;
107 display: block; 96 display: block;
108 flex: 0 0 auto; 97 flex: 0 0 auto;
109 inline-size: calc(100% + 2 * props.get(vars.$border-width)); 98 inline-size: calc(100% + 2 * props.get(vars.$border-width));
110 margin: calc(-1 * props.get(vars.$border-width)); 99 margin: calc(-1 * props.get(vars.$border-width));
111 overflow: hidden; 100 overflow: hidden;
112 object-fit: cover; 101 object-fit: cover;
113 transition: 102 transition: background-color .2s, transform .2s, opacity .2s;
114 background-color 0.2s,
115 transform 0.2s,
116 opacity 0.2s;
117 103
118 &:first-child { 104 &:first-child {
119 border-start-start-radius: calc( 105 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
120 props.get(vars.$rounding) - props.get(vars.$border-width) 106 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
121 );
122 border-start-end-radius: calc(
123 props.get(vars.$rounding) - props.get(vars.$border-width)
124 );
125 } 107 }
126 108
127 &:last-child { 109 &:last-child {
128 border-end-start-radius: calc( 110 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
129 props.get(vars.$rounding) - props.get(vars.$border-width) 111 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
130 );
131 border-end-end-radius: calc(
132 props.get(vars.$rounding) - props.get(vars.$border-width)
133 );
134 } 112 }
135 113
136 @include bem.next-elem("avatar") { 114 @include bem.next-elem('avatar') {
137 margin-block-start: calc(-0.7 * props.get(avatar.$size--xl)); 115 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
138 } 116 }
139 } 117 }
140 118
141 @include bem.elem("image-img") { 119 @include bem.elem('image-img') {
142 display: block; 120 display: block;
143 inline-size: 100%; 121 inline-size: 100%;
144 block-size: 100%; 122 block-size: 100%;
145 object-fit: cover; 123 object-fit: cover;
146 } 124 }
147 125
148 @include bem.elem("image-overlay") { 126 @include bem.elem('image-overlay') {
149 position: absolute; 127 position: absolute;
150 inset-block-end: 0; 128 inset-block-end: 0;
151 inset-inline: 0; 129 inset-inline: 0;
152 z-index: 5; 130 z-index: 5;
153 padding-block: props.get(vars.$image-overlay--pad-b); 131 padding-block: props.get(vars.$image-overlay--pad-b);
154 padding-inline: props.get(vars.$image-overlay--pad-i); 132 padding-inline: props.get(vars.$image-overlay--pad-i);
155 } 133 }
156 134
157 @include bem.elem("body") { 135 @include bem.elem('body') {
158 flex: 0 0 auto; 136 flex: 0 0 auto;
159 padding-block: props.get(vars.$pad-b); 137 padding-block: props.get(vars.$pad-b);
160 padding-inline: props.get(vars.$pad-i); 138 padding-inline: props.get(vars.$pad-i);
161 139
162 &::before { 140 &::before {
163 display: block; 141 display: block;
164 margin-block: -100em 100em; 142 margin-block: -100em 100em;
165 content: ""; 143 content: '';
166 } 144 }
167 145
168 @include bem.modifier("no-mbs-neutralize") { 146 @include bem.modifier('no-mbs-neutralize') {
169 &::before { 147 &::before {
170 display: none; 148 display: none;
171 } 149 }
172 } 150 }
173 151
174 @include bem.modifier("main") { 152 @include bem.modifier('main') {
175 flex-shrink: 1; 153 flex-shrink: 1;
176 block-size: 100%; 154 block-size: 100%;
177 min-block-size: 0; 155 min-block-size: 0;
178 } 156 }
179 } 157 }
180 158
181 @include bem.elem("content") { 159 @include bem.elem('content') {
182 margin-block-start: props.get(vars.$spacing); 160 margin-block-start: props.get(vars.$spacing);
183 } 161 }
184 162
185 @include bem.elem("footer") { 163 @include bem.elem('footer') {
186 flex: 0 0 auto; 164 flex: 0 0 auto;
187 padding-block: 0 props.get(vars.$pad-b); 165 padding-block: 0 props.get(vars.$pad-b);
188 padding-inline: props.get(vars.$pad-i); 166 padding-inline: props.get(vars.$pad-i);
189 margin-block-start: calc(-1 * props.get(vars.$pad-b)); 167 margin-block-start: calc(-1 * props.get(vars.$pad-b));
190 168
191 &::before { 169 &::before {
192 display: block; 170 display: block;
193 block-size: props.get(vars.$divider-width); 171 block-size: props.get(vars.$divider-width);
194 margin-block: props.get(vars.$spacing); 172 margin-block: props.get(vars.$spacing);
195 content: ""; 173 content: '';
196 background-color: props.get(vars.$divider-width); 174 background-color: props.get(vars.$divider-width);
197 } 175 }
198 } 176 }
199 177
200 @include bem.modifier("quiet") { 178 @include bem.modifier('quiet') {
201 margin-inline: 0; 179 margin-inline: 0;
202 background-color: transparent; 180 background-color: transparent;
203 border: 0; 181 border: 0;
204 box-shadow: none; 182 box-shadow: none;
205 183
206 @include bem.multi( 184 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
207 "&:link, &:visited, &:enabled",
208 "modifier" "interactive",
209 "modifier" "collapsible"
210 ) {
211 &:hover, 185 &:hover,
212 &:active, 186 &:active,
213 &:focus-visible { 187 &:focus-visible {
214 background-color: transparent; 188 background-color: transparent;
215 transform: none; 189 transform: none;
216 190
217 @include bem.elem("image") { 191 @include bem.elem('image') {
218 background-color: props.get(vars.$quiet--hover--image-color); 192 background-color: props.get(vars.$quiet--hover--image-color);
219 opacity: 0.75; 193 opacity: .75;
220 transform: translateY(props.get(vars.$hover--offset-b)); 194 transform: translateY(props.get(vars.$hover--offset-b));
221 } 195 }
222 } 196 }
223 197
224 &:focus-visible { 198 &:focus-visible {
225 margin: 0; 199 margin: 0;
226 outline: none; 200 outline: none;
227 border: 0; 201 border: 0;
228 box-shadow: none; 202 box-shadow: none;
229 203
230 @include bem.elem("image") { 204 @include bem.elem('image') {
231 margin: calc( 205 margin: calc(-1 * props.get(vars.$key-focus--border-width) - props.get(vars.$border-width));
232 -1 * 206 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
233 props.get(vars.$key-focus--border-width) - props.get(
234 vars.$border-width
235 )
236 );
237 outline: props.get(vars.$key-focus--border-color) solid
238 props.get(vars.$key-focus--border-width);
239 background-color: props.get(vars.$quiet--hover--image-color); 207 background-color: props.get(vars.$quiet--hover--image-color);
240 border: props.get(vars.$key-focus--border-offset) solid transparent; 208 border: props.get(vars.$key-focus--border-offset) solid transparent;
241 border-radius: calc( 209 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
242 props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset) 210 box-shadow:
243 ); 211 0
244 box-shadow: 0 0 0 212 0
245 calc( 213 0
246 props.get(vars.$key-focus--border-width) + 214 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
247 props.get(vars.$key-focus--outline-width)
248 )
249 props.get(vars.$key-focus--outline-color); 215 props.get(vars.$key-focus--outline-color);
250 opacity: 1; 216 opacity: 1;
251 } 217 }
252 } 218 }
253 } 219 }
254 220
255 @include bem.elem("image") { 221 @include bem.elem('image') {
256 position: relative; 222 position: relative;
257 background-color: props.get(vars.$quiet--image-color); 223 background-color: props.get(vars.$quiet--image-color);
258 background-clip: padding-box; 224 background-clip: padding-box;
259 border-radius: props.get(vars.$rounding); 225 border-radius: props.get(vars.$rounding);
260 } 226 }
261 227
262 @include bem.elem("body") { 228 @include bem.elem('body') {
263 padding: 0; 229 padding: 0;
264 padding-block-start: props.get(vars.$spacing); 230 padding-block-start: props.get(vars.$spacing);
265 } 231 }
266 232
267 @include bem.elem("footer") { 233 @include bem.elem('footer') {
268 padding-inline: 0; 234 padding-inline: 0;
269 } 235 }
270 } 236 }
271 237
272 @include bem.modifier("thumbnail") { 238 @include bem.modifier('thumbnail') {
273 @include bem.elem("image") { 239 @include bem.elem('image') {
274 border-radius: props.get(vars.$rounding); 240 border-radius: props.get(vars.$rounding);
275 } 241 }
276 242
277 @include bem.elem("body") { 243 @include bem.elem('body') {
278 position: absolute; 244 position: absolute;
279 inset-block-end: calc(-1 * props.get(vars.$border-width)); 245 inset-block-end: calc(-1 * props.get(vars.$border-width));
280 inset-inline: calc(-1 * props.get(vars.$border-width)); 246 inset-inline: calc(-1 * props.get(vars.$border-width));
281 z-index: 10; 247 z-index: 10;
282 visibility: hidden; 248 visibility: hidden;
283 background-color: props.get(vars.$hover--bg-color); 249 background-color: props.get(vars.$hover--bg-color);
284 border-color: transparent; 250 border-color: transparent;
285 border-style: solid; 251 border-style: solid;
286 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); 252 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
287 border-end-start-radius: calc( 253 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
288 props.get(vars.$rounding) - props.get(vars.$border-width) 254 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
289 ); 255 opacity: 0;
290 border-end-end-radius: calc(
291 props.get(vars.$rounding) - props.get(vars.$border-width)
292 );
293 opacity: 0;
294 transition: 256 transition:
295 border-color 0.2s ease, 257 border-color .2s ease,
296 opacity 0.2s ease, 258 opacity .2s ease,
297 visibility 0s 0.2s linear; 259 visibility 0s .2s linear;
298 } 260 }
299 261
300 @include bem.multi( 262 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive', 'modifier' 'collapsible') {
301 "&:link, &:visited, &:enabled",
302 "modifier" "interactive",
303 "modifier" "collapsible"
304 ) {
305 &:hover, 263 &:hover,
306 &:active, 264 &:active,
307 &:focus-visible { 265 &:focus-visible {
308 @include bem.elem("body") { 266 @include bem.elem('body') {
309 visibility: visible; 267 visibility: visible;
310 border-color: props.get(vars.$hover--border-color); 268 border-color: props.get(vars.$hover--border-color);
311 opacity: 1; 269 opacity: 1;
312 transition: 270 transition:
313 border-color 0.2s ease, 271 border-color .2s ease,
314 opacity 0.2s ease, 272 opacity .2s ease,
315 visibility 0.2s linear; 273 visibility .2s linear;
316 } 274 }
317 } 275 }
318 } 276 }
319 } 277 }
320 278
321 @include bem.modifier("horizontal") { 279 @include bem.modifier('horizontal') {
322 flex-direction: row; 280 flex-direction: row;
323 align-items: center; 281 align-items: center;
324 282
325 @include bem.elem("image") { 283 @include bem.elem('image') {
326 align-self: stretch; 284 align-self: stretch;
327 inline-size: auto; 285 inline-size: auto;
328 286
329 &:first-child { 287 &:first-child {
330 border-start-end-radius: 0; 288 border-start-end-radius: 0;
331 border-end-start-radius: props.get(vars.$rounding); 289 border-end-start-radius: props.get(vars.$rounding);
332 } 290 }
333 291
334 &:last-child { 292 &:last-child {
@@ -337,38 +295,37 @@
337 } 295 }
338 } 296 }
339 297
340 @include bem.elem("body") { 298 @include bem.elem('body') {
341 @include bem.modifier("main") { 299 @include bem.modifier('main') {
342 block-size: auto; 300 block-size: auto;
343 min-block-size: none; 301 min-block-size: none;
344 inline-size: 100%; 302 inline-size: 100%;
345 min-inline-size: 0; 303 min-inline-size: 0;
346 } 304 }
347 } 305 }
348 } 306 }
349 307
350 @include bem.modifier("collapsible") { 308 @include bem.modifier('collapsible') {
351 display: block; 309 display: block;
352 interpolate-size: allow-keywords; 310 interpolate-size: allow-keywords;
353 311
354 @include bem.elem("header") { 312 @include bem.elem("header") {
355 display: flex; 313 display: flex;
356 align-items: center; 314 align-items: center;
357 gap: 1em; 315 gap: 1em;
358 cursor: pointer; 316 cursor: pointer;
359 317
360 &::before { 318 &::before {
361 margin: 0; 319 margin: 0;
362 inline-size: 1em; 320 inline-size: 1em;
363 font-size: 0.8em; 321 font-size: 0.8em;
364 content: "▶"; 322 content: "▶";
365 } 323 }
366 324
367 &:focus-visible { 325 &:focus-visible {
368 outline: props.get(vars.$key-focus--border-color) solid 326 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
369 props.get(vars.$key-focus--border-width);
370 outline-offset: calc(-1 * props.get(vars.$key-focus--border-width)); 327 outline-offset: calc(-1 * props.get(vars.$key-focus--border-width));
371 border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 328 border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
372 } 329 }
373 330
374 @include bem.next-elem("body") { 331 @include bem.next-elem("body") {
@@ -377,7 +334,7 @@
377 } 334 }
378 335
379 &::details-content { 336 &::details-content {
380 opacity: 0; 337 opacity: 0;
381 block-size: 0; 338 block-size: 0;
382 overflow-y: clip; 339 overflow-y: clip;
383 transition: 340 transition:
@@ -394,7 +351,7 @@
394 } 351 }
395 352
396 &::details-content { 353 &::details-content {
397 opacity: 1; 354 opacity: 1;
398 block-size: auto; 355 block-size: auto;
399 } 356 }
400 } 357 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 21:37:54 +0000