From 679b9b108101b67ad56b4fdf35ec2bd0568d8d84 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Thu, 9 Nov 2023 15:44:54 +0100 Subject: Renamed "bubble" to "message", added message group merging --- src/layouts/_bubble-group.scss | 109 ------------------------------- src/layouts/_message-group.scss | 138 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 138 insertions(+), 109 deletions(-) delete mode 100644 src/layouts/_bubble-group.scss create mode 100644 src/layouts/_message-group.scss (limited to 'src/layouts') diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss deleted file mode 100644 index e4bc666..0000000 --- a/src/layouts/_bubble-group.scss +++ /dev/null @@ -1,109 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('bubble-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), - ) - ) - ), 'dims'); - - @include iro.bem-layout(iro.props-namespace()) { - display: grid; - grid-template-columns: auto 1fr; - grid-auto-rows: auto; - grid-template-areas: 'avatar bubble' 'avatar .'; - align-items: flex-start; - gap: 0 fn.dim(--spacing-x); - - @include iro.bem-elem('avatar') { - grid-area: avatar; - } - - @include iro.bem-elem('bubble') { - grid-column: bubble; - box-sizing: border-box; - min-width: 0; - max-width: 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); - 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('bubble') { - &::before { - right: calc(-1 * fn.dim(--arrow-size)); - left: auto; - border-right-color: transparent; - border-left-color: fn.global-color(--bg); - } - } - } - - @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('bubble') { - @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: 'bubble avatar' '. avatar'; - } - - @include iro.bem-modifier('no-avatar') { - grid-template-columns: 1fr; - grid-template-areas: 'bubble'; - - @include iro.bem-elem('avatar') { - display: none; - } - } - - @include iro.bem-modifier('arrow') { - @include iro.bem-elem('bubble') { - &::before { - display: block; - } - - @include iro.bem-next-twin-elem { - &::before { - display: none; - } - } - } - } - } -} diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss new file mode 100644 index 0000000..d95c9e8 --- /dev/null +++ b/src/layouts/_message-group.scss @@ -0,0 +1,138 @@ +@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), + ) + ) + ), 'dims'); + + @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; + height: 0; + } + + @include iro.bem-elem('message') { + grid-column: message; + box-sizing: border-box; + min-width: 0; + max-width: 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); + 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); + } + } + } + + @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