@moreonion/foundist 3.4.0 → 3.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/package.json +14 -14
  2. package/src/html/basic-action-page-cover-1col-with-headline.html +12 -10
  3. package/src/html/basic-action-page-cover-1col.html +7 -5
  4. package/src/html/basic-action-page-cover-2col-reversed.html +7 -5
  5. package/src/html/basic-action-page-cover-2col-with-headline.html +11 -9
  6. package/src/html/basic-action-page-cover-2col.html +7 -5
  7. package/src/html/basic-action-page-cover-banner-with-headline.html +11 -9
  8. package/src/html/basic-action-page-cover-banner.html +7 -5
  9. package/src/html/basic-action-page-reversed.html +6 -4
  10. package/src/html/basic-action-page-with-banner-and-headline.html +11 -9
  11. package/src/html/basic-action-page-with-banner-reversed.html +7 -5
  12. package/src/html/basic-action-page-with-banner.html +7 -5
  13. package/src/html/basic-action-page-with-callouts.html +6 -4
  14. package/src/html/basic-action-page.html +6 -4
  15. package/src/html/donation-action-page.html +5 -3
  16. package/src/html/e2t-action-page.html +6 -4
  17. package/src/html/includes/menu-responsive.html +2 -2
  18. package/src/html/index.html +58 -0
  19. package/src/html/login-page.html +4 -2
  20. package/src/html/signup-action-page.html +5 -3
  21. package/src/html/snippets-demo.html +10 -8
  22. package/src/html/teaser-page.html +5 -3
  23. package/src/html/templates/action-page-cover-banner.html +1 -1
  24. package/src/html/templates/action-page-reversed.html +1 -1
  25. package/src/html/templates/action-page.html +2 -2
  26. package/src/html/thank-you-page-cover-1col-with-headline.html +9 -7
  27. package/src/html/thank-you-page-cover-1col.html +5 -3
  28. package/src/html/thank-you-page-cover-2col-with-headline.html +10 -8
  29. package/src/html/thank-you-page-cover-2col.html +6 -4
  30. package/src/html/thank-you-page-cover-banner-with-headline.html +9 -7
  31. package/src/html/thank-you-page-cover-banner.html +5 -3
  32. package/src/html/thank-you-page-with-banner-and-headline.html +9 -7
  33. package/src/html/thank-you-page-with-banner.html +5 -3
  34. package/src/html/thank-you-page.html +5 -3
  35. package/src/html/typography-static-page.html +3 -1
  36. package/src/scss/components/_accordion.scss +2 -1
  37. package/src/scss/components/_menu.scss +2 -1
  38. package/src/scss/components/_mobile-menu.scss +2 -1
  39. package/src/scss/components/_settings.scss +3 -3
  40. package/src/scss/components/_sticky-button.scss +2 -1
  41. package/src/scss/form/_paymethod-select-button.scss +18 -13
  42. package/src/scss/layout/_backgrounds.scss +9 -3
  43. package/src/scss/layout/_cover-banner.scss +6 -0
  44. package/src/scss/layout/_cover.scss +6 -0
  45. package/src/html/dev-index.html +0 -58
  46. package/src/scss/form/_braintree_apple_pay.scss +0 -13
package/src/html/login-page.html CHANGED
@@ -1,7 +1,9 @@
1
- {% extends "src/html/templates/page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/page.html" %}
2
4
 
3
5
  {% block page_title %}User account{% endblock %}
4
6
 
5
7
  {% block content %}
6
- {% include "src/html/includes/login-form.html" %}
8
+ {% include settings.html_path + "/includes/login-form.html" %}
7
9
  {% endblock %}
package/src/html/signup-action-page.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/action-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/action-page.html" %}
2
4
 
3
5
  {% set layout = "default" %}
4
6
 
@@ -14,11 +16,11 @@
14
16
  {% endblock %}
15
17
 
16
18
  {% block progress_bar %}
17
- {% include "src/html/includes/pgbar.html" %}
19
+ {% include settings.html_path + "/includes/pgbar.html" %}
18
20
  {% endblock %}
