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.scss68
1 files changed, 49 insertions, 19 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 }
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-11-12 11:31:50 +0000