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/_tabbar.scss | 174 +++++++++++++++++++++++------------------------ 1 file changed, 87 insertions(+), 87 deletions(-) (limited to 'src/objects/_tabbar.scss') diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index 131c832..a9daaae 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss @@ -9,105 +9,105 @@ @use 'tabbar.vars' as vars; @mixin styles { - @include materialize-at-root(meta.module-variables('vars')); + @include materialize-at-root(meta.module-variables('vars')); - @include bem.object('tabbar') { - min-inline-size: 0; - block-size: props.get(vars.$block-size); - overflow: hidden; + @include bem.object('tabbar') { + min-inline-size: 0; + block-size: props.get(vars.$block-size); + overflow: hidden; - &::after { - display: block; - block-size: props.get(vars.$indicator--width); - margin-block-start: calc(-1 * props.get(vars.$indicator--width)); - content: ''; - background-color: props.get(vars.$railing--bg-color); - } + &::after { + display: block; + block-size: props.get(vars.$indicator--width); + margin-block-start: calc(-1 * props.get(vars.$indicator--width)); + content: ''; + background-color: props.get(vars.$railing--bg-color); + } - @include bem.elem('tabs') { - display: flex; - block-size: 100%; - margin-inline: calc(-.5 * props.get(vars.$spacing)); - overflow-inline: auto; - } + @include bem.elem('tabs') { + display: flex; + block-size: 100%; + margin-inline: calc(-.5 * props.get(vars.$spacing)); + overflow-inline: auto; + } - @include bem.modifier('quiet') { - box-shadow: none; - } + @include bem.modifier('quiet') { + box-shadow: none; + } - @include bem.modifier('adapt') { - block-size: 100%; - } + @include bem.modifier('adapt') { + block-size: 100%; + } - @include bem.elem('tab') { - position: relative; - display: flex; - align-items: center; - padding-inline: calc(.5 * props.get(vars.$spacing)); - color: props.get(vars.$tab--text-color); - white-space: nowrap; + @include bem.elem('tab') { + position: relative; + display: flex; + align-items: center; + padding-inline: calc(.5 * props.get(vars.$spacing)); + color: props.get(vars.$tab--text-color); + white-space: nowrap; - &::before { - position: absolute; - inset-block-start: 50%; - inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); - z-index: -10; - block-size: 1.5em; - content: ''; - border-radius: props.get(vars.$rounding); - transform: translateY(-50%); - } + &::before { + position: absolute; + inset-block-start: 50%; + inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); + z-index: -10; + block-size: 1.5em; + content: ''; + border-radius: props.get(vars.$rounding); + transform: translateY(-50%); + } - &::after { - position: absolute; - inset-block-end: 0; - inset-inline: calc(.5 * props.get(vars.$spacing)); - z-index: 10; - display: none; - block-size: props.get(vars.$indicator--width); - content: ''; - background-color: props.get(vars.$tab--selected--text-color); - } + &::after { + position: absolute; + inset-block-end: 0; + inset-inline: calc(.5 * props.get(vars.$spacing)); + z-index: 10; + display: none; + block-size: props.get(vars.$indicator--width); + content: ''; + background-color: props.get(vars.$tab--selected--text-color); + } - &:link, - &:visited { - &:hover, - &:active, - &:focus-visible { - color: props.get(vars.$tab--selected--text-color); - } + &:link, + &:visited { + &:hover, + &:active, + &:focus-visible { + color: props.get(vars.$tab--selected--text-color); + } - &:focus-visible { - &::before { - color: props.get(vars.$key-focus--text-color); - text-decoration: none; - outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); - box-shadow: 0 0 0 - calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) - props.get(vars.$key-focus--outline-color); - } - } - } + &:focus-visible { + &::before { + color: props.get(vars.$key-focus--text-color); + text-decoration: none; + outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); + box-shadow: 0 0 0 + calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) + props.get(vars.$key-focus--outline-color); + } + } + } - @include bem.is('selected') { - color: props.get(vars.$tab--selected--text-color); + @include bem.is('selected') { + color: props.get(vars.$tab--selected--text-color); - &::after { - display: block; - } - } - } + &::after { + display: block; + } + } + } - @include bem.modifier('accent') { - @include bem.elem('tab') { - &::after { - background-color: props.get(vars.$tab--accent--text-color); - } + @include bem.modifier('accent') { + @include bem.elem('tab') { + &::after { + background-color: props.get(vars.$tab--accent--text-color); + } - @include bem.is('selected') { - color: props.get(vars.$tab--accent--text-color); - } - } - } - } + @include bem.is('selected') { + color: props.get(vars.$tab--accent--text-color); + } + } + } + } } -- cgit v1.2.3-70-g09d2