From 5650fe9589ed6043f461b6b60e1303045a4ec6c4 Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 11 Nov 2025 21:27:14 +0100 Subject: Navbar --- src/objects/_navbar.scss | 68 ++++++++++++++++++++++++++++++++++-------------- 1 file changed, 49 insertions(+), 19 deletions(-) (limited to 'src/objects/_navbar.scss') diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index ce500f3..59613fa 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -17,18 +17,20 @@ @include bem.elem('item-label') { order: 2; - margin-block-start: props.get(vars.$item--pad-b); + margin-block-start: props.get(vars.$item--pad-b-icon); font-size: props.get(vars.$item--label-font-size); font-weight: bold; + color: props.get(vars.$default-theme, --disabled, --label-color); @include bem.next-elem('item-content') { + padding-block: props.get(vars.$item--pad-b-icon); padding-inline: props.get(vars.$item--pad-i-icon); + font-size: props.get(vars.$item--icon-size); } } @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') { @@ -36,7 +38,8 @@ order: 1; padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); - color: props.get(vars.$default-theme, --disabled, --label-color); + font-size: props.get(vars.$item--font-size); + color: props.get(vars.$default-theme, --disabled, --text-color); white-space: nowrap; border-radius: 100em; @@ -71,19 +74,31 @@ &:link, &:visited, &:enabled { - @include bem.elem('item-content') { + @include bem.elem('item-label') { color: props.get(vars.$default-theme, --label-color); } + @include bem.elem('item-content') { + color: props.get(vars.$default-theme, --text-color); + } + &:hover, &:focus-visible { + @include bem.elem('item-label') { + color: props.get(vars.$default-theme, --hover, --label-color); + } + @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --hover, --label-color); + color: props.get(vars.$default-theme, --hover, --text-color); background-color: props.get(vars.$default-theme, --hover, --bg-color); } } &:focus-visible { + @include bem.elem('item-label') { + color: props.get(vars.$default-theme, --key-focus, --label); + } + @include bem.elem('item-content') { &::after { visibility: visible; @@ -92,8 +107,12 @@ } &:active { + @include bem.elem('item-label') { + color: props.get(vars.$default-theme, --active, --label-color); + } + @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --active, --label-color); + color: props.get(vars.$default-theme, --active, --text-color); background-color: props.get(vars.$default-theme, --active, --bg-color); } } @@ -102,30 +121,46 @@ @include bem.is('selected') { font-weight: bold; + @include bem.elem('item-label') { + 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); + color: props.get(vars.$default-theme, --selected, --disabled, --text-color); background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); } &:link, &:visited, &:enabled { + @include bem.elem('item-label') { + color: props.get(vars.$default-theme, --selected, --label-color); + } + @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --selected, --label-color); + color: props.get(vars.$default-theme, --selected, --text-color); background-color: props.get(vars.$default-theme, --selected, --bg-color); } &:hover, &:focus-visible { + @include bem.elem('item-label') { + 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); + color: props.get(vars.$default-theme, --selected, --hover, --text-color); background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); } } &:active { + @include bem.elem('item-label') { + 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); + color: props.get(vars.$default-theme, --selected, --active, --text-color); background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); } } @@ -144,12 +179,7 @@ } @include bem.modifier('adapt') { - gap: props.get(vars.$spacing); block-size: 100%; - - @include bem.elem('item') { - padding-inline: 0; - } } @@ -161,7 +191,7 @@ @include bem.elem('item') { @include bem.is('selected') { @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); + color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --text-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); } @@ -169,21 +199,21 @@ &:visited, &:enabled { @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --quiet, --selected, --label-color); + color: props.get(vars.$default-theme, --quiet, --selected, --text-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); } &:hover, &:focus-visible { @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); + color: props.get(vars.$default-theme, --quiet, --selected, --hover, --text-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); } } &:active { @include bem.elem('item-content') { - color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); + color: props.get(vars.$default-theme, --quiet, --selected, --active, --text-color); background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); } } -- cgit v1.3.1