From 365c56edcc36b5b92902bac01ce44b43d01e8685 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Fri, 18 Oct 2024 18:08:24 +0200 Subject: Refactoring --- src/objects/_popover.scss | 51 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/objects/_popover.scss (limited to 'src/objects/_popover.scss') diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss new file mode 100644 index 0000000..13550eb --- /dev/null +++ b/src/objects/_popover.scss @@ -0,0 +1,51 @@ +@use 'iro-sass/src/iro-sass' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('popover') { + @include iro.props-store(( + --dims: ( + --z-index: 10000, + --pad-i: 0, + --pad-b: fn.global-dim(--size --85), + --separator: fn.global-dim(--size --85), + --rounding: fn.global-dim(--rounding), + --border: fn.global-dim(--border --thin), + ), + --colors: ( + --bg: fn.global-color(--bg-l2), + --border: fn.global-color(--border), + --filter: drop-shadow( + fn.global-dim(--shadow --x) + fn.global-dim(--shadow --y) + fn.global-dim(--shadow --blur) + fn.global-color(--shadow) + ), + ), + )); + + @include iro.bem-object(iro.props-namespace()) { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + z-index: fn.dim(--z-index); + padding-block: fn.dim(--pad-b); + padding-inline: fn.dim(--pad-i); + background-color: fn.color(--bg); + filter: fn.color(--filter); + border: fn.dim(--border) solid fn.color(--border); + border-radius: fn.dim(--rounding); + transform: translate(var(--x), var(--y)); + + @include iro.bem-modifier('up-left') { + transform: translate(var(--x), calc(var(--y) - 100%)); + } + + @include iro.bem-modifier('up-right') { + transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); + } + + @include iro.bem-modifier('down-right') { + transform: translate(calc(var(--x) - 100%), var(--y)); + } + } +} -- cgit v1.3.1