Navbar: Better icon integration

2 files changed, 20 insertions, 15 deletions

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;