@moreonion/foundist 3.1.2 → 3.2.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.
- package/package.json +2 -2
- package/src/html/includes/form-items/donation-amount-drupal.html +68 -0
- package/src/html/includes/form-items/donation-amount.html +44 -56
- package/src/html/includes/form-items/radio-buttons.html +13 -0
- package/src/html/includes/section-slideshow.html +37 -0
- package/src/html/snippets-demo.html +4 -0
- package/src/js/foundist.js +2 -0
- package/src/scss/_util.scss +30 -0
- package/src/scss/components/_menu.scss +1 -1
- package/src/scss/components/_progressbar.scss +5 -2
- package/src/scss/components/_settings.scss +9 -12
- package/src/scss/components/_slideshow.scss +76 -0
- package/src/scss/form/_button.scss +2 -1
- package/src/scss/form/_donation-amount-button.scss +140 -150
- package/src/scss/form/_fields.scss +6 -15
- package/src/scss/form/_settings.scss +3 -3
- package/src/scss/layout/_default.scss +2 -1
- package/src/scss/layout/_teasers.scss +2 -2
- package/src/scss/main.scss +5 -0
- package/src/scss/typography/_settings.scss +10 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moreonion/foundist",
|
|
3
|
-
"version": "3.1
|
|
3
|
+
"version": "3.2.1",
|
|
4
4
|
"description": "Foundation based default theme for Impact Stack landing pages.",
|
|
5
5
|
"author": "More Onion <kontakt@more-onion.at>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"prepare": "husky install"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@moreonion/foundation-base": "^3.1
|
|
29
|
+
"@moreonion/foundation-base": "^3.2.1",
|
|
30
30
|
"vite-plugin-nunjucks": "^0.1.10"
|
|
31
31
|
},
|
|
32
32
|
"lint-staged": {
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<div class="donation-amount form-item">
|
|
2
|
+
<div class="select-or-other donation-amount-buttons">
|
|
3
|
+
<div class="form-item form-type-radios">
|
|
4
|
+
<div
|
|
5
|
+
id="donation-amount-select"
|
|
6
|
+
class="form-radios donation-amount-buttons select-or-other-select"
|
|
7
|
+
>
|
|
8
|
+
<div class="form-item form-type-radio">
|
|
9
|
+
<input
|
|
10
|
+
required="required"
|
|
11
|
+
class="donation-amount-buttons select-or-other-select form-radio"
|
|
12
|
+
type="radio"
|
|
13
|
+
id="donation-amount-select-1"
|
|
14
|
+
name="donation_amount[select]"
|
|
15
|
+
value="5"
|
|
16
|
+
/>
|
|
17
|
+
<label class="option button" for="donation-amount-select-1">£5 </label>
|
|
18
|
+
</div>
|
|
19
|
+
<div class="form-item form-type-radio">
|
|
20
|
+
<input
|
|
21
|
+
required="required"
|
|
22
|
+
class="donation-amount-buttons select-or-other-select form-radio"
|
|
23
|
+
type="radio"
|
|
24
|
+
id="donation-amount-select-2"
|
|
25
|
+
name="donation_amount[select]"
|
|
26
|
+
value="10"
|
|
27
|
+
checked="checked"
|
|
28
|
+
/>
|
|
29
|
+
<label class="option button" for="donation-amount-select-2">£10 </label>
|
|
30
|
+
</div>
|
|
31
|
+
<div class="form-item form-type-radio">
|
|
32
|
+
<input
|
|
33
|
+
required="required"
|
|
34
|
+
class="donation-amount-buttons select-or-other-select form-radio"
|
|
35
|
+
type="radio"
|
|
36
|
+
id="donation-amount-select-3"
|
|
37
|
+
name="donation_amount[select]"
|
|
38
|
+
value="20"
|
|
39
|
+
/>
|
|
40
|
+
<label class="option button" for="donation-amount-select-3">£20 </label>
|
|
41
|
+
</div>
|
|
42
|
+
<div class="form-item form-type-radio">
|
|
43
|
+
<input
|
|
44
|
+
required="required"
|
|
45
|
+
class="donation-amount-buttons select-or-other-select form-radio"
|
|
46
|
+
type="radio"
|
|
47
|
+
id="donation-amount-select-4"
|
|
48
|
+
name="donation_amount[select]"
|
|
49
|
+
value="select_or_other"
|
|
50
|
+
/>
|
|
51
|
+
<label class="option" for="donation-amount-select-4">Other amount </label>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
</div>
|
|
55
|
+
<div class="form-item donation-amount-other form-type-textfield">
|
|
56
|
+
<label for="donation-amount-other">£ </label>
|
|
57
|
+
<input
|
|
58
|
+
class="donation-amount-buttons select-or-other-other form-text"
|
|
59
|
+
type="text"
|
|
60
|
+
id="donation-amount-other"
|
|
61
|
+
name="donation_amount[other]"
|
|
62
|
+
value=""
|
|
63
|
+
size="60"
|
|
64
|
+
maxlength="128"
|
|
65
|
+
/>
|
|
66
|
+
</div>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
@@ -1,62 +1,50 @@
|
|
|
1
|
-
<div class="donation-amount
|
|
2
|
-
<div class="
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
value="20"
|
|
39
|
-
/>
|
|
40
|
-
<label class="option" for="donation-amount-select-3">£20 </label>
|
|
41
|
-
</div>
|
|
42
|
-
<div class="form-item form-type-radio">
|
|
43
|
-
<input
|
|
44
|
-
required="required"
|
|
45
|
-
class="donation-amount-buttons select-or-other-select form-radio"
|
|
46
|
-
type="radio"
|
|
47
|
-
id="donation-amount-select-4"
|
|
48
|
-
name="donation_amount[select]"
|
|
49
|
-
value="select_or_other"
|
|
50
|
-
/>
|
|
51
|
-
<label class="option" for="donation-amount-select-4">Other amount </label>
|
|
52
|
-
</div>
|
|
1
|
+
<div class="form-item donation-amount">
|
|
2
|
+
<div class="form-item extra-spacing">
|
|
3
|
+
<label for="donation-amount-select-1">How much would you like to give?</label>
|
|
4
|
+
<div id="donation-amount" class="form-radios">
|
|
5
|
+
<div class="form-item">
|
|
6
|
+
<input
|
|
7
|
+
required="required"
|
|
8
|
+
class="form-radio"
|
|
9
|
+
type="radio"
|
|
10
|
+
id="donation-amount-select-1"
|
|
11
|
+
name="donation_amount[select]"
|
|
12
|
+
value="5"
|
|
13
|
+
/>
|
|
14
|
+
<label class="option button" for="donation-amount-select-1">£5</label>
|
|
15
|
+
</div>
|
|
16
|
+
<div class="form-item">
|
|
17
|
+
<input
|
|
18
|
+
required="required"
|
|
19
|
+
class="form-radio"
|
|
20
|
+
type="radio"
|
|
21
|
+
id="donation-amount-select-2"
|
|
22
|
+
name="donation_amount[select]"
|
|
23
|
+
value="10"
|
|
24
|
+
checked="checked"
|
|
25
|
+
/>
|
|
26
|
+
<label class="option button" for="donation-amount-select-2">£10</label>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="form-item">
|
|
29
|
+
<input
|
|
30
|
+
required="required"
|
|
31
|
+
class="form-radio"
|
|
32
|
+
type="radio"
|
|
33
|
+
id="donation-amount-select-3"
|
|
34
|
+
name="donation_amount[select]"
|
|
35
|
+
value="20"
|
|
36
|
+
/>
|
|
37
|
+
<label class="option button" for="donation-amount-select-3">£20</label>
|
|
53
38
|
</div>
|
|
54
39
|
</div>
|
|
55
|
-
|
|
56
|
-
|
|
40
|
+
</div>
|
|
41
|
+
<div class="form-item">
|
|
42
|
+
<label for="donation-amount-other">Custom amount</label>
|
|
43
|
+
<div class="input-group">
|
|
44
|
+
<span class="input-group-label">£</span>
|
|
57
45
|
<input
|
|
58
|
-
class="
|
|
59
|
-
type="
|
|
46
|
+
class="input-group-field form-number"
|
|
47
|
+
type="number"
|
|
60
48
|
id="donation-amount-other"
|
|
61
49
|
name="donation_amount[other]"
|
|
62
50
|
value=""
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div class="form-item inline extra-spacing">
|
|
2
|
+
<label for="radio-buttons-1">Do you like cats?</label>
|
|
3
|
+
<div id="radio-buttons" class="form-radios">
|
|
4
|
+
<div class="form-item">
|
|
5
|
+
<input type="radio" id="radio-buttons-1" name="radio-buttons" value="1" class="form-radio">
|
|
6
|
+
<label class="option button" for="radio-buttons-1">Yes, I’m a dog</label>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="form-item">
|
|
9
|
+
<input type="radio" id="radio-buttons-2" name="radio-buttons" value="0" class="form-radio">
|
|
10
|
+
<label class="option button" for="radio-buttons-2">No, I’m a dog</label>
|
|
11
|
+
</div>
|
|
12
|
+
</div>
|
|
13
|
+
</div>
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{% macro img_slide(width, height) %}
|
|
2
|
+
<li>
|
|
3
|
+
<img
|
|
4
|
+
src="http://placekitten.com/{{ width|default([480, 640, 880, 1280]|random) }}/{{ height|default([480, 640, 880]|random) }}"
|
|
5
|
+
alt="test image with cats"
|
|
6
|
+
crossorigin=""
|
|
7
|
+
>
|
|
8
|
+
</li>
|
|
9
|
+
{% endmacro %}
|
|
10
|
+
|
|
11
|
+
{% macro card_slide(caption) %}
|
|
12
|
+
<li>
|
|
13
|
+
<div class="card">
|
|
14
|
+
<div class="card-image">
|
|
15
|
+
<img src="http://placekitten.com/480/270" alt="test image with cats" crossorigin="">
|
|
16
|
+
</div>
|
|
17
|
+
<div class="card-section">
|
|
18
|
+
<p>{{ caption }}</p>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
</li>
|
|
22
|
+
{% endmacro %}
|
|
23
|
+
|
|
24
|
+
<section>
|
|
25
|
+
<div class="grid-container">
|
|
26
|
+
<h3>A slideshow full of meow</h3>
|
|
27
|
+
<ul class="slideshow" data-slideshow="slideshow" data-dots="true" data-arrows="true" data-max-slides="3">
|
|
28
|
+
{{ card_slide("Cats for world domination") }}
|
|
29
|
+
{{ card_slide("Meouw!") }}
|
|
30
|
+
{{ card_slide("Ignore the squirrels, you’ll never catch them anyway") }}
|
|
31
|
+
{{ card_slide("Your pillow is now my pet bed nya nya nyan") }}
|
|
32
|
+
{{ card_slide("What’s your problem?") }}
|
|
33
|
+
{{ card_slide("Ignore the squirrels!") }}
|
|
34
|
+
{{ card_slide("Y mewl for food at 4am") }}
|
|
35
|
+
</ul>
|
|
36
|
+
</div>
|
|
37
|
+
</section>
|
|
@@ -15,6 +15,10 @@
|
|
|
15
15
|
{% include "src/html/includes/cookiebar.html" %}
|
|
16
16
|
{% endblock %}
|
|
17
17
|
|
|
18
|
+
{% block bottom %}
|
|
19
|
+
{% include "src/html/includes/section-slideshow.html" %}
|
|
20
|
+
{% endblock %}
|
|
21
|
+
|
|
18
22
|
{% block footer %}
|
|
19
23
|
{% include "src/html/includes/menu.html" %}
|
|
20
24
|
{% endblock %}
|
package/src/js/foundist.js
CHANGED
|
@@ -24,6 +24,7 @@ import {
|
|
|
24
24
|
StickyButton,
|
|
25
25
|
ToggleElement,
|
|
26
26
|
UserAgent,
|
|
27
|
+
Slideshow,
|
|
27
28
|
} from '@moreonion/foundation-base'
|
|
28
29
|
|
|
29
30
|
// Add the select2 to jQuery
|
|
@@ -38,6 +39,7 @@ Foundation.plugin(AdaptiveSticky, 'AdaptiveSticky')
|
|
|
38
39
|
Foundation.plugin(CookieBar, 'CookieBar')
|
|
39
40
|
Foundation.plugin(FileUpload, 'FileUpload')
|
|
40
41
|
Foundation.plugin(SelectTwo, 'SelectTwo')
|
|
42
|
+
Foundation.plugin(Slideshow, 'Slideshow')
|
|
41
43
|
Foundation.plugin(Share, 'Share')
|
|
42
44
|
Foundation.plugin(StickyButton, 'StickyButton')
|
|
43
45
|
Foundation.plugin(ToggleElement, 'ToggleElement')
|
package/src/scss/_util.scss
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
// Functions and mixins for general use
|
|
4
4
|
|
|
5
5
|
@use "sass:color";
|
|
6
|
+
@use "sass:meta";
|
|
6
7
|
|
|
7
8
|
/// Set text colors according to the background.
|
|
8
9
|
///
|
|
@@ -91,5 +92,34 @@
|
|
|
91
92
|
}
|
|
92
93
|
}
|
|
93
94
|
}
|
|
95
|
+
// Replace slideshow arrow colors only if the contrast of the original color is < 4.5
|
|
96
|
+
// or they should be the same as the body font color.
|
|
97
|
+
@if $force or
|
|
98
|
+
(color-contrast($background, $slideshow-arrow-color) < 4.5) or
|
|
99
|
+
($slideshow-arrow-color == $body-font-color)
|
|
100
|
+
{
|
|
101
|
+
.a11y-slider-prev:after {
|
|
102
|
+
border-#{$global-right}-color: color-pick-contrast(
|
|
103
|
+
$background,
|
|
104
|
+
($slideshow-arrow-color, $slideshow-arrow-color-alt)
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
.a11y-slider-next:after {
|
|
108
|
+
border-#{$global-left}-color: color-pick-contrast(
|
|
109
|
+
$background,
|
|
110
|
+
($slideshow-arrow-color, $slideshow-arrow-color-alt)
|
|
111
|
+
);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
// Replace card background if it’s the same as the background.
|
|
115
|
+
@if get-background-color($card-background) == $background {
|
|
116
|
+
.card {
|
|
117
|
+
background-color: get-background-color($body-background);
|
|
118
|
+
}
|
|
119
|
+
} @else if $force {
|
|
120
|
+
.card {
|
|
121
|
+
background-color: get-background-color($card-background);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
94
124
|
}
|
|
95
125
|
}
|
|
@@ -150,7 +150,7 @@ $dropdown-menu-parent-border-radius: $select-radius !default;
|
|
|
150
150
|
@include breakpoint(small down) {
|
|
151
151
|
> li.is-dropdown-submenu-parent > a {
|
|
152
152
|
padding-#{$global-right}: $dropdownmenu-arrow-padding -
|
|
153
|
-
get-side($dropdownmenu-padding, $global-right);
|
|
153
|
+
(get-side($dropdownmenu-padding, $global-right));
|
|
154
154
|
|
|
155
155
|
&:after {
|
|
156
156
|
background-size: $dropdownmenu-arrow-size * 0.75;
|
|
@@ -26,7 +26,10 @@
|
|
|
26
26
|
transform: translate(0, -50%);
|
|
27
27
|
font-size: $helptext-font-size;
|
|
28
28
|
color: $progress-meter-background;
|
|
29
|
-
text-shadow:
|
|
30
|
-
|
|
29
|
+
text-shadow:
|
|
30
|
+
1px 1px $progress-background,
|
|
31
|
+
1px -1px $progress-background,
|
|
32
|
+
-1px -1px $progress-background,
|
|
33
|
+
-1px 1px $progress-background;
|
|
31
34
|
}
|
|
32
35
|
}
|
|
@@ -112,18 +112,10 @@ $dropdown-menu-parent-border-width: $input-border-width !default;
|
|
|
112
112
|
$dropdownmenu-border: (
|
|
113
113
|
$dropdown-menu-parent-border-width solid $dropdown-menu-parent-border-color-active
|
|
114
114
|
) !default;
|
|
115
|
-
|
|
116
|
-
$
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
)
|
|
120
|
-
get-side($input-padding, right)
|
|
121
|
-
(
|
|
122
|
-
($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) * 0.5 -
|
|
123
|
-
get-side($dropdown-menu-parent-border-width, bottom)
|
|
124
|
-
)
|
|
125
|
-
get-side($input-padding, left) !default;
|
|
126
|
-
// sylelint-enable
|
|
115
|
+
$dropdownmenu-padding: ($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) *
|
|
116
|
+
0.5 - (get-side($dropdown-menu-parent-border-width, top)) get-side($input-padding, right)
|
|
117
|
+
($dropdown-menu-item-height - $menu-item-font-size * $menu-item-line-height) * 0.5 -
|
|
118
|
+
(get-side($dropdown-menu-parent-border-width, bottom)) get-side($input-padding, left) !default;
|
|
127
119
|
$dropdownmenu-submenu-background: $input-background !default;
|
|
128
120
|
$dropdownmenu-min-width: 100% !default;
|
|
129
121
|
$dropdownmenu-arrow-color: $select-triangle-color !default;
|
|
@@ -174,5 +166,10 @@ $cookiebar-color: color-pick-contrast(
|
|
|
174
166
|
$cookiebar-padding: rem-calc($base-line-height) 0 0 !default;
|
|
175
167
|
$cookiebar-flex-breakpoint: medium !default;
|
|
176
168
|
|
|
169
|
+
// Slideshow
|
|
170
|
+
$slideshow-arrow-color: $dark-gray !default;
|
|
171
|
+
$slideshow-arrow-color-alt: $body-font-color-alt !default;
|
|
172
|
+
$slideshow-arrow-background: none !default;
|
|
173
|
+
|
|
177
174
|
// Pagination
|
|
178
175
|
$pagination-item-color-disabled: $muted-font-color !default;
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
// Slideshow
|
|
2
|
+
// - - - - - - - - - - - - - - -
|
|
3
|
+
// Additional styles for slideshow components.
|
|
4
|
+
|
|
5
|
+
@use "sass:meta";
|
|
6
|
+
|
|
7
|
+
$slideshow-arrow-color-alt: $body-font-color-alt !default;
|
|
8
|
+
$slideshow-margin-x: -($slideshow-arrow-size + $slideshow-slide-gap * 2) !default;
|
|
9
|
+
|
|
10
|
+
ul.slideshow,
|
|
11
|
+
ul.a11y-slider-dots {
|
|
12
|
+
padding-#{$global-right}: 0;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Display arrow buttons outside the slideshow container but within the screen.
|
|
16
|
+
@mixin -slideshow-stretch($slideshow-margin, $container-margin) {
|
|
17
|
+
margin-left: max($slideshow-margin, -1 * $container-margin);
|
|
18
|
+
margin-right: max($slideshow-margin, -1 * $container-margin);
|
|
19
|
+
$arrow-column-width: min(-1 * $slideshow-margin, $container-margin);
|
|
20
|
+
grid-template-columns: (
|
|
21
|
+
minmax($arrow-column-width, auto) minmax(0, 1fr) minmax($arrow-column-width, auto)
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.a11y-slider-container {
|
|
26
|
+
@include -slideshow-stretch($slideshow-margin-x, 6vw);
|
|
27
|
+
|
|
28
|
+
@include breakpoint(xlarge) {
|
|
29
|
+
@include -slideshow-stretch(
|
|
30
|
+
$slideshow-margin-x,
|
|
31
|
+
max(50vw - #{0.5 * ($global-width - $global-padding * 4)}, #{$global-padding * 2.5})
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Make more space for arrow buttons with a background.
|
|
36
|
+
@if (meta.type-of($slideshow-arrow-background) == color) {
|
|
37
|
+
@include breakpoint(large) {
|
|
38
|
+
@include -slideshow-stretch($slideshow-margin-x - $slideshow-arrow-size * 3, 6vw);
|
|
39
|
+
}
|
|
40
|
+
@include breakpoint(xlarge) {
|
|
41
|
+
@include -slideshow-stretch(
|
|
42
|
+
$slideshow-margin-x - $slideshow-arrow-size * 3,
|
|
43
|
+
max(50vw - #{0.5 * ($global-width - $global-padding * 4)}, #{$global-padding * 2.5})
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Add some space between arrows and the edge of the screen.
|
|
50
|
+
.a11y-slider-prev {
|
|
51
|
+
padding-#{$global-left}: min(
|
|
52
|
+
3vw,
|
|
53
|
+
$slideshow-slide-gap,
|
|
54
|
+
$global-padding * 2.5 + $slideshow-margin-x + $slideshow-slide-gap
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
.a11y-slider-next {
|
|
58
|
+
padding-#{$global-right}: min(
|
|
59
|
+
3vw,
|
|
60
|
+
$slideshow-slide-gap,
|
|
61
|
+
$global-padding * 2.5 + $slideshow-margin-x + $slideshow-slide-gap
|
|
62
|
+
);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@if (meta.type-of($slideshow-arrow-background) == color) {
|
|
66
|
+
@include breakpoint(large) {
|
|
67
|
+
.a11y-slider-prev {
|
|
68
|
+
padding-#{$global-left}: 0;
|
|
69
|
+
margin-#{$global-left}: $slideshow-slide-gap;
|
|
70
|
+
}
|
|
71
|
+
.a11y-slider-next {
|
|
72
|
+
padding-#{$global-right}: 0;
|
|
73
|
+
margin-#{$global-right}: $slideshow-slide-gap;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -32,7 +32,8 @@
|
|
|
32
32
|
// Add extra box-shadow for primary buttons when focused is requested
|
|
33
33
|
// by browsers that support this.
|
|
34
34
|
&.primary:focus-visible {
|
|
35
|
-
box-shadow:
|
|
35
|
+
box-shadow:
|
|
36
|
+
0 rem-calc(4) 0 $button-primary-shadow-color,
|
|
36
37
|
0 0 0 rem-calc(2) $button-primary-shadow-color;
|
|
37
38
|
}
|
|
38
39
|
}
|
|
@@ -1,191 +1,181 @@
|
|
|
1
|
-
// Donation amount
|
|
1
|
+
// Donation amount form component
|
|
2
2
|
// - - - - - - - - - - - - - - -
|
|
3
|
-
//
|
|
4
|
-
//
|
|
5
|
-
//
|
|
6
|
-
/// @deprecated Campaignion specific.
|
|
7
|
-
//
|
|
8
|
-
// Ideally, the radio labels would simple have the right button classes and
|
|
9
|
-
// could be targeted with `label.button`. Since that’s very hard to achieve in
|
|
10
|
-
// Drupal, we have to add the styles here and rely on `.select-or-other-select`
|
|
11
|
-
// and `input[value="select_or_other"]` to identify radios that are not a
|
|
12
|
-
// button, as well as `.form-radios` and `.form-type-textfield` to distinguish
|
|
13
|
-
// between radio buttons and the "other…" text field.
|
|
3
|
+
// Overrides and additional styles for option buttons and input groups
|
|
4
|
+
// used in "donation-amount" form components.
|
|
14
5
|
|
|
15
6
|
@use "sass:color";
|
|
16
|
-
@use "sass:
|
|
7
|
+
@use "sass:map";
|
|
8
|
+
@use "sass:meta";
|
|
17
9
|
|
|
18
10
|
// Base colors
|
|
19
|
-
$donation-amount-background-color:
|
|
20
|
-
$
|
|
21
|
-
|
|
22
|
-
$
|
|
11
|
+
$donation-amount-background-color: if(
|
|
12
|
+
$option-button-fill == hollow,
|
|
13
|
+
transparent,
|
|
14
|
+
$option-button-background
|
|
23
15
|
) !default;
|
|
16
|
+
$donation-amount-background-color-checked: $option-button-background-checked !default;
|
|
24
17
|
|
|
25
18
|
// Colors derived from base colors by default
|
|
26
|
-
$donation-amount-
|
|
19
|
+
$donation-amount-text-color: if(
|
|
20
|
+
$donation-amount-background-color == transparent,
|
|
27
21
|
$donation-amount-background-color-checked,
|
|
28
|
-
|
|
29
|
-
|
|
22
|
+
if(
|
|
23
|
+
$donation-amount-background-color == $option-button-background,
|
|
24
|
+
$option-button-color,
|
|
25
|
+
color-pick-contrast($donation-amount-background-color, ($button-color, $button-color-alt))
|
|
26
|
+
)
|
|
27
|
+
) !default;
|
|
28
|
+
$donation-amount-text-color-checked: if(
|
|
29
|
+
$donation-amount-background-color-checked == $option-button-background-checked,
|
|
30
|
+
$option-button-color-checked,
|
|
31
|
+
color-pick-contrast($donation-amount-background-color-checked, ($button-color, $button-color-alt))
|
|
32
|
+
) !default;
|
|
33
|
+
$donation-amount-border-color: if(
|
|
34
|
+
$option-button-fill == hollow,
|
|
35
|
+
$donation-amount-background-color-checked,
|
|
36
|
+
transparent
|
|
37
|
+
) !default;
|
|
38
|
+
$donation-amount-border-color-checked: transparent !default;
|
|
39
|
+
$donation-amount-border-color-hover: color.scale(
|
|
40
|
+
$donation-amount-border-color,
|
|
41
|
+
$lightness: $button-hollow-hover-lightness
|
|
42
|
+
) !default;
|
|
43
|
+
$donation-amount-border-color-focus: if(
|
|
44
|
+
$donation-amount-border-color-hover == transparent,
|
|
45
|
+
color.scale(
|
|
46
|
+
$donation-amount-background-color-checked,
|
|
47
|
+
$lightness: $button-hollow-hover-lightness
|
|
48
|
+
),
|
|
49
|
+
$donation-amount-border-color-hover
|
|
30
50
|
) !default;
|
|
31
|
-
$donation-amount-border-color-checked: $white !default;
|
|
32
|
-
$donation-amount-border-color-hover: $donation-amount-background-color-checked !default;
|
|
33
|
-
$donation-amount-text-color: $donation-amount-background-color-checked !default;
|
|
34
51
|
|
|
35
|
-
// Button
|
|
52
|
+
// Button typography
|
|
36
53
|
$donation-amount-font-size: $large-font-size !default;
|
|
54
|
+
$donation-amount-text-offset: if(
|
|
55
|
+
meta.type-of($button-text-offset) == map,
|
|
56
|
+
map.get($button-text-offset, default),
|
|
57
|
+
$button-text-offset
|
|
58
|
+
) !default;
|
|
59
|
+
|
|
60
|
+
// Button shape
|
|
37
61
|
$donation-amount-border-radius: 0 !default;
|
|
38
|
-
$donation-amount-border-width:
|
|
39
|
-
$donation-amount-
|
|
40
|
-
|
|
41
|
-
$
|
|
42
|
-
|
|
43
|
-
rem-calc(1.25 * $base-line-height * 0.5) - $donation-amount-border-width -
|
|
44
|
-
$donation-amount-text-offset !default;
|
|
62
|
+
$donation-amount-border-width: $button-hollow-border-width !default;
|
|
63
|
+
$donation-amount-button-padding: (
|
|
64
|
+
$global-padding * 0.625 - $donation-amount-border-width + $donation-amount-text-offset 0
|
|
65
|
+
$global-padding * 0.625 - $donation-amount-border-width - $donation-amount-text-offset
|
|
66
|
+
) !default;
|
|
45
67
|
|
|
46
68
|
// Layout
|
|
47
|
-
$donation-amount-button-max-width:
|
|
69
|
+
$donation-amount-button-max-width: auto !default;
|
|
48
70
|
$donation-amount-max-buttons-per-row: 3 !default;
|
|
49
71
|
|
|
50
|
-
|
|
51
|
-
.donation-amount-buttons.form-radios {
|
|
52
|
-
// Remove mo-radio pseudo input (if there is one)
|
|
53
|
-
input[type="radio"] {
|
|
54
|
-
+ label:before {
|
|
55
|
-
content: none;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
|
|
72
|
+
.donation-amount {
|
|
59
73
|
// Button styles.
|
|
60
|
-
input
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
@include breakpoint(small down) {
|
|
73
|
-
font-size: $lead-font-size;
|
|
74
|
-
line-height: $lead-lineheight;
|
|
75
|
-
}
|
|
74
|
+
input + label.button {
|
|
75
|
+
@include button-expand;
|
|
76
|
+
padding: $donation-amount-button-padding;
|
|
77
|
+
border-radius: $donation-amount-border-radius;
|
|
78
|
+
border-width: $donation-amount-border-width;
|
|
79
|
+
font-size: $donation-amount-font-size;
|
|
80
|
+
line-height: grid-lineheight($donation-amount-font-size);
|
|
81
|
+
|
|
82
|
+
@if ($donation-amount-font-size == $large-font-size) {
|
|
83
|
+
@include breakpoint(small down) {
|
|
84
|
+
font-size: $lead-font-size;
|
|
85
|
+
line-height: $lead-lineheight;
|
|
76
86
|
}
|
|
77
|
-
|
|
78
|
-
// Default state
|
|
79
|
-
border: $donation-amount-border-width solid $donation-amount-border-color;
|
|
80
|
-
background-color: $donation-amount-background-color;
|
|
81
|
-
color: $donation-amount-text-color;
|
|
82
87
|
}
|
|
83
88
|
|
|
84
|
-
//
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// Operational
|
|
92
|
-
&:not(:disabled) {
|
|
93
|
-
& + label:hover,
|
|
94
|
-
&:focus + label {
|
|
95
|
-
border-color: $donation-amount-border-color-hover;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
&:checked + label:hover,
|
|
99
|
-
&:focus:checked + label {
|
|
100
|
-
border-color: $donation-amount-border-color;
|
|
101
|
-
}
|
|
102
|
-
}
|
|
89
|
+
// Default state
|
|
90
|
+
border-color: $donation-amount-border-color;
|
|
91
|
+
background-color: $donation-amount-background-color;
|
|
92
|
+
color: $donation-amount-text-color;
|
|
93
|
+
}
|
|
103
94
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
}
|
|
110
|
-
}
|
|
95
|
+
// Checked state
|
|
96
|
+
input:checked + label.button {
|
|
97
|
+
border-color: $donation-amount-border-color-checked;
|
|
98
|
+
background-color: $donation-amount-background-color-checked;
|
|
99
|
+
color: $donation-amount-text-color-checked;
|
|
111
100
|
}
|
|
112
101
|
|
|
113
|
-
//
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
justify-content: space-between;
|
|
117
|
-
// Overflow gutter for a straight edge.
|
|
118
|
-
margin: {
|
|
119
|
-
left: -$form-spacing;
|
|
120
|
-
right: -$form-spacing;
|
|
102
|
+
// Hover for unchecked buttons
|
|
103
|
+
input:not(:disabled, :checked) + label.button:hover {
|
|
104
|
+
border-color: $donation-amount-border-color-hover;
|
|
121
105
|
}
|
|
122
106
|
|
|
123
|
-
//
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
// Gutter of 2 * $form-spacing (flex margins do not collapse).
|
|
128
|
-
margin: {
|
|
129
|
-
left: $form-spacing;
|
|
130
|
-
right: $form-spacing;
|
|
131
|
-
// More margin when when there is no label.
|
|
132
|
-
top: $form-spacing * 2;
|
|
133
|
-
}
|
|
107
|
+
// Focus for all buttons
|
|
108
|
+
input:not(:disabled):focus-visible + label.button {
|
|
109
|
+
border-color: $donation-amount-border-color-focus;
|
|
110
|
+
}
|
|
134
111
|
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
112
|
+
// Grid container
|
|
113
|
+
.form-radios {
|
|
114
|
+
display: grid;
|
|
115
|
+
grid-template-columns: repeat(
|
|
116
|
+
$donation-amount-max-buttons-per-row,
|
|
117
|
+
minmax(auto, $donation-amount-button-max-width)
|
|
118
|
+
);
|
|
119
|
+
gap: 2 * $form-spacing;
|
|
120
|
+
margin: $form-spacing 0;
|
|
121
|
+
|
|
122
|
+
> .form-item {
|
|
123
|
+
input[type="radio"] + label {
|
|
124
|
+
margin: 0;
|
|
141
125
|
}
|
|
142
126
|
}
|
|
143
|
-
|
|
144
|
-
// Amount buttons
|
|
145
|
-
input[type="radio"]:not([value="select_or_other"]) + label {
|
|
146
|
-
padding: $donation-amount-button-padding;
|
|
147
|
-
max-width: $donation-amount-button-max-width;
|
|
148
|
-
}
|
|
149
127
|
}
|
|
150
128
|
|
|
151
|
-
//
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
129
|
+
// Currency prefix for custom amount field
|
|
130
|
+
.input-group-label {
|
|
131
|
+
font-size: $input-font-size;
|
|
132
|
+
line-height: $input-line-height;
|
|
155
133
|
}
|
|
156
|
-
}
|
|
157
134
|
|
|
158
|
-
//
|
|
159
|
-
|
|
160
|
-
+ label {
|
|
161
|
-
font-weight: $form-label-font-weight;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
135
|
+
// Legacy styles for Drupal markup
|
|
136
|
+
// -------------------------------
|
|
164
137
|
|
|
165
|
-
//
|
|
166
|
-
|
|
167
|
-
|
|
138
|
+
// "Other amount" radio form item
|
|
139
|
+
/// @deprecated Campaignion specific.
|
|
140
|
+
.donation-amount-buttons.select-or-other-select {
|
|
141
|
+
margin-bottom: 0;
|
|
168
142
|
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
position: absolute;
|
|
172
|
-
height: 100%;
|
|
173
|
-
width: 3rem;
|
|
174
|
-
font-size: $input-font-size;
|
|
175
|
-
line-height: $input-line-height;
|
|
176
|
-
padding: {
|
|
177
|
-
left: get-side($input-padding, left) + $input-border-width;
|
|
178
|
-
top: get-side($input-padding, top) + $input-border-width;
|
|
179
|
-
bottom: get-side($input-padding, bottom) + $input-border-width;
|
|
143
|
+
> .form-item:last-child {
|
|
144
|
+
grid-column: 1/-1;
|
|
180
145
|
}
|
|
181
|
-
color: $medium-gray;
|
|
182
146
|
}
|
|
183
|
-
|
|
184
|
-
|
|
147
|
+
|
|
148
|
+
// Donation "Other amount" label.
|
|
149
|
+
/// @deprecated Campaignion specific.
|
|
150
|
+
.donation-amount-buttons.form-radios input[type="radio"] + label:not(.button) {
|
|
151
|
+
font-weight: $form-label-font-weight;
|
|
152
|
+
// Remove mo-radio pseudo input
|
|
153
|
+
&:before {
|
|
154
|
+
content: none;
|
|
155
|
+
}
|
|
185
156
|
}
|
|
186
157
|
|
|
187
|
-
//
|
|
188
|
-
|
|
189
|
-
|
|
158
|
+
// Donation "Other amount" textfield.
|
|
159
|
+
/// @deprecated Campaignion specific.
|
|
160
|
+
.donation-amount-other {
|
|
161
|
+
position: relative;
|
|
162
|
+
|
|
163
|
+
// Show label "in" the text field.
|
|
164
|
+
label {
|
|
165
|
+
position: absolute;
|
|
166
|
+
height: 100%;
|
|
167
|
+
width: 3rem;
|
|
168
|
+
font-size: $input-font-size;
|
|
169
|
+
line-height: $input-line-height;
|
|
170
|
+
padding: {
|
|
171
|
+
left: get-side($input-padding, left) + $input-border-width;
|
|
172
|
+
top: get-side($input-padding, top) + $input-border-width;
|
|
173
|
+
bottom: get-side($input-padding, bottom) + $input-border-width;
|
|
174
|
+
}
|
|
175
|
+
color: $medium-gray;
|
|
176
|
+
}
|
|
177
|
+
label + input {
|
|
178
|
+
padding-left: 3rem;
|
|
179
|
+
}
|
|
190
180
|
}
|
|
191
181
|
}
|
|
@@ -27,27 +27,18 @@
|
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
// More margin when
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
select,
|
|
34
|
-
select
|
|
35
|
-
.
|
|
36
|
-
.input-group {
|
|
30
|
+
// More margin when there is no label.
|
|
31
|
+
//
|
|
32
|
+
// Deprecated selectors (for Drupal compatibility):
|
|
33
|
+
// input.select-or-other-other, .element-inivisible
|
|
34
|
+
:not(label):not(input.select-or-other-other),
|
|
35
|
+
select + .select2 {
|
|
37
36
|
.form-item > &:first-child,
|
|
38
37
|
.form-item > label.show-for-sr + &,
|
|
39
38
|
.form-item > label.element-invisible + & {
|
|
40
39
|
margin-top: $form-spacing * 3;
|
|
41
40
|
}
|
|
42
41
|
}
|
|
43
|
-
input[type="checkbox"] + label,
|
|
44
|
-
input[type="radio"] + label {
|
|
45
|
-
.form-item > div:first-child &,
|
|
46
|
-
.form-item > label.show-for-sr + div &,
|
|
47
|
-
.form-item > label.element-invisible + div & {
|
|
48
|
-
margin-top: $form-spacing * 3;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
42
|
input.button.primary {
|
|
52
43
|
margin-top: $form-spacing * 2;
|
|
53
44
|
}
|
|
@@ -29,11 +29,11 @@ $button-heights: (
|
|
|
29
29
|
) !default;
|
|
30
30
|
$button-font-weight: $global-weight-bold !default;
|
|
31
31
|
$button-text-offset: 0 !default;
|
|
32
|
-
$button-border-width: rem-calc(
|
|
32
|
+
$button-border-width: rem-calc(3) !default;
|
|
33
33
|
$button-hollow-border-width: $button-border-width !default;
|
|
34
34
|
$button-border: $button-border-width solid transparent !default;
|
|
35
|
-
$button-padding: rem-calc($base-line-height * 0.625) - $button-border-width
|
|
36
|
-
|
|
35
|
+
$button-padding: rem-calc($base-line-height * 0.625) - $button-border-width 1em
|
|
36
|
+
rem-calc($base-line-height * 0.625) - $button-border-width !default;
|
|
37
37
|
$button-radius: 0.25rem !default;
|
|
38
38
|
$button-background: map.get($button-palette, primary) !default;
|
|
39
39
|
$button-background-hover-lightness: 10% !default;
|
|
@@ -36,10 +36,11 @@ section > .grid-container {
|
|
|
36
36
|
.grid-container {
|
|
37
37
|
display: grid;
|
|
38
38
|
grid-template-rows: auto;
|
|
39
|
+
grid-template-columns: minmax(0, 1fr);
|
|
39
40
|
|
|
40
41
|
@include breakpoint(large) {
|
|
41
42
|
column-gap: $global-margin;
|
|
42
|
-
grid-template-columns: repeat(9, 1fr);
|
|
43
|
+
grid-template-columns: repeat(9, minmax(0, 1fr));
|
|
43
44
|
|
|
44
45
|
// Per default, items span all columns.
|
|
45
46
|
> * {
|
|
@@ -6,11 +6,11 @@
|
|
|
6
6
|
@include breakpoint(medium) {
|
|
7
7
|
display: grid;
|
|
8
8
|
column-gap: $global-margin;
|
|
9
|
-
grid-template-columns: repeat(2, 1fr);
|
|
9
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
10
10
|
}
|
|
11
11
|
|
|
12
12
|
@include breakpoint(large) {
|
|
13
|
-
grid-template-columns: repeat(3, 1fr);
|
|
13
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
@include breakpoint(xxlarge) {
|
package/src/scss/main.scss
CHANGED
|
@@ -42,6 +42,9 @@
|
|
|
42
42
|
// fancy file upload
|
|
43
43
|
@include mo-file-upload;
|
|
44
44
|
|
|
45
|
+
// radios & checkboxes stlyed as button
|
|
46
|
+
@include mo-option-button;
|
|
47
|
+
|
|
45
48
|
@import "typography/elements";
|
|
46
49
|
|
|
47
50
|
// --------------------------------------------------------------------------
|
|
@@ -92,6 +95,7 @@
|
|
|
92
95
|
@include mo-payment-icons;
|
|
93
96
|
@include mo-giftaid;
|
|
94
97
|
@include mo-cookiebar;
|
|
98
|
+
@include mo-slideshow;
|
|
95
99
|
|
|
96
100
|
@import "form/forms";
|
|
97
101
|
@import "form/fields";
|
|
@@ -117,6 +121,7 @@
|
|
|
117
121
|
@import "components/card";
|
|
118
122
|
@import "components/reveal";
|
|
119
123
|
@import "components/cookiebar";
|
|
124
|
+
@import "components/slideshow";
|
|
120
125
|
@import "components/bottom-section";
|
|
121
126
|
|
|
122
127
|
// --------------------------------------------------------------------------
|
|
@@ -7,8 +7,16 @@
|
|
|
7
7
|
|
|
8
8
|
// Fonts
|
|
9
9
|
// see https://fontsarena.com/blog/operating-systems-default-sans-serif-fonts/
|
|
10
|
-
$body-font-family:
|
|
11
|
-
|
|
10
|
+
$body-font-family:
|
|
11
|
+
system-ui,
|
|
12
|
+
-apple-system,
|
|
13
|
+
"Segoe UI",
|
|
14
|
+
Roboto,
|
|
15
|
+
Ubuntu,
|
|
16
|
+
"Helvetica Neue",
|
|
17
|
+
Oxygen,
|
|
18
|
+
Cantarell,
|
|
19
|
+
sans-serif !default;
|
|
12
20
|
$global-weight-normal: normal !default;
|
|
13
21
|
$global-weight-bold: bold !default;
|
|
14
22
|
|