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.scss191
1 files changed, 191 insertions, 0 deletions
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..59d4c51
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,191 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'navbar.vars';
9@use 'navbar.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('navbar') {
15 display: flex;
16 block-size: props.get(vars.$block-size);
17
18 @include bem.elem('item-content-text') {
19 margin-inline: props.get(vars.$item--pad-i-label);
20 }
21
22 @include bem.elem('item-content') {
23 position: relative;
24 padding-block: props.get(vars.$item--pad-b);
25 padding-inline: props.get(vars.$item--pad-i);
26 font-size: props.get(vars.$item--font-size);
27 color: currentColor;
28 white-space: nowrap;
29 border-radius: 100em;
30
31 &::after {
32 position: absolute;
33 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
34 z-index: -10;
35 display: block;
36 pointer-events: none;
37 visibility: hidden;
38 content: '';
39 border-radius: 100em;
40 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
41 box-shadow:
42 0
43 0
44 0
45 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
46 props.get(vars.$default-theme, --key-focus, --outline);
47 }
48 }
49
50 @include bem.elem('item') {
51 display: flex;
52 flex-direction: column;
53 align-items: center;
54 justify-content: center;
55 inline-size: 100%;
56 padding-inline: calc(.5 * props.get(vars.$spacing));
57 font-weight: 500;
58 color: props.get(vars.$default-theme, --disabled, --label-color);
59
60 &:link,
61 &:visited,
62 &:enabled {
63 color: props.get(vars.$default-theme, --label-color);
64
65 &:hover,
66 &:focus-visible {
67 color: props.get(vars.$default-theme, --hover, --label-color);
68
69 @include bem.elem('item-content') {
70 background-color: props.get(vars.$default-theme, --hover, --bg-color);
71 }
72 }
73
74 &:focus-visible {
75 @include bem.elem('item-content') {
76 &::after {
77 visibility: visible;
78 }
79 }
80 }
81
82 &:active {
83 color: props.get(vars.$default-theme, --active, --label-color);
84
85 @include bem.elem('item-content') {
86 background-color: props.get(vars.$default-theme, --active, --bg-color);
87 }
88 }
89 }
90
91 @include bem.is('selected') {
92 font-weight: bold;
93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
94
95 @include bem.elem('item-content') {
96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
97 }
98
99 &:link,
100 &:visited,
101 &:enabled {
102 color: props.get(vars.$default-theme, --selected, --label-color);
103
104 @include bem.elem('item-content') {
105 background-color: props.get(vars.$default-theme, --selected, --bg-color);
106 }
107
108 &:hover,
109 &:focus-visible {
110 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
111
112 @include bem.elem('item-content') {
113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
114 }
115 }
116
117 &:active {
118 color: props.get(vars.$default-theme, --selected, --active, --label-color);
119
120 @include bem.elem('item-content') {
121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
122 }
123 }
124 }
125 }
126 }
127
128 @include bem.modifier('hide-unselected') {
129 @include bem.elem('item') {
130 display: none;
131
132 @include bem.is('selected') {
133 display: flex;
134 }
135 }
136 }
137
138 @include bem.modifier('adapt') {
139 gap: props.get(vars.$spacing);
140 block-size: 100%;
141
142 @include bem.elem('item') {
143 padding-inline: 0;
144 }
145 }
146
147
148 @include bem.modifier('align-block') {
149 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
150 }
151
152 @include bem.modifier('quiet') {
153 @include bem.elem('item') {
154 @include bem.is('selected') {
155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
156
157 @include bem.elem('item-content') {
158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
159 }
160
161 &:link,
162 &:visited,
163 &:enabled {
164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
165
166 @include bem.elem('item-content') {
167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
168 }
169
170 &:hover,
171 &:focus-visible {
172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
173
174 @include bem.elem('item-content') {
175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
176 }
177 }
178
179 &:active {
180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
181
182 @include bem.elem('item-content') {
183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
184 }
185 }
186 }
187 }
188 }
189 }
190 }
191}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-01 07:34:12 +0000