101 lines
2.1 KiB
CSS
101 lines
2.1 KiB
CSS
/**
|
|
* VDI Navs & Menu - Functional Styles
|
|
*
|
|
* Please review documentation upon first use, and, as-needed:
|
|
* https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
|
|
*/
|
|
|
|
/* all sizes */
|
|
.menu-vdi {
|
|
@apply hidden;
|
|
|
|
>li {
|
|
@apply list-none;
|
|
>a {
|
|
@apply focus-visible:underline hover:underline;
|
|
}
|
|
|
|
a[aria-current="true"] {
|
|
@apply underline;
|
|
}
|
|
|
|
.menu-vdi__toggle {
|
|
&[aria-expanded="true"] {
|
|
svg {
|
|
@apply rotate-180;
|
|
}
|
|
|
|
+.menu-vdi__submenu {
|
|
@apply flex;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-vdi__submenu {
|
|
@apply hidden container z-10;
|
|
|
|
/* should also put current page here */
|
|
.menu-vdi__item--grandchild a {
|
|
@apply no-underline focus-visible:underline hover:underline;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Mobile */
|
|
@media screen and (max-width: 62.5rem) {
|
|
#app:has(.nav-main__toggle[aria-expanded="true"]) { height: calc(100vh - var(--hgtHeader)); }
|
|
|
|
.nav-main__toggle {
|
|
.nav-toggle-hamburger { display: inline-block !important; }
|
|
|
|
.nav-toggle-x { display: none !important; }
|
|
|
|
&[aria-expanded="true"] {
|
|
.nav-toggle-hamburger { display: none !important; }
|
|
|
|
.nav-toggle-x { display: inline-block !important; }
|
|
}
|
|
}
|
|
.nav-main {
|
|
.nav-main__toggle[aria-expanded="true"] {
|
|
+ul {
|
|
@apply absolute flex;
|
|
}
|
|
}
|
|
|
|
.menu-vdi {
|
|
@apply absolute right-0 z-10;
|
|
|
|
.menu-vdi__toggle {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
}
|
|
}
|
|
|
|
.nav-aux {
|
|
.menu-vdi__submenu {
|
|
@apply absolute list-none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Desktop */
|
|
@media screen and (min-width: 62.5rem) {
|
|
.nav-main__toggle {
|
|
@apply hidden;
|
|
}
|
|
|
|
.menu-vdi {
|
|
@apply flex list-none;
|
|
|
|
.menu-vdi__toggle {
|
|
@apply flex items-center gap-2;
|
|
}
|
|
|
|
.menu-vdi__submenu {
|
|
@apply absolute list-none;
|
|
}
|
|
}
|
|
}
|