summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-11-11 21:27:14 +0100
committerVolpeon <git@volpeon.ink>2025-11-11 21:27:14 +0100
commit5650fe9589ed6043f461b6b60e1303045a4ec6c4 (patch)
treece0b4b2871f78fdf09569580869fc4616bb5ca25 /src
parentFixed and improved nav bar to support labels (diff)
downloadiro-design-5650fe9589ed6043f461b6b60e1303045a4ec6c4.tar.gz
iro-design-5650fe9589ed6043f461b6b60e1303045a4ec6c4.tar.bz2
iro-design-5650fe9589ed6043f461b6b60e1303045a4ec6c4.zip
Navbar
Diffstat (limited to 'src')
-rw-r--r--src/objects/_navbar.scss68
-rw-r--r--src/objects/_navbar.vars.scss50
2 files changed, 79 insertions, 39 deletions
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 @@
17 17
18 @include bem.elem('item-label') { 18 @include bem.elem('item-label') {
19 order: 2; 19 order: 2;
20 margin-block-start: props.get(vars.$item--pad-b); 20 margin-block-start: props.get(vars.$item--pad-b-icon);
21 font-size: props.get(vars.$item--label-font-size); 21 font-size: props.get(vars.$item--label-font-size);
22 font-weight: bold; 22 font-weight: bold;
23 color: props.get(vars.$default-theme, --disabled, --label-color);
23 24
24 @include bem.next-elem('item-content') { 25 @include bem.next-elem('item-content') {
26 padding-block: props.get(vars.$item--pad-b-icon);
25 padding-inline: props.get(vars.$item--pad-i-icon); 27 padding-inline: props.get(vars.$item--pad-i-icon);
28 font-size: props.get(vars.$item--icon-size);
26 } 29 }
27 } 30 }
28 31
29 @include bem.elem('item-content-text') { 32 @include bem.elem('item-content-text') {
30 margin-inline: props.get(vars.$item--pad-i-label); 33 margin-inline: props.get(vars.$item--pad-i-label);
31 font-size: props.get(vars.$item--font-size);
32 } 34 }
33 35
34 @include bem.elem('item-content') { 36 @include bem.elem('item-content') {
@@ -36,7 +38,8 @@
36 order: 1; 38 order: 1;
37 padding-block: props.get(vars.$item--pad-b); 39 padding-block: props.get(vars.$item--pad-b);
38 padding-inline: props.get(vars.$item--pad-i); 40 padding-inline: props.get(vars.$item--pad-i);
39 color: props.get(vars.$default-theme, --disabled, --label-color); 41 font-size: props.get(vars.$item--font-size);
42 color: props.get(vars.$default-theme, --disabled, --text-color);
40 white-space: nowrap; 43 white-space: nowrap;
41 border-radius: 100em; 44 border-radius: 100em;
42 45
@@ -71,19 +74,31 @@
71 &:link, 74 &:link,
72 &:visited, 75 &:visited,
73 &:enabled { 76 &:enabled {
74 @include bem.elem('item-content') { 77 @include bem.elem('item-label') {
75 color: props.get(vars.$default-theme, --label-color); 78 color: props.get(vars.$default-theme, --label-color);
76 } 79 }
77 80
81 @include bem.elem('item-content') {
82 color: props.get(vars.$default-theme, --text-color);
83 }
84
78 &:hover, 85 &:hover,
79 &:focus-visible { 86 &:focus-visible {
87 @include bem.elem('item-label') {
88 color: props.get(vars.$default-theme, --hover, --label-color);
89 }
90
80 @include bem.elem('item-content') { 91 @include bem.elem('item-content') {
81 color: props.get(vars.$default-theme, --hover, --label-color); 92 color: props.get(vars.$default-theme, --hover, --text-color);
82 background-color: props.get(vars.$default-theme, --hover, --bg-color); 93 background-color: props.get(vars.$default-theme, --hover, --bg-color);
83 } 94 }
84 } 95 }
85 96
86 &:focus-visible { 97 &:focus-visible {
98 @include bem.elem('item-label') {
99 color: props.get(vars.$default-theme, --key-focus, --label);
100 }
101
87 @include bem.elem('item-content') { 102 @include bem.elem('item-content') {
88 &::after { 103 &::after {
89 visibility: visible; 104 visibility: visible;
@@ -92,8 +107,12 @@
92 } 107 }
93 108
94 &:active { 109 &:active {
110 @include bem.elem('item-label') {
111 color: props.get(vars.$default-theme, --active, --label-color);
112 }
113
95 @include bem.elem('item-content') { 114 @include bem.elem('item-content') {
96 color: props.get(vars.$default-theme, --active, --label-color); 115 color: props.get(vars.$default-theme, --active, --text-color);
97 background-color: props.get(vars.$default-theme, --active, --bg-color); 116 background-color: props.get(vars.$default-theme, --active, --bg-color);
98 } 117 }
99 } 118 }
@@ -102,30 +121,46 @@
102 @include bem.is('selected') { 121 @include bem.is('selected') {
103 font-weight: bold; 122 font-weight: bold;
104 123
124 @include bem.elem('item-label') {
125 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
126 }
127
105 @include bem.elem('item-content') { 128 @include bem.elem('item-content') {
106 color: props.get(vars.$default-theme, --selected, --disabled, --label-color); 129 color: props.get(vars.$default-theme, --selected, --disabled, --text-color);
107 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); 130 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
108 } 131 }
109 132
110 &:link, 133 &:link,
111 &:visited, 134 &:visited,
112 &:enabled { 135 &:enabled {
136 @include bem.elem('item-label') {
137 color: props.get(vars.$default-theme, --selected, --label-color);
138 }
139
113 @include bem.elem('item-content') { 140 @include bem.elem('item-content') {
114 color: props.get(vars.$default-theme, --selected, --label-color); 141 color: props.get(vars.$default-theme, --selected, --text-color);
115 background-color: props.get(vars.$default-theme, --selected, --bg-color); 142 background-color: props.get(vars.$default-theme, --selected, --bg-color);
116 } 143 }
117 144
118 &:hover, 145 &:hover,
119 &:focus-visible { 146 &:focus-visible {
147 @include bem.elem('item-label') {
148 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
149 }
150
120 @include bem.elem('item-content') { 151 @include bem.elem('item-content') {
121 color: props.get(vars.$default-theme, --selected, --hover, --label-color); 152 color: props.get(vars.$default-theme, --selected, --hover, --text-color);
122 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); 153 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
123 } 154 }
124 } 155 }
125 156
126 &:active { 157 &:active {
158 @include bem.elem('item-label') {
159 color: props.get(vars.$default-theme, --selected, --active, --label-color);
160 }
161
127 @include bem.elem('item-content') { 162 @include bem.elem('item-content') {
128 color: props.get(vars.$default-theme, --selected, --active, --label-color); 163 color: props.get(vars.$default-theme, --selected, --active, --text-color);
129 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); 164 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
130 } 165 }
131 } 166 }
@@ -144,12 +179,7 @@
144 } 179 }
145 180
146 @include bem.modifier('adapt') { 181 @include bem.modifier('adapt') {
147 gap: props.get(vars.$spacing);
148 block-size: 100%; 182 block-size: 100%;
149
150 @include bem.elem('item') {
151 padding-inline: 0;
152 }
153 } 183 }
154 184
155 185
@@ -161,7 +191,7 @@
161 @include bem.elem('item') { 191 @include bem.elem('item') {
162 @include bem.is('selected') { 192 @include bem.is('selected') {
163 @include bem.elem('item-content') { 193 @include bem.elem('item-content') {
164 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); 194 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --text-color);
165 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); 195 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
166 } 196 }
167 197
@@ -169,21 +199,21 @@
169 &:visited, 199 &:visited,
170 &:enabled { 200 &:enabled {
171 @include bem.elem('item-content') { 201 @include bem.elem('item-content') {
172 color: props.get(vars.$default-theme, --quiet, --selected, --label-color); 202 color: props.get(vars.$default-theme, --quiet, --selected, --text-color);
173 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); 203 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
174 } 204 }
175 205
176 &:hover, 206 &:hover,
177 &:focus-visible { 207 &:focus-visible {
178 @include bem.elem('item-content') { 208 @include bem.elem('item-content') {
179 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); 209 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --text-color);
180 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); 210 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
181 } 211 }
182 } 212 }
183 213
184 &:active { 214 &:active {
185 @include bem.elem('item-content') { 215 @include bem.elem('item-content') {
186 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); 216 color: props.get(vars.$default-theme, --quiet, --selected, --active, --text-color);
187 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); 217 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
188 } 218 }
189 } 219 }
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 4f5cde3..1cf460e 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -3,14 +3,16 @@
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
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--1000)) !default;
7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !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--75)) !default; 10$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
11$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; 11$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
12$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; 12$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
13$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
13$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; 14$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
15$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
14$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; 16$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
15 17
16$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 18$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
@@ -19,20 +21,24 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props
19 21
20$default-theme-override: () !default; 22$default-theme-override: () !default;
21$default-theme: map.deep-merge(( 23$default-theme: map.deep-merge((
22 --label-color: props.get(core.$theme, --text), 24 --text-color: props.get(core.$theme, --text),
25 --label-color: props.get(core.$theme, --text-mute),
23 26
24 --hover: ( 27 --hover: (
25 --bg-color: props.get(core.$theme, --border-mute), 28 --bg-color: props.get(core.$theme, --border-mute),
26 --label-color: props.get(core.$theme, --heading), 29 --text-color: props.get(core.$theme, --heading),
30 --label-color: props.get(core.$theme, --text),
27 ), 31 ),
28 32
29 --active: ( 33 --active: (
30 --bg-color: props.get(core.$theme, --border), 34 --bg-color: props.get(core.$theme, --border),
35 --text-color: props.get(core.$theme, --heading),
31 --label-color: props.get(core.$theme, --heading), 36 --label-color: props.get(core.$theme, --heading),
32 ), 37 ),
33 38
34 --disabled: ( 39 --disabled: (
35 --label-color: props.get(core.$theme, --border-strong), 40 --text-color: props.get(core.$theme, --border-strong),
41 --label-color: props.get(core.$theme, --text-disabled),
36 ), 42 ),
37 43
38 --key-focus: ( 44 --key-focus: (
@@ -42,43 +48,47 @@ $default-theme: map.deep-merge((
42 ), 48 ),
43 49
44 --selected: ( 50 --selected: (
45 --bg-color: props.get(core.$theme, --heading), 51 --bg-color: props.get(core.$theme, --heading),
46 --label-color: props.get(core.$theme, --base, --50), 52 --text-color: props.get(core.$theme, --base, --50),
53 --label-color: props.get(core.$theme, --heading),
47 54
48 --hover: ( 55 --hover: (
49 --bg-color: props.get(core.$theme, --text), 56 --bg-color: props.get(core.$theme, --text),
50 --label-color: props.get(core.$theme, --base, --50), 57 --text-color: props.get(core.$theme, --base, --50),
58 --label-color: props.get(core.$theme, --heading),
51 ), 59 ),
52 60
53 --active: ( 61 --active: (
54 --bg-color: props.get(core.$theme, --text-mute), 62 --bg-color: props.get(core.$theme, --text-mute),
55 --label-color: props.get(core.$theme, --base, --50), 63 --text-color: props.get(core.$theme, --base, --50),
64 --label-color: props.get(core.$theme, --heading),
56 ), 65 ),
57 66
58 --disabled: ( 67 --disabled: (
59 --bg-color: props.get(core.$theme, --border-mute), 68 --bg-color: props.get(core.$theme, --border-mute),
60 --label-color: props.get(core.$theme, --border-strong), 69 --text-color: props.get(core.$theme, --border-strong),
70 --label-color: props.get(core.$theme, --text-disabled),
61 ), 71 ),
62 ), 72 ),
63 73
64 --quiet: ( 74 --quiet: (
65 --selected: ( 75 --selected: (
66 --bg-color: props.get(core.$theme, --accent, --200), 76 --bg-color: props.get(core.$theme, --border-mute),
67 --label-color: props.get(core.$theme, --accent, --1100), 77 --text-color: props.get(core.$theme, --heading),
68 78
69 --hover: ( 79 --hover: (
70 --bg-color: props.get(core.$theme, --accent, --300), 80 --bg-color: props.get(core.$theme, --border-mute),
71 --label-color: props.get(core.$theme, --accent, --1200), 81 --text-color: props.get(core.$theme, --heading),
72 ), 82 ),
73 83
74 --active: ( 84 --active: (
75 --bg-color: props.get(core.$theme, --accent, --400), 85 --bg-color: props.get(core.$theme, --border-mute),
76 --label-color: props.get(core.$theme, --accent, --1300), 86 --text-color: props.get(core.$theme, --heading),
77 ), 87 ),
78 88
79 --disabled: ( 89 --disabled: (
80 --bg-color: props.get(core.$theme, --accent, --200), 90 --bg-color: props.get(core.$theme, --border-mute),
81 --label-color: props.get(core.$theme, --accent, --800), 91 --text-color: props.get(core.$theme, --border-strong),
82 ), 92 ),
83 ) 93 )
84 ) 94 )
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-12 09:41:55 +0000