19
21
 
20
22
  {% block form %}
21
- {% include "src/html/includes/signup-form.html" %}
23
+ {% include settings.html_path + "/includes/signup-form.html" %}
22
24
  {% endblock %}
23
25
 
24
26
  {% block content_top %}
package/src/html/snippets-demo.html CHANGED
@@ -1,28 +1,30 @@
1
- {% extends "src/html/templates/page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/page.html" %}
2
4
 
3
5
  {% block page_title %}Snippets demo{% endblock %}
4
6
 
5
7
  {% block header %}
6
- {% include "src/html/includes/menu-responsive.html" %}
8
+ {% include settings.html_path + "/includes/menu-responsive.html" %}
7
9
  {% endblock %}
8
10
 
9
11
  {% block content %}
10
12
  <h2>Accordion</h2>
11
- {% include "src/html/includes/accordion.html" %}
13
+ {% include settings.html_path + "/includes/accordion.html" %}
12
14
 
13
15
  <h2>Toggle element</h2>
14
- {% include "src/html/includes/toggle-element-show-more.html" %}
15
- {% include "src/html/includes/toggle-element-toggle.html" %}
16
+ {% include settings.html_path + "/includes/toggle-element-show-more.html" %}
17
+ {% include settings.html_path + "/includes/toggle-element-toggle.html" %}
16
18
  {% endblock %}
17
19
 
18
20
  {% block content_bottom %}
19
- {% include "src/html/includes/cookiebar.html" %}
21
+ {% include settings.html_path + "/includes/cookiebar.html" %}
20
22
  {% endblock %}
21
23
 
22
24
  {% block bottom %}
23
- {% include "src/html/includes/section-slideshow.html" %}
25
+ {% include settings.html_path + "/includes/section-slideshow.html" %}
24
26
  {% endblock %}
25
27
 
26
28
  {% block footer %}
27
- {% include "src/html/includes/menu.html" %}
29
+ {% include settings.html_path + "/includes/menu.html" %}
28
30
  {% endblock %}
package/src/html/teaser-page.html CHANGED
@@ -1,10 +1,12 @@
1
- {% extends "src/html/templates/page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/page.html" %}
2
4
 
3
5
  {% block page_title %}Our latest actions and donation asks{% endblock %}
4
6
 
5
7
  {% block main_container_class %}{% endblock %}
6
8
 
7
9
  {% block content_bottom %}
8
- {% include "src/html/includes/teasers.html" %}
9
- {% include "src/html/includes/pagination.html" %}
10
+ {% include settings.html_path + "/includes/teasers.html" %}
11
+ {% include settings.html_path + "/includes/pagination.html" %}
10
12
  {% endblock %}
package/src/html/templates/action-page-cover-banner.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <div class="grid-container with-sidebar">
9
9
  <header id="headline">{% block headline %}{% endblock %}</header>
10
10
  <div id="form-wrapper" class="flex-container align-middle">
11
- <div id="form-outer">
11
+ <div id="form-outer" class="flex-child-auto">
12
12
  <div class="intro">{% block form_intro %}{% endblock %}</div>
13
13
  {% block progress_bar %}{% endblock %}
14
14
  {% block form %}{% endblock %}
package/src/html/templates/action-page-reversed.html CHANGED
@@ -7,7 +7,7 @@
7
7
  {% block sidebar_bottom %}
8
8
  <div id="sidebar">
9
9
  <div id="form-wrapper" class="flex-container align-middle">
10
- <div id="form-outer">
10
+ <div id="form-outer" class="flex-child-auto">
11
11
  <div class="intro">{% block form_intro %}{% endblock %}</div>
12
12
  {% block progress_bar %}{% endblock %}
13
13
  {% block form %}{% endblock %}
package/src/html/templates/action-page.html CHANGED
@@ -5,13 +5,13 @@
5
5
  {% block main_container_class %}with-sidebar{% endblock %}
6
6
 
7
7
  {% block header %}
