summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/layouts/_card-list.scss18
-rw-r--r--src/layouts/_card-list.vars.scss13
-rw-r--r--src/objects/_card.scss19
3 files changed, 37 insertions, 13 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 59105c4..0722a88 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -13,15 +13,19 @@
13 @include iro.bem-layout('card-list') { 13 @include iro.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) props.get(vars.$col-gap); 16 gap: props.get(vars.$row-gap);
17
18 @include iro.bem-modifier('quiet') {
19 row-gap: props.get(vars.$quiet--row-gap);
20 }
17 21
18 @include iro.bem-modifier('grid') { 22 @include iro.bem-modifier('grid') {
19 display: grid; 23 display: grid;
20 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));
21 gap: props.get(vars.$grid--col-gap); 25 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
22 26
23 @include iro.bem-modifier('quiet') { 27 @include iro.bem-modifier('quiet') {
24 row-gap: props.get(vars.$grid--row-gap); 28 row-gap: props.get(vars.$grid--quiet--row-gap);
25 } 29 }
26 } 30 }
27 31
@@ -31,20 +35,20 @@
31 column-gap: props.get(vars.$masonry--col-gap); 35 column-gap: props.get(vars.$masonry--col-gap);
32 36
33 @include iro.bem-elem('card') { 37 @include iro.bem-elem('card') {
34 margin-block-end: props.get(vars.$masonry--col-gap); 38 margin-block-end: props.get(vars.$masonry--row-gap);
35 break-inside: avoid; 39 break-inside: avoid;
36 } 40 }
37 41
38 @include iro.bem-modifier('quiet') { 42 @include iro.bem-modifier('quiet') {
39 @include iro.bem-elem('card') { 43 @include iro.bem-elem('card') {
40 margin-block-end: props.get(vars.$masonry--row-gap); 44 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
41 } 45 }
42 } 46 }
43 } 47 }
44 48
45 @include iro.bem-modifier('masonry-h') { 49 @include iro.bem-modifier('masonry-h') {
46 flex-flow: row wrap; 50 flex-flow: row wrap;
47 gap: props.get(vars.$masonry-h--col-gap); 51 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
48 52
49 @include iro.bem-modifier('no-flush') { 53 @include iro.bem-modifier('no-flush') {
50 &::after { 54 &::after {
@@ -65,7 +69,7 @@
65 } 69 }
66 70
67 @include iro.bem-modifier('quiet') { 71 @include iro.bem-modifier('quiet') {
68 row-gap: props.get(vars.$masonry-h--row-gap); 72 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
69 } 73 }
70 } 74 }
71 75
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index c2df3ef..7d19e07 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,19 +1,22 @@
1@use 'iro-sass/src/props'; 1@use 'iro-sass/src/props';
2@use '../core.vars' as core; 2@use '../core.vars' as core;
3 3
4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default; 4$row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
5$col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default; 5$quiet--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
6 6
7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default; 7$grid--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
8$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default; 8$grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default;
9$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; 9$grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
10$grid--quiet--row-gap: props.def(--l-card-list--grid--row-gap, props.get(core.$size--800)) !default;
10 11
11$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--800)) !default; 12$masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
12$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; 13$masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
13$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default; 14$masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
15$masonry--quiet--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--800)) !default;
14 16
15$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--800)) !default; 17$masonry-h--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
16$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default; 18$masonry-h--col-gap: props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
17$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default; 19$masonry-h--row-height: props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
20$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--800)) !default;
18 21
19$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border)) !default; 22$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border)) !default;
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 0be38c9..3126775 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -77,7 +77,8 @@
77 } 77 }
78 78
79 @include iro.bem-elem('body') { 79 @include iro.bem-elem('body') {
80 flex: 1 0 auto; 80 flex: 0 1 auto;
81 block-size: 100%;
81 padding-block: props.get(vars.$pad-b); 82 padding-block: props.get(vars.$pad-b);
82 padding-inline: props.get(vars.$pad-i); 83 padding-inline: props.get(vars.$pad-i);
83 84
@@ -181,5 +182,21 @@
181 padding-inline: 0; 182 padding-inline: 0;
182 } 183 }
183 } 184 }
185
186 @include fw.bem-modifier('horizontal') {
187 flex-direction: row;
188 align-items: center;
189
190 @include iro.bem-elem('body') {
191 flex: 0 0 auto;
192 block-size: auto;
193
194 @include iro.bem-modifier('main') {
195 flex-shrink: 1;
196 inline-size: 100%;
197 min-inline-size: 0;
198 }
199 }
200 }
184 } 201 }
185} 202}