Keith Solomon
489e0acb38
Sync TODOs with Issues / sync_todos (push) Successful in 6s
Co-authored-by: Copilot <copilot@github.com>
98 lines
3.0 KiB
CSS
98 lines
3.0 KiB
CSS
/**
|
|
* VDI Navs & Menu - Main Navigation + Default Dropdown Menu Styles (Desktop Only)
|
|
*
|
|
* This file contains only desktop navigation styles.
|
|
* For mobile navigation, choose one of:
|
|
* - nav-mobile-accordion.css (traditional dropdown/accordion style)
|
|
* - nav-mobile-sliding.css (sliding viewport style)
|
|
*
|
|
* Please review documentation upon first use, and, as-needed:
|
|
* TODO: Add documenation link here
|
|
*/
|
|
|
|
/* desktop */
|
|
@media screen and (min-width: 62.5rem) {
|
|
.nav-main .menu-vdi {
|
|
@apply flex items-center justify-end p-0 m-0 h-full;
|
|
|
|
>li {
|
|
@apply h-full;
|
|
|
|
>a,
|
|
>.menu-vdi__toggle {
|
|
/* text styles */
|
|
@apply font-semibold text-20px text-white no-underline leading-snug whitespace-nowrap;
|
|
|
|
/* spacing & display */
|
|
@apply flex items-center px-4 -my-4 no-underline;
|
|
height: calc(100% + 2rem);
|
|
}
|
|
|
|
/* Hover state: triggered by li so it persists when moving into the submenu.
|
|
Also triggered when a submenu is open (e.g. via keyboard/click). */
|
|
&:hover,
|
|
&:has(.menu-vdi__toggle[aria-expanded="true"]) {
|
|
>a,
|
|
>.menu-vdi__toggle {
|
|
@apply bg-cwc-blue-02 text-light;
|
|
box-shadow: inset 0 -4px 0 #F26B53;
|
|
}
|
|
}
|
|
|
|
&.menu-vdi__item--contact {
|
|
@apply h-auto;
|
|
|
|
/* Override the li:hover rule above — contact keeps its own button style */
|
|
&:hover > a {
|
|
@apply bg-transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
>a {
|
|
@apply ml-2 mr-0 my-0;
|
|
height: auto;
|
|
background: linear-gradient(93.03deg, #F26B53 0%, #D24D32 100%);
|
|
border-radius: 1.25rem 0.25rem;
|
|
padding: .5rem 2rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 62.5rem) {
|
|
.menu-vdi {
|
|
.menu-vdi__toggle { @apply flex items-center gap-2 hover:cursor-pointer; }
|
|
|
|
.menu-vdi__item--parent { @apply relative; }
|
|
|
|
.menu-vdi__submenu {
|
|
top: calc(100% + 1rem);
|
|
|
|
@apply bg-cwc-blue-02 shadow-lg left-0 w-64 flex-col rounded-b-lg ml-0;
|
|
|
|
>li {
|
|
@apply w-full border-b border-[#D24D32];
|
|
|
|
&:last-child { @apply border-b-0 rounded-b-lg; }
|
|
}
|
|
|
|
.menu-vdi__item {
|
|
/* text styles */
|
|
@apply font-bold text-18px text-white no-underline leading-snug;
|
|
|
|
/* spacing & display */
|
|
@apply block w-full;
|
|
|
|
/* interaction */
|
|
@apply focus-visible:bg-cwc-blue-01 hover:bg-cwc-blue-01;
|
|
|
|
a { @apply block w-full; }
|
|
}
|
|
|
|
a.menu-vdi__item,
|
|
.menu-vdi__item a { @apply p-4 text-white; }
|
|
}
|
|
}
|
|
}
|