8
- {% include "src/html/includes/language-switcher.html" %}
8
+ {% include "../includes/language-switcher.html" %}
9
9
  {% endblock %}
10
10
 
11
11
  {% block sidebar %}
12
12
  <div id="sidebar">
13
13
  <div id="form-wrapper" class="flex-container align-middle">
14
- <div id="form-outer">
14
+ <div id="form-outer" class="flex-child-auto">
15
15
  <div class="intro">{% block form_intro %}{% endblock %}</div>
16
16
  {% block progress_bar %}{% endblock %}
17
17
  {% block form %}{% endblock %}
package/src/html/thank-you-page-cover-1col-with-headline.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/share-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/share-page.html" %}
2
4
 
3
5
  {% set layout = "cover-1col" %}
4
6
 
@@ -19,16 +21,16 @@
19
21
  {% endblock %}
20
22
 
21
23
  {% block content_bottom %}
22
- {% include "src/html/includes/share-buttons.html" %}
24
+ {% include settings.html_path + "/includes/share-buttons.html" %}
23
25
  {% endblock %}
24
26
 
25
27
  {% block bottom %}
26
- {% include "src/html/includes/section-2col.html" %}
27
- {% include "src/html/includes/section-2col.html" %}
28
- {% include "src/html/includes/section-quote.html" %}
29
- {% include "src/html/includes/section-1col.html" %}
28
+ {% include settings.html_path + "/includes/section-2col.html" %}
29
+ {% include settings.html_path + "/includes/section-2col.html" %}
30
+ {% include settings.html_path + "/includes/section-quote.html" %}
31
+ {% include settings.html_path + "/includes/section-1col.html" %}
30
32
  {% endblock %}
31
33
 
32
34
  {% block footer %}
33
- {% include "src/html/includes/menu.html" %}
35
+ {% include settings.html_path + "/includes/menu.html" %}
34
36
  {% endblock %}
package/src/html/thank-you-page-cover-1col.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/share-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/share-page.html" %}
2
4
 
3
5
  {% set layout = "cover-1col" %}
4
6
 
@@ -13,9 +15,9 @@
13
15
  {% endblock %}
14
16
 
15
17
  {% block content_bottom %}
16
- {% include "src/html/includes/share-buttons.html" %}
18
+ {% include settings.html_path + "/includes/share-buttons.html" %}
17
19
  {% endblock %}
18
20
 
19
21
  {% block footer %}
20
- {% include "src/html/includes/menu.html" %}
22
+ {% include settings.html_path + "/includes/menu.html" %}
21
23
  {% endblock %}
package/src/html/thank-you-page-cover-2col-with-headline.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/action-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/action-page.html" %}
2
4
 
3
5
  {% set layout = "cover-2col" %}
4
6
 
@@ -19,20 +21,20 @@
19
21
  {% endblock %}
20
22
 
21
23
  {% block form %}
22
- {% include "src/html/includes/share-buttons.html" %}
24
+ {% include settings.html_path + "/includes/share-buttons.html" %}
23
25
  {% endblock %}
24
26
 
25
27
  {% block recent_supporters %}
26
- {% include "src/html/includes/recent-supporters.html" %}
28
+ {% include settings.html_path + "/includes/recent-supporters.html" %}
27
29
  {% endblock %}
28
30
 
29
31
  {% block bottom %}
30
- {% include "src/html/includes/section-2col.html" %}
31
- {% include "src/html/includes/section-2col.html" %}
32
- {% include "src/html/includes/section-quote.html" %}
33
- {% include "src/html/includes/section-1col.html" %}
32
+ {% include settings.html_path + "/includes/section-2col.html" %}
33
+ {% include settings.html_path + "/includes/section-2col.html" %}
34
+ {% include settings.html_path + "/includes/section-quote.html" %}
35
+ {% include settings.html_path + "/includes/section-1col.html" %}
34
36
  {% endblock %}
35
37
 
36
38
  {% block footer %}
37
- {% include "src/html/includes/menu.html" %}
39
+ {% include settings.html_path + "/includes/menu.html" %}
38
40
  {% endblock %}
