@foeewni/web-core 3.0.0-alpha.2 → 3.0.0-alpha.20

package/src/components/form/buttons.scss

@@ -48,6 +48,30 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/button-group';
 
+/*******************************
+* overwrites for legacy use of button styles
+* .foe-cta is an old class that should be phased out
+*   (based on the comment on theme/src/sass/ckeditor-overrides.scss "Subtle highlight for old-style (incorrect) CTA buttons")
+* .foe-secondary is based on a colour option but styling for secondary buttons seems to be exclusively outline ao to meet accessibility
+*   requirements it was more straight forward to just retarget those.
+*******************************/
+
+.btn-block {
+  max-width: fit-content;
+  margin: 0 auto;
+}
+
+.btn-lg {
+  width: 100%;
+}
+
+.btn {
+  &:focus {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+  }
+}
+
 @include media-breakpoint-down(sm) {
   .btn {
     font-size: .8rem;
@@ -59,6 +83,38 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
   }
 }
 
+.foe-cta {
+  @extend .btn;
+}
+
+.btn-primary,
+.foe-cta {
+  @include button-variant($foe-iris, $foe-iris);
+}
+
+.btn-outline-primary,
+.btn-secondary {
+  @include button-outline-variant($foe-iris);
+}
+
+.btn-secondary {
+  background-color: transparent;
+}
+
+.btn-accent {
+  @include button-variant($foe-leaf, $foe-leaf);
+}
+
+.btn-outline-accent {
+  @include button-outline-variant($foe-leaf);
+}
+
+.btn-sunset {
+  @include button-variant($foe-sunset, $foe-sunset);
+
+  color: $foe-extradark;
+}
+
 .btn-donate {
   color: $foe-donate-text;
 

package/src/components/form/inputs.scss

@@ -149,6 +149,12 @@ input {
 
     &:not(.form-control-sm):not(.form-control-lg) {
       @extend .form-control;
+
+      &:focus,
+      &.focus {
+        outline: $foe-element-default-outline;
+        outline-offset: $foe-element-default-outline-offset;
+      }
     }
   }
 }
@@ -158,6 +164,12 @@ select {
 
   &:not(.form-control-sm):not(.form-control-lg) {
     @extend .form-control;
+
+    &:focus,
+    &.focus {
+      outline: $foe-element-default-outline;
+      outline-offset: $foe-element-default-outline-offset;
+    }
   }
 }
 
