diff options
author | Volpeon <git@volpeon.ink> | 2024-06-29 10:01:02 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-29 10:01:02 +0200 |
commit | 6376f1a5225b2fa45f6c861d4a265bf13b56d038 (patch) | |
tree | 7c2ec8bea63df05b6a533fdfa6dab4b2f17f7a1f /src/layouts/_card-list.scss | |
parent | Update (diff) | |
download | iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.gz iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.tar.bz2 iro-design-6376f1a5225b2fa45f6c861d4a265bf13b56d038.zip |
Update
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r-- | src/layouts/_card-list.scss | 40 |
1 files changed, 29 insertions, 11 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index c27b297..362325a 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
@@ -37,7 +37,11 @@ | |||
37 | @include iro.bem-modifier('grid') { | 37 | @include iro.bem-modifier('grid') { |
38 | display: grid; | 38 | display: grid; |
39 | grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); | 39 | grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); |
40 | gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap); | 40 | gap: fn.dim(--grid --col-gap); |
41 | |||
42 | @include iro.bem-modifier('quiet') { | ||
43 | row-gap: fn.dim(--grid --row-gap); | ||
44 | } | ||
41 | } | 45 | } |
42 | 46 | ||
43 | @include iro.bem-modifier('masonry') { | 47 | @include iro.bem-modifier('masonry') { |
@@ -46,31 +50,45 @@ | |||
46 | column-gap: fn.dim(--masonry --col-gap); | 50 | column-gap: fn.dim(--masonry --col-gap); |
47 | 51 | ||
48 | @include iro.bem-elem('card') { | 52 | @include iro.bem-elem('card') { |
49 | margin-bottom: fn.dim(--masonry --row-gap); | 53 | margin-bottom: fn.dim(--masonry --col-gap); |
54 | break-inside: avoid; | ||
55 | } | ||
56 | |||
57 | @include iro.bem-modifier('quiet') { | ||
58 | @include iro.bem-elem('card') { | ||
59 | margin-bottom: fn.dim(--masonry --row-gap); | ||
60 | } | ||
50 | } | 61 | } |
51 | } | 62 | } |
52 | 63 | ||
53 | @include iro.bem-modifier('masonry-h') { | 64 | @include iro.bem-modifier('masonry-h') { |
54 | flex-flow: row wrap; | 65 | flex-flow: row wrap; |
55 | gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap); | 66 | gap: fn.dim(--masonry-h --col-gap); |
67 | |||
68 | &::after { | ||
69 | content: ''; | ||
70 | display: block; | ||
71 | flex: 1 0 auto; | ||
72 | inline-size: fn.dim(--masonry-h --row-height); | ||
73 | block-size: 0; | ||
74 | } | ||
56 | 75 | ||
57 | @include iro.bem-elem('card') { | 76 | @include iro.bem-elem('card') { |
58 | flex: 1 0 auto; | 77 | flex: 1 0 auto; |
59 | max-width: 100%; | 78 | max-inline-size: 100%; |
60 | } | 79 | } |
61 | 80 | ||
62 | @include iro.bem-elem('card-content') { | 81 | @include iro.bem-elem('card-image') { |
63 | height: fn.dim(--masonry-h --row-height); | 82 | block-size: fn.dim(--masonry-h --row-height); |
64 | } | 83 | } |
65 | 84 | ||
66 | @include iro.bem-elem('dummy') { | 85 | @include iro.bem-modifier('quiet') { |
67 | flex: 1 0 auto; | 86 | row-gap: fn.dim(--masonry-h --row-gap); |
68 | width: fn.dim(--masonry-h --row-height); | ||
69 | } | 87 | } |
70 | } | 88 | } |
71 | 89 | ||
72 | @include iro.bem-modifier('aspect-5\\/4') { | 90 | @include iro.bem-modifier('aspect-5\\/4') { |
73 | @include iro.bem-elem('card') { | 91 | @include iro.bem-elem('card-image') { |
74 | aspect-ratio: 5 / 4; | 92 | aspect-ratio: 5 / 4; |
75 | } | 93 | } |
76 | } | 94 | } |