351 lines
7.5 KiB
CSS
351 lines
7.5 KiB
CSS
/* .primary-menu-container { */
|
|
|
|
.menu-homegrade {
|
|
@apply mx-auto
|
|
bg-primary
|
|
text-white
|
|
relative
|
|
w-full
|
|
h-fit
|
|
py-2
|
|
px-4
|
|
lg:pl-0
|
|
xl:pl-24
|
|
xl:px-8
|
|
2xl:px-32
|
|
my-0;
|
|
|
|
/* submenus */
|
|
.sub-menu[open] {
|
|
display: block;
|
|
}
|
|
|
|
.sub-menu {
|
|
@apply bg-primary
|
|
p-6
|
|
mx-auto
|
|
lg:mx-0
|
|
static
|
|
bottom-0
|
|
lg:translate-y-full
|
|
lg:absolute;
|
|
z-index: 999;
|
|
display: none;
|
|
|
|
&--closed {
|
|
@apply hidden;
|
|
}
|
|
&--open {
|
|
@apply block;
|
|
}
|
|
|
|
li {
|
|
@apply py-2 lg:text-left;
|
|
}
|
|
|
|
> a::after {
|
|
transform: translateY(-2px) rotate(-90deg);
|
|
content: '';
|
|
display: inline-block;
|
|
height: 10px;
|
|
width: 10px;
|
|
margin-left: 20px;
|
|
background-image: url('../resources/img/arrow_down_white.svg');
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
}
|
|
/* &__wrapper-container {
|
|
} */
|
|
|
|
&__navlist {
|
|
@apply w-full
|
|
max-w-screen-2xl mx-auto lg:flex justify-center items-center pr-0;
|
|
|
|
/* Highlight using list element */
|
|
li.current-page-parent > a,
|
|
li.current_page_item > a {
|
|
@apply font-bold;
|
|
}
|
|
|
|
li.menu-item {
|
|
@apply font-medium
|
|
text-center
|
|
rounded-xl;
|
|
@apply w-fit lg:mx-0;
|
|
line-height: 1;
|
|
|
|
button,
|
|
a {
|
|
@apply block
|
|
px-2
|
|
xl:px-4
|
|
py-2;
|
|
&:hover:not(.wpml-ls-item, .wpml-ls-item > a),
|
|
button:focus-visible,
|
|
a:focus-visible {
|
|
@apply cursor-pointer rounded-md;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
button:focus-visible,
|
|
a:focus-visible:not(.wpml-ls-item) {
|
|
@apply rounded-md;
|
|
text-decoration: none;
|
|
outline: 1px solid rgba(255, 255, 255, 0.8);
|
|
outline-offset: 8px;
|
|
}
|
|
|
|
&#menu-item-artisan-du-patrimoine {
|
|
@apply bg-white text-sm text-neutral-900 font-bold rounded-full mr-1
|
|
2xl:mr-8 mt-4 lg:mt-0;
|
|
transition: all 0.3s ease-out;
|
|
&:focus-within,
|
|
&:hover {
|
|
@apply text-primary translate-x-1;
|
|
}
|
|
a {
|
|
@apply flex items-center justify-center !py-1;
|
|
}
|
|
a:before {
|
|
@apply w-6 h-6 mr-2 bg-contain bg-center bg-no-repeat content-[''];
|
|
background-image: url('../resources/img/pictogrammes/Homegrade_artisans-patrimoine.svg');
|
|
}
|
|
}
|
|
|
|
/* IF SUBMENU CHILD */
|
|
.menu-item__submenu-toggle {
|
|
@apply pr-4;
|
|
&:after {
|
|
content: '';
|
|
display: inline-block;
|
|
transition: all 0.3s ease-out;
|
|
border-bottom: 2px solid white;
|
|
border-right: 2px solid white;
|
|
height: 8px;
|
|
width: 8px;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
.menu-item__submenu-toggle[aria-expanded='false']:after {
|
|
transform: translateY(-30%) rotate(45deg);
|
|
}
|
|
.menu-item__submenu-toggle[aria-expanded='true']:after {
|
|
/* transform: rotate(225deg); */
|
|
transform: translateY(20%) rotate(225deg);
|
|
}
|
|
}
|
|
/* .wpml-ls-legacy-list-horizontal {
|
|
@apply p-0;
|
|
}
|
|
.wpml-ls {
|
|
@apply !p-0;
|
|
} */
|
|
}
|
|
/* &__burger-menu-toggle {
|
|
@apply lg:hidden
|
|
absolute
|
|
right-10
|
|
-translate-y-1/2
|
|
z-50
|
|
top-1/2;
|
|
width: 26px;
|
|
height: 26px;
|
|
|
|
.menu-toggle-bar {
|
|
@apply top-1/2
|
|
absolute
|
|
block
|
|
right-0
|
|
w-full
|
|
h-[2px]
|
|
bg-white;
|
|
margin-top: -1px;
|
|
transition: all 0.3s ease;
|
|
|
|
&.menu-toggle-bar--top {
|
|
transform: translate(0, -7px);
|
|
}
|
|
&.menu-toggle-bar--middle {
|
|
}
|
|
&.menu-toggle-bar--bottom {
|
|
transform: translate(0, 7px);
|
|
}
|
|
.nav-open & {
|
|
@apply bg-secondary;
|
|
|
|
&.menu-toggle-bar--top {
|
|
transform: translate(0, 0) rotate(45deg);
|
|
}
|
|
&.menu-toggle-bar--middle {
|
|
opacity: 0;
|
|
}
|
|
&.menu-toggle-bar--bottom {
|
|
transform: translate(0, 0) rotate(-45deg);
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
path {
|
|
@apply fill-secondary;
|
|
}
|
|
}
|
|
} */
|
|
@media screen and (max-width: 960px) {
|
|
@apply overflow-hidden;
|
|
|
|
&[opened] {
|
|
animation: height-in 500ms forwards ease-in, fade-in 1000ms forwards ease-in;
|
|
}
|
|
&[closing] {
|
|
animation: height-out 500ms forwards ease-in, fade-out 500ms forwards ease-in;
|
|
}
|
|
&[closed] {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
/* .wpml-ls-legacy-list-horizontal {
|
|
@apply p-0;
|
|
} */
|
|
.wpml-ls {
|
|
@apply !p-0;
|
|
}
|
|
/* .wpml-ls-item-nl {
|
|
@apply xl:ml-8;
|
|
} */
|
|
|
|
.wpml-ls-legacy-dropdown-click {
|
|
@apply !w-fit mt-4 lg:mt-0;
|
|
/* margin-left: -10px !important; */
|
|
|
|
ul {
|
|
@apply border-none lg:!px-2;
|
|
}
|
|
ul.wpml-ls-sub-menu {
|
|
@apply !pb-2 bg-primary static lg:absolute;
|
|
|
|
@media screen and (max-width: 960px) {
|
|
@apply !visible;
|
|
}
|
|
}
|
|
|
|
a {
|
|
@apply !bg-transparent !text-white border-none;
|
|
}
|
|
a:hover {
|
|
@apply rounded-lg font-bold;
|
|
background-color: rgba(255, 255, 255, 0.1) !important;
|
|
}
|
|
a.wpml-ls-item-toggle {
|
|
@apply lg:!px-5;
|
|
}
|
|
a.wpml-ls-item-toggle:after {
|
|
@apply !content-none lg:!content-[''];
|
|
right: 0px;
|
|
display: inline-block;
|
|
transition: all 0.3s ease-out;
|
|
border: unset;
|
|
border-bottom: 2px solid white;
|
|
border-right: 2px solid white;
|
|
height: 8px;
|
|
width: 8px;
|
|
/* margin-left: 10px;
|
|
margin-left: 20px; */
|
|
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
.wpml-ls-item {
|
|
@apply bg-transparent text-white;
|
|
}
|
|
/* OLD LANGUAGE SELECTOR LOOK */
|
|
/* .wpml-ls-item {
|
|
@apply !px-1 inline-block mb-3 lg:mb-0;
|
|
|
|
a {
|
|
@apply !rounded-full h-10 w-10 border-2 border-white p-0 !flex justify-center items-center font-semibold text-sm;
|
|
box-sizing: border-box;
|
|
outline-offset: 5px !important;
|
|
outline-width: 2px !important;
|
|
}
|
|
a:hover {
|
|
@apply !bg-white text-primary font-bold;
|
|
}
|
|
} */
|
|
/* .wpml-ls-current-language {
|
|
a {
|
|
@apply bg-white text-primary font-bold;
|
|
}
|
|
a:focus-visible {
|
|
@apply !bg-white text-primary font-bold;
|
|
}
|
|
} */
|
|
}
|
|
|
|
.menu-homegrade--footer {
|
|
@apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;
|
|
|
|
li.menu-item a {
|
|
@apply hover:text-secondary;
|
|
}
|
|
|
|
> li.menu-item > a,
|
|
h6.page-group-title {
|
|
@apply font-bold mb-2 block;
|
|
}
|
|
h6.page-group-title {
|
|
cursor: not-allowed;
|
|
/* order: 1; */
|
|
}
|
|
|
|
.sub-menu li {
|
|
@apply block my-1;
|
|
}
|
|
|
|
.wpml-ls-menu-item {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
|
|
.menu-homegrade--sitemap {
|
|
@apply grid sm:grid-cols-2 md:grid-cols-4 gap-y-8 mt-8;
|
|
a {
|
|
@apply !text-neutral-900;
|
|
font-weight: unset;
|
|
}
|
|
li:before {
|
|
@apply hidden;
|
|
content: none !important;
|
|
}
|
|
li.menu-item a {
|
|
@apply hover:text-secondary;
|
|
text-decoration: none;
|
|
}
|
|
|
|
> li.menu-item > a,
|
|
h6.page-group-title {
|
|
@apply font-bold mb-2 block;
|
|
}
|
|
h6.page-group-title {
|
|
cursor: not-allowed;
|
|
/* order: 1; */
|
|
}
|
|
|
|
.sub-menu li {
|
|
@apply block my-1;
|
|
a {
|
|
@apply font-normal;
|
|
}
|
|
}
|
|
li {
|
|
padding-left: 0 !important;
|
|
}
|
|
|
|
.wpml-ls-menu-item {
|
|
@apply hidden;
|
|
}
|
|
}
|