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