From 2085e99bcde12027a2bc0479d95e7511acfb4562 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 11 Nov 2025 21:00:31 +0100 Subject: Fixed and improved nav bar to support labels --- src/objects/_navbar.scss | 50 ++++++++++++++++++++++------------------- src/objects/_navbar.vars.scss | 12 +++++----- src/objects/_side-nav.vars.scss | 2 +- 3 files changed, 35 insertions(+), 29 deletions(-) (limited to 'src/objects') diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index ec03c62..ce500f3 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -15,16 +15,28 @@ display: flex; block-size: props.get(vars.$block-size); + @include bem.elem('item-label') { + order: 2; + margin-block-start: props.get(vars.$item--pad-b); + font-size: props.get(vars.$item--label-font-size); + font-weight: bold; + + @include bem.next-elem('item-content') { + padding-inline: props.get(vars.$item--pad-i-icon); + } + } + @include bem.elem('item-content-text') { margin-inline: props.get(vars.$item--pad-i-label); + font-size: props.get(vars.$item--font-size); } @include bem.elem('item-content') { position: relative; + order: 1; padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); - font-size: props.get(vars.$item--font-size); - color: currentColor; + color: props.get(vars.$default-theme, --disabled, --label-color); white-space: nowrap; border-radius: 100em; @@ -55,18 +67,18 @@ inline-size: 100%; padding-inline: calc(.5 * props.get(vars.$spacing)); font-weight: 500; - color: props.get(vars.$default-theme, --disabled, --label-color); &:link, &:visited, &:enabled { - color: props.get(vars.$default-theme, --label-color); + @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --label-color); + } &:hover, &:focus-visible { - color: props.get(vars.$default-theme, --hover, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --hover, --label-color); background-color: props.get(vars.$default-theme, --hover, --bg-color); } } @@ -80,9 +92,8 @@ } &:active { - color: props.get(vars.$default-theme, --active, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --active, --label-color); background-color: props.get(vars.$default-theme, --active, --bg-color); } } @@ -90,34 +101,31 @@ @include bem.is('selected') { font-weight: bold; - color: props.get(vars.$default-theme, --selected, --disabled, --label-color); @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --selected, --disabled, --label-color); background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); } &:link, &:visited, &:enabled { - color: props.get(vars.$default-theme, --selected, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --selected, --label-color); background-color: props.get(vars.$default-theme, --selected, --bg-color); } &:hover, &:focus-visible { - color: props.get(vars.$default-theme, --selected, --hover, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --selected, --hover, --label-color); background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); } } &:active { - color: props.get(vars.$default-theme, --selected, --active, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --selected, --active, --label-color); background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); } } @@ -152,34 +160,30 @@ @include bem.modifier('quiet') { @include bem.elem('item') { @include bem.is('selected') { - color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); } &:link, &:visited, &:enabled { - color: props.get(vars.$default-theme, --quiet, --selected, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --quiet, --selected, --label-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); } &:hover, &:focus-visible { - color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); } } &:active { - color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); - @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); } } diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss index 8e18def..4f5cde3 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -4,12 +4,14 @@ @use '../core.vars' as core; $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default; -$spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; +$spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !default; -$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default; -$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default; -$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; +$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; +$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; +$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; +$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; +$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; +$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; $key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; $key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss index 711b2a7..7a2cfae 100644 --- a/src/objects/_side-nav.vars.scss +++ b/src/objects/_side-nav.vars.scss @@ -7,7 +7,7 @@ $header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$f $separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; $item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; -$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; +$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default; $item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; $item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; -- cgit v1.2.3-70-g09d2