@foeewni/web-core 3.0.0-alpha.0 → 3.0.0-alpha.10

package/src/components/form/buttons.scss

@@ -48,6 +48,26 @@ 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 {
+  &:focus {
+    outline: $foe-element-default-outline;
+    outline-offset: $foe-element-default-outline-offset;
+  }
+}
+
 @include media-breakpoint-down(sm) {
   .btn {
     font-size: .8rem;
@@ -58,3 +78,41 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
     white-space: normal;
   }
 }
+
+.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 {
+  color: $foe-extradark;
+}
+
+.btn-donate {
+  color: $foe-donate-text;
+
+  &:hover {
+    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) {
@@ -247,8 +261,18 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   }
 
   h1 {
-    color: $foe-offwhite;
-    text-shadow: $foe-text-shadow;
+    color: $foe-extradark;
+
+    span {
+      background: $foe-primary;
+      padding: $spacer;
+      display: inline-block;
+      border-color: transparent;
+    }
+  }
+
+  .btn {
+    @include font-size($h5-font-size);
   }
 
   .foe-hero-cta-container {

package/src/components/layout/backgrounds.scss

@@ -1,3 +1,85 @@
+@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 {
+  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);
+  }
+}

package/src/components/layout/reset.scss

@@ -13,6 +13,19 @@ 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;
 }

package/src/components/navigation/_header.scss

@@ -12,7 +12,7 @@
   top: 0;
   padding: 0;
   z-index: $zindex-navbar !important;
-  background-color: $foe-extradark;
+  background-color: $foe-leaf-75;
   transition:
     background-color $foe-transition-duration-base $foe-transition-easing,
     background-position $foe-transition-duration-base $foe-transition-easing,
@@ -35,15 +35,15 @@
   }
 
   &.foe-header-transparent-start {
-    background-color: rgba($foe-extradark, 0); // Tricks into a better transition from transparent using the theme colour
-    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba($foe-extradark, 0) 50%);
+    // background-color: rgba($foe-primary, 0); // Tricks into a better transition from transparent using the theme colour
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, .25), rgba($foe-primary, 0) 50%);
     background-size: 100% 200%;
     background-repeat: no-repeat;
 
     // Scrolled state
     &.js-menustack-stuck {
       background-position-y: 100%;
-      background-color: $foe-extradark;
+      background-color: $foe-leaf-75;
     }
   }
 
