From a08dee14bcc07ee31175265cb586e857d44fb12e Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Mar 2022 18:52:27 +0200 Subject: Improved bubbles --- src/objects/_bubble.scss | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss index 26746fe..41b26ff 100644 --- a/src/objects/_bubble.scss +++ b/src/objects/_bubble.scss @@ -10,15 +10,24 @@ @include iro.props-store(( --dims: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), + --pad-x: fn.global-dim(--size --200), + --pad-y: fn.global-dim(--size --150), --rounding: 3px, --arrow-size: fn.global-dim(--size --100), + --spacing: fn.global-dim(--size --100), + + --compact: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + ), ) ), 'dims'); @include iro.bem-object(iro.props-namespace()) { + display: flex; position: relative; + flex-direction: column; + gap: fn.dim(--spacing); padding: fn.dim(--pad-y) fn.dim(--pad-x); border-radius: fn.dim(--rounding); background-color: fn.global-color(--bg); @@ -34,15 +43,16 @@ border-bottom-color: transparent; border-left-color: transparent; } - - @include iro.bem-elem('user') { - display: block; - } @include iro.bem-elem('time') { margin-left: 1em; float: right; transform: translate(.2em, .2em); } + + @include iro.bem-modifier('compact') { + gap: 0; + padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x); + } } } -- cgit v1.2.3-70-g09d2