@foeewni/web-core 2.3.0 → 2.4.1

package/src/components/campaign-navigation/style.scss

@@ -143,7 +143,7 @@ $foe-secondary-nav-height: 3rem;
 
 #js-foe-secondary-trigger {
   position: absolute;
-  right: $grid-gutter-width/2;
+  right: calc($grid-gutter-width / 2);
   line-height: $foe-secondary-nav-height;
   width: 2rem;
   z-index: 10;

package/src/components/form/buttons.scss

@@ -48,21 +48,6 @@ Form `type=submit`s, `button`s are by default uncolorized, please use one of the
 @import '~bootstrap/scss/buttons';
 @import '~bootstrap/scss/button-group';
 
-input[type=submit],
-input[type=button],
-button {
-  &:not(.btn) {
-    @extend .btn;
-  }
-}
-
-input[type=reset] {
-  &:not(.btn) {
-    @extend .btn;
-    @extend .btn-danger;
-  }
-}
-
 @include media-breakpoint-down(sm) {
   .btn {
     font-size: .8rem;

package/src/components/form/forms.scss

@@ -106,7 +106,7 @@ form {
 }
 
 label {
-  margin-bottom: $spacer/4;
+  margin-bottom: calc($spacer / 4);
   font-weight: bold;
   font-size: 90%;
 }

package/src/components/form/inputs.scss

@@ -185,7 +185,7 @@ textarea {
   width: 1.5em;
   height: 1.5em;
   padding: .5em;
-  margin-right: $spacer/2;
+  margin-right: calc($spacer / 2);
   vertical-align: bottom;
   color: transparent;
   transition: .2s;

package/src/components/go-top/style.scss

@@ -3,7 +3,7 @@
 #foe-go-top {
   color: $foe-accent;
   font-size: 3rem;
-  padding: $spacer/4;
+  padding: calc($spacer / 4);
   position: fixed;
   bottom: $spacer;
   right: $spacer;

package/src/components/hero-panel/index.js

@@ -2,8 +2,6 @@ import { jarallax, jarallaxElement, jarallaxVideo } from 'jarallax';
 import objectFitImages from 'object-fit-images';
 import Screen from '../../utils/js/screen.service';
 
-import scss from '../../utils/scss/exporter.scss';
-
 import './style.scss';
 
 
@@ -11,7 +9,8 @@ import './style.scss';
   const MOBILE_REGEX = /iPad|iPhone|iPod|Android/;
 
   const isMobile = () => {
-    const mobileSize = parseInt(scss['breakpoint-md'], 10);
+    const breakpoints = Screen.getBreakpoints();
+    const mobileSize = parseInt(breakpoints['breakpoint-md'], 10);
 
     if (MOBILE_REGEX.test(navigator.userAgent) || window.innerWidth < mobileSize) {
       return true;

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

@@ -152,7 +152,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 
 .foe-hero-panel {
   position: relative;
-  min-height: (320/16) * 1rem; // Height for mobile
+  min-height: calc(320 / 16) * 1rem; // Height for mobile
   width: 100%;
   margin: 0;
   top: 0;
@@ -167,7 +167,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   }
 
   @include media-breakpoint-up(md) {
-    height: 100/16*9vw; // 16:9 ratio for non-mobile
+    height: calc(100 / 16 * 9vw); // 16:9 ratio for non-mobile
   }
 }
 
@@ -217,7 +217,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
 
 .foe-hero-panel-buffer {
   min-height: $spacer*16; // Height for mobile
-  height: 100/16*9vw; // 16:9 ratio for the rest
+  height: calc(100 / 16 * 9vw); // 16:9 ratio for the rest
   max-height: 90vh; // We limit it so it doesn't get absurdly huge
   width: 100%;
   top: 0;
@@ -273,7 +273,7 @@ The parallax effect needs the file `foe.components.js` to be appended in the pag
   z-index: 3;
 
   h1 {
-    margin-bottom: $spacer/4;
+    margin-bottom: calc($spacer / 4);
   }
 }
 

package/src/components/layout/horizontal-rule.scss

@@ -3,7 +3,7 @@
 // Generic classes for the horizontal rule
 @for $size from 1 to 4 {
   .hr-#{$size} {
-    border-top-width: (1rem/10) * $size;
+    border-top-width: calc(1rem / 10) * $size;
   }
 }
 

package/src/components/layout/images.scss

@@ -15,8 +15,8 @@ figure {
     font-size: 80%;
     text-align: right;
     color: lighten($foe-text, 15);
-    padding-top: $spacer/3;
-    padding-bottom: $spacer/3;
+    padding-top: calc($spacer / 3);
+    padding-bottom: calc($spacer / 3);
   }
 }
 

package/src/components/navigation/_header.scss

@@ -63,8 +63,8 @@
   }
 
   @include media-breakpoint-down(md) {
-    padding-left: $grid-gutter-width / 2 !important;
-    padding-right: $grid-gutter-width / 2 !important;
+    padding-left: calc($grid-gutter-width / 2) !important;
+    padding-right: calc($grid-gutter-width / 2) !important;
     overflow: hidden;
   }
 

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

@@ -34,8 +34,8 @@
   }
 
   > ul {
-    padding-right: $grid-gutter-width / 2;
-    padding-left: $grid-gutter-width / 2;
+    padding-right: calc($grid-gutter-width / 2);
+    padding-left: calc($grid-gutter-width / 2);
   }
 
   > .container > .row {
@@ -52,13 +52,13 @@
 
       > li {
         > span {
-          line-height: $foe-submenu-tile-height / 4;
+          line-height: calc($foe-submenu-tile-height / 4);
           font-weight: 500;
           color: $foe-gray;
         }
 
         > a {
-          line-height: $foe-submenu-tile-height / 4;
+          line-height: calc($foe-submenu-tile-height / 4);
           font-weight: 500;
           padding-left: 0;
           padding-right: 36px;
@@ -81,7 +81,7 @@
     @for $i from 1 through 12 {
       &.col-md-#{$i} {
         ul.sub-megamenu-first {
-          column-count: ceil($i / 2);
+          column-count: ceil(calc($i / 2));
         }
       }
     }
@@ -171,11 +171,11 @@
 
     ul.sub-megamenu-first {
       padding: 0;
-      margin: 0 ($grid-gutter-width / -2);
+      margin: 0 calc($grid-gutter-width / -2);
       list-style: none;
 
       > li {
-        padding: 0 ($grid-gutter-width / 2);
+        padding: 0 calc($grid-gutter-width / 2);
         margin: 0;
       }
     }

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

@@ -118,6 +118,7 @@
 
       .navbar-toggler {
         position: relative;
+        display: inline-block;
 
         .icon-bar {
           opacity: 0;

package/src/components/navigation/_search.scss

@@ -17,9 +17,9 @@
       line-height: $foe-nav-height-small;
       color: $foe-offwhite !important;
       transition: line-height $foe-transition-duration-base $foe-transition-easing;
-      width: $spacer*3;
-      padding-left: $grid-gutter-width / 2;
-      padding-right: $grid-gutter-width / 2;
+      width: calc($spacer * 3);
+      padding-left: calc($grid-gutter-width / 2);
+      padding-right: calc($grid-gutter-width / 2);
       display: block;
 
       .fa-times {
@@ -31,7 +31,7 @@
       }
 
       @include media-breakpoint-up(sm) {
-        width: $spacer*4;
+        width: calc($spacer * 4);
       }
 
       @include media-breakpoint-up(md) {

package/src/components/navigation/_toggler.scss

@@ -1,6 +1,6 @@
 .navbar-toggler {
   margin-left: 0;
-  display: block;
+  display: inline-block;
   padding: 10px;
   // Resetting the border and applying a negative margin so it looks like our switcher is sitting correctly on the grid
   // For future devs: don't use padding-right: 0; as it takes away a small chunk of the tap area on mobiles.

package/src/components/navigation/index.js

@@ -3,7 +3,6 @@ import './menustack';
 // import 'bootstrap/js/src/collapse';
 import Popper from 'popper.js';
 import Screen from '../../utils/js/screen.service';
-import scss from '../../utils/scss/exporter.scss';
 
 import './style.scss';
 
@@ -60,8 +59,9 @@ import './style.scss';
   }
 
   function menuMultilevelSetup() {
+    const breakpoints = Screen.getBreakpoints();
     const allBreakpoints = [];
-    Object.keys(scss).forEach((key) => {
+    Object.keys(breakpoints).forEach((key) => {
       if (key.indexOf('breakpoint') === 0) {
         const size = key.replace('breakpoint-', '');
         allBreakpoints.push(size);

package/src/components/tools/stickystack.js

@@ -29,7 +29,7 @@ Elements with the `js-stickystack`can be further modified by adding the classes
  *
  */
 
-import scss from '../../utils/scss/exporter.scss';
+import Screen from '../../utils/js/screen.service';
 
 (() => {
   // Kill script if we are below IE11 or Apple devices
@@ -39,8 +39,10 @@ import scss from '../../utils/scss/exporter.scss';
     return;
   }
 
+  const breakpoints = Screen.getBreakpoints();
+
   const StickyStack = {
-    mobileBreak: parseInt(scss['breakpoint-md'], 10),
+    mobileBreak: parseInt(breakpoints['breakpoint-md'], 10),
     list: [],
     number: 0,
     stackTop: 0,

package/src/components/typography/display.scss

@@ -3,7 +3,7 @@
 @for $i from 1 through 4 {
   .display-#{$i} {
     @include media-breakpoint-down(md) {
-      font-size: (32/14) * 1rem !important;
+      font-size: calc(32 / 14) * 1rem !important;
       line-height: 1.05;
     }
   }

package/src/components/typography/metadata.scss

@@ -74,7 +74,7 @@ Custom Friends of the Earth styling for common text elements.
   font-weight: normal !important;
   text-transform: uppercase;
   transition-property: opacity, color, box-shadow;
-  transition-duration: $foe-transition-duration-base/2;
+  transition-duration: calc($foe-transition-duration-base / 2);
   transition-timing-function: $foe-transition-easing;
   text-decoration: none;
 

package/src/styleguide/template.hbs

@@ -23,7 +23,7 @@
 
   {{#each customVariables.criticalStyles}}
     <link href="{{this}}" media="screen" rel="stylesheet" type="text/css">
-  {{/each}}  
+  {{/each}}
 
   {{#each customVariables.styles}}
     <link rel="preload" href="{{this}}" as="style" media="screen" onload="this.onload = null; this.rel='stylesheet'">
@@ -86,7 +86,7 @@
         {{/each}}
         <li>
           <a class="nav-item" href="/report.html">Bundle size report</a>
-        </li>        
+        </li>
       </ul>
     </nav>
 

package/src/utils/js/screen.service.js

@@ -52,18 +52,26 @@ export default {
     return !(bottom < scroll || top - viewHeight >= scroll);
   },
 
-  getCurrentBreakpoint: function getCurrentBreakpoint() {
+  getBreakpoints: function getBreakpoints() {
     // For additional instructions see:
     // ./src/utils/scss/exporter.scss
     const breakpoints = [];
-    Object.keys(scss).forEach((key) => {
+    // When used as dependency it exports scss.default
+    const exportedScss = scss.default || scss;
+    Object.keys(exportedScss).forEach((key) => {
       if (key.indexOf('breakpoint') === 0) {
         const size = key.replace('breakpoint-', '');
-        const width = parseInt(scss[key], 10);
+        const width = parseInt(exportedScss[key], 10);
         breakpoints.push({ size, width });
       }
     });
 
+    return breakpoints;
+  },
+
+  getCurrentBreakpoint: function getCurrentBreakpoint() {
+    const breakpoints = this.getBreakpoints();
+
     let breakpointIndex = 0;
     while (breakpointIndex < (breakpoints.length - 1) && window.innerWidth >= breakpoints[breakpointIndex + 1].width) {
       breakpointIndex += 1;

package/src/utils/scss/helpers/_mixins.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 //
 // General functions and mixins
 //
@@ -50,8 +52,8 @@
 // Example: an element has a height of 30px, it's parent is 100px, so write out `.margin-vertical-align(100px, 30px);` to calculate the appropriate top margin.
 
 @mixin margin-vertical-align($parent-height, $element-height) {
-  margin-top: (($parent-height - $element-height) / 2);
-  margin-bottom: (($parent-height - $element-height) / 2);
+  margin-top: calc(($parent-height - $element-height) / 2);
+  margin-bottom: calc(($parent-height - $element-height) / 2);
 }
 
 
@@ -98,7 +100,7 @@
 }
 
 @function strip-units($value) {
-  @return $value / ($value * 0 + 1);
+  @return math.div($value, ($value * 0 + 1));
 }
 
 // From https://stackoverflow.com/a/25478589

package/src/utils/scss/helpers/_variables.scss

@@ -431,12 +431,12 @@ $font-weight-heavy:           700;
 $font-weight-base:            $font-weight-normal;
 $line-height-base:            1.5;
 
-$h1-font-size:                (56/16) * $font-size-base;
-$h2-font-size:                (44/16) * $font-size-base;
-$h3-font-size:                (34/16) * $font-size-base;
-$h4-font-size:                (26/16) * $font-size-base;
-$h5-font-size:                (20/16) * $font-size-base;
-$h6-font-size:                (16/16) * $font-size-base;
+$h1-font-size:                calc(56 / 16) * $font-size-base;
+$h2-font-size:                calc(44 / 16) * $font-size-base;
+$h3-font-size:                calc(34 / 16) * $font-size-base;
+$h4-font-size:                calc(26 / 16) * $font-size-base;
+$h5-font-size:                calc(20 / 16) * $font-size-base;
+$h6-font-size:                calc(16 / 16) * $font-size-base;
 
 $headings-map: (
   h1: $h1-font-size,
@@ -447,14 +447,14 @@ $headings-map: (
   h6: $h6-font-size,
 );
 
-$headings-margin-bottom:      ($spacer / 2);
+$headings-margin-bottom:      calc($spacer / 2);
 $headings-font-family:        inherit;
 $headings-font-weight:        600;
 $headings-line-height:        1.2;
 $headings-color:              $foe-primary;
 
-$display1-size:               (60/16) * $font-size-base;
-$display2-size:               (60/16) * $font-size-base;
+$display1-size:               calc(60 / 16) * $font-size-base;
+$display2-size:               calc(60 / 16) * $font-size-base;
 $display3-size:               4.5rem;
 $display4-size:               3.5rem;
 
@@ -815,11 +815,11 @@ $nav-pills-link-active-color:       $component-active-color;
 $nav-pills-link-active-bg:          $component-active-bg;
 
 $nav-divider-color:                 $gray-200;
-$nav-divider-margin-y:              ($spacer / 2);
+$nav-divider-margin-y:              calc($spacer / 2);
 
 // Navbar
 
-$navbar-padding-y:                  ($spacer / 2);
+$navbar-padding-y:                  calc($spacer / 2);
 $navbar-padding-x:                  $spacer;
 
 $navbar-nav-link-padding-x:         .5rem;
@@ -828,7 +828,7 @@ $navbar-brand-font-size:            $font-size-lg;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height:                   ($font-size-base * $line-height-base + $nav-link-padding-y * 2);
 $navbar-brand-height:               $navbar-brand-font-size * $line-height-base;
-$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2;
+$navbar-brand-padding-y:            calc(($nav-link-height - $navbar-brand-height) / 2);
 
 $navbar-toggler-padding-y:          .25rem;
 $navbar-toggler-padding-x:          .75rem;
@@ -899,7 +899,7 @@ $card-bg:                           $white;
 
 $card-img-overlay-padding:          1.25rem;
 
-$card-group-margin:                 ($grid-gutter-width / 2);
+$card-group-margin:                 calc($grid-gutter-width / 2);
 $card-deck-margin:                  $card-group-margin;
 
 $card-columns-count:                3;
@@ -1139,10 +1139,10 @@ $foe-nav-transition-duration: 250ms;
 
 
 // Logo
-$foe-nav-logo-height-small:  $foe-nav-height-small*2/3; // Adjustment for tiny screens, not quite official whitespace...
-$foe-nav-logo-height-medium: $foe-nav-height-medium*3/5;
-$foe-nav-logo-height-large:  $foe-nav-height-large*3/5;
-$foe-nav-logo-height-large-scrolled: $foe-nav-height-large-scrolled*3/5; // Hence can be the same size of navbar when scrolled
+$foe-nav-logo-height-small:  calc($foe-nav-height-small * 2 / 3); // Adjustment for tiny screens, not quite official whitespace...
+$foe-nav-logo-height-medium: calc($foe-nav-height-medium * 3 / 5);
+$foe-nav-logo-height-large:  calc($foe-nav-height-large * 3 / 5);
+$foe-nav-logo-height-large-scrolled: calc($foe-nav-height-large-scrolled * 3 / 5); // Hence can be the same size of navbar when scrolled
 
 // Manually add in all header variants based on bootstrap-named breakpoints.
 // Likely prone to change in the Bootstrap 5+ refactor.