From 6376f1a5225b2fa45f6c861d4a265bf13b56d038 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 29 Jun 2024 10:01:02 +0200 Subject: Update --- src/layouts/_card-list.scss | 40 ++++++++---- src/layouts/_container.scss | 25 ++++---- src/layouts/_message-group.scss | 139 ---------------------------------------- 3 files changed, 40 insertions(+), 164 deletions(-) delete mode 100644 src/layouts/_message-group.scss (limited to 'src/layouts') diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss index c27b297..362325a 100644 --- a/src/layouts/_card-list.scss +++ b/src/layouts/_card-list.scss @@ -37,7 +37,11 @@ @include iro.bem-modifier('grid') { display: grid; grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr)); - gap: fn.dim(--grid --row-gap) fn.dim(--grid --col-gap); + gap: fn.dim(--grid --col-gap); + + @include iro.bem-modifier('quiet') { + row-gap: fn.dim(--grid --row-gap); + } } @include iro.bem-modifier('masonry') { @@ -46,31 +50,45 @@ column-gap: fn.dim(--masonry --col-gap); @include iro.bem-elem('card') { - margin-bottom: fn.dim(--masonry --row-gap); + margin-bottom: fn.dim(--masonry --col-gap); + break-inside: avoid; + } + + @include iro.bem-modifier('quiet') { + @include iro.bem-elem('card') { + margin-bottom: fn.dim(--masonry --row-gap); + } } } @include iro.bem-modifier('masonry-h') { flex-flow: row wrap; - gap: fn.dim(--masonry-h --row-gap) fn.dim(--masonry-h --col-gap); + 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-width: 100%; + flex: 1 0 auto; + max-inline-size: 100%; } - @include iro.bem-elem('card-content') { - height: fn.dim(--masonry-h --row-height); + @include iro.bem-elem('card-image') { + block-size: fn.dim(--masonry-h --row-height); } - @include iro.bem-elem('dummy') { - flex: 1 0 auto; - width: 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') { + @include iro.bem-elem('card-image') { aspect-ratio: 5 / 4; } } diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss index fcc4837..06607a1 100644 --- a/src/layouts/_container.scss +++ b/src/layouts/_container.scss @@ -7,22 +7,22 @@ --narrow-125: iro.fn-px-to-rem(720px), --narrow: iro.fn-px-to-rem(610px), --narrow-75: iro.fn-px-to-rem(500px), - --pad-x: fn.global-dim(--size --400), - --pad-y: fn.global-dim(--size --800), + --pad-i: fn.global-dim(--size --400), + --pad-b: fn.global-dim(--size --800), ) )); @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --200), - --pad-y: fn.global-dim(--size --600), + --pad-i: fn.global-dim(--size --200), + --pad-b: fn.global-dim(--size --600), ) ), 'sm'); @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --450), + --pad-i: fn.global-dim(--size --150), + --pad-b: fn.global-dim(--size --450), ) ), 'xs'); @@ -30,19 +30,16 @@ @each $size in 'narrow-125' 'narrow' 'narrow-75' { @include iro.bem-modifier($size) { max-inline-size: fn.dim(--#{$size}); - margin-right: auto; - margin-left: auto; + margin-inline: auto; } } - @include iro.bem-modifier('pad-x') { - padding-right: fn.dim(--pad-x); - padding-left: fn.dim(--pad-x); + @include iro.bem-modifier('pad-i') { + margin-inline: fn.dim(--pad-i); } - @include iro.bem-modifier('pad-y') { - padding-top: fn.dim(--pad-y); - padding-bottom: fn.dim(--pad-y); + @include iro.bem-modifier('pad-b') { + padding-block: fn.dim(--pad-b); } } } diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss deleted file mode 100644 index 235e242..0000000 --- a/src/layouts/_message-group.scss +++ /dev/null @@ -1,139 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -// @use '../objects/message'; - -@include iro.props-namespace('message-group') { - @include iro.props-store(( - --dims: ( - --spacing-x: fn.global-dim(--size --225), - --spacing-y: fn.global-dim(--size --150), - --arrow-size: fn.global-dim(--size --100), - - --compact: ( - --spacing-x: fn.global-dim(--size --225), - --spacing-y: fn.global-dim(--size --50), - ) - ) - )); - - @include iro.bem-layout(iro.props-namespace()) { - display: grid; - grid-template-columns: auto 1fr; - grid-auto-rows: auto; - grid-template-areas: 'avatar message' 'avatar .'; - align-items: flex-start; - gap: 0 fn.dim(--spacing-x); - - @include iro.bem-elem('avatar') { - grid-area: avatar; - block-size: 0; - } - - @include iro.bem-elem('message') { - grid-column: message; - position: relative; - box-sizing: border-box; - min-inline-size: 0; - max-inline-size: 100%; - - &::before { - content: ''; - display: none; - position: absolute; - top: 0; - left: calc(-1 * fn.dim(--arrow-size)); - border: fn.dim(--arrow-size) solid fn.global-color(--bg-l2); - border-bottom-color: transparent; - border-left-color: transparent; - } - - @include iro.bem-next-twin-elem { - margin-top: fn.dim(--spacing-y); - } - } - - @include iro.bem-modifier('right') { - @include iro.bem-elem('message') { - &::before { - right: calc(-1 * fn.dim(--arrow-size)); - left: auto; - border-right-color: transparent; - border-left-color: fn.global-color(--bg-l2); - } - } - } - - @include iro.bem-modifier('compact') { - gap: 0 fn.dim(--compact --spacing-x); - - @include iro.bem-modifier('left') { - justify-items: start; - } - - @include iro.bem-modifier('right') { - justify-items: end; - } - - @include iro.bem-elem('message') { - @include iro.bem-next-twin-elem { - margin-top: fn.dim(--compact --spacing-y); - } - } - } - - @include iro.bem-modifier('right') { - grid-template-columns: 1fr auto; - grid-template-areas: 'message avatar' '. avatar'; - } - - @include iro.bem-modifier('no-avatar') { - grid-template-columns: 1fr; - grid-template-areas: 'message'; - - @include iro.bem-elem('avatar') { - display: none; - } - } - - @include iro.bem-modifier('arrow') { - @include iro.bem-elem('message') { - &::before { - display: block; - } - - @include iro.bem-next-twin-elem { - &::before { - display: none; - } - } - } - } - - & + & { - @include iro.bem-modifier('merge') { - margin-top: fn.dim(--spacing-y); - - @include iro.bem-elem('avatar') { - visibility: hidden; - } - - @include iro.bem-modifier('compact') { - margin-top: fn.dim(--compact --spacing-y); - } - - @include iro.bem-elem('merge-hide') { - display: none; - } - - @include iro.bem-modifier('arrow') { - @include iro.bem-elem('message') { - &::before { - display: none; - } - } - } - } - } - } -} -- cgit v1.2.3-54-g00ecf