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