summaryrefslogtreecommitdiffstats
path: root/src/layouts/_card-list.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/layouts/_card-list.scss')
-rw-r--r--src/layouts/_card-list.scss32
1 files changed, 16 insertions, 16 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 0722a88..49f4b74 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,6 +1,6 @@
1@use 'sass:meta'; 1@use 'sass:meta';
2@use 'include-media/dist/include-media' as media; 2@use 'include-media/dist/include-media' as media;
3@use 'iro-sass/src/iro-sass' as iro; 3@use 'iro-sass/src/bem' as bem;
4@use 'iro-sass/src/props'; 4@use 'iro-sass/src/props';
5@use '../props' as *; 5@use '../props' as *;
6 6
@@ -10,47 +10,47 @@
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 iro.bem-layout('card-list') { 13 @include bem.layout('card-list') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$row-gap); 16 gap: props.get(vars.$row-gap);
17 17
18 @include iro.bem-modifier('quiet') { 18 @include bem.modifier('quiet') {
19 row-gap: props.get(vars.$quiet--row-gap); 19 row-gap: props.get(vars.$quiet--row-gap);
20 } 20 }
21 21
22 @include iro.bem-modifier('grid') { 22 @include bem.modifier('grid') {
23 display: grid; 23 display: grid;
24 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); 24 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
25 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); 25 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
26 26
27 @include iro.bem-modifier('quiet') { 27 @include bem.modifier('quiet') {
28 row-gap: props.get(vars.$grid--quiet--row-gap); 28 row-gap: props.get(vars.$grid--quiet--row-gap);
29 } 29 }
30 } 30 }
31 31
32 @include iro.bem-modifier('masonry') { 32 @include bem.modifier('masonry') {
33 display: block; 33 display: block;
34 columns: auto props.get(vars.$masonry--col-width); 34 columns: auto props.get(vars.$masonry--col-width);
35 column-gap: props.get(vars.$masonry--col-gap); 35 column-gap: props.get(vars.$masonry--col-gap);
36 36
37 @include iro.bem-elem('card') { 37 @include bem.elem('card') {
38 margin-block-end: props.get(vars.$masonry--row-gap); 38 margin-block-end: props.get(vars.$masonry--row-gap);
39 break-inside: avoid; 39 break-inside: avoid;
40 } 40 }
41 41
42 @include iro.bem-modifier('quiet') { 42 @include bem.modifier('quiet') {
43 @include iro.bem-elem('card') { 43 @include bem.elem('card') {
44 margin-block-end: props.get(vars.$masonry--quiet--row-gap); 44 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
45 } 45 }
46 } 46 }
47 } 47 }
48 48
49 @include iro.bem-modifier('masonry-h') { 49 @include bem.modifier('masonry-h') {
50 flex-flow: row wrap; 50 flex-flow: row wrap;
51 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); 51 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
52 52
53 @include iro.bem-modifier('no-flush') { 53 @include bem.modifier('no-flush') {
54 &::after { 54 &::after {
55 display: block; 55 display: block;
56 flex: 1 0 auto; 56 flex: 1 0 auto;
@@ -59,22 +59,22 @@
59 } 59 }
60 } 60 }
61 61
62 @include iro.bem-elem('card') { 62 @include bem.elem('card') {
63 flex: 1 0 auto; 63 flex: 1 0 auto;
64 max-inline-size: 100%; 64 max-inline-size: 100%;
65 } 65 }
66 66
67 @include iro.bem-elem('card-image') { 67 @include bem.elem('card-image') {
68 block-size: props.get(vars.$masonry-h--row-height); 68 block-size: props.get(vars.$masonry-h--row-height);
69 } 69 }
70 70
71 @include iro.bem-modifier('quiet') { 71 @include bem.modifier('quiet') {
72 row-gap: props.get(vars.$masonry-h--quiet--row-gap); 72 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
73 } 73 }
74 } 74 }
75 75
76 @include iro.bem-modifier('aspect-5\\/4') { 76 @include bem.modifier('aspect-5\\/4') {
77 @include iro.bem-elem('card-image') { 77 @include bem.elem('card-image') {
78 aspect-ratio: 5 / 4; 78 aspect-ratio: 5 / 4;
79 } 79 }
80 } 80 }