From 3799950b0a869aee0e2725a8aafbb53c26723942 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sat, 19 Oct 2024 14:46:06 +0200 Subject: Update --- src/objects/_menu.scss | 122 +++++++++++++++++-------------------------------- 1 file changed, 43 insertions(+), 79 deletions(-) (limited to 'src/objects/_menu.scss') diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 12e9755..f9453ce 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -1,82 +1,41 @@ -/* stylelint-disable length-zero-no-unit */ - +@use 'sass:meta'; @use 'iro-sass/src/iro-sass' as iro; -@use '../functions' as fn; - -@use './icon'; - -@include iro.props-namespace('menu') { - @include iro.props-store(( - --dims: ( - --spacing: 0em, - --header: ( - --font-size: fn.global-dim(--font-size --50), - ), - --separator: fn.global-dim(--size --100), - --item: ( - --pad-i: fn.global-dim(--size --150), - --pad-b: fn.global-dim(--size --100), - --rounding: 0em, - - --key-focus: ( - --border: fn.global-dim(--key-focus --border), - --border-offset: fn.global-dim(--key-focus --border-offset), - --outline: fn.global-dim(--key-focus --outline), - ), - ), - ), - --colors: ( - --separator: fn.global-color(--border), - --header: ( - --label: fn.global-color(--heading), - ), - --item: ( - --hover: ( - --bg: fn.global-color(--border-mute), - --label: fn.global-color(--heading), - ), - --active: ( - --bg: fn.global-color(--border), - --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()) { +@use '../props'; +@use 'icon.vars' as icon; + +@forward 'menu.vars'; +@use 'menu.vars' as vars; + +@mixin styles { + @include props.materialize(meta.module-variables('vars')); + + @include iro.bem-object('menu') { display: flex; flex-direction: column; - gap: fn.dim(--spacing); + gap: props.get(vars.$spacing); @include iro.bem-elem('header') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - font-size: fn.dim(--header --font-size); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + font-size: props.get(vars.$header--font-size); font-weight: 500; - color: fn.color(--header --label); + color: props.get(vars.$header--label-color); text-transform: uppercase; letter-spacing: .5px; @include iro.bem-next-twin-elem { - margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); } } @include iro.bem-elem('item') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); - margin: calc(-1 * fn.dim(--item --key-focus --outline)); - color: fn.color(--item --disabled --label); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); + color: props.get(vars.$item--disabled--label-color); background-clip: padding-box; - border: fn.dim(--item --key-focus --outline) solid transparent; - border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline)); + border: props.get(vars.$item--key-focus--outline-width) solid transparent; + border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)); &:link, &:visited, @@ -84,23 +43,28 @@ color: currentColor; @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { - color: fn.color(--item --hover --label); - background-color: fn.color(--item --hover --bg); + color: props.get(vars.$item--hover--label-color); + background-color: props.get(vars.$item--hover--bg-color); } &:active { - color: fn.color(--item --active --label); - background-color: fn.color(--item --active --bg); + color: props.get(vars.$item--active--label-color); + background-color: props.get(vars.$item--active--bg-color); } &:focus-visible { - outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); - box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); + outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); + box-shadow: + 0 + 0 + 0 + calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) + props.get(vars.$item--key-focus--outline-color); } } @include iro.bem-next-elem('header') { - margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); } } @@ -108,30 +72,30 @@ &:link, &:visited, &:enabled { - color: fn.color(--header --label); + color: props.get(vars.$header--label-color); } } @include iro.bem-elem('separator') { block-size: 1px; - margin-block: fn.dim(--separator); - margin-inline: fn.dim(--item --pad-i); - background-color: fn.color(--separator); + margin-block: props.get(vars.$separator-width); + margin-inline: props.get(vars.$item--pad-i); + background-color: props.get(vars.$separator-color); } @include iro.bem-elem('slot') { - padding-block: fn.dim(--item --pad-b); - padding-inline: fn.dim(--item --pad-i); + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); } @include iro.bem-elem('icon-slot') { display: flex; justify-content: center; - inline-size: fn.foreign-dim(--icon, --size); + inline-size: props.get(icon.$size); } @include iro.bem-modifier('pull') { - margin: calc(-1 * fn.dim(--item --pad-i)); + margin: calc(-1 * props.get(vars.$item--pad-i)); } } } -- cgit v1.2.3-70-g09d2