117 lines
2.4 KiB
CSS
117 lines
2.4 KiB
CSS
.secondary-menu-container {
|
|
@apply bg-primary items-center px-8 py-4
|
|
2xl:px-32;
|
|
|
|
a {
|
|
@apply text-white;
|
|
}
|
|
|
|
.secondary-menu-nav {
|
|
@apply max-w-screen-2xl w-full mx-auto flex justify-between items-center;
|
|
|
|
> ul {
|
|
@apply flex flex-col lg:flex-row justify-between gap-4;
|
|
}
|
|
a {
|
|
@apply font-normal text-lg;
|
|
}
|
|
li.menu-item > a:hover {
|
|
@apply underline underline-offset-8 decoration-1;
|
|
}
|
|
.network-redirector {
|
|
@apply lg:block hidden;
|
|
a {
|
|
@apply flex items-center gap-4;
|
|
&:after {
|
|
transition: all 0.3s ease-out;
|
|
@apply w-8 h-8 bg-no-repeat bg-contain bg-center text-lg;
|
|
filter: invert(1);
|
|
content: '';
|
|
background-image: url('../resources/img/carhop-fleche-lien-externe-full.svg');
|
|
display: inline-block;
|
|
}
|
|
&:hover {
|
|
&:after {
|
|
@apply translate-x-2 rotate-45;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #### PARENT WITH CHILDREN */
|
|
li.menu-item-has-children {
|
|
@apply relative;
|
|
|
|
.sub-menu {
|
|
@apply hidden;
|
|
}
|
|
&:has(button.menu-item__submenu-toggle[aria-expanded='true']) {
|
|
.sub-menu {
|
|
@apply block;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* #### SUBMENU */
|
|
|
|
button.menu-item__submenu-toggle {
|
|
@apply text-white;
|
|
&:hover,
|
|
&[aria-expanded='true'] {
|
|
@apply underline underline-offset-8 decoration-1;
|
|
}
|
|
}
|
|
.sub-menu {
|
|
@apply flex flex-col border border-white bg-primary absolute top-10 left-0 z-30;
|
|
width: 330px;
|
|
|
|
li {
|
|
@apply border-b border-white;
|
|
a {
|
|
@apply py-6 px-4 block w-full;
|
|
|
|
&:hover {
|
|
backdrop-filter: brightness(0.9);
|
|
}
|
|
}
|
|
&:last-child {
|
|
@apply border-b-0;
|
|
}
|
|
}
|
|
|
|
li.has-page-icon {
|
|
.menu-item__content {
|
|
@apply flex items-center gap-4;
|
|
}
|
|
}
|
|
|
|
a.menu-item__content {
|
|
.menu-item__title {
|
|
@apply font-medium;
|
|
}
|
|
.menu-item__excerpt {
|
|
@apply opacity-80;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none !important;
|
|
|
|
.menu-item__title {
|
|
text-decoration: underline !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.secondary-menu-container {
|
|
@apply hidden lg:block;
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.secondary-menu-container {
|
|
@apply w-fit mx-0;
|
|
}
|
|
}
|