From 120ad0cdc11143fb6f184bcbca332dbf8a2114e8 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Mon, 28 Mar 2022 09:00:40 +0200 Subject: Improved bubble --- src/_utils.scss | 5 +++++ src/layouts/_bubble-group.scss | 13 ++++++++----- src/layouts/_card.scss | 3 +++ src/objects/_bubble.scss | 5 ----- 4 files changed, 16 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/_utils.scss b/src/_utils.scss index 860fe3e..c0bc087 100644 --- a/src/_utils.scss +++ b/src/_utils.scss @@ -89,6 +89,11 @@ $dirs: ( position: relative; } +@include iro.bem-utility('sticky-top') { + position: sticky; + top: 0; +} + @include iro.bem-utility('themed') { background-color: fn.global-color(--bg); color: fn.global-color(--fg); diff --git a/src/layouts/_bubble-group.scss b/src/layouts/_bubble-group.scss index 7593881..3e280b5 100644 --- a/src/layouts/_bubble-group.scss +++ b/src/layouts/_bubble-group.scss @@ -5,7 +5,12 @@ @include iro.props-store(( --dims: ( --spacing-x: fn.global-dim(--size --225), - --spacing-y: fn.global-dim(--size --50), + --spacing-y: fn.global-dim(--size --150), + + --compact: ( + --spacing-x: fn.global-dim(--size --225), + --spacing-y: fn.global-dim(--size --50), + ) ) ), 'dims'); @@ -18,10 +23,7 @@ gap: fn.dim(--spacing-y) fn.dim(--spacing-x); @include iro.bem-elem('avatar') { - grid-area: avatar; - position: sticky; - top: 0; - justify-self: end; + grid-area: avatar; } @include iro.bem-elem('bubble') { @@ -30,6 +32,7 @@ @include iro.bem-modifier('compact') { justify-items: start; + gap: fn.dim(--compact --spacing-y) fn.dim(--compact --spacing-x); } @include iro.bem-modifier('arrow') { diff --git a/src/layouts/_card.scss b/src/layouts/_card.scss index e6c379d..9e54d50 100644 --- a/src/layouts/_card.scss +++ b/src/layouts/_card.scss @@ -7,14 +7,17 @@ --dims: ( --pad-x: fn.global-dim(--size --150), --pad-y: fn.global-dim(--size --85), + --75: ( --pad-x: fn.global-dim(--size --100), --pad-y: fn.global-dim(--size --50), ), + --200: ( --pad-x: fn.global-dim(--size --300), --pad-y: fn.global-dim(--size --150), ), + --300: ( --pad-x: fn.global-dim(--size --450), --pad-y: fn.global-dim(--size --225), diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss index 41b26ff..1259b4a 100644 --- a/src/objects/_bubble.scss +++ b/src/objects/_bubble.scss @@ -14,7 +14,6 @@ --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), @@ -24,10 +23,7 @@ ), '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); @@ -51,7 +47,6 @@ } @include iro.bem-modifier('compact') { - gap: 0; padding: fn.dim(--compact --pad-y) fn.dim(--compact --pad-x); } } -- cgit v1.2.3-70-g09d2