summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-11-11 21:00:31 +0100
committerVolpeon <git@volpeon.ink>2025-11-11 21:00:31 +0100
commit2085e99bcde12027a2bc0479d95e7511acfb4562 (patch)
treec47b1660d3f5a434a85d7cae25173dc6a1849606 /src
parentButton padding (diff)
downloadiro-design-2085e99bcde12027a2bc0479d95e7511acfb4562.tar.gz
iro-design-2085e99bcde12027a2bc0479d95e7511acfb4562.tar.bz2
iro-design-2085e99bcde12027a2bc0479d95e7511acfb4562.zip
Fixed and improved nav bar to support labels
Diffstat (limited to 'src')
-rw-r--r--src/objects/_navbar.scss50
-rw-r--r--src/objects/_navbar.vars.scss12
-rw-r--r--src/objects/_side-nav.vars.scss2
3 files changed, 35 insertions, 29 deletions
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 @@
15 display: flex; 15 display: flex;
16 block-size: props.get(vars.$block-size); 16 block-size: props.get(vars.$block-size);
17 17
18 @include bem.elem('item-label') {
19 order: 2;
20 margin-block-start: props.get(vars.$item--pad-b);
21 font-size: props.get(vars.$item--label-font-size);
22 font-weight: bold;
23
24 @include bem.next-elem('item-content') {
25 padding-inline: props.get(vars.$item--pad-i-icon);
26 }
27 }
28
18 @include bem.elem('item-content-text') { 29 @include bem.elem('item-content-text') {
19 margin-inline: props.get(vars.$item--pad-i-label); 30 margin-inline: props.get(vars.$item--pad-i-label);
31 font-size: props.get(vars.$item--font-size);
20 } 32 }
21 33
22 @include bem.elem('item-content') { 34 @include bem.elem('item-content') {
23 position: relative; 35 position: relative;
36 order: 1;
24 padding-block: props.get(vars.$item--pad-b); 37 padding-block: props.get(vars.$item--pad-b);
25 padding-inline: props.get(vars.$item--pad-i); 38 padding-inline: props.get(vars.$item--pad-i);
26 font-size: props.get(vars.$item--font-size); 39 color: props.get(vars.$default-theme, --disabled, --label-color);
27 color: currentColor;
28 white-space: nowrap; 40 white-space: nowrap;
29 border-radius: 100em; 41 border-radius: 100em;
30 42
@@ -55,18 +67,18 @@
55 inline-size: 100%; 67 inline-size: 100%;
56 padding-inline: calc(.5 * props.get(vars.$spacing)); 68 padding-inline: calc(.5 * props.get(vars.$spacing));
57 font-weight: 500; 69 font-weight: 500;
58 color: props.get(vars.$default-theme, --disabled, --label-color);
59 70
60 &:link, 71 &:link,
61 &:visited, 72 &:visited,
62 &:enabled { 73 &:enabled {
63 color: props.get(vars.$default-theme, --label-color); 74 @include bem.elem('item-content') {
75 color: props.get(vars.$default-theme, --label-color);
76 }
64 77
65 &:hover, 78 &:hover,
66 &:focus-visible { 79 &:focus-visible {
67 color: props.get(vars.$default-theme, --hover, --label-color);
68
69 @include bem.elem('item-content') { 80 @include bem.elem('item-content') {
81 color: props.get(vars.$default-theme, --hover, --label-color);
70 background-color: props.get(vars.$default-theme, --hover, --bg-color); 82 background-color: props.get(vars.$default-theme, --hover, --bg-color);
71 } 83 }
72 } 84 }
@@ -80,9 +92,8 @@
80 } 92 }
81 93
82 &:active { 94 &:active {
83 color: props.get(vars.$default-theme, --active, --label-color);
84
85 @include bem.elem('item-content') { 95 @include bem.elem('item-content') {
96 color: props.get(vars.$default-theme, --active, --label-color);
86 background-color: props.get(vars.$default-theme, --active, --bg-color); 97 background-color: props.get(vars.$default-theme, --active, --bg-color);
87 } 98 }
88 } 99 }
@@ -90,34 +101,31 @@
90 101
91 @include bem.is('selected') { 102 @include bem.is('selected') {
92 font-weight: bold; 103 font-weight: bold;
93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
94 104
95 @include bem.elem('item-content') { 105 @include bem.elem('item-content') {
106 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); 107 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
97 } 108 }
98 109
99 &:link, 110 &:link,
100 &:visited, 111 &:visited,
101 &:enabled { 112 &:enabled {
102 color: props.get(vars.$default-theme, --selected, --label-color);
103
104 @include bem.elem('item-content') { 113 @include bem.elem('item-content') {
114 color: props.get(vars.$default-theme, --selected, --label-color);
105 background-color: props.get(vars.$default-theme, --selected, --bg-color); 115 background-color: props.get(vars.$default-theme, --selected, --bg-color);
106 } 116 }
107 117
108 &:hover, 118 &:hover,
109 &:focus-visible { 119 &:focus-visible {
110 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
111
112 @include bem.elem('item-content') { 120 @include bem.elem('item-content') {
121 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); 122 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
114 } 123 }
115 } 124 }
116 125
117 &:active { 126 &:active {
118 color: props.get(vars.$default-theme, --selected, --active, --label-color);
119
120 @include bem.elem('item-content') { 127 @include bem.elem('item-content') {
128 color: props.get(vars.$default-theme, --selected, --active, --label-color);
121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); 129 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
122 } 130 }
123 } 131 }
@@ -152,34 +160,30 @@
152 @include bem.modifier('quiet') { 160 @include bem.modifier('quiet') {
153 @include bem.elem('item') { 161 @include bem.elem('item') {
154 @include bem.is('selected') { 162 @include bem.is('selected') {
155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
156
157 @include bem.elem('item-content') { 163 @include bem.elem('item-content') {
164 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); 165 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
159 } 166 }
160 167
161 &:link, 168 &:link,
162 &:visited, 169 &:visited,
163 &:enabled { 170 &:enabled {
164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
165
166 @include bem.elem('item-content') { 171 @include bem.elem('item-content') {
172 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); 173 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
168 } 174 }
169 175
170 &:hover, 176 &:hover,
171 &:focus-visible { 177 &:focus-visible {
172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
173
174 @include bem.elem('item-content') { 178 @include bem.elem('item-content') {
179 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); 180 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
176 } 181 }
177 } 182 }
178 183
179 &:active { 184 &:active {
180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
181
182 @include bem.elem('item-content') { 185 @include bem.elem('item-content') {
186 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); 187 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
184 } 188 }
185 } 189 }
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 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default; 6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; 7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !default;
8 8
9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default; 10$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
11$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default; 11$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
12$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; 12$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
13$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
14$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
13 15
14$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 16$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 17$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
7$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default; 7$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
8 8
9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default; 10$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--75)) !default;
11$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default; 11$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
12 12
13$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-12 09:40:06 +0000