From 03bb4268367dcd3b2d327d3834e2047a56687a86 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 26 Jun 2024 21:47:55 +0200 Subject: Menus --- src/objects/_action-menu.scss | 111 ------------------------------------------ 1 file changed, 111 deletions(-) delete mode 100644 src/objects/_action-menu.scss (limited to 'src/objects/_action-menu.scss') diff --git a/src/objects/_action-menu.scss b/src/objects/_action-menu.scss deleted file mode 100644 index 2a74834..0000000 --- a/src/objects/_action-menu.scss +++ /dev/null @@ -1,111 +0,0 @@ -@use 'iro-sass/src/index' as iro; -@use '../functions' as fn; - -@include iro.props-namespace('action-menu') { - @include iro.props-store(( - --dims: ( - --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), - --item: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --85), - ), - ), - --colors: ( - --bg: fn.global-color(--bg-l2), - --text: fn.global-color(--text), - --shadow: 0 .2em .5em rgba(#000, .1), - --border: fn.global-color(--border), - --separator: fn.global-color(--border), - --icon: fn.global-color(--text-mute), - --item: ( - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - ), - --disabled: ( - --label: fn.global-color(--text-disabled), - ), - --key-focus: ( - --border: fn.global-color(--focus --border), - --outline: fn.global-color(--focus --outline), - ), - ), - ), - )); - - @include iro.bem-object(iro.props-namespace()) { - position: absolute; - z-index: 10000; - inset-block-start: 0; - inset-inline-start: 0; - padding-block: fn.dim(--pad-b); - padding-inline: fn.dim(--pad-i); - 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.color(--bg); - box-shadow: fn.color(--shadow); - color: fn.color(--text); - - @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; - inline-size: 100%; - padding-block: calc(fn.dim(--item --pad-b) - 2px); - padding-inline: calc(fn.dim(--item --pad-i) - 2px); - border: 2px solid transparent; - color: fn.color(--item --disabled --label); - - &:link, - &:visited, - &:enabled { - color: currentColor; - - &:hover, - &:active, - &:focus-visible { - background-color: fn.color(--item --hover --bg); - color: fn.color(--item --hover --label); - } - - &:focus-visible { - border-color: fn.color(--item --key-focus --border); - } - } - } - - @include iro.bem-elem('separator') { - block-size: 1px; - margin-block: fn.dim(--separator); - background-color: fn.color(--separator); - } - - @include iro.bem-elem('slot') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - } - - @include iro.bem-elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: fn.foreign-dim(--icon, --size); - } - } -} -- cgit v1.2.3-54-g00ecf