@moreonion/foundist 2.0.6 → 2.1.1

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,6 +1,8 @@
 // Component settings
 // - - - - - - - - - - - - - - -
 
+@use "sass:color";
+
 // Card
 $card-border: none;
 $card-padding: rem-calc($base-line-height * 0.75) 6% !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;
 
@@ -23,7 +25,7 @@ $recent-supporter-color: color-pick-contrast(
   ($dark-gray, $light-gray)
 ) !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 +39,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 +54,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 +63,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 +105,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 +113,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 +142,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;

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;
@@ -75,38 +75,39 @@ $donation-amount-max-buttons-per-row: 3 !default;
         }
       }
 
-      // Default and disabled states
-      &,
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover,
-      &.disabled:focus,
-      &[disabled]:focus {
-        background-color: $donation-amount-background-color;
-        border: $donation-amount-border-width solid $donation-amount-border-color;
-        color: $donation-amount-text-color;
-      }
-      // Hover state
-      &:hover,
-      &:focus {
-        background-color: $donation-amount-background-color;
-        border-color: $donation-amount-border-color-hover;
-      }
+      // Default state
+      border: $donation-amount-border-width solid $donation-amount-border-color;
+      background-color: $donation-amount-background-color;
+      color: $donation-amount-text-color;
     }
 
-    // Checked radio button.
+    // Checked state
     &:checked + label {
-      color: $donation-amount-text-color-checked;
       border-color: $donation-amount-border-color-checked;
       background-color: $donation-amount-background-color-checked;
+      color: $donation-amount-text-color-checked;
+    }
 
-      // Hover state
-      &:hover,
-      &:focus {
+    // Operational
+    &:not(:disabled) {
+      & + label:hover,
+      &:focus + label {
+        border-color: $donation-amount-border-color-hover;
+      }
+
+      &:checked + label:hover,
+      &:focus:checked + label {
         border-color: $donation-amount-border-color;
       }
     }
+
+    // Disabled
+    &:disabled {
+      + label {
+        opacity: $button-opacity-disabled;
+        cursor: not-allowed;
+      }
+    }
   }
 
   // Flex container
@@ -122,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,18 @@ input[type="radio"] + label {
 input.button.primary {
   margin-top: $form-spacing * 2;
 }
+
+// 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;
@@ -36,24 +33,10 @@ $paymethod-select-border-width: $input-border-width !default;
       padding-left: rem-calc(get-side($button-padding, left)) + $select-triangle-size;
       margin-bottom: $form-spacing * 2;
 
-      // Default and disabled states
-      &,
-      &.disabled,
-      &[disabled],
-      &.disabled:hover,
-      &[disabled]:hover,
-      &.disabled:focus,
-      &[disabled]:focus {
-        background-color: $paymethod-select-background-color;
-        border: $paymethod-select-border-width solid $paymethod-select-border-color;
-        color: $paymethod-select-text-color;
-      }
-      // Hover state
-      &:hover,
-      &:focus {
-        background-color: $paymethod-select-background-color;
-        border-color: $paymethod-select-border-color-hover;
-      }
+      // Default state
+      border: $paymethod-select-border-width solid $paymethod-select-border-color;
+      background-color: $paymethod-select-background-color;
+      color: $paymethod-select-text-color;
 
       // Triangle to signify a slide menu
       // This also override any mo-radio pseudo input (if there is one)
@@ -76,7 +59,23 @@ $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;
+      }
+    }
+
+    // Operational
+    &:not(:disabled) {
+      & + label:hover,
+      &:focus + label {
+        border-color: $paymethod-select-border-color-hover;
+      }
+    }
+
+    // Disabled
+    &:disabled {
+      + label {
+        opacity: $button-opacity-disabled;
+        cursor: not-allowed;
       }
     }
   }