summaryrefslogtreecommitdiffstats
path: root/src/objects/_navbar.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_navbar.scss
parentUpdate _index.scss (diff)
downloadiro-design-master.tar.gz
iro-design-master.tar.bz2
iro-design-master.zip
PathsHEADmaster
Diffstat (limited to 'src/objects/_navbar.scss')
-rw-r--r--src/objects/_navbar.scss247
1 files changed, 146 insertions, 101 deletions
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index cc1eaaa..4b678e0 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -1,151 +1,197 @@
1@use 'sass:list'; 1@use "sass:list";
2@use 'sass:map'; 2@use "sass:map";
3@use 'sass:meta'; 3@use "sass:meta";
4@use 'sass:string'; 4@use "sass:string";
5@use 'pkg:iro-sass/src/bem'; 5@use "pkg:iro-sass/bem";
6@use 'pkg:iro-sass/src/props'; 6@use "pkg:iro-sass/props";
7@use '../props' as *; 7@use "../props" as *;
8 8
9@forward 'navbar.vars'; 9@forward "navbar.vars";
10@use 'navbar.vars' as vars; 10@use "navbar.vars" as vars;
11 11
12@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
13 @include bem.elem('item-label') { 13 @include bem.elem("item-label") {
14 color: props.get($theme, list.join($key, --disabled --label-color)...); 14 color: props.get($theme, list.join($key, --disabled --label-color)...);
15 } 15 }
16 16
17 @include bem.elem('item-content') { 17 @include bem.elem("item-content") {
18 color: props.get($theme, list.join($key, --disabled --text-color)...); 18 color: props.get($theme, list.join($key, --disabled --text-color)...);
19 19
20 &::after { 20 &::after {
21 outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width); 21 outline: props.get($theme, list.join($key, --key-focus --border)...) solid
22 box-shadow: 22 props.get(vars.$key-focus--border-width);
23 0 23 box-shadow: 0 0 0
24 0 24 calc(
25 0 25 props.get(vars.$key-focus--border-width) +
26 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 26 props.get(vars.$key-focus--outline-width)
27 )
27 props.get($theme, list.join($key, --key-focus --outline)...); 28 props.get($theme, list.join($key, --key-focus --outline)...);
28 } 29 }
29 } 30 }
30 31
31 @include bem.elem('item') { 32 @include bem.elem("item") {
32 &:link, 33 &:link,
33 &:visited, 34 &:visited,
34 &:enabled { 35 &:enabled {
35 @include bem.elem('item-label') { 36 @include bem.elem("item-label") {
36 color: props.get($theme, list.join($key, --label-color)...); 37 color: props.get($theme, list.join($key, --label-color)...);
37 } 38 }
38 39
39 @include bem.elem('item-content') { 40 @include bem.elem("item-content") {
40 color: props.get($theme, list.join($key, --text-color)...); 41 color: props.get($theme, list.join($key, --text-color)...);
41 } 42 }
42 43
43 &:hover, 44 &:hover,
44 &:focus-visible { 45 &:focus-visible {
45 @include bem.elem('item-label') { 46 @include bem.elem("item-label") {
46 color: props.get($theme, list.join($key, --hover --label-color)...); 47 color: props.get($theme, list.join($key, --hover --label-color)...);
47 } 48 }
48 49
49 @include bem.elem('item-content') { 50 @include bem.elem("item-content") {
50 color: props.get($theme, list.join($key, --hover --text-color)...); 51 color: props.get($theme, list.join($key, --hover --text-color)...);
51 background-color: props.get($theme, list.join($key, --hover --bg-color)...); 52 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
52 } 53 }
53 } 54 }
54 55
55 &:focus-visible { 56 &:focus-visible {
56 @include bem.elem('item-label') { 57 @include bem.elem("item-label") {
57 color: props.get($theme, list.join($key, --key-focus --label)...); 58 color: props.get($theme, list.join($key, --key-focus --label)...);
58 } 59 }
59 } 60 }
60 61
61 &:active { 62 &:active {
62 @include bem.elem('item-label') { 63 @include bem.elem("item-label") {
63 color: props.get($theme, list.join($key, --active --label-color)...); 64 color: props.get($theme, list.join($key, --active --label-color)...);
64 } 65 }
65 66
66 @include bem.elem('item-content') { 67 @include bem.elem("item-content") {
67 color: props.get($theme, list.join($key, --active --text-color)...); 68 color: props.get($theme, list.join($key, --active --text-color)...);
68 background-color: props.get($theme, list.join($key, --active --bg-color)...); 69 background-color: props.get($theme, list.join($key, --active --bg-color)...);
69 } 70 }
70 } 71 }
71 } 72 }
72 73
73 @include bem.is('selected') { 74 @include bem.is("selected") {
74 @include bem.elem('item-label') { 75 @include bem.elem("item-label") {
75 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 76 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
76 } 77 }
77 78
78 @include bem.elem('item-content') { 79 @include bem.elem("item-content") {
79 color: props.get($theme, list.join($key, --selected --disabled --text-color)...); 80 color: props.get($theme, list.join($key, --selected --disabled --text-color)...);
80 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...); 81 background-color: props.get(
82 $theme,
83 list.join($key, --selected --disabled --bg-color)...
84 );
81 } 85 }
82 86
83 &:link, 87 &:link,
84 &:visited, 88 &:visited,
85 &:enabled { 89 &:enabled {
86 @include bem.elem('item-label') { 90 @include bem.elem("item-label") {
87 color: props.get($theme, list.join($key, --selected --label-color)...); 91 color: props.get($theme, list.join($key, --selected --label-color)...);
88 } 92 }
89 93
90 @include bem.elem('item-content') { 94 @include bem.elem("item-content") {
91 color: props.get($theme, list.join($key, --selected --text-color)...); 95 color: props.get($theme, list.join($key, --selected --text-color)...);
92 background-color: props.get($theme, list.join($key, --selected --bg-color)...); 96 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
93 } 97 }
94 98
95 &:hover, 99 &:hover,
96 &:focus-visible { 100 &:focus-visible {
97 @include bem.elem('item-label') { 101 @include bem.elem("item-label") {
98 color: props.get($theme, list.join($key, --selected --hover --label-color)...); 102 color: props.get(
103 $theme,
104 list.join($key, --selected --hover --label-color)...
105 );
99 } 106 }
100 107
101 @include bem.elem('item-content') { 108 @include bem.elem("item-content") {
102 color: props.get($theme, list.join($key, --selected --hover --text-color)...); 109 color: props.get(
103 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...); 110 $theme,
111 list.join($key, --selected --hover --text-color)...
112 );
113 background-color: props.get(
114 $theme,
115 list.join($key, --selected --hover --bg-color)...
116 );
104 } 117 }
105 } 118 }
106 119
107 &:active { 120 &:active {
108 @include bem.elem('item-label') { 121 @include bem.elem("item-label") {
109 color: props.get($theme, list.join($key, --selected --active --label-color)...); 122 color: props.get(
123 $theme,
124 list.join($key, --selected --active --label-color)...
125 );
110 } 126 }
111 127
112 @include bem.elem('item-content') { 128 @include bem.elem("item-content") {
113 color: props.get($theme, list.join($key, --selected --active --text-color)...); 129 color: props.get(
114 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...); 130 $theme,
131 list.join($key, --selected --active --text-color)...
132 );
133 background-color: props.get(
134 $theme,
135 list.join($key, --selected --active --bg-color)...
136 );
115 } 137 }
116 } 138 }
117 } 139 }
118 } 140 }
119 } 141 }
120 142
121 @include bem.modifier('quiet') { 143 @include bem.modifier("quiet") {
122 @include bem.elem('item') { 144 @include bem.elem("item") {
123 @include bem.is('selected') { 145 @include bem.is("selected") {
124 @include bem.elem('item-content') { 146 @include bem.elem("item-content") {
125 color: props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...); 147 color: props.get(
126 background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...); 148 $theme,
149 list.join($key, --quiet --selected --disabled --text-color)...
150 );
151 background-color: props.get(
152 $theme,
153 list.join($key, --quiet --selected --disabled --bg-color)...
154 );
127 } 155 }
128 156
129 &:link, 157 &:link,
130 &:visited, 158 &:visited,
131 &:enabled { 159 &:enabled {
132 @include bem.elem('item-content') { 160 @include bem.elem("item-content") {
133 color: props.get($theme, list.join($key, --quiet --selected --text-color)...); 161 color: props.get(
134 background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...); 162 $theme,
163 list.join($key, --quiet --selected --text-color)...
164 );
165 background-color: props.get(
166 $theme,
167 list.join($key, --quiet --selected --bg-color)...
168 );
135 } 169 }
136 170
137 &:hover, 171 &:hover,
138 &:focus-visible { 172 &:focus-visible {
139 @include bem.elem('item-content') { 173 @include bem.elem("item-content") {
140 color: props.get($theme, list.join($key, --quiet --selected --hover --text-color)...); 174 color: props.get(
141 background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...); 175 $theme,
176 list.join($key, --quiet --selected --hover --text-color)...
177 );
178 background-color: props.get(
179 $theme,
180 list.join($key, --quiet --selected --hover --bg-color)...
181 );
142 } 182 }
143 } 183 }
144 184
145 &:active { 185 &:active {
146 @include bem.elem('item-content') { 186 @include bem.elem("item-content") {
147 color: props.get($theme, list.join($key, --quiet --selected --active --text-color)...); 187 color: props.get(
148 background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...); 188 $theme,
189 list.join($key, --quiet --selected --active --text-color)...
190 );
191 background-color: props.get(
192 $theme,
193 list.join($key, --quiet --selected --active --bg-color)...
194 );
149 } 195 }
150 } 196 }
151 } 197 }
@@ -155,64 +201,64 @@
155} 201}
156 202
157@mixin styles { 203@mixin styles {
158 @include materialize-at-root(meta.module-variables('vars')); 204 @include materialize-at-root(meta.module-variables("vars"));
159 205
160 @include bem.object('navbar') { 206 @include bem.object("navbar") {
161 display: flex; 207 display: flex;
162 block-size: props.get(vars.$block-size); 208 block-size: props.get(vars.$block-size);
163 209
164 @include bem.elem('item-label') { 210 @include bem.elem("item-label") {
165 order: 2; 211 order: 2;
166 margin-block-start: props.get(vars.$item--pad-b-icon); 212 margin-block-start: props.get(vars.$item--pad-b-icon);
167 font-size: props.get(vars.$item--label-font-size); 213 font-size: props.get(vars.$item--label-font-size);
168 font-weight: bold; 214 font-weight: bold;
169 215
170 @include bem.next-elem('item-content') { 216 @include bem.next-elem("item-content") {
171 padding-block: props.get(vars.$item--pad-b-icon); 217 padding-block: props.get(vars.$item--pad-b-icon);
172 padding-inline: props.get(vars.$item--pad-i-icon); 218 padding-inline: props.get(vars.$item--pad-i-icon);
173 font-size: props.get(vars.$item--icon-size); 219 font-size: props.get(vars.$item--icon-size);
174 } 220 }
175 } 221 }
176 222
177 @include bem.elem('item-content-text') { 223 @include bem.elem("item-content-text") {
178 margin-inline: props.get(vars.$item--pad-i-label); 224 margin-inline: props.get(vars.$item--pad-i-label);
179 } 225 }
180 226
181 @include bem.elem('item-content') { 227 @include bem.elem("item-content") {
182 position: relative; 228 position: relative;
183 order: 1; 229 order: 1;
184 padding-block: props.get(vars.$item--pad-b); 230 padding-block: props.get(vars.$item--pad-b);
185 padding-inline: props.get(vars.$item--pad-i); 231 padding-inline: props.get(vars.$item--pad-i);
186 font-size: props.get(vars.$item--font-size); 232 font-size: props.get(vars.$item--font-size);
187 white-space: nowrap; 233 white-space: nowrap;
188 border-radius: 100em; 234 border-radius: 100em;
189 235
190 &::after { 236 &::after {
191 position: absolute; 237 position: absolute;
192 inset: calc(-1 * props.get(vars.$key-focus--border-offset)); 238 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
193 z-index: -10; 239 z-index: -10;
194 display: block; 240 display: block;
195 visibility: hidden; 241 visibility: hidden;
196 pointer-events: none; 242 pointer-events: none;
197 content: ''; 243 content: "";
198 border-radius: 100em; 244 border-radius: 100em;
199 } 245 }
200 } 246 }
201 247
202 @include bem.elem('item') { 248 @include bem.elem("item") {
203 display: flex; 249 display: flex;
204 flex-direction: column; 250 flex-direction: column;
205 align-items: center; 251 align-items: center;
206 justify-content: center; 252 justify-content: center;
207 inline-size: 100%; 253 inline-size: 100%;
208 padding-inline: calc(.5 * props.get(vars.$spacing)); 254 padding-inline: calc(0.5 * props.get(vars.$spacing));
209 font-weight: 500; 255 font-weight: 500;
210 256
211 &:link, 257 &:link,
212 &:visited, 258 &:visited,
213 &:enabled { 259 &:enabled {
214 &:focus-visible { 260 &:focus-visible {
215 @include bem.elem('item-content') { 261 @include bem.elem("item-content") {
216 &::after { 262 &::after {
217 visibility: visible; 263 visibility: visible;
218 } 264 }
@@ -220,7 +266,7 @@
220 } 266 }
221 } 267 }
222 268
223 @include bem.is('selected') { 269 @include bem.is("selected") {
224 font-weight: bold; 270 font-weight: bold;
225 } 271 }
226 } 272 }
@@ -233,22 +279,21 @@
233 } 279 }
234 } 280 }
235 281
236 @include bem.modifier('hide-unselected') { 282 @include bem.modifier("hide-unselected") {
237 @include bem.elem('item') { 283 @include bem.elem("item") {
238 display: none; 284 display: none;
239 285
240 @include bem.is('selected') { 286 @include bem.is("selected") {
241 display: flex; 287 display: flex;
242 } 288 }
243 } 289 }
244 } 290 }
245 291
246 @include bem.modifier('adapt') { 292 @include bem.modifier("adapt") {
247 block-size: 100%; 293 block-size: 100%;
248 } 294 }
249 295
250 296 @include bem.modifier("align-block") {
251 @include bem.modifier('align-block') {
252 margin-inline: calc(-1 * props.get(vars.$item--pad-i)); 297 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
253 } 298 }
254 } 299 }
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 10:52:25 +0000