diff options
Diffstat (limited to 'src/objects/_card.scss')
| -rw-r--r-- | src/objects/_card.scss | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/src/objects/_card.scss b/src/objects/_card.scss index b8bc727..d91bdbe 100644 --- a/src/objects/_card.scss +++ b/src/objects/_card.scss | |||
| @@ -1,6 +1,6 @@ | |||
| 1 | @use 'sass:meta'; | 1 | @use 'sass:meta'; |
| 2 | @use 'pkg:iro-sass/src/bem'; | 2 | @use 'pkg:iro-sass/bem'; |
| 3 | @use 'pkg:iro-sass/src/props'; | 3 | @use 'pkg:iro-sass/props'; |
| 4 | @use '../props' as *; | 4 | @use '../props' as *; |
| 5 | @use 'avatar.vars' as avatar; | 5 | @use 'avatar.vars' as avatar; |
| 6 | 6 | ||
| @@ -297,10 +297,10 @@ | |||
| 297 | 297 | ||
| 298 | @include bem.elem('body') { | 298 | @include bem.elem('body') { |
| 299 | @include bem.modifier('main') { | 299 | @include bem.modifier('main') { |
| 300 | block-size: auto; | ||
| 301 | min-block-size: none; | ||
| 302 | inline-size: 100%; | 300 | inline-size: 100%; |
| 303 | min-inline-size: 0; | 301 | min-inline-size: 0; |
| 302 | block-size: auto; | ||
| 303 | min-block-size: none; | ||
| 304 | } | 304 | } |
| 305 | } | 305 | } |
| 306 | } | 306 | } |
| @@ -309,17 +309,17 @@ | |||
| 309 | display: block; | 309 | display: block; |
| 310 | interpolate-size: allow-keywords; | 310 | interpolate-size: allow-keywords; |
| 311 | 311 | ||
| 312 | @include bem.elem("header") { | 312 | @include bem.elem('header') { |
| 313 | display: flex; | 313 | display: flex; |
| 314 | align-items: center; | ||
| 315 | gap: 1em; | 314 | gap: 1em; |
| 315 | align-items: center; | ||
| 316 | cursor: pointer; | 316 | cursor: pointer; |
| 317 | 317 | ||
| 318 | &::before { | 318 | &::before { |
| 319 | margin: 0; | ||
| 320 | inline-size: 1em; | 319 | inline-size: 1em; |
| 321 | font-size: 0.8em; | 320 | margin: 0; |
| 322 | content: "▶"; | 321 | font-size: .8em; |
| 322 | content: '▶'; | ||
| 323 | } | 323 | } |
| 324 | 324 | ||
| 325 | &:focus-visible { | 325 | &:focus-visible { |
| @@ -328,31 +328,31 @@ | |||
| 328 | 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)); |
| 329 | } | 329 | } |
| 330 | 330 | ||
| 331 | @include bem.next-elem("body") { | 331 | @include bem.next-elem('body') { |
| 332 | padding-block-start: 0; | 332 | padding-block-start: 0; |
| 333 | } | 333 | } |
| 334 | } | 334 | } |
| 335 | 335 | ||
| 336 | &::details-content { | 336 | &::details-content { |
| 337 | opacity: 0; | ||
| 338 | block-size: 0; | 337 | block-size: 0; |
| 339 | overflow-y: clip; | 338 | overflow-y: clip; |
| 339 | opacity: 0; | ||
| 340 | transition: | 340 | transition: |
| 341 | content-visibility 0.2s allow-discrete, | 341 | content-visibility .2s allow-discrete, |
| 342 | opacity 0.2s ease, | 342 | opacity .2s ease, |
| 343 | block-size 0.2s ease; | 343 | block-size .2s ease; |
| 344 | } | 344 | } |
| 345 | 345 | ||
| 346 | &[open] { | 346 | &[open] { |
| 347 | @include bem.elem("header") { | 347 | @include bem.elem('header') { |
| 348 | &::before { | 348 | &::before { |
| 349 | content: "▼"; | 349 | content: '▼'; |
| 350 | } | 350 | } |
| 351 | } | 351 | } |
| 352 | 352 | ||
| 353 | &::details-content { | 353 | &::details-content { |
| 354 | opacity: 1; | ||
| 355 | block-size: auto; | 354 | block-size: auto; |
| 355 | opacity: 1; | ||
| 356 | } | 356 | } |
| 357 | } | 357 | } |
| 358 | 358 | ||
