Add navbar

1 files changed, 165 insertions, 0 deletions

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..16cf804
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,165 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'navbar.vars';
+@use 'navbar.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('navbar') {
+        display:    flex;
+        block-size: props.get(vars.$block-size);
+
+        @include bem.modifier('adapt') {
+            block-size: 100%;
+        }
+
+        @include bem.elem('item-label') {
+            position:        relative;
+            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;
+            border-radius:   100em;
+
+            &::after {
+                position:       absolute;
+                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                z-index:        1;
+                display:        none;
+                pointer-events: none;
+                content:        '';
+                border-radius:  100em;
+                outline:        props.get(vars.$default-theme, --key-focus, --border) 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.$default-theme, --key-focus, --outline);
+            }
+        }
+
+        @include bem.elem('item') {
+            display:         flex;
+            flex-direction:  column;
+            align-items:     center;
+            justify-content: center;
+            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);
+
+                &:hover,
+                &:focus-visible {
+                    color: props.get(vars.$default-theme, --hover, --label-color);
+
+                    @include bem.elem('item-label') {
+                        background-color: props.get(vars.$default-theme, --hover, --bg-color);
+                    }
+                }
+
+                &:focus-visible {
+                    @include bem.elem('item-label') {
+                        &::after {
+                            display: block;
+                        }
+                    }
+                }
+
+                &:active {
+                    color: props.get(vars.$default-theme, --active, --label-color);
+
+                    @include bem.elem('item-label') {
+                        background-color: props.get(vars.$default-theme, --active, --bg-color);
+                    }
+                }
+            }
+
+            @include bem.is('selected') {
+                font-weight: bold;
+                color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
+
+                @include bem.elem('item-label') {
+                    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-label') {
+                        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-label') {
+                            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-label') {
+                            background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
+                        }
+                    }
+                }
+            }
+        }
+
+        @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-label') {
+                        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-label') {
+                            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-label') {
+                                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-label') {
+                                background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}