From 41b0d0497988274057fc2512c822a6bc9d2d3ebd Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 6 Aug 2025 16:40:56 +0200 Subject: Switch to tab indentation --- src/objects/_menu.scss | 182 ++++++++++++++++++++++++------------------------- 1 file changed, 91 insertions(+), 91 deletions(-) (limited to 'src/objects/_menu.scss') diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss index 4d31874..f370067 100644 --- a/src/objects/_menu.scss +++ b/src/objects/_menu.scss @@ -8,95 +8,95 @@ @use 'menu.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); - - @include bem.object('menu') { - display: flex; - flex-direction: column; - gap: props.get(vars.$spacing); - - @include bem.elem('header') { - 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: props.get(vars.$header--label-color); - text-transform: uppercase; - letter-spacing: .5px; - - @include bem.next-twin-elem { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); - } - } - - @include bem.elem('item') { - 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: 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, - &:enabled { - color: currentColor; - - @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { - color: props.get(vars.$item--hover--label-color); - background-color: props.get(vars.$item--hover--bg-color); - } - - &:active { - color: props.get(vars.$item--active--label-color); - background-color: props.get(vars.$item--active--bg-color); - } - - &:focus-visible { - 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 bem.next-elem('header') { - margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); - } - } - - @include bem.elem('header') { - &:link, - &:visited, - &:enabled { - color: props.get(vars.$header--label-color); - } - } - - @include bem.elem('separator') { - block-size: 1px; - margin-block: props.get(vars.$separator-width); - margin-inline: props.get(vars.$item--pad-i); - background-color: props.get(vars.$separator-color); - } - - @include bem.elem('slot') { - padding-block: props.get(vars.$item--pad-b); - padding-inline: props.get(vars.$item--pad-i); - } - - @include bem.elem('icon-slot') { - display: flex; - justify-content: center; - inline-size: props.get(icon.$size); - } - - @include bem.modifier('pull') { - margin: calc(-1 * props.get(vars.$item--pad-i)); - } - } + @include materialize-at-root(meta.module-variables('vars')); + + @include bem.object('menu') { + display: flex; + flex-direction: column; + gap: props.get(vars.$spacing); + + @include bem.elem('header') { + 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: props.get(vars.$header--label-color); + text-transform: uppercase; + letter-spacing: .5px; + + @include bem.next-twin-elem { + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + } + } + + @include bem.elem('item') { + 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: 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, + &:enabled { + color: currentColor; + + @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { + color: props.get(vars.$item--hover--label-color); + background-color: props.get(vars.$item--hover--bg-color); + } + + &:active { + color: props.get(vars.$item--active--label-color); + background-color: props.get(vars.$item--active--bg-color); + } + + &:focus-visible { + 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 bem.next-elem('header') { + margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); + } + } + + @include bem.elem('header') { + &:link, + &:visited, + &:enabled { + color: props.get(vars.$header--label-color); + } + } + + @include bem.elem('separator') { + block-size: 1px; + margin-block: props.get(vars.$separator-width); + margin-inline: props.get(vars.$item--pad-i); + background-color: props.get(vars.$separator-color); + } + + @include bem.elem('slot') { + padding-block: props.get(vars.$item--pad-b); + padding-inline: props.get(vars.$item--pad-i); + } + + @include bem.elem('icon-slot') { + display: flex; + justify-content: center; + inline-size: props.get(icon.$size); + } + + @include bem.modifier('pull') { + margin: calc(-1 * props.get(vars.$item--pad-i)); + } + } } -- cgit v1.2.3-70-g09d2