ADAPT-1347: Refine mega menu (#119)

src/scss/components/identity/_local-footer.scss

@@ -54,7 +54,7 @@
 
     > li {
       &:not(:last-child) {
-        @include margin(null null 0.4em);
+        @include margin(null null 1rem);
       }
     }
 

src/scss/components/identity/_local-header.scss

@@ -21,11 +21,12 @@
     justify-content: space-between;
 
     @include grid-media-max('sm') {
-      @include padding(get-responsive-spacing-value(0, 'mobile') null);
+      @include padding(get-responsive-spacing-value(0, 'mobile') null null);
     }
 
     @include grid-media-only('md') {
-      @include padding(get-responsive-spacing-value(1, 'tablet') null get-responsive-spacing-value(2, 'tablet'));
+      @include padding(get-responsive-spacing-value(1, 'tablet') null null);
+      align-items: flex-start;
     }
 
     @include grid-media('lg') {
@@ -65,8 +66,10 @@
       &__line1 {
         @include margin(0 null null 0);
         @include padding(null null null 0.4rem);
+        position: relative;
+        top: 0.1rem;
         font-size: 2.2rem;
-        line-height: 1.8rem;
+        line-height: 1.6rem;
       }
     }
 

src/scss/components/navigation/mega-menu/_mega-menu-lv1.scss

@@ -57,6 +57,26 @@
         }
       }
 
+      @include grid-media-max('md') {
+        @include fancy-hover($su-color-digital-red, $su-color-black, 'left', '6px');
+
+        &:hover,
+        &:focus,
+        &:active {
+          text-decoration: underline;
+        }
+      }
+
+      &::before {
+        @include grid-media-max('sm') {
+          left: 0.1rem;
+        }
+
+        @include grid-media-only('md') {
+          left: 2rem;
+        }
+      }
+
       @include grid-media('lg') {
         @include fancy-hover($su-color-digital-red, $su-color-black, 'bottom', '10px');
         @include padding (1.6rem 0 null);
@@ -74,9 +94,9 @@
       }
     }
 
-    // Add icon after 1st level links on mobile
     > a {
       @include grid-media-max('md') {
+        // Add icon after 1st level links on mobile
         @include link-icon(caret-right, 10px, right, 0.06em);
 
         &::after {
@@ -89,6 +109,22 @@
             background-color: $su-color-digital-red;
           }
         }
+
+        // Level 1 current link style - thick border on the left
+        &.ood-mega-nav__link--active {
+          &::before {
+            visibility: visible;
+            transform: scaleY(1);
+            background-color: $su-color-black;
+          }
+
+          &:hover,
+          &:focus {
+            &::before {
+              background-color: $su-color-digital-red;
+            }
+          }
+        }
       }
     }
 
@@ -162,7 +198,7 @@
   }
 
   @include grid-media-only('md') {
-    top: 140px; // Height of the local header for MD
+    top: 134px; // Height of the local header for MD minus the top border
   }
 
   @include grid-media-max('md') {

src/scss/components/navigation/mega-menu/_mega-menu-toggle.scss

@@ -3,22 +3,24 @@
 // Mobile/tablet hamburger button
 
 .ood-mega-nav__toggle {
+  @include margin(0);
+  @include padding(0);
+  display: none;
   border: 0;
   cursor: pointer;
+  outline: none;
+  width: 4rem;
+  background-color: transparent;
+  color: $su-color-digital-red;
+  font-size: 1.6rem;
+  font-weight: $su-font-semi-bold;
+  line-height: 0.7;
 
   @include grid-media-max('md') {
-    @include margin(0);
-    @include padding(0);
+    @include fancy-hover($color: $su-color-digital-red, $active: $su-color-black, $position: 'bottom', $thickness: '6px');
     display: flex;
     flex-direction: column;
     align-items: center;
-    outline: none;
-    width: auto;
-    background-color: transparent;
-    color: $su-color-digital-red;
-    font-size: 1.6rem;
-    font-weight: $su-font-semi-bold;
-    line-height: 0.7;
 
     // FontAwesome icon
     > i {
@@ -30,29 +32,34 @@
       &::before {
         visibility: visible;
         transform: scaleX(1);
-        background-color: color(h-border--expanded, $su-nav-colors);
+        background-color: $su-color-digital-red;
       }
 
-      &:hover::before {
-        background-color: color(h-border--hover, $su-nav-colors);
-      }
-
-      &:active::before {
-        background-color: color(h-border--active, $su-nav-colors);
+      &:hover,
+      &:focus {
+        &::before {
+          background-color: $su-color-black;
+        }
       }
     }
 
     &:hover,
     &:active,
     &:focus {
-      background-color: transparent;
-      color: color(h-link, $su-nav-colors);
-      box-shadow: none;
+      color: $su-color-black;
     }
   }
 
+  @include grid-media-max('sm') {
+    @include padding(null null 1.5rem); // Overriding fancy-hover padding
+  }
+
   @include grid-media-only('md') {
-    position: relative;
-    top: 0.6rem;
+    @include padding(null null 2.5rem); // Overriding fancy-hover padding
+    line-height: 1;
+
+    &::before {
+      height: 10px;
+    }
   }
 }

src/scss/components/navigation/mega-menu/_mega-menu.scss

@@ -92,7 +92,6 @@
       transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
 
       &[aria-hidden="false"] {
-        //position: relative;
         display: flex;
         height: auto;
         opacity: 1;
@@ -138,6 +137,12 @@
         font-size: 2rem;
       }
     }
+
+    @include grid-media-max('sm') {
+      > div {
+        @include padding(get-responsive-spacing-value(2, 'mobile') null null);
+      }
+    }
   }
 
   &__link-group {
@@ -161,3 +166,16 @@
     }
   }
 }
+
+@include grid-media-max('sm') {
+  .ood-mega-nav__section-links {
+    .ood-mega-nav__link-group {
+      &:first-child {
+        .ood-mega-nav__link-group-heading {
+          @include padding(0 null null);
+          border-top: 0;
+        }
+      }
+    }
+  }
+}