@wwtdev/bsds-css 2.30.0 → 2.32.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/_dropdown-options.scss +1 -1
- package/dist/components/_inline-tabs.scss +2 -2
- package/dist/components/_pills.scss +1 -1
- package/dist/components/_vertical-navigation.scss +258 -42
- package/dist/components/dropdown-options.css +1 -1
- package/dist/components/inline-tabs.css +2 -2
- package/dist/components/pills.css +1 -1
- package/dist/components/vertical-navigation.css +258 -42
- package/dist/wwt-bsds.css +241 -45
- package/dist/wwt-bsds.min.css +1 -1
- package/package.json +1 -1
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
|
|
79
79
|
.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
|
|
80
80
|
color: var(--bs-ink-light);
|
|
81
|
-
font-size: var(--bs-text-
|
|
81
|
+
font-size: var(--bs-text-sm);
|
|
82
82
|
min-height: 1.125rem;
|
|
83
83
|
line-height: 1.125rem;
|
|
84
84
|
}
|
|
@@ -1,17 +1,30 @@
|
|
|
1
1
|
@mixin vertical-navigation() {
|
|
2
2
|
:root {
|
|
3
|
-
--bs-vertical-nav-width:
|
|
3
|
+
--bs-vertical-nav-width: 11.25rem;
|
|
4
4
|
--bs-vertical-nav-narrow-width: 4.5rem;
|
|
5
|
+
--bs-vertical-nav-collapsed-width: 4.5rem;
|
|
6
|
+
/* Dynamic width set by the navigation component for page layout */
|
|
7
|
+
--bs-page-nav-width: 0px;
|
|
5
8
|
}
|
|
6
9
|
|
|
7
|
-
.bs-vertical-nav {
|
|
10
|
+
.bs-vertical-nav-wrapper {
|
|
8
11
|
--active-color: rgba(255, 255, 255, 0.25);
|
|
9
12
|
--bg-color: var(--bs-navy-base);
|
|
10
13
|
--border-color: var(--bs-border-dark);
|
|
14
|
+
--text-color: var(--bs-white);
|
|
15
|
+
--link-color: var(--bs-white);
|
|
16
|
+
--link-hover-color: var(--bs-white);
|
|
17
|
+
--link-active-color: var(--bs-white);
|
|
18
|
+
--toggle-bg-color: var(--bg-color);
|
|
19
|
+
--toggle-color: var(--bs-white);
|
|
11
20
|
--top-offset: 48px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.bs-vertical-nav {
|
|
12
24
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
|
13
25
|
background-color: var(--bg-color);
|
|
14
|
-
|
|
26
|
+
border-inline-end: 1px solid var(--border-color);
|
|
27
|
+
color: var(--text-color);
|
|
15
28
|
display: flex;
|
|
16
29
|
flex-direction: column;
|
|
17
30
|
height: 100dvh;
|
|
@@ -27,7 +40,6 @@
|
|
|
27
40
|
right: 0;
|
|
28
41
|
scrollbar-width: none; /* Firefox */
|
|
29
42
|
top: var(--top-offset);
|
|
30
|
-
/* Slight delay for visibility to change prior to opacity */
|
|
31
43
|
transition: opacity 200ms ease 10ms;
|
|
32
44
|
visibility: hidden;
|
|
33
45
|
width: auto;
|
|
@@ -39,23 +51,21 @@
|
|
|
39
51
|
visibility: visible;
|
|
40
52
|
}
|
|
41
53
|
|
|
42
|
-
.
|
|
54
|
+
.bs-vertical-nav:where([data-collapsible="true"]) {
|
|
55
|
+
transition: opacity 200ms ease 10ms, width 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.dark .bs-vertical-nav-wrapper {
|
|
43
59
|
--active-color: rgba(255, 255, 255, 0.25);
|
|
44
60
|
--bg-color: var(--bs-bg-base);
|
|
45
|
-
--border-color: var(--bs-border-
|
|
46
|
-
border-right: 1px solid var(--bs-border-medium);
|
|
61
|
+
--border-color: var(--bs-border-medium);
|
|
47
62
|
}
|
|
48
63
|
|
|
49
64
|
@media (min-width: 1166px) {
|
|
50
65
|
.bs-vertical-nav {
|
|
51
|
-
border-right: 1px solid var(--bg-color);
|
|
52
66
|
opacity: 1;
|
|
53
|
-
padding
|
|
54
|
-
padding-left: 0.5rem;
|
|
55
|
-
padding-right: 0.5rem;
|
|
56
|
-
padding-top: 1rem;
|
|
67
|
+
padding: 1rem;
|
|
57
68
|
right: auto;
|
|
58
|
-
transition: none;
|
|
59
69
|
visibility: visible;
|
|
60
70
|
width: var(--bs-vertical-nav-width);
|
|
61
71
|
}
|
|
@@ -63,25 +73,81 @@
|
|
|
63
73
|
.bs-vertical-nav:where([data-narrow="true"]) {
|
|
64
74
|
width: var(--bs-vertical-nav-narrow-width);
|
|
65
75
|
}
|
|
76
|
+
|
|
77
|
+
.bs-vertical-nav:where([data-collapsed="true"]) {
|
|
78
|
+
width: var(--bs-vertical-nav-collapsed-width);
|
|
79
|
+
}
|
|
66
80
|
}
|
|
67
81
|
|
|
68
82
|
.bs-vertical-nav::-webkit-scrollbar {
|
|
69
83
|
display: none; /* Safari and Chrome */
|
|
70
84
|
}
|
|
71
85
|
|
|
86
|
+
/* ===== Collapse Toggle Button ===== */
|
|
87
|
+
.bs-vertical-nav-toggle {
|
|
88
|
+
align-items: center;
|
|
89
|
+
background: var(--toggle-bg-color);
|
|
90
|
+
border: 1px solid var(--border-color);
|
|
91
|
+
border-radius: 100px;
|
|
92
|
+
color: var(--toggle-color);
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
display: none; /* Hidden by default on mobile */
|
|
95
|
+
height: 24px;
|
|
96
|
+
width: 24px;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
padding: 0;
|
|
99
|
+
position: fixed;
|
|
100
|
+
left: calc(var(--bs-vertical-nav-width) - 0.5rem);
|
|
101
|
+
pointer-events: auto; /* Ensure button is clickable */
|
|
102
|
+
top: calc(var(--top-offset) + 1.125rem); /* top-offset + 18px */
|
|
103
|
+
transition: left 300ms ease-out, opacity 100ms ease-out;
|
|
104
|
+
z-index: 1002; /* Above nav to prevent hover conflicts */
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@media (min-width: 1166px) {
|
|
108
|
+
.bs-vertical-nav-toggle {
|
|
109
|
+
display: flex;
|
|
110
|
+
opacity: 1;
|
|
111
|
+
transition: left 300ms ease-out, opacity 100ms ease-out;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.bs-vertical-nav-toggle:where([data-collapsed="true"]) {
|
|
115
|
+
left: calc(var(--bs-vertical-nav-collapsed-width) - 0.5rem);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
/* Adjust position for narrow variant when NOT collapsed */
|
|
119
|
+
.bs-vertical-nav-toggle:where([data-narrow="true"]:not([data-collapsed="true"])) {
|
|
120
|
+
left: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.bs-vertical-nav-toggle-icon {
|
|
125
|
+
height: 8px;
|
|
126
|
+
width: 8px;
|
|
127
|
+
color: inherit;
|
|
128
|
+
transition: transform 200ms var(--bs-transition-ease);
|
|
129
|
+
will-change: transform;
|
|
130
|
+
flex-shrink: 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
72
133
|
/* ===== Sections ===== */
|
|
73
134
|
.bs-vertical-nav :where(.bs-vertical-nav-section) {
|
|
74
|
-
border-top:
|
|
135
|
+
border-top: 1px solid var(--border-color);
|
|
75
136
|
margin-top: 0.5rem;
|
|
76
137
|
padding-top: 0.5rem;
|
|
77
138
|
}
|
|
78
139
|
|
|
79
140
|
@media (min-width: 1166px) {
|
|
80
141
|
.bs-vertical-nav :where(.bs-vertical-nav-section) {
|
|
81
|
-
margin-top: 0.
|
|
142
|
+
margin-top: 0.5rem;
|
|
82
143
|
}
|
|
83
144
|
}
|
|
84
145
|
|
|
146
|
+
/* Divider-only sections have no additional padding since no toggle button */
|
|
147
|
+
.bs-vertical-nav :where(.bs-vertical-nav-section[data-divider-only="true"]) {
|
|
148
|
+
padding-top: 0.5rem;
|
|
149
|
+
}
|
|
150
|
+
|
|
85
151
|
/* Don't show border if the very first item is a section */
|
|
86
152
|
.bs-vertical-nav :where(ul li:first-child) {
|
|
87
153
|
border-top: none;
|
|
@@ -106,7 +172,7 @@
|
|
|
106
172
|
@media (min-width: 1166px) {
|
|
107
173
|
.bs-vertical-nav :where(.bs-vertical-nav-section-toggle) {
|
|
108
174
|
/* nav width - nav left padding - nav right padding */
|
|
109
|
-
width: calc(var(--bs-vertical-nav-width) -
|
|
175
|
+
width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
|
|
110
176
|
}
|
|
111
177
|
|
|
112
178
|
.bs-vertical-nav :where(.bs-vertical-nav-section-toggle span:first-child) {
|
|
@@ -114,7 +180,7 @@
|
|
|
114
180
|
text-align: start;
|
|
115
181
|
text-overflow: ellipsis;
|
|
116
182
|
/* nav width - nav left padding - nav right padding - link left padding - link right padding - caret width */
|
|
117
|
-
width: calc(var(--bs-vertical-nav-width) -
|
|
183
|
+
width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 0.75rem);
|
|
118
184
|
}
|
|
119
185
|
}
|
|
120
186
|
|
|
@@ -141,66 +207,72 @@
|
|
|
141
207
|
padding-left: 0;
|
|
142
208
|
}
|
|
143
209
|
|
|
144
|
-
@media (min-width: 1166px) {
|
|
145
|
-
.bs-vertical-nav :where(ul) {
|
|
146
|
-
gap: 0.25rem;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
210
|
/* ===== Nav List Items / Links */
|
|
151
211
|
.bs-vertical-nav :where(ul li a) {
|
|
152
212
|
align-items: center;
|
|
153
213
|
border-radius: 4px;
|
|
214
|
+
color: var(--link-color);
|
|
154
215
|
cursor: pointer;
|
|
155
216
|
display: flex;
|
|
156
217
|
font-size: 1rem;
|
|
157
218
|
font-weight: 400;
|
|
158
219
|
gap: 0.5rem;
|
|
159
220
|
height: 100%;
|
|
160
|
-
padding
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
221
|
+
padding: 0.5rem 0.75rem;
|
|
222
|
+
position: relative;
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
/* Narrow variant - text always visible on desktop (overrides collapsed state) */
|
|
226
|
+
@media (min-width: 1166px) {
|
|
227
|
+
.bs-vertical-nav:where([data-narrow="true"]) :where(ul li a > span:last-child) {
|
|
228
|
+
opacity: 1;
|
|
229
|
+
visibility: visible;
|
|
230
|
+
width: auto;
|
|
231
|
+
}
|
|
165
232
|
}
|
|
166
233
|
|
|
167
234
|
@media (min-width: 1166px) {
|
|
168
235
|
.bs-vertical-nav :where(ul li a) {
|
|
169
236
|
font-size: 0.875rem;
|
|
170
|
-
|
|
171
|
-
padding
|
|
237
|
+
min-height: 2.5rem; /* Fixed minimum height to prevent height changes */
|
|
238
|
+
padding: 0.5rem 0.75rem; /* Explicit padding for consistency */
|
|
172
239
|
/* nav width - nav left padding - nav right padding */
|
|
173
|
-
width: calc(var(--bs-vertical-nav-width) -
|
|
240
|
+
width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
/* Collapsed state width */
|
|
244
|
+
.bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a) {
|
|
245
|
+
/* collapsed width - nav left padding - nav right padding */
|
|
246
|
+
width: calc(var(--bs-vertical-nav-collapsed-width) - 1rem - 1rem);
|
|
174
247
|
}
|
|
175
248
|
|
|
176
249
|
/* Text overflow - normal width - no icon */
|
|
177
250
|
.bs-vertical-nav :where(ul li a:not(:has(.bs-vertical-nav-link-icon)) span:first-child) {
|
|
178
251
|
overflow: hidden;
|
|
179
252
|
text-overflow: ellipsis;
|
|
253
|
+
white-space: nowrap;
|
|
180
254
|
/* nav width - nav left padding - nav right padding - link left padding - link right padding */
|
|
181
|
-
width: calc(var(--bs-vertical-nav-width) -
|
|
255
|
+
width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem);
|
|
182
256
|
}
|
|
183
257
|
|
|
184
258
|
/* Text overflow - normal width - with icon */
|
|
185
259
|
.bs-vertical-nav :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
|
|
186
260
|
overflow: hidden;
|
|
187
261
|
text-overflow: ellipsis;
|
|
262
|
+
white-space: nowrap;
|
|
188
263
|
/* nav width - nav left padding - nav right padding - link left padding - link right padding - icon width - icon gap */
|
|
189
|
-
width: calc(var(--bs-vertical-nav-width) -
|
|
264
|
+
width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem - 0.75rem - 0.75rem - 1rem - 0.5rem);
|
|
190
265
|
}
|
|
191
266
|
|
|
192
267
|
.bs-vertical-nav:where([data-narrow="true"]) :where(ul li a) {
|
|
193
268
|
flex-direction: column;
|
|
194
269
|
font-size: 0.6875rem;
|
|
195
|
-
gap: 0.
|
|
270
|
+
gap: 0.5rem; /* 8px - matches Figma */
|
|
196
271
|
line-height: 1.3;
|
|
197
|
-
padding
|
|
198
|
-
padding-left: 0.25rem;
|
|
199
|
-
padding-right: 0.25rem;
|
|
200
|
-
padding-top: 0.75rem;
|
|
272
|
+
padding: 0.5rem 0.75rem; /* 8px 12px - matches Figma */
|
|
201
273
|
text-align: center;
|
|
202
274
|
/* nav width - nav left padding - nav right padding */
|
|
203
|
-
width: calc(var(--bs-vertical-nav-narrow-width) -
|
|
275
|
+
width: calc(var(--bs-vertical-nav-narrow-width) - 1rem - 1rem);
|
|
204
276
|
}
|
|
205
277
|
|
|
206
278
|
/* Text overflow - narrow width */
|
|
@@ -208,37 +280,160 @@
|
|
|
208
280
|
.bs-vertical-nav:where([data-narrow="true"]) :where(ul li a:has(.bs-vertical-nav-link-icon) span:nth-child(2)) {
|
|
209
281
|
overflow: hidden;
|
|
210
282
|
text-overflow: ellipsis;
|
|
283
|
+
white-space: nowrap;
|
|
211
284
|
/* nav width - nav left padding - nav right padding - link left padding */
|
|
212
285
|
width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
|
|
213
286
|
}
|
|
214
287
|
}
|
|
215
288
|
|
|
289
|
+
.bs-vertical-nav-section:where([data-app-links="true"]) {
|
|
290
|
+
padding-top: 1rem;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a) {
|
|
294
|
+
padding: 0.375rem 0.5rem;
|
|
295
|
+
font-size: 0.75rem;
|
|
296
|
+
font-weight: 600;
|
|
297
|
+
}
|
|
298
|
+
|
|
216
299
|
.bs-vertical-nav :where(ul li a:hover) {
|
|
300
|
+
color: var(--link-hover-color);
|
|
217
301
|
font-weight: 600;
|
|
218
302
|
}
|
|
219
303
|
|
|
304
|
+
.bs-vertical-nav-section:where([data-app-links="true"]) :where(ul li a:hover) {
|
|
305
|
+
color: var(--bs-ink-blue);
|
|
306
|
+
}
|
|
307
|
+
|
|
220
308
|
.bs-vertical-nav :where(ul li a[data-active="true"]) {
|
|
221
309
|
background-color: var(--active-color);
|
|
310
|
+
color: var(--link-active-color);
|
|
222
311
|
font-weight: 600;
|
|
312
|
+
transition: background-color 200ms ease-out;
|
|
223
313
|
}
|
|
224
314
|
|
|
315
|
+
/* Icon sizing - mobile/default */
|
|
225
316
|
.bs-vertical-nav :where(.bs-vertical-nav-link-icon) {
|
|
226
317
|
height: 1rem;
|
|
227
318
|
width: 1rem;
|
|
319
|
+
flex-shrink: 0; /* Prevent icon from shrinking */
|
|
228
320
|
}
|
|
229
321
|
|
|
230
322
|
@media (min-width: 1166px) {
|
|
231
|
-
|
|
323
|
+
/* Wide and collapsible variant icons - 14px */
|
|
324
|
+
.bs-vertical-nav:not([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
|
|
232
325
|
height: 0.875rem;
|
|
233
326
|
width: 0.875rem;
|
|
234
327
|
}
|
|
235
328
|
|
|
329
|
+
/* Narrow variant icons - 16px (inherits from base) */
|
|
236
330
|
.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-link-icon) {
|
|
237
331
|
height: 1rem;
|
|
238
332
|
width: 1rem;
|
|
239
333
|
}
|
|
240
334
|
}
|
|
241
335
|
|
|
336
|
+
.bs-vertical-nav-section:where([data-app-links="true"]) .bs-vertical-nav-link-icon {
|
|
337
|
+
height: 1.5rem;
|
|
338
|
+
width: 1.5rem;
|
|
339
|
+
margin-left: 0;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
/* Default: Show text on mobile */
|
|
343
|
+
.bs-vertical-nav :where(ul li a > span:last-child) {
|
|
344
|
+
opacity: 1;
|
|
345
|
+
visibility: visible;
|
|
346
|
+
width: auto;
|
|
347
|
+
}
|
|
348
|
+
|
|
349
|
+
/* Desktop: Show text when NOT collapsed */
|
|
350
|
+
@media (min-width: 1166px) {
|
|
351
|
+
.bs-vertical-nav:not([data-collapsed="true"]) :where(ul li a > span:last-child) {
|
|
352
|
+
opacity: 1;
|
|
353
|
+
visibility: visible;
|
|
354
|
+
width: auto;
|
|
355
|
+
/* Immediate visibility when appropriate */
|
|
356
|
+
transition: opacity 150ms ease, visibility 0ms linear;
|
|
357
|
+
}
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
/* Desktop: Hide text when collapsed */
|
|
361
|
+
@media (min-width: 1166px) {
|
|
362
|
+
.bs-vertical-nav:where([data-collapsed="true"]) :where(ul li a > span:last-child) {
|
|
363
|
+
opacity: 0;
|
|
364
|
+
visibility: hidden;
|
|
365
|
+
width: 0;
|
|
366
|
+
overflow: hidden;
|
|
367
|
+
white-space: nowrap;
|
|
368
|
+
/* Delay visibility to prevent flash during breakpoint transition */
|
|
369
|
+
transition: opacity 150ms ease, visibility 0ms linear 150ms;
|
|
370
|
+
}
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
/* Keep icons visible when collapsed */
|
|
374
|
+
.bs-vertical-nav:where([data-collapsed="true"]) :where(.bs-vertical-nav-link-icon) {
|
|
375
|
+
display: block;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/* Hide section toggle when collapsed */
|
|
379
|
+
.bs-vertical-nav:where([data-collapsed="true"]) :where(.bs-vertical-nav-section-toggle) {
|
|
380
|
+
display: none;
|
|
381
|
+
}
|
|
382
|
+
|
|
383
|
+
/* ===== Hover Expansion (CSS-only) ===== */
|
|
384
|
+
@media (min-width: 1166px) {
|
|
385
|
+
/* Expand nav on hover when collapsed and collapsible - but NOT when hovering the toggle button */
|
|
386
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-collapsible="true"]) {
|
|
387
|
+
width: var(--bs-vertical-nav-width);
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
/* Narrow variant should respect narrow width on hover */
|
|
391
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-narrow="true"]) {
|
|
392
|
+
width: var(--bs-vertical-nav-narrow-width);
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
/* Expand link widths on hover when collapsed */
|
|
396
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a) {
|
|
397
|
+
width: calc(var(--bs-vertical-nav-width) - 1rem - 1rem);
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
/* Narrow variant links should respect narrow width on hover */
|
|
401
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"][data-narrow="true"]) :where(ul li a) {
|
|
402
|
+
width: calc(var(--bs-vertical-nav-narrow-width) - 0.5rem - 0.5rem);
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
/* Show text on hover when collapsed */
|
|
406
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(ul li a > span:last-child) {
|
|
407
|
+
opacity: 1;
|
|
408
|
+
visibility: visible;
|
|
409
|
+
width: auto;
|
|
410
|
+
overflow: visible;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
/* Hide toggle button on hover when collapsed - but NOT when hovering the button itself */
|
|
414
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav-toggle[data-collapsed="true"]) {
|
|
415
|
+
opacity: 0;
|
|
416
|
+
pointer-events: none; /* Prevent interaction when hidden */
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
/* Show section toggles on hover when collapsed */
|
|
420
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsed="true"]) :where(.bs-vertical-nav-section-toggle) {
|
|
421
|
+
display: flex;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
/* ===== Top Content ===== */
|
|
426
|
+
.bs-vertical-nav :where(.bs-vertical-nav-top-content) {
|
|
427
|
+
margin-bottom: 0.5rem;
|
|
428
|
+
padding: 0;
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
@media (min-width: 1166px) {
|
|
432
|
+
.bs-vertical-nav :where(.bs-vertical-nav-top-content) {
|
|
433
|
+
margin-bottom: 0.75rem;
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
|
|
242
437
|
/* ===== End Items ===== */
|
|
243
438
|
.bs-vertical-nav :where(.bs-vertical-nav-end-items) {
|
|
244
439
|
display: flex;
|
|
@@ -247,12 +442,25 @@
|
|
|
247
442
|
margin-top: auto;
|
|
248
443
|
}
|
|
249
444
|
|
|
445
|
+
/* End items visibility for collapsible variant (desktop only) */
|
|
446
|
+
@media (min-width: 1166px) {
|
|
447
|
+
/* Hide end items when collapsible variant is collapsed */
|
|
448
|
+
.bs-vertical-nav:where([data-collapsible="true"][data-collapsed="true"]) :where(.bs-vertical-nav-end-items) {
|
|
449
|
+
display: none;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
/* Show end items on hover when collapsible variant is collapsed */
|
|
453
|
+
.bs-vertical-nav-wrapper:where(:hover:not(:has(.bs-vertical-nav-toggle:hover))) :where(.bs-vertical-nav[data-collapsible="true"][data-collapsed="true"]) :where(.bs-vertical-nav-end-items) {
|
|
454
|
+
display: flex;
|
|
455
|
+
}
|
|
456
|
+
}
|
|
457
|
+
|
|
250
458
|
.bs-vertical-nav :where(.bs-vertical-nav-end-items > *) {
|
|
251
|
-
color: var(--
|
|
459
|
+
color: var(--text-color);
|
|
252
460
|
}
|
|
253
461
|
|
|
254
462
|
.bs-vertical-nav :where(.bs-vertical-nav-end-items > *:not(button)) {
|
|
255
|
-
color: var(--
|
|
463
|
+
color: var(--text-color);
|
|
256
464
|
padding-bottom: 0.5rem;
|
|
257
465
|
padding-left: 0.75rem;
|
|
258
466
|
padding-right: 0.75rem;
|
|
@@ -272,9 +480,17 @@
|
|
|
272
480
|
margin-top: 0.5rem;
|
|
273
481
|
}
|
|
274
482
|
|
|
483
|
+
/* Hide end items in narrow variant (all screen sizes) */
|
|
275
484
|
.bs-vertical-nav:where([data-narrow="true"]) :where(.bs-vertical-nav-end-items) {
|
|
276
485
|
display: none;
|
|
277
486
|
}
|
|
278
487
|
|
|
488
|
+
/* ===== CSS-Only Page Layout Support ===== */
|
|
489
|
+
/* Apply to any element that needs to adjust for navigation width (e.g., headers, main content) */
|
|
490
|
+
.bs-header-with-nav {
|
|
491
|
+
margin-inline-start: var(--bs-page-nav-width);
|
|
492
|
+
transition: margin-inline-start 350ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
493
|
+
}
|
|
494
|
+
|
|
279
495
|
}
|
|
280
496
|
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
.bs-dropdown-options :where(li[data-variant~="2-col"][data-variant~="description"] > :nth-child(3)),
|
|
78
78
|
.bs-dropdown-options :where(li[data-variant~="3-col"][data-variant~="description"] > :nth-child(4)) {
|
|
79
79
|
color: var(--bs-ink-light);
|
|
80
|
-
font-size: var(--bs-text-
|
|
80
|
+
font-size: var(--bs-text-sm);
|
|
81
81
|
min-height: 1.125rem;
|
|
82
82
|
line-height: 1.125rem;
|
|
83
83
|
}
|