From cac07ec50d360f3916e84bc3af6164ef07ac2f83 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 27 Mar 2022 11:23:45 +0200 Subject: Update --- src/objects/_bubble.scss | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 48 insertions(+) create mode 100644 src/objects/_bubble.scss (limited to 'src/objects/_bubble.scss') diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss new file mode 100644 index 0000000..26746fe --- /dev/null +++ b/src/objects/_bubble.scss @@ -0,0 +1,48 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('bubble') { + @include iro.props-store(( + --colors: ( + --image-bg: fn.global-color(--obj), + ), + ), 'colors'); + + @include iro.props-store(( + --dims: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + --rounding: 3px, + --arrow-size: fn.global-dim(--size --100), + ) + ), 'dims'); + + @include iro.bem-object(iro.props-namespace()) { + position: relative; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + border-radius: fn.dim(--rounding); + background-color: fn.global-color(--bg); + color: fn.global-color(--fg); + + &::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-elem('user') { + display: block; + } + + @include iro.bem-elem('time') { + margin-left: 1em; + float: right; + transform: translate(.2em, .2em); + } + } +} -- cgit v1.2.3-70-g09d2