Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FEATURE Amélioration des styles de survol et ajout de transitions pour les éléments du menu

Browse Source
This commit is contained in:
Antoine M 2026-01-30 10:17:15 +01:00
parent 9a6288420a
commit adda47b8ae
1 changed files with 38 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
resources/css/layout/nav/primary-menu.css
View File

@ -63,6 +63,7 @@
text-lg text-lg
text-center; text-center;
&:hover > button,
&:hover > a, &:hover > a,
a:focus { a:focus {
@apply cursor-pointer @apply cursor-pointer
@ -116,14 +117,16 @@
@apply w-7 h-7 object-contain object-center; @apply w-7 h-7 object-contain object-center;
transition: transform 0.3s ease-out; transition: transform 0.3s ease-out;
} }
&:hover .page_icon {
&:hover > button > .page_icon,
&:hover > a > .page_icon {
transform: scale(1.2); transform: scale(1.2);
} }
} }
li.menu-item.menu-item-has-children:hover { li.menu-item.menu-item-has-children:hover {
&:hover .page_icon { /* &:hover .page_icon {
transform: none; transform: none;
} } */
@screen lg { @screen lg {
.menu-item-submenu-toggle:after { .menu-item-submenu-toggle:after {
transform: rotate(180deg); transform: rotate(180deg);
@ -167,29 +170,58 @@
translate: 0 -30px; translate: 0 -30px;
} }
} }
li.current-menu-item {
a {
@apply no-underline;
.menu-item__title {
@apply !underline underline-offset-8 decoration-1 decoration-secondary;
}
}
}
li { li {
@apply lg:text-left; @apply max-w-3xl w-full lg:text-left;
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
&:nth-last-child(-n + 2), &:nth-last-child(-n + 2),
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
@apply max-w-3xl w-full;
&:nth-child(odd) { &:nth-child(odd) {
@apply ml-auto; @apply ml-auto;
} }
.page_subtitle {
@apply opacity-80 font-light mt-1;
}
&.menu-item.has-page-icon a { &.menu-item.has-page-icon a {
@apply flex gap-4 items-center justify-start flex-row p-6 py-8; @apply flex gap-6 items-center justify-start flex-row p-6 py-8;
.page_icon { .page_icon {
@apply w-12 h-12; @apply w-12 h-12;
} }
} }
.menu-item__content-inner {
transition: all 0.3s ease-out;
span {
@apply block;
}
}
&:hover { &:hover {
@apply bg-black/10; @apply bg-black/10;
a { a {
@apply gap-12; @apply gap-12;
.page_icon {
transform: none !important;
}
@apply no-underline;
.menu-item__content-inner {
transform: translateX(4px);
}
.menu-item__title {
@apply !underline;
}
} }
} }
} }