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/_action-menu.scss | 122 +++++++++++++++++++++++++++++++++++++ 1 file changed, 122 insertions(+) create mode 100644 src/.old/objects/_action-menu.scss (limited to 'src/.old/objects/_action-menu.scss') diff --git a/src/.old/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss new file mode 100644 index 0000000..12e3b5f --- /dev/null +++ b/src/.old/objects/_action-menu.scss @@ -0,0 +1,122 @@ +@use 'iro-sass/src/index' as iro; +@use '../functions' as fn; + +@include iro.props-namespace('action-menu') { + @include iro.props-store(( + --dims: ( + --pad-x: 0, + --pad-y: fn.global-dim(--size --85), + --separator: fn.global-dim(--size --85), + --rounding: 3px, + --border: 1px, + --item: ( + --pad-x: fn.global-dim(--size --150), + --pad-y: fn.global-dim(--size --85), + ), + ), + ), 'dims'); + + @include iro.props-store(( + --colors: ( + --shadow: 0 .2em .5em rgba(#000, .1), + --border: fn.global-color(--border --stable-lo), + --separator: fn.global-color(--obj), + --icon: fn.global-color(--fg-hi), + --item: ( + --hover: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + ), + --disabled: ( + --label: fn.global-color(--fg-hi3), + ), + --key-focus: ( + --bg: fn.global-color(--obj-hi), + --label: fn.global-color(--fg-lo), + --border: fn.global-color(--focus --fill), + --shadow: fn.global-color(--focus --shadow), + ), + ), + ), + ), 'colors'); + + @include iro.props-store(( + --colors: ( + --shadow: 0 .2em .5em rgba(#000, .5), + ), + ), 'colors-dark'); + + @include iro.bem-object(iro.props-namespace()) { + position: absolute; + z-index: 10000; + top: 0; + left: 0; + padding: fn.dim(--pad-y) fn.dim(--pad-x); + transform: translate(var(--x), var(--y)); + border: fn.dim(--border) solid fn.color(--border); + border-radius: fn.dim(--rounding); + background-clip: padding-box; + background-color: fn.global-color(--bg); + box-shadow: fn.color(--shadow); + color: fn.global-color(--fg); + + @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)); + } + + @include iro.bem-elem('item') { + display: block; + box-sizing: border-box; + width: 100%; + padding: calc(fn.dim(--item --pad-y) - 2px) calc(fn.dim(--item --pad-x) - 2px); + border: 2px solid transparent; + color: fn.color(--item --disabled --label); + + &:link, + &:visited, + &:enabled { + color: currentColor; + + &:hover, + &:active { + background-color: fn.color(--item --hover --bg); + color: fn.color(--item --hover --label); + } + + @include iro.bem-at-theme('keyboard') { + &:focus { + border-radius: calc(fn.dim(--rounding) - 1px); + border-color: fn.color(--item --key-focus --border); + background-color: fn.color(--item --key-focus --bg); + box-shadow: fn.color(--item --key-focus --shadow); + color: fn.color(--item --key-focus --label); + } + } + } + } + + @include iro.bem-elem('separator') { + height: 1px; + margin: fn.dim(--separator) 0; + background-color: fn.color(--separator); + } + + @include iro.bem-elem('slot') { + padding: fn.dim(--item --pad-y) fn.dim(--item --pad-x); + } + + @include iro.bem-elem('icon-slot') { + display: flex; + justify-content: center; + width: fn.foreign-dim(--icon, --size); + } + } +} -- cgit v1.2.3-70-g09d2