Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

few menu adaptations

Browse Source
This commit is contained in:
Antoine M 2024-01-10 16:51:12 +01:00
parent db56761e18
commit 63e880ef85
1 changed files with 72 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
resources/css/layout/menu-renovateur.css
View File

@ -1,5 +1,5 @@
.menu-renovateur { .menu-renovateur {
@apply py-8 @apply py-4
px-4 px-4
sm:px-8 sm:px-8
md:px-16 md:px-16
@ -40,37 +40,61 @@
&__navlist { &__navlist {
@apply lg:flex @apply lg:flex
justify-center justify-center
relative; /* relative */;
> .menu-item { > .menu-item {
&:hover > a, &:hover > a,
&:hover > button, &:hover > button,
> a:focus, > a:focus,
> button:focus { > button:focus {
@apply text-secondary bg-gray; @apply bg-gray;
} }
@apply text-black @apply text-black
lg:relative /* lg:relative */
font-bold; font-bold;
} }
/* Generic Submenu Item */ /* Generic Submenu Item */
.sub-menu { .sub-menu {
@apply fixed @apply fixed
bg-white
z-50 z-50
top-0 top-0
left-0
min-h-screen min-h-screen
w-full w-full
p-8 py-8
lg:absolute lg:absolute
lg:min-h-0 lg:min-h-0
lg:w-screen bottom-0
lg:max-w-3xl;
/* lg:w-screen
lg:max-w-3xl */
/* -bottom-2 */;
/* background: white; */
/* box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; */
/* left: 0; */
/* width: 100%; */
/* margin: 0 calc(50% - 50vw); */
isolation: isolate;
&:after {
content: '';
transform: translateX(-50%);
@apply bg-white w-screen h-full shadowed-bottom absolute top-0 left-1/2 -z-10;
}
.sub-menu__navlist {
/* max-width: 1401px; */
@apply -translate-x-4;
align-self: center;
margin: 0 auto;
&__item a {
@apply px-4 py-3 rounded-xl hover:bg-gray;
}
}
@screen lg { @screen lg {
bottom: -31px;
transform: translateY(100%); transform: translateY(100%);
top: unset; top: unset;
} }
@ -83,16 +107,17 @@
} }
} }
/* Conseils — Thamtiques Submenu Item */ /* Conseils — Thematiques Submenu Item */
li#menu-item-168 { li#menu-item-168 {
.sub-menu__navlist { .sub-menu__navlist {
@apply grid md:grid-cols-2 gap-4; @apply grid md:grid-cols-2;
&__item a { &__item a {
@apply flex gap-4; @apply flex gap-4 py-2;
} }
&__thematique-icon { &__thematique-icon {
max-width: 80px; max-width: 60px;
} }
&__description { &__description {
@apply text-sm font-normal; @apply text-sm font-normal;
@ -107,7 +132,23 @@
} }
.sub-menu__navlist { .sub-menu__navlist {
@apply flex gap-5; @apply grid md:grid-cols-2 gap-5;
li {
@apply !no-underline;
/* text-decoration: none !important;
text-decoration-line: none !important; */
}
a {
@apply block w-full !no-underline;
.title {
@apply font-bold text-lg pb-1;
}
.excerpt {
@apply text-base font-normal;
line-height: 1.3;
}
}
li { li {
@apply underline underline-offset-4; @apply underline underline-offset-4;
} }
@ -120,20 +161,33 @@
} }
&__submenu-title { &__submenu-title {
@apply pb-4 mb-4 border-b border-gray-dark; @apply pb-4 mb-4 border-b border-neutral-300;
} }
&__submenu-toggle, &__submenu-toggle,
> a { > a {
@apply p-6 rounded-3xl @apply p-6 rounded-3xl
flex flex
/* justify-center */
items-center; items-center;
} }
&__submenu-toggle { &__submenu-toggle {
@apply text-left; @apply text-left;
} }
&__submenu-toggle:after {
transition: transform 0.3s ease-in-out;
content: '';
@apply ml-4 inline-block;
background-image: url('../resources/img/graphic-assets/chevron_down_red.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 13px;
height: 13px;
}
&__submenu-toggle[aria-expanded='true']:after {
transform: rotate(180deg);
}
&__submenu-close { &__submenu-close {
@apply absolute text-right top-8 right-8 w-fit h-auto rounded-full outline-offset-4; @apply absolute text-right top-8 right-0 w-fit h-auto rounded-full outline-offset-4;
width: fit-content; width: fit-content;
padding: 0; padding: 0;
} }