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:50:48 +01:00
parent 5f065dc16d
commit 08734440fb
1 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
resources/css/layout/menu-homegrade.css
View File

@ -7,7 +7,7 @@
relative relative
w-full w-full
h-fit h-fit
py-4 py-2
px-4 px-4
md:px-0 md:px-0
xl:px-8 xl:px-8
@ -18,12 +18,15 @@
.sub-menu[open] { .sub-menu[open] {
display: block; display: block;
} }
.sub-menu { .sub-menu {
@apply bg-primary @apply bg-primary
p-6 p-6
mx-auto mx-auto
lg:mx-0 lg:mx-0
static static
/* left-0
w-full */
bottom-0 bottom-0
lg:translate-y-full lg:translate-y-full
xl:absolute; xl:absolute;
@ -82,13 +85,13 @@
py-2; py-2;
} }
&:hover:not(.wpml-ls-item), &:hover:not(.wpml-ls-item),
button:focus, button:focus-visible,
a:focus { a:focus-visible {
@apply cursor-pointer; @apply cursor-pointer;
background-color: rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.1);
} }
button:focus, button:focus-visible,
a:focus:not(.wpml-ls-item) { a:focus-visible:not(.wpml-ls-item) {
@apply rounded-md; @apply rounded-md;
text-decoration: none; text-decoration: none;
outline: 1px solid rgba(255, 255, 255, 0.8); outline: 1px solid rgba(255, 255, 255, 0.8);
@ -101,24 +104,25 @@
&:focus { &:focus {
/* @apply text-secondary; */ /* @apply text-secondary; */
} }
@apply relative pr-4; /* @apply relative pr-4; */
@apply pr-4;
&:after { &:after {
content: ''; content: '';
display: inline-block; display: inline-block;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
border-bottom: 2px solid white; border-bottom: 2px solid white;
border-right: 2px solid white; border-right: 2px solid white;
height: 10px; height: 8px;
width: 10px; width: 8px;
margin-left: 10px; margin-left: 10px;
} }
} }
.menu-item__submenu-toggle[aria-expanded='false']:after { .menu-item__submenu-toggle[aria-expanded='false']:after {
transform: translateY(-20%) rotate(45deg); transform: translateY(-30%) rotate(45deg);
} }
.menu-item__submenu-toggle[aria-expanded='true']:after { .menu-item__submenu-toggle[aria-expanded='true']:after {
/* transform: rotate(225deg); */ /* transform: rotate(225deg); */
transform: translateY(40%) rotate(225deg); transform: translateY(20%) rotate(225deg);
} }
} }
} }
@ -195,13 +199,15 @@
a { a {
@apply !rounded-full h-10 w-10 border-2 border-white p-0 !flex justify-center items-center font-semibold text-sm; @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; box-sizing: border-box;
outline-offset: 5px !important;
outline-width: 2px !important;
} }
} }
.wpml-ls-current-language { .wpml-ls-current-language {
a { a {
@apply bg-white text-primary font-bold; @apply bg-white text-primary font-bold;
} }
a:focus { a:focus-visible {
@apply !bg-white text-primary font-bold; @apply !bg-white text-primary font-bold;
} }
} }