diff --git a/resources/css/layout/menu-homegrade.css b/resources/css/layout/menu-homegrade.css index c8e427d..5d1a045 100644 --- a/resources/css/layout/menu-homegrade.css +++ b/resources/css/layout/menu-homegrade.css @@ -7,7 +7,7 @@ relative w-full h-fit - py-4 + py-2 px-4 md:px-0 xl:px-8 @@ -18,12 +18,15 @@ .sub-menu[open] { display: block; } + .sub-menu { @apply bg-primary p-6 mx-auto lg:mx-0 static + /* left-0 + w-full */ bottom-0 lg:translate-y-full xl:absolute; @@ -82,13 +85,13 @@ py-2; } &:hover:not(.wpml-ls-item), - button:focus, - a:focus { + button:focus-visible, + a:focus-visible { @apply cursor-pointer; background-color: rgba(255, 255, 255, 0.1); } - button:focus, - a:focus:not(.wpml-ls-item) { + 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); @@ -101,24 +104,25 @@ &:focus { /* @apply text-secondary; */ } - @apply relative pr-4; + /* @apply relative pr-4; */ + @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: 10px; - width: 10px; + height: 8px; + width: 8px; margin-left: 10px; } } .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 { /* transform: rotate(225deg); */ - transform: translateY(40%) rotate(225deg); + transform: translateY(20%) rotate(225deg); } } } @@ -195,13 +199,15 @@ 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; } } .wpml-ls-current-language { a { @apply bg-white text-primary font-bold; } - a:focus { + a:focus-visible { @apply !bg-white text-primary font-bold; } }