From 5855a6821cf5585378a70f9bee13563bdbfe2d86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 22 Oct 2024 08:23:33 +0200 Subject: Less broad imports --- src/layouts/_card-list.scss | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) (limited to 'src/layouts/_card-list.scss') 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 @@ @use 'sass:meta'; @use 'include-media/dist/include-media' as media; -@use 'iro-sass/src/iro-sass' as iro; +@use 'iro-sass/src/bem' as bem; @use 'iro-sass/src/props'; @use '../props' as *; @@ -10,47 +10,47 @@ @mixin styles { @include materialize-at-root(meta.module-variables('vars')); - @include iro.bem-layout('card-list') { + @include bem.layout('card-list') { display: flex; flex-direction: column; gap: props.get(vars.$row-gap); - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { row-gap: props.get(vars.$quiet--row-gap); } - @include iro.bem-modifier('grid') { + @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 iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { row-gap: props.get(vars.$grid--quiet--row-gap); } } - @include iro.bem-modifier('masonry') { + @include bem.modifier('masonry') { display: block; columns: auto props.get(vars.$masonry--col-width); column-gap: props.get(vars.$masonry--col-gap); - @include iro.bem-elem('card') { + @include bem.elem('card') { margin-block-end: props.get(vars.$masonry--row-gap); break-inside: avoid; } - @include iro.bem-modifier('quiet') { - @include iro.bem-elem('card') { + @include bem.modifier('quiet') { + @include bem.elem('card') { margin-block-end: props.get(vars.$masonry--quiet--row-gap); } } } - @include iro.bem-modifier('masonry-h') { + @include bem.modifier('masonry-h') { flex-flow: row wrap; gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); - @include iro.bem-modifier('no-flush') { + @include bem.modifier('no-flush') { &::after { display: block; flex: 1 0 auto; @@ -59,22 +59,22 @@ } } - @include iro.bem-elem('card') { + @include bem.elem('card') { flex: 1 0 auto; max-inline-size: 100%; } - @include iro.bem-elem('card-image') { + @include bem.elem('card-image') { block-size: props.get(vars.$masonry-h--row-height); } - @include iro.bem-modifier('quiet') { + @include bem.modifier('quiet') { row-gap: props.get(vars.$masonry-h--quiet--row-gap); } } - @include iro.bem-modifier('aspect-5\\/4') { - @include iro.bem-elem('card-image') { + @include bem.modifier('aspect-5\\/4') { + @include bem.elem('card-image') { aspect-ratio: 5 / 4; } } -- cgit v1.3.1