@foeewni/web-core 3.0.0-alpha.14 → 3.0.0-alpha.16

package/src/components/hero-panel/style.scss

@@ -289,6 +289,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 
       &[data-jaunt-factor] {
         border: none;
+        border-color: $foe-primary;
         padding: $spacer;
 
         &::before {

package/src/components/layout/backgrounds.scss

@@ -31,7 +31,8 @@
   }
 }
 
-.bg-primary {
+.bg-primary,
+.bg-secondary {
   background-color: $foe-leaf-75 !important;
 
   @include heading_colours($foe-extradark, $foe-extradark);
@@ -83,3 +84,21 @@
     @include button-outline-variant($foe-offwhite);
   }
 }
+
+.bg-light,
+.bg-white {
+  background-color: $foe-offwhite !important;
+
+  @include heading_colours($foe-accent, $foe-accent);
+  @include text_colours($foe-accent, $foe-accent);
+
+  .btn-primary,
+  .foe-cta {
+    @include button-variant($foe-accent, $foe-accent);
+  }
+
+  .btn-outline-primary,
+  .btn-secondary {
+    @include button-outline-variant($foe-accent);
+  }
+}

package/src/components/navigation/_header.scss

@@ -13,15 +13,22 @@
   padding: 0;
   z-index: $zindex-navbar !important;
   background-color: $foe-leaf-75;
+  color: $foe-extradark;
   transition:
     background-color $foe-transition-duration-base $foe-transition-easing,
     background-position $foe-transition-duration-base $foe-transition-easing,
     box-shadow $foe-transition-duration-base $foe-transition-easing,
     padding $foe-transition-duration-base $foe-transition-easing;
 
+  .navbar-toggler {
+    .icon-close,
+    .icon-bar {
+      background-color: $foe-extradark;
+    }
+  }
+
   &.js-menustack {
     position: fixed;
-    color: $foe-offwhite;
     z-index: $zindex-navbar + 10 !important;
 
     // Scrolled state
@@ -62,13 +69,6 @@
     right: 0;
   }
 
-  @include media-breakpoint-down(md) {
-    padding-left: calc($grid-gutter-width / 2) !important;
-    padding-right: calc($grid-gutter-width / 2) !important;
-    // #13294 Fixing the mobile navigation (with overflow:hidden the mobile search does not display below the navigation)
-    // overflow: hidden;
-  }
-
   // Scrolled state
   &.js-menustack-stuck {
     padding: 0;
@@ -77,5 +77,26 @@
     body.foe-page-has-campaign-nav & {
       box-shadow: none;
     }
+
+    @include media-breakpoint-up(lg) {
+      .foe-nav-cta a {
+        @include margin-vertical-align($foe-nav-height-large-scrolled, $foe-nav-cta-height-large);
+      }
+
+      ul.navbar-nav > li > a {
+        line-height: $foe-nav-height-large-scrolled;
+      }
+    }
+  }
+
+  .skip-link:focus-within + * &.js-menustack {
+    top: 1.5rem;
+  }
+
+  @include media-breakpoint-down(md) {
+    padding-left: calc($grid-gutter-width / 2) !important;
+    padding-right: calc($grid-gutter-width / 2) !important;
+    // #13294 Fixing the mobile navigation (with overflow:hidden the mobile search does not display below the navigation)
+    // overflow: hidden;
   }
 }

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

@@ -17,10 +17,22 @@
     visibility 0s $foe-transition-easing $foe-transition-duration-base,
     opacity $foe-transition-duration-base $foe-transition-easing;
 
+  @include media-breakpoint-up(lg) { // Megamenus are only applicable on larger viewports.  They appear as a list on smaller screens
+    display: block;
+    padding-top: $foe-submenu-margin;
+    padding-bottom: $foe-submenu-margin;
+  }
+
   @include media-breakpoint-up(md) { // Megamenus are only applicable on larger viewports.
     display: block;
   }
 
+    > .container {
+      @include media-breakpoint-up(md) {
+        justify-content: flex-end;
+      }
+    }
+
   &.megamenu-search { // Allow the search "megamenu" to persist at smaller breakpoints
     @include media-breakpoint-up(sm) {
       display: block;
@@ -40,6 +52,10 @@
 
   > .container > .row {
     width: 100%;
+
+    @include media-breakpoint-up(md) {
+      justify-content: flex-end;
+    }
   }
 }
 
@@ -181,3 +197,76 @@
     }
   }
 }
