From bea3ce725941490a72f2da23f58725a2dd292ff2 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 21 Feb 2026 10:53:34 +0100 Subject: Configurable card list grid layouts --- src/layouts/_card-list.scss | 28 +++++++--------------------- src/layouts/_card-list.vars.scss | 17 ++++++++++++++--- 2 files changed, 21 insertions(+), 24 deletions(-) (limited to 'src') 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 @@ row-gap: props.get(vars.$quiet--row-gap); } - @include bem.modifier('grid') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); - gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); - @include bem.modifier('quiet') { - row-gap: props.get(vars.$grid--quiet--row-gap); - } - } - - @include bem.modifier('grid-sm') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr)); - gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); + @each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap in vars.$grid-layouts { + @include bem.modifier($mod) { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr)); + gap: props.get($row-gap) props.get($col-gap); - @include bem.modifier('grid-sm') { - @include media.media('<=md') { - display: flex; - gap: props.get(vars.$row-gap); + @include bem.modifier('quiet') { + row-gap: props.get($quiet--row-gap); } } - - @include bem.modifier('quiet') { - row-gap: props.get(vars.$grid-sm--quiet--row-gap); - } } @include bem.modifier('masonry') { diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss index 75e72cc..2215882 100644 --- a/src/layouts/_card-list.vars.scss +++ b/src/layouts/_card-list.vars.scss @@ -14,11 +14,22 @@ $grid--col-gap: props.def(--l-card-list--grid--col-gap, props.get(core.$s $grid--col-width: props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default; $grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default; -$grid-sm--row-gap: props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default; -$grid-sm--col-gap: props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default; -$grid-sm--col-width: props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default; +$grid-sm--row-gap: props.def(--l-card-list--grid-sm--row-gap, props.get(core.$size--200)) !default; +$grid-sm--col-gap: props.def(--l-card-list--grid-sm--col-gap, props.get(core.$size--200)) !default; +$grid-sm--col-width: props.def(--l-card-list--grid-sm--col-width, props.get(core.$size--4600)) !default; $grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--quiet--row-gap, props.get(core.$size--800)) !default; +$grid-xs--row-gap: props.def(--l-card-list--grid-xs--row-gap, props.get(core.$size--200)) !default; +$grid-xs--col-gap: props.def(--l-card-list--grid-xs--col-gap, props.get(core.$size--200)) !default; +$grid-xs--col-width: props.def(--l-card-list--grid-xs--col-width, props.get(core.$size--2400)) !default; +$grid-xs--quiet--row-gap: props.def(--l-card-list--grid-xs--quiet--row-gap, props.get(core.$size--800)) !default; + +$grid-layouts: ( + 'grid': $grid--row-gap $grid--col-gap $grid--col-width $grid--quiet--row-gap, + 'grid-sm': $grid-sm--row-gap $grid-sm--col-gap $grid-sm--col-width $grid-sm--quiet--row-gap, + 'grid-xs': $grid-xs--row-gap $grid-xs--col-gap $grid-xs--col-width $grid-xs--quiet--row-gap, +) !default; + $masonry--row-gap: props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default; $masonry--col-gap: props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default; $masonry--col-width: props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default; -- cgit v1.2.3-70-g09d2