74 lines
2.4 KiB
CSS
74 lines
2.4 KiB
CSS
/**
|
|
* VDI Navs & Menu - Mobile Accordion Navigation
|
|
*
|
|
* Traditional mobile accordion/dropdown style navigation
|
|
* Include this file for accordion-style mobile navigation
|
|
*/
|
|
|
|
/* Mobile accordion navigation */
|
|
@media screen and (max-width: 62.5rem) {
|
|
.nav-main {
|
|
.nav-main__toggle {
|
|
/* display */
|
|
@apply text-white p-3;
|
|
}
|
|
|
|
.menu-vdi {
|
|
@apply relative right-0 py-8 flex flex-col;
|
|
@apply absolute hidden; /* Hidden by default */
|
|
|
|
/* Allow the menu itself to scroll when content overflows the viewport */
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
|
|
background: var(--color-cwc-blue-02);
|
|
color: var(--color-white);
|
|
/* Cap the menu height to the visible viewport area so overflowing items scroll inside the menu instead of letting the menu grow taller than the screen. */
|
|
height: calc(100vh - var(--hgtHeader));
|
|
top: var(--hgtHeader);
|
|
width: 95%;
|
|
z-index: 100;
|
|
|
|
&, ul.menu-vdi {
|
|
list-style: none;
|
|
padding-left: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.menu-vdi__submenu { @apply py-2 px-7 flex-col; }
|
|
|
|
.menu-vdi__item {
|
|
list-style: none;
|
|
|
|
a, button {
|
|
/* text */
|
|
@apply font-bold text-20px text-white hover:underline leading-snug;
|
|
|
|
/* spacing & display */
|
|
@apply block w-full p-4;
|
|
|
|
/* interaction */
|
|
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
|
|
}
|
|
|
|
a { @apply block w-full; }
|
|
|
|
button { @apply flex w-full justify-between; }
|
|
}
|
|
}
|
|
|
|
/* Show menu when toggle button is expanded */
|
|
.nav-main__toggle[aria-expanded="true"] ~ .menu-vdi:not(.menu-vdi--sliding) { @apply !flex; /* Use !important to override hidden */ }
|
|
}
|
|
|
|
/* Lock the page from scrolling while the menu is open so the touch-scroll
|
|
gesture only scrolls the menu (or doesn't scroll at all if the menu
|
|
fits). Also stop the layout from jumping when the scrollbar disappears. */
|
|
html:has(.nav-main__toggle[aria-expanded="true"]) body,
|
|
body:has(.nav-main__toggle[aria-expanded="true"]) {
|
|
overflow: hidden;
|
|
overscroll-behavior: contain;
|
|
touch-action: none;
|
|
}
|
|
}
|