@@ -51,7 +51,7 @@
   // Not sure if it got removed at a certain point, so I do repurpose this for the nonjs version
   &::before {
     content: '';
-    background: $foe-extradark;
+    background: $foe-primary;
     position: absolute;
     display: block;
     z-index: -5; // Otherwise it clashes with the logo
@@ -65,7 +65,8 @@
   @include media-breakpoint-down(md) {
     padding-left: calc($grid-gutter-width / 2) !important;
     padding-right: calc($grid-gutter-width / 2) !important;
-    overflow: hidden;
+    // #13294 Fixing the mobile navigation (with overflow:hidden the mobile search does not display below the navigation)
+    // overflow: hidden;
   }
 
   // Scrolled state

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

@@ -5,7 +5,7 @@
     width: auto;
     float: right;
     padding: 0;
-    margin: 0;
+    margin: 0 $spacer/2 0 0;
     line-height: 4rem;
 
     @include media-breakpoint-down(md) {
@@ -22,6 +22,8 @@
       padding-top: 0;
       padding-bottom: 0;
       float: none; // Resets bootstrap floating.
+      // #13294 Not sure why the mobile nav wasn't left aligned
+      text-align: left;
 
       @include media-breakpoint-up(lg) {
         float: left; // Reinstate for MD+
@@ -29,65 +31,62 @@
 
       > a {
         position: relative;
+        padding: .2rem;
         line-height: $foe-nav-height-small;
-        font-weight: bold;
-        padding: 0;
+        font-weight: 900;
+        font-size: 1.25rem;
         display: block;
-        color: rgba($foe-offwhite, 1);
+        color: $foe-extradark;
+        text-decoration: none;
+        box-shadow: inset 0 0 0 0 $foe-accent;
         transition:
-          line-height $foe-transition-duration-base $foe-transition-easing,
-          color $foe-transition-duration-base $foe-transition-easing;
+          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;
-          line-height: $foe-nav-height-large;
+          line-height: $foe-nav-height-large / 3;
         }
 
         &:focus {
           background-color: transparent;
-          outline: 0 none transparent;
+          box-shadow: 0 0 0 .125rem $foe-extradark;
+          outline: .125rem solid $foe-offwhite;
+          outline-offset: .125rem;
         }
 
         &:hover {
-          // opacity: 0.7; <= Originally all links were .7 opacity, since we're using a pseudo element inside the anchor we can't fade the whole element
-          color: rgba($foe-offwhite, .7);
-          background: transparent;
+          color: $foe-offwhite;
+          box-shadow: inset 10rem 0 0 0 $foe-accent;
           text-decoration: none;
         }
-
-        &::after {
-          $arrow-size: 10px;
-
-          position: absolute;
-          z-index: $zindex-navbar + 21;
-          content: '';
-          width: 0;
-          height: 0;
-          border: $arrow-size solid transparent;
-          border-bottom-color: $foe-offwhite;
-          bottom: -1px;
-          left: 50%;
-          margin-left: ($arrow-size * -1);
-          opacity: 0;
-          transition: opacity $foe-transition-duration-base $foe-transition-easing;
-        }
       }
 
       &.active > a {
         font-weight: 300;
       }
 
-      &.foe-has-megamenu:hover {
-        .foe-megamenu-container {
-          opacity: 1;
-          visibility: visible;
-          transition-delay: .2s;
-          z-index: $zindex-navbar + 20;
+      .foe-megamenu-container {
+        a:hover {
+          text-decoration: underline;
         }
+      }
 
-        > a::after {
-          opacity: 1;
-          transition-delay: .2s;
+      &.foe-has-megamenu {
+        &:focus-within,
+        &:hover {
+          .foe-megamenu-container {
+            opacity: 1;
+            visibility: visible;
+            transition-delay: .2s;
+            z-index: $zindex-navbar + 20;
+          }
+
+          > a::after {
+            opacity: 1;
+            transition-delay: .2s;
+          }
         }
       }
     }
@@ -108,8 +107,6 @@
   // Handheld only
   @include media-breakpoint-down(md) {
     &.foe-header-mobile-is-open {
-      background-color: $foe-extradark !important;
-
       ul.navbar-nav {
         max-height: calc(100vh - 4rem);
         overflow-y: auto;

package/src/components/navigation/_search.scss

@@ -14,13 +14,21 @@
     a.search-button {
       text-decoration: none !important;
       position: relative;
-      line-height: $foe-nav-height-small;
-      color: $foe-offwhite !important;
+      height: $foe-nav-height-small;
+      color: $foe-extradark !important;
       transition: line-height $foe-transition-duration-base $foe-transition-easing;
       width: calc($spacer * 3);
       padding-left: calc($grid-gutter-width / 2);
       padding-right: calc($grid-gutter-width / 2);
-      display: block;
+      // #13293 display switched to inline-flex for search icon alignment on mobile
+      display: inline-flex;
+      align-items: center;
+      vertical-align: middle;
+
+      .svg-inline--fa {
+        height: 1.5em;
+        transition: height $foe-transition-duration-base $foe-transition-easing;
+      }
 
       .fa-times {
         display: none;
@@ -35,11 +43,11 @@
       }
 
       @include media-breakpoint-up(md) {
-        line-height: $foe-nav-height-medium;
+        height: $foe-nav-height-medium;
       }
 
       @include media-breakpoint-up(lg) {
-        line-height: $foe-nav-height-large;
+        height: $foe-nav-height-large;
       }
 
       &::after {
@@ -117,8 +125,12 @@
   &.js-menustack-stuck {
     .header-search {
       a.search-button {
+        .svg-inline--fa {
+          height: 1em;
+        }
+
         @include media-breakpoint-up(lg) {
-          line-height: $foe-nav-height-large-scrolled;
+          height: $foe-nav-height-large-scrolled;
         }
       }
     }

package/src/components/tools/data-defer-src.js

@@ -50,20 +50,15 @@ import './data-defer-src.scss';
       entries.forEach((entry) => {
         if (!isVisible && entry.intersectionRatio > 0) {
           isVisible = true;
-          if (el.tagName === 'IFRAME') {
-            el.contentWindow.location.replace(source);
-          } else {
-            el.src = source;
-          }
+          el.src = source;
         }
 
         if (el.hasAttribute('data-defer-dispose') && isVisible && entry.intersectionRatio === 0) {
           isVisible = false;
           if (el.tagName === 'IFRAME') {
             el.contentWindow.location.replace('about:blank');
-          } else {
-            el.removeAttribute('src');
           }
+          el.removeAttribute('src');
           el.classList.add('js-defer-is-loading');
         }
       });