package/src/html/thank-you-page-cover-2col.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/action-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/action-page.html" %}
2
4
 
3
5
  {% set layout = "cover-2col" %}
4
6
 
@@ -13,13 +15,13 @@
13
15
  {% endblock %}
14
16
 
15
17
  {% block form %}
16
- {% include "src/html/includes/share-buttons.html" %}
18
+ {% include settings.html_path + "/includes/share-buttons.html" %}
17
19
  {% endblock %}
18
20
 
19
21
  {% block recent_supporters %}
20
- {% include "src/html/includes/recent-supporters.html" %}
22
+ {% include settings.html_path + "/includes/recent-supporters.html" %}
21
23
  {% endblock %}
22
24
 
23
25
  {% block footer %}
24
- {% include "src/html/includes/menu.html" %}
26
+ {% include settings.html_path + "/includes/menu.html" %}
25
27
  {% endblock %}
package/src/html/thank-you-page-cover-banner-with-headline.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/share-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/share-page.html" %}
2
4
 
3
5
  {% set layout = "cover-banner" %}
4
6
 
@@ -19,16 +21,16 @@
19
21
  {% endblock %}
20
22
 
21
23
  {% block content_bottom %}
22
- {% include "src/html/includes/share-buttons.html" %}
24
+ {% include settings.html_path + "/includes/share-buttons.html" %}
23
25
  {% endblock %}
24
26
 
25
27
  {% block bottom %}
26
- {% include "src/html/includes/section-2col.html" %}
27
- {% include "src/html/includes/section-2col.html" %}
28
- {% include "src/html/includes/section-quote.html" %}
29
- {% include "src/html/includes/section-1col.html" %}
28
+ {% include settings.html_path + "/includes/section-2col.html" %}
29
+ {% include settings.html_path + "/includes/section-2col.html" %}
30
+ {% include settings.html_path + "/includes/section-quote.html" %}
31
+ {% include settings.html_path + "/includes/section-1col.html" %}
30
32
  {% endblock %}
31
33
 
32
34
  {% block footer %}
33
- {% include "src/html/includes/menu.html" %}
35
+ {% include settings.html_path + "/includes/menu.html" %}
34
36
  {% endblock %}
package/src/html/thank-you-page-cover-banner.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/share-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/share-page.html" %}
2
4
 
3
5
  {% set layout = "cover-banner" %}
4
6
 
@@ -13,9 +15,9 @@
13
15
  {% endblock %}
14
16
 
15
17
  {% block content_bottom %}
16
- {% include "src/html/includes/share-buttons.html" %}
18
+ {% include settings.html_path + "/includes/share-buttons.html" %}
17
19
  {% endblock %}
18
20
 
19
21
  {% block footer %}
20
- {% include "src/html/includes/menu.html" %}
22
+ {% include settings.html_path + "/includes/menu.html" %}
21
23
  {% endblock %}
package/src/html/thank-you-page-with-banner-and-headline.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/share-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/share-page.html" %}
2
4
 
3
5
  {% set layout = "banner" %}
4
6
 
@@ -19,16 +21,16 @@
19
21
  {% endblock %}
20
22
 
21
23
  {% block content_bottom %}
22
- {% include "src/html/includes/share-buttons.html" %}
24
+ {% include settings.html_path + "/includes/share-buttons.html" %}
23
25
  {% endblock %}
24
26
 
25
27
  {% block bottom %}
26
- {% include "src/html/includes/section-2col.html" %}
27
- {% include "src/html/includes/section-2col.html" %}
28
- {% include "src/html/includes/section-quote.html" %}
29
- {% include "src/html/includes/section-1col.html" %}
28
+ {% include settings.html_path + "/includes/section-2col.html" %}
29
+ {% include settings.html_path + "/includes/section-2col.html" %}
30
+ {% include settings.html_path + "/includes/section-quote.html" %}
31
+ {% include settings.html_path + "/includes/section-1col.html" %}
30
32
  {% endblock %}
31
33
 
32
34
  {% block footer %}
