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/objects/_bubble.scss | 45 ----------------------------------------- src/objects/_message.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 45 deletions(-) delete mode 100644 src/objects/_bubble.scss create mode 100644 src/objects/_message.scss (limited to 'src/objects') diff --git a/src/objects/_bubble.scss b/src/objects/_bubble.scss deleted file mode 100644 index d91b6d1..0000000 --- a/src/objects/_bubble.scss +++ /dev/null @@ -1,45 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('bubble') { - @include iro.props-store(( - --dims: ( - --pad-x: fn.global-dim(--size --200), - --pad-y: fn.global-dim(--size --150), - --rounding: 0, - - --75: ( - --pad-x: fn.global-dim(--size --150), - --pad-y: fn.global-dim(--size --85), - ), - ) - ), 'dims'); - - @include iro.props-store(( - --colors: ( - --highlight: fn.global-color(--fg-lo), - ), - ), 'colors'); - - @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); - - @include iro.bem-modifier('highlight') { - box-shadow: -3px 0 0 0 fn.color(--highlight); - } - - @include iro.bem-elem('suffix') { - margin-left: 1em; - float: right; - transform: translate(.2em, .2em); - } - - @include iro.bem-modifier('75') { - padding: fn.dim(--75 --pad-y) fn.dim(--75 --pad-x); - } - } -} diff --git a/src/objects/_message.scss b/src/objects/_message.scss new file mode 100644 index 0000000..283ce26 --- /dev/null +++ b/src/objects/_message.scss @@ -0,0 +1,51 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('message') { + @include iro.props-store(( + --dims: ( + --bubble: ( + --pad-x: fn.global-dim(--size --200), + --pad-y: fn.global-dim(--size --150), + --rounding: 0, + + --75: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + ), + ), + ) + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --highlight: fn.global-color(--fg-lo), + ), + ), 'colors'); + + @include iro.bem-object(iro.props-namespace()) { + @include iro.bem-elem('suffix') { + margin-left: 1em; + float: right; + } + + @include iro.bem-modifier('bubble') { + padding: fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x); + border-radius: fn.dim(--bubble --rounding); + background-color: fn.global-color(--bg); + color: fn.global-color(--fg); + + @include iro.bem-elem('suffix') { + transform: translate(.2em, .2em); + } + + @include iro.bem-modifier('highlight') { + box-shadow: -3px 0 0 0 fn.color(--highlight); + } + + @include iro.bem-modifier('75') { + padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x); + } + } + } +} -- cgit v1.2.3-54-g00ecf