diff options
| author | Volpeon <git@volpeon.ink> | 2026-02-21 10:53:34 +0100 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2026-02-21 10:53:34 +0100 |
| commit | bea3ce725941490a72f2da23f58725a2dd292ff2 (patch) | |
| tree | 3bd357bd2d8abc4e6c8d92e4916dced0eaed9d19 /src/layouts/_card-list.scss | |
| parent | Update _button.vars.scss (diff) | |
| download | iro-design-bea3ce725941490a72f2da23f58725a2dd292ff2.tar.gz iro-design-bea3ce725941490a72f2da23f58725a2dd292ff2.tar.bz2 iro-design-bea3ce725941490a72f2da23f58725a2dd292ff2.zip | |
Configurable card list grid layouts
Diffstat (limited to 'src/layouts/_card-list.scss')
| -rw-r--r-- | src/layouts/_card-list.scss | 28 |
1 files changed, 7 insertions, 21 deletions
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index aedbfd0..6a6fe01 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss | |||
| @@ -78,31 +78,17 @@ | |||
| 78 | row-gap: props.get(vars.$quiet--row-gap); | 78 | row-gap: props.get(vars.$quiet--row-gap); |
| 79 | } | 79 | } |
| 80 | 80 | ||
| 81 | @include bem.modifier('grid') { | ||
| 82 | display: grid; | ||
| 83 | grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); | ||
| 84 | gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); | ||
| 85 | 81 | ||
| 86 | @include bem.modifier('quiet') { | 82 | @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap in vars.$grid-layouts { |
| 87 | row-gap: props.get(vars.$grid--quiet--row-gap); | 83 | @include bem.modifier($mod) { |
| 88 | } | 84 | display: grid; |
| 89 | } | 85 | grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr)); |
| 90 | 86 | gap: props.get($row-gap) props.get($col-gap); | |
| 91 | @include bem.modifier('grid-sm') { | ||
| 92 | display: grid; | ||
| 93 | grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr)); | ||
| 94 | gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); | ||
| 95 | 87 | ||
| 96 | @include bem.modifier('grid-sm') { | 88 | @include bem.modifier('quiet') { |
| 97 | @include media.media('<=md') { | 89 | row-gap: props.get($quiet--row-gap); |
| 98 | display: flex; | ||
| 99 | gap: props.get(vars.$row-gap); | ||
| 100 | } | 90 | } |
| 101 | } | 91 | } |
| 102 | |||
| 103 | @include bem.modifier('quiet') { | ||
| 104 | row-gap: props.get(vars.$grid-sm--quiet--row-gap); | ||
| 105 | } | ||
| 106 | } | 92 | } |
| 107 | 93 | ||
| 108 | @include bem.modifier('masonry') { | 94 | @include bem.modifier('masonry') { |