33
- {% include "src/html/includes/menu.html" %}
35
+ {% include settings.html_path + "/includes/menu.html" %}
34
36
  {% endblock %}
package/src/html/thank-you-page-with-banner.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/share-page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/share-page.html" %}
2
4
 
3
5
  {% set layout = "banner" %}
4
6
 
@@ -13,9 +15,9 @@
13
15
  {% endblock %}
14
16
 
15
17
  {% block content_bottom %}
16
- {% include "src/html/includes/share-buttons.html" %}
18
+ {% include settings.html_path + "/includes/share-buttons.html" %}
17
19
  {% endblock %}
18
20
 
19
21
  {% block footer %}
20
- {% include "src/html/includes/menu.html" %}
22
+ {% include settings.html_path + "/includes/menu.html" %}
21
23
  {% endblock %}
package/src/html/thank-you-page.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/page.html" %}
2
4
 
3
5
  {% set layout = "default" %}
4
6
 
@@ -16,9 +18,9 @@
16
18
  {% endblock %}
17
19
 
18
20
  {% block content_bottom %}
19
- {% include "src/html/includes/share-buttons.html" %}
21
+ {% include settings.html_path + "/includes/share-buttons.html" %}
20
22
  {% endblock %}
21
23
 
22
24
  {% block footer %}
23
- {% include "src/html/includes/overlay.html" %}
25
+ {% include settings.html_path + "/includes/overlay.html" %}
24
26
  {% endblock %}
package/src/html/typography-static-page.html CHANGED
@@ -1,4 +1,6 @@
1
- {% extends "src/html/templates/page.html" %}
1
+ {% import "_globals.html" as settings %}
2
+
3
+ {% extends settings.html_path + "/templates/page.html" %}
2
4
 
3
5
  {% block page_title %}This is the main headline{% endblock %}
4
6
 
package/src/scss/components/_accordion.scss CHANGED
@@ -17,7 +17,6 @@
17
17
 
18
18
  // Triangle to signal a dropdown
