From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 17 Oct 2024 16:45:00 +0200 Subject: Revamped variable management --- src/layouts/_card-list.scss | 96 --------------------------------------------- 1 file changed, 96 deletions(-) delete mode 100644 src/layouts/_card-list.scss (limited to 'src/layouts/_card-list.scss') diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss deleted file mode 100644 index 65b6a66..0000000 --- a/src/layouts/_card-list.scss +++ /dev/null @@ -1,96 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; -@use 'include-media/dist/include-media' as media; - -@include iro.props-namespace('card-list') { - @include iro.props-store(( - --dims: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - - --grid: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - --col-width: fn.global-dim(--size --3200), - ), - --masonry: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - --col-width: fn.global-dim(--size --3200), - ), - --masonry-h: ( - --row-gap: fn.global-dim(--size --800), - --col-gap: fn.global-dim(--size --400), - --row-height: fn.global-dim(--size --3200), - ) - ), - --colors: ( - --border: fn.global-color(--border), - ), - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: flex; - flex-direction: column; - gap: fn.dim(--row-gap) fn.dim(--col-gap); - - @include iro.bem-modifier('grid') { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); - gap: fn.dim(--grid --col-gap); - - @include iro.bem-modifier('quiet') { - row-gap: fn.dim(--grid --row-gap); - } - } - - @include iro.bem-modifier('masonry') { - display: block; - columns: auto fn.dim(--masonry --col-width); - column-gap: fn.dim(--masonry --col-gap); - - @include iro.bem-elem('card') { - margin-block-end: fn.dim(--masonry --col-gap); - break-inside: avoid; - } - - @include iro.bem-modifier('quiet') { - @include iro.bem-elem('card') { - margin-block-end: fn.dim(--masonry --row-gap); - } - } - } - - @include iro.bem-modifier('masonry-h') { - flex-flow: row wrap; - gap: fn.dim(--masonry-h --col-gap); - - &::after { - content: ''; - display: block; - flex: 1 0 auto; - inline-size: fn.dim(--masonry-h --row-height); - block-size: 0; - } - - @include iro.bem-elem('card') { - flex: 1 0 auto; - max-inline-size: 100%; - } - - @include iro.bem-elem('card-image') { - block-size: fn.dim(--masonry-h --row-height); - } - - @include iro.bem-modifier('quiet') { - row-gap: fn.dim(--masonry-h --row-gap); - } - } - - @include iro.bem-modifier('aspect-5\\/4') { - @include iro.bem-elem('card-image') { - aspect-ratio: 5 / 4; - } - } - } -} -- cgit v1.3.1