@moreonion/foundist 2.0.8 → 2.1.3

package/src/scss/form/_settings.scss

@@ -1,9 +1,13 @@
 // Form settings
 // - - - - - - - - - - - - - - -
 
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+
 // General
-$form-padding: rem-calc($base-line-height) 6% rem-calc($base-line-height / 2) !default;
-$form-spacing: rem-calc($base-line-height / 4) !default;
+$form-padding: rem-calc($base-line-height) 6% rem-calc($base-line-height * 0.5) !default;
+$form-spacing: rem-calc($base-line-height * 0.25) !default;
 $input-background: $white !default;
 
 // Buttons
@@ -28,17 +32,17 @@ $button-text-offset: 0 !default;
 $button-border-width: rem-calc(2) !default;
 $button-hollow-border-width: $button-border-width !default;
 $button-border: $button-border-width solid transparent !default;
-$button-padding: rem-calc(1.25 * $base-line-height / 2) - $button-border-width + $button-text-offset
-  1em rem-calc(1.25 * $base-line-height / 2) - $button-border-width - $button-text-offset !default;
+$button-padding: rem-calc($base-line-height * 0.625) - $button-border-width + $button-text-offset
+  1em rem-calc($base-line-height * 0.625) - $button-border-width - $button-text-offset !default;
 $button-radius: 0.25rem !default;
-$button-background: map-get($button-palette, primary) !default;
+$button-background: map.get($button-palette, primary) !default;
 $button-background-hover-lightness: 10% !default;
