From 4d8853016f43d6d8ddcaf532d4742dfa0d2e308c Mon Sep 17 00:00:00 2001 From: Volpeon Date: Tue, 19 Nov 2024 07:55:19 +0100 Subject: Navbar: Better icon integration --- package.json | 2 +- src/objects/_navbar.scss | 28 ++++++++++++++++------------ src/objects/_navbar.vars.scss | 7 ++++--- tpl/objects/navbar.pug | 11 +++++++++-- tpl/views/navbar.pug | 6 ++++++ 5 files changed, 36 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index ff42d59..cc74db1 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets", "build:assets": "cp -r static/* public/", "build:app": "pug tpl/index.pug -p tpl --out public/", - "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", + "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right arrow-left check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg", "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css", "lint:style": "stylelint \"src/**/*.scss\"", "fix:style": "stylelint \"src/**/*.scss\" --fix", diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss index af3406a..d245e2e 100644 --- a/src/objects/_navbar.scss +++ b/src/objects/_navbar.scss @@ -15,7 +15,11 @@ display: flex; block-size: props.get(vars.$block-size); - @include bem.elem('item-label') { + @include bem.elem('item-content-text') { + margin-inline: props.get(vars.$item--pad-i-label); + } + + @include bem.elem('item-content') { position: relative; padding-block: props.get(vars.$item--pad-b); padding-inline: props.get(vars.$item--pad-i); @@ -60,13 +64,13 @@ &:focus-visible { color: props.get(vars.$default-theme, --hover, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --hover, --bg-color); } } &:focus-visible { - @include bem.elem('item-label') { + @include bem.elem('item-content') { &::after { display: block; } @@ -76,7 +80,7 @@ &:active { color: props.get(vars.$default-theme, --active, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --active, --bg-color); } } @@ -86,7 +90,7 @@ font-weight: bold; color: props.get(vars.$default-theme, --selected, --disabled, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); } @@ -95,7 +99,7 @@ &:enabled { color: props.get(vars.$default-theme, --selected, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --selected, --bg-color); } @@ -103,7 +107,7 @@ &:focus-visible { color: props.get(vars.$default-theme, --selected, --hover, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); } } @@ -111,7 +115,7 @@ &:active { color: props.get(vars.$default-theme, --selected, --active, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); } } @@ -148,7 +152,7 @@ @include bem.is('selected') { color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); } @@ -157,7 +161,7 @@ &:enabled { color: props.get(vars.$default-theme, --quiet, --selected, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); } @@ -165,7 +169,7 @@ &:focus-visible { color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); } } @@ -173,7 +177,7 @@ &:active { color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); - @include bem.elem('item-label') { + @include bem.elem('item-content') { 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 5839eff..da280fd 100644 --- a/src/objects/_navbar.vars.scss +++ b/src/objects/_navbar.vars.scss @@ -6,9 +6,10 @@ $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; -$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--175)) !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-action-button--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; $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/tpl/objects/navbar.pug b/tpl/objects/navbar.pug index bca8c90..5c7642c 100644 --- a/tpl/objects/navbar.pug +++ b/tpl/objects/navbar.pug @@ -26,5 +26,12 @@ mixin navbar-item } #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes) - .o-navbar__item-label - block + .o-navbar__item-content + if attributes.icon + +icon(attributes.icon) + = ' ' + span.o-navbar__item-content-text + block + if attributes.postIcon + = ' ' + +icon(attributes.postIcon) diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug index 03f1591..345a22b 100644 --- a/tpl/views/navbar.pug +++ b/tpl/views/navbar.pug @@ -11,3 +11,9 @@ mixin view-navbar +navbar-item= 'Home' +navbar-item(selected=true)= 'Art' +navbar-item= 'Emojis' + + .c-box + +navbar(quiet=true) + +navbar-item(selected=true icon="arrow-left")= 'Home' + +navbar-item= 'Art' + +navbar-item= 'Emojis' -- cgit v1.2.3-70-g09d2