@@ -165,6 +177,12 @@ textarea {
   @extend .form-control;
 
   margin-bottom: $spacer;
+
+  &:focus,
+  &.focus {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+  }
 }
 
 %checkradio-label {
@@ -254,10 +272,21 @@ textarea {
 // Stylelint goes nuts on + selectors like this
 /* stylelint-disable no-descending-specificity */
 input[type=checkbox] {
-  display: none;
+  // display: none; //this wasn't accessible by tabbing so changing for the below
+  // using advice from https://stackoverflow.com/questions/51207650/how-to-use-keyboard-tab-on-hidden-radio-buttons
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
 
   + label {
     @extend %checkradio-label;
+
+    &:focus,
+    &.focus {
+      outline: $foe-element-default-outline;
+      outline-offset: $foe-element-default-outline-offset;
+      box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+    }
   }
 
   + label::before {
@@ -279,10 +308,18 @@ input[type=checkbox] {
   &:checked:disabled + label::before {
     @extend %checkradio-picker-checked-disabled;
   }
+
+  &:focus + label {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+    box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+  }
 }
 
 input[type=radio] {
-  display: none;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
 
   + label {
     @extend %checkradio-label;
@@ -307,6 +344,12 @@ input[type=radio] {
   &:checked:disabled + label::before {
     @extend %checkradio-picker-checked-disabled;
   }
+
+  &:focus + label {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+    box-shadow: 0 0 0 $foe-element-default-focus-width $foe-element-default-focus-color;
+  }
 }
 /* stylelint-enable no-descending-specificity */
 

package/src/components/go-top/index.js

@@ -21,7 +21,7 @@ import './style.scss';
     const $gotop = $(`
     <a id="foe-go-top" href="#foe-go-top-anchor" title="Return to the top of the page">
       <i class="fas fa-arrow-alt-circle-up"></i>
-      <span class="sr-only">Go to top</span>
+      <span class="sr-only" role="navigation">Go to top</span>
     </a>
     `);
 

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

@@ -156,6 +156,8 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   width: 100%;
   margin: 0;
   top: 0;
+  // #13287 the nav bar is now solid so the hero needs to be padded accordingly
+  padding-top: $foe-nav-height-small;
   background-color: $foe-extradark;
   overflow: hidden;
   // Vertically aligns everything.
@@ -177,21 +179,24 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: $foe-tint-overlay;
-  z-index: 1;
+  z-index: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
 
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  &.is-dimmed {
     background-color: $foe-tint-overlay;
-    z-index: 2;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background-color: $foe-tint-overlay;
+      z-index: 2;
+    }
   }
 
   // Fit and crop <img> or <video> elements to 100% x 100% of
@@ -213,6 +218,14 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
     min-width: 100%;
     min-height: 100%;
   }
+
+  &.is-fixed {
+    clip-path: inset(0);
+
+    img {
+      position: fixed;
+    }
+  }
 }
 
 .foe-hero-panel-buffer {
@@ -235,7 +248,8 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 .foe-hero-panel-heading {
   position: relative;
   z-index: 3;
-  padding-top: $foe-nav-height-small;
+  // #13287 see above the nav height moved to container padding so the text is aligned in the centre of the visible space
+  padding-top: $spacer;
   padding-bottom: $spacer;
 
   @include media-breakpoint-up(md) {
@@ -250,12 +264,45 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
     color: $foe-extradark;
 
     span {
-      background: $foe-offwhite;
-      padding: $spacer;
-      display: inline-block;
+      background: $foe-primary;
+      border: $foe-primary $spacer solid;
+      border-left: 0;
+      display: inline;
+      border-color: transparent;
+      line-height: 6rem;
+      white-space: pre-wrap;
+      position: relative;
+
+      @include media-breakpoint-down(md) {
+        line-height: 4rem;
+      }
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: -$spacer * .95;
+        right: 100%;
+        bottom: -$spacer * .95;
+        width: 1rem;
+        background-color: #61bdaa;
+      }
+
+      &[data-jaunt-factor] {
+        border: none;
+        border-color: $foe-primary;
+        padding: $spacer;
+
+        &::before {
+          display: none;
+        }
+      }
     }
   }
 
+  .btn {
+    @include font-size($h5-font-size);
+  }
+
   .foe-hero-cta-container {
     margin-top: $spacer;
 

package/src/components/layout/backgrounds.scss

@@ -1,3 +1,104 @@
+@import '../../utils/scss/loader';
+
 .fixed-background {
   background-attachment: fixed !important;
 }
+
+/*******************************
+ * Background tweaks according to
+ * Author options white/primary/dark/extradark are re-mapped to reflect the brand colours and prefered combinations
+ * bg-dark uses iris which is the accent colour
+ * bg-extradark has been replaced with sunset, it was decided to not use the space for a background colour so the inability
+ * to access this combination shouldn't be a problem and this will account for any other instances where author accessible
+ * theme colours are referenced in the code
+ * $foe-leaf-75 is used in some places to increase the number of accessible options available
+ * $foe-sunset-75 is used to stop those backgrounds being so intense
+ ******************************/
+
+
+.bg-accent {
+  @include heading_colours($foe-offwhite, $foe-secondary);
+  @include text_colours($foe-offwhite, $foe-secondary);
+
+  .btn-primary,
+  .foe-cta {
+    @include button-variant($foe-primary, $foe-primary);
+  }
+
+  .btn-outline-primary,
+  .btn-secondary {
+    @include button-outline-variant($foe-offwhite);
+  }
+}
+
+.bg-primary,
+.bg-secondary {
+  background-color: $foe-leaf-75 !important;
+
+  @include heading_colours($foe-extradark, $foe-extradark);
+  @include text_colours($foe-extradark, $foe-extradark);
+
+  .btn-outline-primary,
+  .btn-secondary {
+    @include button-outline-variant($foe-extradark);
+  }
+}
+
+.bg-offwhite {
+  @include heading_colours($foe-accent, $foe-accent);
+  @include text_colours($foe-accent, $foe-accent);
+}
+
+.bg-extradark,
+.bg-sunset {
+  background-color: $foe-sunset-75 !important;
+
+  @include heading_colours($foe-extradark, $foe-extradark);
+  @include text_colours($foe-extradark, $foe-extradark);
+
+  .btn-primary,
+  .foe-cta {
+    @include button-variant($foe-extradark, $foe-extradark);
+  }
+
+  .btn-outline-primary,
+  .btn-secondary {
+    @include button-outline-variant($foe-extradark);
+  }
+}
+
+.bg-dark,
+.bg-iris {
+  background-color: $foe-iris !important;
+
+  @include heading_colours($foe-offwhite, $foe-secondary);
+  @include text_colours($foe-offwhite, $foe-secondary);
+
+  .btn-primary,
+  .foe-cta {
+    @include button-variant($foe-leaf-75, $foe-leaf-75);
+  }
+
+  .btn-outline-primary,
+  .btn-secondary {
+    @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/layout/reset.scss

@@ -13,6 +13,24 @@ input {
   max-width: 100%;
 }
 
+cite {
+  font-style: normal;
+}
+
 .form-group {
   margin-bottom: 1rem;
+
+  .form-inline & {
+    margin-bottom: 0;
+  }
+}
+
+p a:not(.btn, .foe-cta) {
+  text-decoration: underline;
+  color: $foe-text;
+}
+
+.row > [class*="col-"] {
+  // reset the z-index on each column
+  z-index: 0;
 }

package/src/components/navigation/_header.scss

@@ -12,16 +12,23 @@
   top: 0;
   padding: 0;
   z-index: $zindex-navbar !important;
-  background-color: $foe-primary;
+  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
@@ -43,7 +50,7 @@
     // Scrolled state
     &.js-menustack-stuck {
       background-position-y: 100%;
-      background-color: $foe-primary;
+      background-color: $foe-leaf-75;
     }
   }
 
@@ -62,12 +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;
-    overflow: hidden;
-  }
-
   // Scrolled state
   &.js-menustack-stuck {
     padding: 0;
@@ -76,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 - .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;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}