-$button-background-hover: scale-color(
+$button-background-hover: color.scale(
   $button-background,
   $lightness: $button-background-hover-lightness
 ) !default;
-$button-primary-shadow-color: scale-color(
-  map-get($button-palette, primary),
+$button-primary-shadow-color: color.scale(
+  map.get($button-palette, primary),
   $lightness: -15%,
   $saturation: 20%
 ) !default;
@@ -61,38 +65,38 @@ $form-label-line-height: if(
 $input-border-width: rem-calc(2) !default;
 $input-border-color: if(
   $input-background == $form-background,
-  scale-color($form-background, $lightness: -10%),
-  scale-color(get-background-color($form-background), $lightness: -5%)
+  color.scale($form-background, $lightness: -10%),
+  color.scale(get-background-color($form-background), $lightness: -5%)
 ) !default;
-$input-border-color-focus: scale-color($input-border-color, $lightness: -10%) !default;
+$input-border-color-focus: color.scale($input-border-color, $lightness: -10%) !default;
 $input-border: $input-border-width solid $input-border-color !default;
 $input-border-focus: $input-border-width solid $input-border-color-focus !default;
 $input-prefix-border: none !default;
 
 // Shadows
 $input-shadow: none !default;
-$input-shadow-focus: inset 0 ($input-border-width / 2) $input-border-width $input-border-color !default;
+$input-shadow-focus: inset 0 ($input-border-width * 0.5) $input-border-width $input-border-color !default;
 
 // Inputs
 $input-background-focus: $input-background !default;
 $input-font-size: 1rem !default;
-$input-line-height: max(
+$input-line-height: math.max(
   grid-lineheight($input-font-size),
   unitless-calc($base-line-height)
 ) !default;
 $input-height: rem-calc(2 * $base-line-height) !default;
 // prettier-ignore
 $input-padding: (
-  rem-calc(($input-height - $input-line-height * $input-font-size) / 2) - $input-border-width
+  rem-calc(($input-height - $input-line-height * $input-font-size) * 0.5) - $input-border-width
 ) 1rem !default;
-$input-placeholder-color: $medium-gray !default;
+$input-placeholder-color: $muted-font-color !default;
 $input-prefix-color: $form-label-color !default;
 $input-prefix-padding: 1em !default;
 
 // Selects
 $select-height: $input-height !default;
 $select-triangle-color: $dark-gray !default;
-$select-triangle-size: rem-calc($base-line-height / 2) !default;
+$select-triangle-size: rem-calc($base-line-height * 0.5) !default;
 $select-font-family: $form-label-font-family !default;
 $select-font-size: $form-label-font-size !default;
 $select-font-weight: $form-label-font-weight !default;
@@ -106,7 +110,7 @@ $radio-label-font-weight: $global-weight-normal !default;
 // Files
 $file-upload-font-size: $small-font-size !default;
 $file-upload-padding: $form-spacing * 2 !default;
-$file-upload-help-color: $medium-gray !default;
+$file-upload-help-color: $muted-font-color !default;
 
 // Help texts
 $helptext-color: $form-label-color !default;
@@ -163,12 +167,16 @@ $form-steps-font-color-alt: $body-font-color !default;
 $form-steps-background-color: $medium-gray !default;
 $form-steps-next-background-color: $light-gray !default;
 // the previous step should be $dark-gray
-// keeping it as a scale-color() relation, because of it should still be derived
+// keeping it as a color.scale() relation, because of it should still be derived
 // from the background color
-$form-steps-previous-background-color: scale-color(
+$form-steps-previous-background-color: color.scale(
   $form-steps-background-color,
   $lightness: -46.5%
 ) !default;
 
 // AJAX loading throbber
 $loader-color: get-color(primary) !default;
+
+// Donation forms
+$payment-icon-color: $form-label-color !default;
+$giftaid-checkbox-size: rem-calc($base-line-height * 1.5) !default;

package/src/scss/layout/_cover.scss

@@ -4,6 +4,8 @@
 // * cover-1col: The main content is displayed in a single column.
 // * cover-2col: The main content is split into visual sections over 1-2 columns.
 
+@use "sass:map";
+
 $cover-background: $fallback-background !default;
 $cover-content-box-shadow: none !default;
 /// A value to subtract from the screen height to place the bottom edge of #top.
@@ -50,7 +52,8 @@ $cover-2col-offset: $global-margin * 5;
     right: 0;
     bottom: 0;
     left: 0;
-    height: auto;
+    // Required to keep a constant height in mobile browsers with (dis)appearing menus
+    height: 100vh;
   }
 
   // Remove title padding
@@ -59,7 +62,7 @@ $cover-2col-offset: $global-margin * 5;
   }
 
   // Make .narrow smaller a little earlier, halfway between large and xlarge.
-  @include breakpoint((map-get($breakpoints, large) + map-get($breakpoints, xlarge)) / 2) {
+  @include breakpoint((map.get($breakpoints, large) + map.get($breakpoints, xlarge)) * 0.5) {
     ~ section .grid-container.narrow {
       > * {
         grid-column: 3 / -3;
@@ -85,7 +88,7 @@ $cover-2col-offset: $global-margin * 5;
   @include breakpoint(large) {
     // Adjust vertical paddings and margins.
     #top {
-      padding-bottom: $global-padding / 2;
+      padding-bottom: $global-padding * 0.5;
     }
     #content {
       padding-top: $global-padding * 1.5;
@@ -200,7 +203,7 @@ $cover-2col-offset: $global-margin * 5;
 
     // Reduce padding for top section.
     #top .inner-wrapper {
-      padding-bottom: $global-padding / 2;
+      padding-bottom: $global-padding * 0.5;
 
       #page-title {
         padding-top: 0;
@@ -230,7 +233,11 @@ $cover-2col-offset: $global-margin * 5;
     #background ~ #main > .grid-container {
       // Make the first grid row almost as large as the screen
       // (we don’t know how large the #header is, whether there are messages,…).
+      // ATM stylelint does not recognise pure CSS functions:
+      // https://github.com/stylelint-scss/stylelint-scss/issues/486
+      // stylelint-disable scss/no-global-function-names
       grid-template-rows: min(calc(100vh - #{$cover-2col-offset}), 125vw) 1fr;
+      // stylelint-enable scss/no-global-function-names
       // Show the top section at the bottom of this row.
       #top {
         margin-top: auto;

package/src/scss/layout/_settings.scss

@@ -18,7 +18,7 @@ $fallback-background: $medium-gray !default;
 // Borders
 $form-border: if(
   $form-background == $body-background,
-  rem-calc($base-line-height / 2) solid $light-gray,
+  rem-calc($base-line-height * 0.5) solid $light-gray,
   none
 ) !default;
 $header-border: if(

package/src/scss/main.scss

@@ -1,3 +1,5 @@
+// stylelint-disable no-invalid-position-at-import-rule
+
 @charset 'utf-8';
 
 // --------------------------------------------------------------------------
@@ -86,6 +88,8 @@
 @include mo-progress-thermometer;
 @include mo-share-button;
 @include mo-drupal-ajax-loading;
+@include mo-payment-icons;
+@include mo-giftaid;
 @include mo-cookiebar;
 
 @import "form/forms";

package/src/scss/typography/_elements.scss

@@ -46,6 +46,6 @@ h6,
 // Quotes
 
 blockquote p {
-  margin-bottom: $global-margin / 2;
+  margin-bottom: $global-margin * 0.5;
   padding: 0;
 }

package/src/scss/typography/_settings.scss

@@ -2,6 +2,9 @@
 // - - - - - - - - - - - - - - -
 // Expects $base-font-size and $global-font-size have already been set
 
+@use "sass:color";
+@use "sass:meta";
+
 // Fonts
 // see https://fontsarena.com/blog/operating-systems-default-sans-serif-fonts/
 $body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen,
@@ -12,14 +15,20 @@ $global-weight-bold: bold !default;
 // Colors
 $body-font-color: $black !default;
 $body-font-color-alt: $white !default;
+$muted-font-color: $medium-gray !default;
 $title-color: get-color(primary) !default;
-$header-color-even: if(variable-exists("header-color"), $header-color, $body-font-color) !default;
+$header-color-even: if(
+  meta.variable-exists("header-color"),
+  $header-color,
+  $body-font-color
+) !default;
 $header-color-odd: if(
-  variable-exists("header-color"),
+  meta.variable-exists("header-color"),
   $header-color,
   get-color(secondary)
 ) !default;
 $header-color-alt: $body-font-color-alt !default;
+$header-small-font-color: $muted-font-color !default;
 $anchor-color: get-color(primary) !default;
 $blockquote-color: get-color(primary) !default;
 
@@ -70,8 +79,8 @@ $header-styles: (
 ) !default;
 
 // Links
-$anchor-color-hover: scale-color($anchor-color, $lightness: -14%) !default;
-$anchor-color-active: scale-color($anchor-color, $lightness: 6%) !default;
+$anchor-color-hover: color.scale($anchor-color, $lightness: -14%) !default;
+$anchor-color-active: color.scale($anchor-color, $lightness: 6%) !default;
 $anchor-text-decoration: underline !default;
 $anchor-text-decoration-hover: underline !default;