KAW-7904 Improve header css'es

Netcentric · Sep 12, 2024 · 51af69c · 51af69c
1 parent 697ba8c
commit 51af69c
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 7 deletions.
diff --git a/blocks/header/header.css b/blocks/header/header.css
@@ -3,6 +3,7 @@ header .nav-wrapper {
   width: 100%;
   z-index: var(--z-index-header);
   position: fixed;
+  color: var(--grey-90);
 }
 
 header nav {
@@ -12,6 +13,7 @@ header nav {
   padding: 20px;
   max-width: 1240px;
   margin: auto;
+  background-color: var(--white);
 }
 
 header nav p {
@@ -62,13 +64,23 @@ header .nav-dealer-locator a.button {
   gap: 8px;
   border-radius: 26px;
   background: var(--white);
-  color: var(--black);
   text-align: center;
   font-size: 0.75rem;
   font-style: normal;
   font-weight: 600;
   line-height: 150%;
   letter-spacing: 0.44px;
+  border: solid 1px var(--action-default);
+}
+
+header .nav-dealer-locator a.button:hover {
+  border-color: var(--action-hover);
+  color: var(--action-hover);
+}
+
+header .nav-dealer-locator a.button:focus {
+  border-color: var(--action-focus);
+  color: var(--action-focus);
 }
 
 header .nav-drop picture {
@@ -177,6 +189,10 @@ header .nav-hamburger button {
   cursor: pointer;
 }
 
+header .nav-hamburger button svg {
+  color: var(--grey-90);
+}
+
 /* nav-drop */
 header .nav-drop {
   position: relative;
@@ -210,6 +226,40 @@ header .nav-backdrop.hide {
   display: none;
 }
 
+header.transparent nav {
+  background-color: transparent;
+  color: var(--white);
+}
+
+header.transparent a:any-link {
+  color: var(--white);
+}
+
+header.transparent .nav-hamburger svg {
+  color: var(--white);
+}
+
+header.transparent .nav-dealer-locator a.button {
+  background-color: var(--white);
+  border-color: transparent;
+  color: var(--black);
+}
+
+header.transparent .nav-dealer-locator a.button:hover {
+  border-color: var(--action-hover);
+  color: var(--action-hover);
+}
+
+header.transparent .nav-dealer-locator a.button:focus {
+  border-color: var(--action-focus);
+  color: var(--action-focus);
+}
+
+header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link,
+header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text {
+  color: var(--grey-90);
+}
+
 @media (width >= 768px) {
   header nav {
     padding: 20px 30px 16px 24px;
@@ -340,7 +390,7 @@ header .nav-backdrop.hide {
   }
 
   header .nav-drop[aria-expanded="true"]::after {
-    content: '';
+    content: "";
     display: block;
     width: 100vw;
     height: calc(100vh - var(--nav-height));
@@ -351,9 +401,26 @@ header .nav-backdrop.hide {
     z-index: -1;
     cursor: auto;
   }
+
+  header.transparent nav[aria-expanded="true"] .nav-link-section a:any-link,
+  header.transparent nav[aria-expanded="true"] .nav-link-section a.nav-drop-text {
+    color: var(--white);
+  }
+
+  header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:any-link {
+    color: var(--grey-90);
+  }
+
+  header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:focus {
+    color: var(--action-focus);
+  }
+
+  header.transparent nav[aria-expanded="true"] .nav-link-section .nav-drop a:hover {
+    color: var(--action-hover);
+  }
 }
 
-@media (width >= 1024px) {
+@media (width >= 1440px) {
   header nav {
     padding-left: 0;
     padding-right: 0;
@@ -363,4 +430,4 @@ header .nav-backdrop.hide {
     padding-left: calc((100vw - 1240px) / 2);
     padding-right: calc((100vw - 1240px) / 2);
   }
-}
+}
diff --git a/blocks/header/header.js b/blocks/header/header.js
@@ -5,9 +5,9 @@ import { loadFragment } from '../fragment/fragment.js';
 const isDesktop = window.matchMedia('(min-width: 1024px)');
 
 const hamburgerIcon = `
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <g clip-path="url(#clip0_2319_4806)">
-      <path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="white"/>
+      <path d="M4 18H20C20.55 18 21 17.55 21 17C21 16.45 20.55 16 20 16H4C3.45 16 3 16.45 3 17C3 17.55 3.45 18 4 18ZM4 13H20C20.55 13 21 12.55 21 12C21 11.45 20.55 11 20 11H4C3.45 11 3 11.45 3 12C3 12.55 3.45 13 4 13ZM3 7C3 7.55 3.45 8 4 8H20C20.55 8 21 7.55 21 7C21 6.45 20.55 6 20 6H4C3.45 6 3 6.45 3 7Z" fill="currentColor"/>
     </g>
     <defs>
       <clipPath id="clip0_2319_4806">
@@ -202,7 +202,7 @@ export default async function decorate(block) {
       }
 
       navSection.addEventListener('click', (event) => {
-        if (event.target.classList.contains('nav-drop-text')) {
+        if (event.target.classList.contains('nav-drop-text') || event.target.closest('.nav-drop-text')) {
           toggleSubNav(navSection, navSections);
         }
       });