@moreonion/foundist 2.0.8 → 2.1.3

package/src/js/foundist.js

@@ -37,8 +37,10 @@ Foundation.plugin(SelectTwo, 'SelectTwo')
 Foundation.plugin(StickyButton, 'StickyButton')
 Foundation.plugin(ToggleElement, 'ToggleElement')
 
-// Let foundation initialize the initial markup
-// This needs to be done for dynamically loaded markup too (e.g. AJAX markup)
+/**
+ * Let foundation initialize the initial markup.
+ * This needs to be done for dynamically loaded markup too (e.g. AJAX markup)
+ */
 export function initFoundation () {
   initEventBridge($)
   if (typeof Drupal !== 'undefined') {
@@ -56,8 +58,12 @@ export function initFoundation () {
   }
 }
 
-// Activate AdaptiveSticky on forms in the sidebar.
-export function stickyForm () {
+/**
+ * Activate AdaptiveSticky on forms in the sidebar.
+ * @param {object} options - Overrides to the AdaptiveSticky plugin settings.
+ * @returns {AdaptiveSticky|undefined} The initialized AdaptiveSticky plugin
+ */
+export function stickyForm (options = {}) {
   const $form = $('#sidebar form, #sidebar .share-buttons')
   if (!$form.length) {
     return
@@ -69,12 +75,17 @@ export function stickyForm () {
   return new Foundation.AdaptiveSticky($sidebar.children('.sticky'), {
     target: '#form-outer form, #form-outer .share-buttons ul',
     offset: $('#form-outer').css('padding-top'),
-    mediaQuery: 'large'
+    mediaQuery: 'large',
+    ...options
   })
 }
 
-// Activate StickyButton on CTA markup snippet.
-export function stickyButton () {
+/**
+ * Activate StickyButton on CTA markup snippet.
+ * @param {object} options - Overrides to the StickyButton plugin settings.
+ * @returns {StickyButton[]|undefined} Array of initialized StickyButton plugins
+ */
+export function stickyButton (options = {}) {
   let $cta = $('.sticky-cta')
   if (!$cta.length) {
     return
@@ -97,13 +108,18 @@ export function stickyButton () {
   return $cta.map((i, el) => {
     return new Foundation.StickyButton($(el), {
       blocker: target,
-      topOverlap: 0.3
+      topOverlap: 0.3,
+      ...options
     })
   })
 }
 
-// Activate cookiebar on cookiebar id.
-export function cookiebar () {
+/**
+ * Activate cookiebar on cookiebar id.
+ * @param {object} options - Overrides to the Cookiebar plugin settings.
+ * @returns {Cookiebar|undefined} The initialized Cookiebar plugin
+ */
+export function cookiebar (options = {}) {
   const $cookiebar = $('#cookiebar')
   if (!$cookiebar.length) {
     return
@@ -111,5 +127,5 @@ export function cookiebar () {
   // Put cookiebar in right position.
   $cookiebar.detach().appendTo('body')
   // Initialize plugin
-  return new Foundation.CookieBar($cookiebar)
+  return new Foundation.CookieBar($cookiebar, options)
 }

package/src/scss/_settings.scss

@@ -16,7 +16,10 @@ $breakpoints: (
 // Global Typography
 $base-font-size: 18 !default;
 $base-line-height: 24 !default;
-$global-font-size: $base-font-size / 16 * 100% !default;
+
+// Set font size and breakpoint variables *before* importing utils!
+// 6.25% = 100% / 16 (assumed browser default value)
+$global-font-size: $base-font-size * 6.25% !default;
 
 // Global Colors
 $foundation-palette: (

package/src/scss/_util.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - -
 // Functions and mixins for general use
 
+@use "sass:color";
+
 /// Set text colors according to the background.
 ///
 /// If the background value passed to the mixin happens to not be (just) a color,
@@ -59,13 +61,13 @@
         &:focus {
           color: color-pick-contrast(
             $background,
-            ($anchor-color-hover, scale-color($this-anchor-color, $lightness: -14%))
+            ($anchor-color-hover, color.scale($this-anchor-color, $lightness: -14%))
           );
         }
         &:active {
           color: color-pick-contrast(
             $background,
-            ($anchor-color-active, scale-color($this-anchor-color, $lightness: 6%))
+            ($anchor-color-active, color.scale($this-anchor-color, $lightness: 6%))
           );
         }
       }

package/src/scss/components/_accordion.scss

@@ -29,7 +29,7 @@
     position: absolute;
     left: rem-calc(get-side($accordion-item-padding, left));
     // The triangle is vertically centered in the title
-    top: calc(50% - #{$accordion-triangle-size / 2});
+    top: calc(50% - #{$accordion-triangle-size * 0.5});
   }
   .is-active & {
     &:before {

package/src/scss/components/_card.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the card component
 
+@use "sass:math";
+
 .card {
   position: relative;
 }
@@ -20,7 +22,7 @@
 
 // Meld card-sections into each other.
 .card-section + .card-section {
-  padding-top: max(0, $global-padding - get-side($card-padding, bottom));
+  padding-top: math.max(0, $global-padding - get-side($card-padding, bottom));
 }
 
 // Move footer to the bottom of the card.

package/src/scss/components/_cookiebar.scss

@@ -17,7 +17,7 @@
 
   // Some space between buttons.
   .button + .button {
-    margin-#{$global-left}: $global-margin / 2;
+    margin-#{$global-left}: $global-margin * 0.5;
   }
 
   // Show button(s) next to text.

package/src/scss/components/_letter.scss

@@ -2,10 +2,12 @@
 // - - - - - - - - - - - - - - -
 // Adds a letter-like background to an element
 
+@use "sass:color";
+
 $letter-background: $card-background !default;
 $letter-padding: (2 * $global-padding) (1.25 * $global-padding) !default;
 $letter-margin: 0 0 $global-margin 0 !default;
-$letter-shadow-color: scale-color(
+$letter-shadow-color: color.scale(
   get-background-color($letter-background),
   $lightness: -60%,
   $alpha: -60%

package/src/scss/components/_menu.scss

@@ -35,8 +35,8 @@
   &:not(.simple) .button {
     margin-left: get-side($menu-items-padding, left);
     margin-right: get-side($menu-items-padding, right);
-    margin-top: $form-spacing / 2;
-    margin-bottom: $form-spacing / 2;
+    margin-top: $form-spacing * 0.5;
+    margin-bottom: $form-spacing * 0.5;
     width: 100%;
   }
 
@@ -66,10 +66,10 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
   @include breakpoint(small down) {
     > li > a {
       padding: {
-        top: get-side($dropdownmenu-padding, top) / 2;
-        right: get-side($dropdownmenu-padding, right) / 2;
-        bottom: get-side($dropdownmenu-padding, bottom) / 2;
-        left: get-side($dropdownmenu-padding, left) / 2;
+        top: get-side($dropdownmenu-padding, top) * 0.5;
+        right: get-side($dropdownmenu-padding, right) * 0.5;
+        bottom: get-side($dropdownmenu-padding, bottom) * 0.5;
+        left: get-side($dropdownmenu-padding, left) * 0.5;
       }
     }
   }
@@ -89,14 +89,14 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
     a {
       font-weight: $global-weight-normal;
       text-decoration: none;
-      padding-top: rem-calc($base-line-height / 4);
-      padding-bottom: rem-calc($base-line-height / 4);
+      padding-top: rem-calc($base-line-height * 0.25);
+      padding-bottom: rem-calc($base-line-height * 0.25);
       width: 100%;
 
       @include breakpoint(small down) {
         padding: {
-          right: get-side($dropdownmenu-padding, right) / 2;
-          left: get-side($dropdownmenu-padding, left) / 2;
+          right: get-side($dropdownmenu-padding, right) * 0.5;
+          left: get-side($dropdownmenu-padding, left) * 0.5;
         }
       }
 
@@ -154,7 +154,7 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
 
         &:after {
           background-size: $dropdownmenu-arrow-size * 0.75;
-          #{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+          #{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         }
       }
     }
@@ -165,7 +165,7 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
         #{$global-right}: get-side($dropdownmenu-padding, $global-right);
 
         @include breakpoint(small down) {
-          #{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+          #{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         }
       }
     }
@@ -184,11 +184,11 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
       }
 
       @include breakpoint(small down) {
-        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         padding-left: $dropdownmenu-arrow-padding - get-side($dropdownmenu-padding, left);
 
         &:after {
-          left: get-side($dropdownmenu-padding, left) / 2;
+          left: get-side($dropdownmenu-padding, left) * 0.5;
         }
       }
     }
@@ -207,11 +207,11 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
       }
 
       @include breakpoint(small down) {
-        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) / 2;
+        padding-#{$global-right}: get-side($dropdownmenu-padding, $global-right) * 0.5;
         padding-right: $dropdownmenu-arrow-padding - get-side($dropdownmenu-padding, right);
 
         &:after {
-          right: get-side($dropdownmenu-padding, right) / 2;
+          right: get-side($dropdownmenu-padding, right) * 0.5;
         }
       }
     }
@@ -244,27 +244,27 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
     }
     // Add a bit more space between items.
     &:not(.vertical) {
-      margin-top: -$form-spacing / 2;
-      margin-bottom: -$form-spacing / 2;
+      margin-top: -$form-spacing * 0.5;
+      margin-bottom: -$form-spacing * 0.5;
       > li {
-        margin-top: $form-spacing / 2;
-        margin-bottom: $form-spacing / 2;
+        margin-top: $form-spacing * 0.5;
+        margin-bottom: $form-spacing * 0.5;
       }
       > li.is-dropdown-submenu-parent {
-        margin-left: $form-spacing / 2;
-        margin-right: $form-spacing / 2;
+        margin-left: $form-spacing * 0.5;
+        margin-right: $form-spacing * 0.5;
       }
     }
     &.vertical {
-      margin-left: -$form-spacing / 2;
-      margin-right: -$form-spacing / 2;
+      margin-left: -$form-spacing * 0.5;
+      margin-right: -$form-spacing * 0.5;
       > li {
-        margin-left: $form-spacing / 2;
-        margin-right: $form-spacing / 2;
+        margin-left: $form-spacing * 0.5;
+        margin-right: $form-spacing * 0.5;
       }
       > li.is-dropdown-submenu-parent {
-        margin-top: $form-spacing / 2;
-        margin-bottom: $form-spacing / 2;
+        margin-top: $form-spacing * 0.5;
+        margin-bottom: $form-spacing * 0.5;
       }
     }
   }

package/src/scss/components/_progressbar.scss

@@ -12,7 +12,7 @@
 
 // Smaller styles on teasers
 .teasers .card .progress-wrapper {
-  margin-bottom: $global-margin / 2;
+  margin-bottom: $global-margin * 0.5;
 
   .progress {
     position: relative;

package/src/scss/components/_reveal.scss

@@ -2,6 +2,8 @@
 // - - - - - - - - - - - - - - -
 // Custom overrides for the reveal component.
 
+@use "sass:map";
+
 .reveal {
   @extend #form-outer;
   overflow: visible;
@@ -41,9 +43,9 @@
   // Make large close button smaller on small screens.
   .close-button.large {
     @include breakpoint(small down) {
-      font-size: map-get($closebutton-size, medium);
-      top: $global-margin / 8;
-      #{$global-right}: $global-margin / 8;
+      font-size: map.get($closebutton-size, medium);
+      top: $global-margin * 0.125;
+      #{$global-right}: $global-margin * 0.125;
     }
   }
 }

package/src/scss/components/_settings.scss

@@ -1,8 +1,10 @@
 // Component settings
 // - - - - - - - - - - - - - - -
 
+@use "sass:color";
+
 // Card
-$card-border: none;
+$card-border: none !default;
 $card-padding: rem-calc($base-line-height * 0.75) 6% !default;
 $card-margin-bottom: rem-calc($base-line-height * 1.5) !default;
 
@@ -11,9 +13,9 @@ $progress-height: rem-calc(1.25 * $base-line-height) !default;
 $progress-background: $white !default;
 $progress-border-width: rem-calc(4) !default;
 $progress-border-color: $progress-background !default;
-$progress-margin-bottom: rem-calc($base-line-height / 2) !default;
+$progress-margin-bottom: rem-calc($base-line-height * 0.5) !default;
 $progress-meter-background: get-color(secondary) !default;
-$progress-radius: rem-calc($base-line-height / 4) !default;
+$progress-radius: rem-calc($base-line-height * 0.25) !default;
 $progress-thermometer-height: rem-calc(7.5 * $base-line-height) !default;
 $progress-thermometer-bulb-size: rem-calc(1.75 * $base-line-height) !default;
 
@@ -22,8 +24,9 @@ $recent-supporter-color: color-pick-contrast(
   get-background-color($body-background),
   ($dark-gray, $light-gray)
 ) !default;
+$recent-supporter-time-color: $muted-font-color !default;
 $recent-supporter-border-color: if(
-  lightness(get-background-color($body-background)) < 50,
+  color.lightness(get-background-color($body-background)) < 50,
   $dark-gray,
   $light-gray
 ) !default;
@@ -37,7 +40,7 @@ $callout-background: $card-background !default;
 $callout-background-fade: 0% !default;
 $callout-border: none !default;
 $callout-sizes: (
-  small: rem-calc($base-line-height / 2),
+  small: rem-calc($base-line-height * 0.5),
   default: rem-calc($base-line-height),
   large: rem-calc($base-line-height * 1.5),
 ) !default;
@@ -52,7 +55,7 @@ $closebutton-size: (
   large: rem-calc($base-line-height * 1.75),
 ) !default;
 $closebutton-offset-horizontal: (
-  small: rem-calc(-$base-line-height / 2),
+  small: rem-calc(-$base-line-height * 0.5),
   medium: rem-calc(-$base-line-height * 0.75),
   large: rem-calc(-$base-line-height),
 ) !default;
@@ -61,7 +64,7 @@ $closebutton-color: color-pick-contrast(
   $closebutton-background-color,
   ($light-gray, $dark-gray)
 ) !default;
-$closebutton-background-color-hover: scale-color(
+$closebutton-background-color-hover: color.scale(
   $closebutton-background-color,
   $lightness: 6%
 ) !default;
@@ -103,7 +106,7 @@ $dropdown-menu-parent-border-color: $input-border-color !default;
 $dropdown-menu-parent-border-color-active: if(
   $dropdown-menu-parent-border-color == $input-border-color,
   $input-border-color-focus,
-  scale-color($dropdown-menu-parent-border-color, $lightness: -10%)
+  color.scale($dropdown-menu-parent-border-color, $lightness: -10%)
 ) !default;
 $dropdown-menu-parent-border-width: $input-border-width !default;
 $dropdownmenu-border: (
@@ -111,12 +114,12 @@ $dropdownmenu-border: (
 ) !default;
 // stylelint-disable
 $dropdownmenu-padding: (
-    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) / 2 -
+    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) * 0.5 -
       get-side($dropdown-menu-parent-border-width, top)
   )
   get-side($input-padding, right)
   (
-    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) / 2 -
+    ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) * 0.5 -
       get-side($dropdown-menu-parent-border-width, bottom)
   )
   get-side($input-padding, left) !default;
@@ -140,7 +143,7 @@ $accordion-item-background: transparent !default;
 $accordion-item-color: $body-font-color !default;
 $accordion-item-color-hover: $accordion-item-color !default;
 $accordion-item-padding: rem-calc($base-line-height) - $accordion-content-border-width !default;
-$accordion-margin: rem-calc($base-line-height / 2) !default;
+$accordion-margin: rem-calc($base-line-height * 0.5) !default;
 $accordion-plusminus: false !default;
 $accordion-radius: rem-calc(5) !default;
 $accordion-separator: true !default;
@@ -168,5 +171,8 @@ $cookiebar-color: color-pick-contrast(
   get-background-color($cookiebar-background),
   ($body-font-color, $body-font-color-alt)
 ) !default;
-$cookiebar-padding: rem-calc($base-line-height) 0 0;
+$cookiebar-padding: rem-calc($base-line-height) 0 0 !default;
 $cookiebar-flex-breakpoint: medium !default;
+
+// Pagination
+$pagination-item-color-disabled: $muted-font-color !default;

package/src/scss/components/_share-button.scss

@@ -9,7 +9,7 @@ $share-button-max-width: 28rem !default;
   margin-bottom: 0.75 * $global-margin;
 
   // More horizontal padding.
-  @include breakpoint(25rem * $global-font-size / 100) {
+  @include breakpoint(25rem * $global-font-size * 0.01) {
     padding-left: 2em;
     padding-right: 2em;
   }

package/src/scss/components/_sticky-button.scss

@@ -3,15 +3,17 @@
 // Button that sticks to the edge of the screen.
 // Used in combination with the `StickyButton` plugin.
 
+@use "sass:color";
+
 $sticky-cta-background: $form-background !default;
-$sticky-cta-boxshadow: 0 0 rem-calc(3) scale-color($black, $alpha: -75%) !default;
+$sticky-cta-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !default;
 $sticky-button-max-width: 28rem !default;
 
 .sticky-cta {
   @include sticky-button;
   background: $sticky-cta-background;
   box-shadow: $sticky-cta-boxshadow;
-  padding: $global-padding / 2;
+  padding: $global-padding * 0.5;
   padding-left: get-side($form-padding, left);
   padding-right: get-side($form-padding, right);
 

package/src/scss/form/_braintree_apple_pay.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 @supports (-webkit-appearance: -apple-pay-button) {
   .button.apple-pay {
     -webkit-appearance: -apple-pay-button;

package/src/scss/form/_donation-amount-button.scss

@@ -12,6 +12,9 @@
 // button, as well as `.form-radios` and `.form-type-textfield` to distinguish
 // between radio buttons and the "other…" text field.
 
+@use "sass:color";
+@use "sass:math";
+
 // Base colors
 $donation-amount-background-color: transparent !default;
 $donation-amount-background-color-checked: $primary-color !default;
@@ -20,7 +23,7 @@ $donation-amount-text-color-checked: color-pick-contrast(
 ) !default;
 
 // Colors derived from base colors by default
-$donation-amount-border-color: scale-color(
+$donation-amount-border-color: color.scale(
   $donation-amount-background-color-checked,
   $lightness: 50%,
   $saturation: -50%
@@ -35,9 +38,9 @@ $donation-amount-border-radius: 0 !default;
 $donation-amount-border-width: rem-calc(3) !default;
 $donation-amount-text-offset: $button-text-offset !default;
 // The padding is calculated like the $button-padding
-$donation-amount-button-padding: rem-calc(1.25 * $base-line-height / 2) -
+$donation-amount-button-padding: rem-calc(1.25 * $base-line-height * 0.5) -
   $donation-amount-border-width + $donation-amount-text-offset 0
-  rem-calc(1.25 * $base-line-height / 2) - $donation-amount-border-width -
+  rem-calc(1.25 * $base-line-height * 0.5) - $donation-amount-border-width -
   $donation-amount-text-offset !default;
 
 // Layout
@@ -57,10 +60,7 @@ $donation-amount-max-buttons-per-row: 3 !default;
   input[type="radio"]:not([value="select_or_other"]) {
     + label {
       @include button-base;
-      @include button-hollow;
       @include button-expand;
-      // button-style() and button-hollow-style() not used because we would
-      // override them now anyways
 
       border-radius: $donation-amount-border-radius;
       text-align: center;
@@ -123,7 +123,7 @@ $donation-amount-max-buttons-per-row: 3 !default;
   // Flex children (form items)
   > .form-item {
     // Up to x buttons in 1 row.
-    flex: 1 0 calc(#{100% / $donation-amount-max-buttons-per-row} - #{$form-spacing * 2});
+    flex: 1 0 calc(#{math.div(100%, $donation-amount-max-buttons-per-row)} - #{$form-spacing * 2});
     // Gutter of 2 * $form-spacing (flex margins do not collapse).
     margin: {
       left: $form-spacing;

package/src/scss/form/_e2t.scss

@@ -26,6 +26,8 @@ form .email-to-target-target {
       top: $form-spacing * 3;
       bottom: $form-spacing * 3;
     }
+    // Allow long lines to break while preserving new lines.
+    white-space: pre-wrap;
   }
   // Fixes margins when multiple targets can be selected.
   .form-type-checkbox + .form-type-textfield {

package/src/scss/form/_fields.scss

@@ -3,7 +3,7 @@
 
 // Help texts margins
 .help-text {
-  margin-top: -$form-spacing / 2;
+  margin-top: -$form-spacing * 0.5;
   margin-bottom: $form-spacing * 1.5;
 
   .form-error.is-visible + & {
@@ -49,3 +49,37 @@ input[type="radio"] + label {
 input.button.primary {
   margin-top: $form-spacing * 2;
 }
+
+// Margins for giftaid fields.
+.giftaid {
+  margin-top: $form-spacing * 2;
+  margin-bottom: $form-spacing * 2;
+
+  .extra-spacing {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .form-item > div:first-child,
+  .form-item > label.show-for-sr + div,
+  .form-item > label.element-invisible + div {
+    input[type="checkbox"] + label {
+      margin-top: 0;
+    }
+  }
+}
+
+// Display radios, checkboxes etc. next to each other.
+.form-item.inline {
+  &,
+  .form-radios,
+  .form-checkboxes {
+    display: flex;
+    flex-wrap: wrap;
+    column-gap: $global-margin;
+  }
+
+  > label {
+    flex-basis: 100%;
+  }
+}

package/src/scss/form/_paymethod-select-button.scss

@@ -22,10 +22,7 @@ $paymethod-select-border-width: $input-border-width !default;
     + label {
       // Button styles
       @include button-base;
-      @include button-hollow;
       @include button-expand;
-      // button-style() and button-hollow-style() not used because we would
-      // override them now anyways
 
       border-radius: $paymethod-select-border-radius;
       text-align: left;
@@ -62,7 +59,7 @@ $paymethod-select-border-width: $input-border-width !default;
 
       // These buttons are a bit tighter together
       .form-item & {
-        margin-top: $form-spacing / 2;
+        margin-top: $form-spacing * 0.5;
       }
     }