From 48cb00040763459fc46d4aa108bf72c12f48f422 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 21 Jun 2024 23:07:50 +0200 Subject: WIP: Refactoring --- src/.old/objects/_message.scss | 51 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/.old/objects/_message.scss (limited to 'src/.old/objects/_message.scss') diff --git a/src/.old/objects/_message.scss b/src/.old/objects/_message.scss new file mode 100644 index 0000000..283ce26 --- /dev/null +++ b/src/.old/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-70-g09d2