+
+ul.navbar-nav.menu-main {
+  .foe-mega-menu {
+    .submenu-block {
+      ul.sub-megamenu-first {
+        column-gap: 0;
+        overflow: hidden;
+        height: auto; /* $foe-submenu-tile-height; */
+        display: flex;
+        flex-direction: column;
+        list-style: none;
+        padding-left: .5rem;
+        padding-bottom: .5rem;
+
+        @include media-breakpoint-up(lg) {
+          align-items: end;
+        }
+
+        > li {
+          &.sub-item {
+            width: 100%;
+            padding: .125rem;
+          }
+
+          > span {
+            line-height: calc($foe-submenu-tile-height / 4);
+            font-weight: 500;
+            color: $foe-gray;
+          }
+
+          > a {
+            line-height: calc($foe-submenu-tile-height / 4 - 0.4rem);
+            font-weight: 600;
+            color: $foe-extradark;
+            transition: color 400ms ease-in-out;
+
+            @include media-breakpoint-up(md) {
+              padding-right: 0;
+            }
+
+            &:hover {
+              color: $foe-extradark;
+              box-shadow: none;
+            }
+          }
+
+          ul.sub-megamenu-below {
+            padding-left: 0;
+            display: flex;
+            flex-direction: column;
+
+            @include media-breakpoint-down(md) {
+              display: none;
+            }
+
+            li.sub-item {
+              a {
+                color: $foe-text;
+                font-weight: 500;
+                line-height: 1.8rem;
+
+                &:hover {
+                  color: $foe-extradark;
+                  box-shadow: none;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/navigation/_nav-items.scss

@@ -38,11 +38,6 @@
         display: block;
         color: $foe-extradark;
         text-decoration: none;
-        box-shadow: inset 0 0 0 0 $foe-accent;
-        transition:
-          color $foe-transition-duration-base ease-in-out,
-          box-shadow $foe-transition-duration-base ease-in-out;
-        // transition: line-height $foe-transition-duration-base $foe-transition-easing, color $foe-transition-duration-base $foe-transition-easing;
 
         @include media-breakpoint-up(lg) {
           padding: 0 18px;
@@ -58,7 +53,6 @@
 
         &:hover {
           color: $foe-offwhite;
-          box-shadow: inset 10rem 0 0 0 $foe-accent;
           text-decoration: none;
         }
       }
@@ -90,16 +84,110 @@
         }
       }
     }
-  }
 
-  @include media-breakpoint-up(lg) {
-    &.js-menustack-stuck {
-      .foe-nav-cta a {
-        @include margin-vertical-align($foe-nav-height-large-scrolled, $foe-nav-cta-height-large);
+    > li {
+      > a {
+        background: linear-gradient(90deg, $foe-accent 0%, $foe-accent 50%, transparent 50%, transparent 100%);
+        background-size: 200% 100%;
+        background-position: 101% 50%;
+        background-repeat: no-repeat;
+        transition:
+          color $foe-transition-duration-base ease-in-out,
+          background-position $foe-transition-duration-base ease-in-out;
+
+        &:hover {
+          background-position: 0% 50%;
+        }
+      }
+    }
+
+    &.menu-main {
+      display: block;
+      width: auto;
+      float: right;
+      padding: 0;
+      line-height: 4rem;
+
+      @include media-breakpoint-down(md) {
+        width: 100%;
+        overflow: hidden;
+        // #13294 this should be covered by the styles on web-core 3.0.0
+        transition: max-height $foe-transition-duration-base*2 $foe-transition-easing;
       }
 
-      ul.navbar-nav > li > a {
-        line-height: $foe-nav-height-large-scrolled;
+      li.foe-has-megamenu {
+        &:focus-within,
+        &:hover {
+          .foe-megamenu-container {
+            display: block;
+          }
+
+          a + .open-megamenu {
+            &::after {
+              transform: rotate(45deg);
+              -webkit-transform: rotate(45deg);
+            }
+          }
+        }
+
+        div.foe-megamenu-container {
+          &.collapsed {
+            display: none;
+          }
+
+          &.un-collapsed {
+            opacity: 1;
+            visibility: visible;
+            display: block;
+          }
+        }
+
+        @include media-breakpoint-down(md) {
+          a {
+            display: inline-block;
+
+            &.is-active {
+              &::after {
+                transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+              }
+            }
+
+            & + .open-megamenu {
+              padding: 1rem;
+
+              &::after {
+                position: relative;
+                content: '';
+                opacity: 1;
+                border: solid $foe-extradark;
+                border-width: 0 3px 3px 0;
+                display: inline-block;
+                padding: 3px;
+                transform: rotate(-45deg);
+                -webkit-transform: rotate(-45deg);
+                margin-left: .5rem;
+                left: 0;
+                bottom: .05rem;
+              }
+            }
+          }
+          
+          div.foe-megamenu-container { /* just for mobile menu */
+            position: relative;
+            background-color: transparent;
+            box-shadow: none;
+
+            li.foe-has-megamenu {
+              &:focus-within,
+              &:hover {
+                .foe-megamenu-container {
+                  display: block;
+                }
+              }
+            }
+          }
+        }
       }
     }
   }

package/src/components/tools/jaunty.js

@@ -151,10 +151,10 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
       // modify the direction of jiggle based on modifications
       switch (mod) {
         case JIGGLE_LEFT:
-          xRandom *= -2;
+          xRandom *= -1;
           break;
         case JIGGLE_RIGHT:
-          xRandom *= 2;
+          xRandom *= 1;
           break;
         default:
           // modify the corners less
@@ -163,10 +163,10 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
       }
       switch (mod) {
         case JIGGLE_UP:
-          yRandom *= -2;
+          yRandom *= -1;
           break;
         case JIGGLE_DOWN:
-          yRandom *= 2;
+          yRandom *= 1;
           break;
         default:
           // modify the corners less
@@ -310,12 +310,12 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
   };
 
   // The main event
-  const createBackground = (action = null) => {
+  const createBackground = (action = null, context = document) => {
     oneRemInPx = parseFloat(
       getComputedStyle(document.documentElement).fontSize
     );
 
-    const targets = document.querySelectorAll('[data-jaunt-factor]');
+    const targets = context.querySelectorAll('[data-jaunt-factor]');
 
     // Insert some jaunt
     targets.forEach((target) => {
@@ -335,9 +335,9 @@ https://www.bennadel.com/blog/4310-detecting-rendered-line-breaks-in-a-text-node
     root: document.documentElement,
   });
 
-  const init = () => {
-    const targets = document.querySelectorAll('[data-jaunt-factor]');
-    createBackground('init');
+  const init = (context = document) => {
+    const targets = context.querySelectorAll('[data-jaunt-factor]');
+    createBackground('init', context);
     targets.forEach((target) => {
       [
         'blur',