19
19
  &:before {
20
- @include background-triangle($accordion-triangle-color);
21
20
  width: $accordion-triangle-size;
22
21
  height: $accordion-triangle-size;
23
22
  background-size: $accordion-triangle-size;
@@ -30,6 +29,8 @@
30
29
  left: rem-calc(get-side($accordion-item-padding, left));
31
30
  // The triangle is vertically centered in the title
32
31
  top: calc(50% - #{$accordion-triangle-size * 0.5});
32
+
33
+ @include background-triangle($accordion-triangle-color);
33
34
  }
34
35
  .is-active & {
35
36
  &:before {
package/src/scss/components/_menu.scss CHANGED
@@ -152,7 +152,6 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
152
152
  @if $dropdownmenu-arrows {
153
153
  // Replace CSS arrow with SVG arrow to match selects.
154
154
  > li.is-dropdown-submenu-parent > a:after {
155
- @include background-triangle($dropdownmenu-arrow-color);
156
155
  background-repeat: no-repeat;
157
156
  background-size: $dropdownmenu-arrow-size;
158
157
  background-position: center;
@@ -160,6 +159,8 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
160
159
  width: $dropdownmenu-arrow-size;
161
160
  height: $dropdownmenu-arrow-size;
162
161
  #{$global-right}: get-side($dropdownmenu-padding, $global-right);
162
+
163
+ @include background-triangle($dropdownmenu-arrow-color);
163
164
  }
164
165
 
165
166
  @include breakpoint(small down) {
package/src/scss/components/_mobile-menu.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  // Turn a menu wrapper into a mobile menu at a certain breakpoint
4
4
 
5
5
  @use "sass:color";
6
+ @use "sass:meta";
6
7
 
7
8
  // Mobile menu
8
9
  $mobile-menu-breakpoint: medium down !default;
@@ -130,7 +131,7 @@ $mobile-menu-icon-weight: rem-calc(0.125 * $base-line-height) !default;
130
131
  }
131
132
 
132
133
  // Align language switcher with menu items.
133
- @if (type-of($dropdown-menu-parent-border-width) == number) and
134
+ @if (meta.type-of($dropdown-menu-parent-border-width) == number) and
134
135
  ($dropdown-menu-parent-border-width > 0)
135
136
  {
136
137
  .dropdown.menu {
package/src/scss/components/_settings.scss CHANGED
@@ -26,7 +26,7 @@ $recent-supporter-color: color-pick-contrast(
26
26
  ) !default;
27
27
  $recent-supporter-time-color: $muted-font-color !default;
28
28
  $recent-supporter-border-color: if(
29
- color.lightness(get-background-color($body-background)) < 50,
29
+ color.channel(get-background-color($body-background), "lightness", $space: hsl) < 50,
30
30
  $dark-gray,
31
31
  $light-gray
32
32
  ) !default;
@@ -84,7 +84,7 @@ $menu-item-font-weight: $global-weight-normal !default;
84
84
  $menu-item-color: inherit !default;
85
85
  $menu-item-color-hover: $menu-item-color !default;
86
86
  $menu-item-decoration-hover: underline !default;
87
- $menu-item-background-active: rgba($header-background, 0) !default;
87
+ $menu-item-background-active: rgba(get-background-color($header-background), 0) !default;
88
88
  $menu-text-color: $menu-item-color !default;
89
89
  $menu-text-font-weight: $menu-item-font-weight !default;
90
90
  $menu-items-padding: rem-calc($base-line-height * 0.5 $base-line-height * 0.75) !default;
@@ -151,7 +151,7 @@ $accordion-triangle-color: get-color(primary) !default;
151
151
  $accordion-triangle-size: rem-calc($base-font-size) !default;
152
152
 
153
153
  // Reveal
154
- $reveal-overlay-background: rgba($fallback-background, 0.9) !default;
154
+ $reveal-overlay-background: rgba(get-background-color($fallback-background), 0.9) !default;
155
155
  $reveal-background: $form-background !default;
156
156
  $reveal-padding: $form-padding !default;
157
157
  $reveal-border: $form-border !default;
package/src/scss/components/_sticky-button.scss CHANGED
@@ -10,13 +10,14 @@ $sticky-cta-boxshadow: 0 0 rem-calc(3) color.scale($black, $alpha: -75%) !defaul
10
10
  $sticky-button-max-width: $button-max-width !default;
11
11
 
12
12
  .sticky-cta {
13
- @include sticky-button;
14
13
  background: $sticky-cta-background;
15
14
  box-shadow: $sticky-cta-boxshadow;
16
15
  padding: $global-padding * 0.5;
17
16
  padding-left: get-side($form-padding, left);
18
17
  padding-right: get-side($form-padding, right);
19
18
 
19
+ @include sticky-button;
20
+
20
21
  .button {
21
22
  max-width: $sticky-button-max-width;
22
23
  margin-left: auto;
package/src/scss/form/_paymethod-select-button.scss CHANGED
@@ -7,6 +7,8 @@
7
7
  // These radio buttons do not have a checked state, only normal and hover.
8
8
  // They work only as selection menu, no need to highlight the checked button.
9
9
 
10
+ // stylelint-disable no-duplicate-selectors
11
+
10
12
  $paymethod-select-border-color: $input-border-color !default;
11
13
  $paymethod-select-border-color-hover: $input-border-color-focus !default;
12
14
  $paymethod-select-border-radius: $button-radius !default;
@@ -24,24 +26,25 @@ $paymethod-select-border-width: $input-border-width !default;
24
26
  @include button-base;
25
27
  @include button-expand;
26
28
 
27
- border-radius: $paymethod-select-border-radius;
28
- text-align: left;
29
- font-size: $form-label-font-size;
30
- line-height: $form-label-line-height;
31
- // The padding between text and triangle is increased by the triangle size
32
- // (see also the positioning of the triangle below)
33
- padding-left: rem-calc(get-side($button-padding, left)) + $select-triangle-size;
34
- margin-bottom: $form-spacing * 2;
29
+ & {
30
+ border-radius: $paymethod-select-border-radius;
31
+ text-align: left;
32
+ font-size: $form-label-font-size;
33
+ line-height: $form-label-line-height;
34
+ // The padding between text and triangle is increased by the triangle size
35
+ // (see also the positioning of the triangle below)
36
+ padding-left: rem-calc(get-side($button-padding, left)) + $select-triangle-size;
37
+ margin-bottom: $form-spacing * 2;
35
38
 
36
- // Default state
37
- border: $paymethod-select-border-width solid $paymethod-select-border-color;
38
- background-color: $paymethod-select-background-color;
39
- color: $paymethod-select-text-color;
39
+ // Default state
40
+ border: $paymethod-select-border-width solid $paymethod-select-border-color;
41
+ background-color: $paymethod-select-background-color;
42
+ color: $paymethod-select-text-color;
43
+ }
40
44
 
41
45
  // Triangle to signify a slide menu
42
46
  // This also override any mo-radio pseudo input (if there is one)
43
47
  &:before {
44
- @include background-triangle($paymethod-select-triangle-color);
45
48
  background-repeat: no-repeat;
46
49
  background-size: $select-triangle-size;
47
50
  background-position: center;
@@ -55,6 +58,8 @@ $paymethod-select-border-width: $input-border-width !default;
55
58
  transform: rotate(-90deg);
56
59
  position: relative;
57
60
  left: -$select-triangle-size;
61
+
62
+ @include background-triangle($paymethod-select-triangle-color);
58
63
  }
59
64
 
60
65
  // These buttons are a bit tighter together
package/src/scss/layout/_backgrounds.scss CHANGED
@@ -1,10 +1,13 @@
1
1
  // Backgrounds
2
2
  // - - - - - - - - - - - - - - -
3
3
 
4
+ @use "sass:list";
5
+
4
6
  #header {
5
7
  background: $header-background;
6
8
 
7
- @if $body-background != $header-background and not index((transparent, none), $header-background)
9
+ @if ($body-background != $header-background) and not
10
+ list.index((transparent, none), $header-background)
8
11
  {
9
12
  @include match-colors($header-background);
10
13
  }
@@ -13,7 +16,9 @@
13
16
  #form-outer {
14
17
  background: $form-background;
15
18
 
16
- @if $body-background != $form-background and not index((transparent, none), $form-background) {
19
+ @if ($body-background != $form-background) and not
20
+ list.index((transparent, none), $form-background)
21
+ {
17
22
  @include match-colors($form-background);
18
23
  }
19
24
  }
@@ -21,7 +26,8 @@
21
26
  #footer {
22
27
  background: $footer-background;
23
28
 
24
- @if $body-background != $footer-background and not index((transparent, none), $footer-background)
29
+ @if ($body-background != $footer-background) and not
30
+ list.index((transparent, none), $footer-background)
25
31
  {
26
32
  @include match-colors($footer-background);
27
33
  }
package/src/scss/layout/_cover-banner.scss CHANGED
@@ -69,6 +69,12 @@ $cover-banner-min-height: 66vh !default;
69
69
 
70
70
  // Displaying a big headline on small/medium screens.
71
71
  .cover-banner-layout.with-headline {
72
+ @include breakpoint(small down) {
73
+ #background img {
74
+ max-height: none;
75
+ mask-image: none;
76
+ }
77
+ }
72
78
  @include breakpoint(medium down) {
73
79
  #background ~ #banner-content {
74
80
  padding-top: 0;
package/src/scss/layout/_cover.scss CHANGED
@@ -65,6 +65,12 @@ $cover-2col-offset: min(55vh, 85vw) !default;
65
65
  width: 100%;
66
66
  height: 100%;
67
67
  object-fit: cover;
68
+
69
+ // Cut off image with a fade out on small screens.
70
+ @include breakpoint(small down) {
71
+ max-height: 150vw;
72
+ mask-image: linear-gradient(#000 70%, #000, transparent);
73
+ }
68
74
  }
69
75
 
70
76
  // Remove title padding