@moreonion/foundist 3.4.2 → 3.5.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 +12 -12
- package/src/html/includes/e2t-multiple-form.html +63 -0
- package/src/html/includes/e2t-single-form-drupal.html +34 -0
- package/src/html/includes/e2t-single-form.html +26 -20
- package/src/html/templates/base.html +0 -1
- package/src/scss/components/_accordion.scss +35 -23
- package/src/scss/components/_bottom-section.scss +4 -6
- package/src/scss/components/_headline.scss +4 -3
- package/src/scss/components/_letter.scss +2 -3
- package/src/scss/components/_mobile-menu.scss +5 -9
- package/src/scss/components/_settings.scss +12 -15
- package/src/scss/form/_donation-amount-button.scss +28 -31
- package/src/scss/form/_fields.scss +27 -1
- package/src/scss/form/_form-group.scss +29 -20
- package/src/scss/form/_settings.scss +17 -20
- package/src/scss/layout/_media.scss +5 -0
- package/src/scss/layout/_settings.scss +3 -6
- package/src/scss/main.scss +1 -0
- package/src/scss/typography/_settings.scss +7 -13
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moreonion/foundist",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.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,28 +26,28 @@
|
|
|
26
26
|
"prepare": "husky"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@moreonion/foundation-base": "3.
|
|
29
|
+
"@moreonion/foundation-base": "3.5.1",
|
|
30
30
|
"foundation-sites": "6.9.0",
|
|
31
|
-
"jquery": "^
|
|
32
|
-
"sass-embedded": "^1.
|
|
31
|
+
"jquery": "^4.0.0",
|
|
32
|
+
"sass-embedded": "^1.99.0",
|
|
33
33
|
"select2": "^4.1.0-rc.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"autoprefixer": "^10.
|
|
36
|
+
"autoprefixer": "^10.5.0",
|
|
37
37
|
"eslint": "8.57.0",
|
|
38
38
|
"eslint-config-standard": "^17.1.0",
|
|
39
39
|
"eslint-plugin-import": "^2.31.0",
|
|
40
40
|
"eslint-plugin-n": "^16.6.0",
|
|
41
41
|
"eslint-plugin-promise": "^6.6.0",
|
|
42
42
|
"husky": "^9.1.0",
|
|
43
|
-
"lint-staged": "^
|
|
43
|
+
"lint-staged": "^16.4.0",
|
|
44
44
|
"postcss": "^8.5.0",
|
|
45
|
-
"prettier": "^3.
|
|
46
|
-
"stylelint": "^
|
|
45
|
+
"prettier": "^3.8.0",
|
|
46
|
+
"stylelint": "^17.9.0",
|
|
47
47
|
"stylelint-config-idiomatic-order": "^10.0.0",
|
|
48
|
-
"stylelint-config-recommended-scss": "^
|
|
49
|
-
"stylelint-scss": "^
|
|
50
|
-
"vite": "^
|
|
48
|
+
"stylelint-config-recommended-scss": "^17.0.0",
|
|
49
|
+
"stylelint-scss": "^7.0.0",
|
|
50
|
+
"vite": "^7.0.0",
|
|
51
51
|
"vite-plugin-nunjucks": "^0.2.0"
|
|
52
52
|
},
|
|
53
53
|
"lint-staged": {
|
|
@@ -59,5 +59,5 @@
|
|
|
59
59
|
"eslint"
|
|
60
60
|
]
|
|
61
61
|
},
|
|
62
|
-
"packageManager": "yarn@4.
|
|
62
|
+
"packageManager": "yarn@4.14.0"
|
|
63
63
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
{% from "./form-items/_macros.html" import button %}
|
|
2
|
+
|
|
3
|
+
<div id="form">
|
|
4
|
+
<form method="post" accept-charset="UTF-8" novalidate="novalidate">
|
|
5
|
+
{% include "./form-items/webform-steps.html" %}
|
|
6
|
+
|
|
7
|
+
<div class="form-item m2d-message">
|
|
8
|
+
<div class="form-item extra-spacing">
|
|
9
|
+
<label>
|
|
10
|
+
Send your message to:
|
|
11
|
+
<span class="form-required" title="This field is required.">*</span>
|
|
12
|
+
</label>
|
|
13
|
+
<div class="form-checkboxes">
|
|
14
|
+
<div class="form-group">
|
|
15
|
+
<div class="form-item group-item" aria-controls="message-12345" aria-expanded="false">
|
|
16
|
+
<input class="form-checkbox" type="checkbox" id="id-12345" value="target-12345"
|
|
17
|
+
name="m2d-message.targets_selected">
|
|
18
|
+
<label class="option" for="id-12345">
|
|
19
|
+
<span>The Lady Jane Doe</span>
|
|
20
|
+
</label>
|
|
21
|
+
</div>
|
|
22
|
+
<div class="group-item message" id="message-12345" hidden>
|
|
23
|
+
<h3>Message for Lady Jane Doe</h3>
|
|
24
|
+
<div>
|
|
25
|
+
<p>Dear Lady Doe</p>
|
|
26
|
+
</div>
|
|
27
|
+
<p>Do something!</p>
|
|
28
|
+
<div>
|
|
29
|
+
<p>Best regards,<br>Kitty Cat</p>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="form-group">
|
|
34
|
+
<div class="form-item group-item" aria-controls="message-67890" aria-expanded="true">
|
|
35
|
+
<input class="form-checkbox" type="checkbox" id="id-67890" value="target-67890"
|
|
36
|
+
name="m2d-message.targets_selected" checked>
|
|
37
|
+
<label class="option" for="id-67890">
|
|
38
|
+
<span>Lord John Smith</span>
|
|
39
|
+
</label>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="group-item message" id="message-67890">
|
|
42
|
+
<h3>Message for Lord John Smith</h3>
|
|
43
|
+
<div>
|
|
44
|
+
<p>Dear Lord Smith</p>
|
|
45
|
+
</div>
|
|
46
|
+
<p>Do something!</p>
|
|
47
|
+
<div>
|
|
48
|
+
<p>Best regards,<br>Kitty Cat</p>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="form-item">
|
|
56
|
+
<label class="" for="message"> Your message </label>
|
|
57
|
+
<textarea id="message" name="m2d-message.message" rows="5">Do something!</textarea>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
{{ button("Send message", class="expanded primary button large") }}
|
|
62
|
+
</form>
|
|
63
|
+
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
{% from "./form-items/_macros.html" import button %}
|
|
2
|
+
|
|
3
|
+
<div id="form">
|
|
4
|
+
<form method="post" accept-charset="UTF-8" novalidate="novalidate">
|
|
5
|
+
{% include "./form-items/webform-steps.html" %}
|
|
6
|
+
|
|
7
|
+
<fieldset class="fieldset">
|
|
8
|
+
<div class="email-to-target-selector-wrapper">
|
|
9
|
+
<div class="email-to-target-target email-to-target-single">
|
|
10
|
+
<p class="target">Rt Hon Mary Field MP </p>
|
|
11
|
+
<div class="form-item">
|
|
12
|
+
<label for="subject">Subject</label>
|
|
13
|
+
<input type="text" id="subject" name="subject" value="Give cats a chance" size="60"
|
|
14
|
+
maxlength="128" class="form-text">
|
|
15
|
+
</div>
|
|
16
|
+
<pre class="email-to-target-header">Dear Rt Hon Mary Field MP,</pre>
|
|
17
|
+
<div class="form-item">
|
|
18
|
+
<label for="message">Your message</label>
|
|
19
|
+
<textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
|
|
20
|
+
</div>
|
|
21
|
+
<!-- linthtml-configure preset="none" -->
|
|
22
|
+
<pre class="email-to-target-footer">I look forward to hearing from you.
|
|
23
|
+
|
|
24
|
+
Kind regards,
|
|
25
|
+
Jane Smith
|
|
26
|
+
100, Somewhere Road
|
|
27
|
+
A12 34B</pre>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</fieldset>
|
|
31
|
+
|
|
32
|
+
{{ button("Send message", class="expanded primary button large") }}
|
|
33
|
+
</form>
|
|
34
|
+
</div>
|
|
@@ -4,29 +4,35 @@
|
|
|
4
4
|
<form method="post" accept-charset="UTF-8" novalidate="novalidate">
|
|
5
5
|
{% include "./form-items/webform-steps.html" %}
|
|
6
6
|
|
|
7
|
-
<
|
|
8
|
-
<div class="
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
<div class="form-
|
|
12
|
-
<
|
|
13
|
-
|
|
7
|
+
<div class="form-item m2d-message">
|
|
8
|
+
<div class="form-item extra-spacing">
|
|
9
|
+
<label> Send your message to: </label>
|
|
10
|
+
<div class="form-checkboxes">
|
|
11
|
+
<div class="form-group">
|
|
12
|
+
<div class="form-item group-item">
|
|
13
|
+
<input class="form-checkbox" type="checkbox" id="id_12345" value="12345"
|
|
14
|
+
name="m2d-message.targets_selected" disabled>
|
|
15
|
+
<label class="option" for="id_12345">
|
|
16
|
+
<span>Rt Hon Mary Field MP</span>
|
|
17
|
+
</label>
|
|
18
|
+
</div>
|
|
14
19
|
</div>
|
|
15
|
-
<pre class="email-to-target-header">Dear Rt Hon Mary Field MP,</pre>
|
|
16
|
-
<div class="form-item">
|
|
17
|
-
<label for="message">Your message</label>
|
|
18
|
-
<textarea id="message" name="message" cols="60" rows="5" class="form-textarea"></textarea>
|
|
19
|
-
</div>
|
|
20
|
-
<!-- linthtml-configure preset="none" -->
|
|
21
|
-
<pre class="email-to-target-footer">I look forward to hearing from you.
|
|
22
|
-
|
|
23
|
-
Kind regards,
|
|
24
|
-
Jane Smith
|
|
25
|
-
100, Somewhere Road
|
|
26
|
-
A12 34B</pre>
|
|
27
20
|
</div>
|
|
28
21
|
</div>
|
|
29
|
-
|
|
22
|
+
<div class="message-wrapper">
|
|
23
|
+
<h3>Message for Rt Hon Mary Field MP</h3>
|
|
24
|
+
<div>
|
|
25
|
+
<p>Dear Mrs Field,</p>
|
|
26
|
+
</div>
|
|
27
|
+
<div class="form-item">
|
|
28
|
+
<label for="message">Your message here</label>
|
|
29
|
+
<textarea id="message" name="m2d-message.message" rows="5"></textarea>
|
|
30
|
+
</div>
|
|
31
|
+
<div>
|
|
32
|
+
<p>Best regards,<br>Jane Smith</p>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
30
36
|
|
|
31
37
|
{{ button("Send message", class="expanded primary button large") }}
|
|
32
38
|
</form>
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
{% block page %}{% endblock %}
|
|
22
22
|
|
|
23
23
|
{# Global javascript #}
|
|
24
|
-
<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=default,es6"></script>
|
|
25
24
|
<script type="module" src="{{ settings.assets_js }}"></script>
|
|
26
25
|
|
|
27
26
|
{% block extra_js %}
|
|
@@ -12,35 +12,47 @@
|
|
|
12
12
|
color: $accordion-item-color;
|
|
13
13
|
background: $accordion-item-background;
|
|
14
14
|
text-decoration: none;
|
|
15
|
-
// Space for the triangle
|
|
16
|
-
padding-left: rem-calc(get-side($accordion-item-padding, left)) + 2 * $accordion-triangle-size;
|
|
17
15
|
|
|
18
|
-
|
|
19
|
-
&:
|
|
20
|
-
|
|
21
|
-
height: $accordion-triangle-size;
|
|
22
|
-
background-size: $accordion-triangle-size;
|
|
23
|
-
background-repeat: no-repeat;
|
|
24
|
-
content: "";
|
|
25
|
-
display: inline-block;
|
|
26
|
-
transform: rotate(-90deg);
|
|
27
|
-
transition: transform 0.1s ease-in-out;
|
|
28
|
-
position: absolute;
|
|
29
|
-
left: rem-calc(get-side($accordion-item-padding, left));
|
|
30
|
-
// The triangle is vertically centered in the title
|
|
31
|
-
top: calc(50% - #{$accordion-triangle-size * 0.5});
|
|
32
|
-
|
|
33
|
-
@include background-triangle($accordion-triangle-color);
|
|
16
|
+
&:hover,
|
|
17
|
+
&:focus {
|
|
18
|
+
color: $accordion-item-color-hover;
|
|
34
19
|
}
|
|
35
|
-
|
|
20
|
+
|
|
21
|
+
@if ($accordion-has-arrow == true) {
|
|
22
|
+
// Space for the triangle
|
|
23
|
+
$padding: rem-calc(get-side($accordion-item-padding, $accordion-arrow-position));
|
|
24
|
+
padding-#{$accordion-arrow-position}: $padding + 2 * $accordion-triangle-size;
|
|
25
|
+
|
|
26
|
+
// Triangle to signal a dropdown
|
|
36
27
|
&:before {
|
|
37
|
-
|
|
28
|
+
width: $accordion-triangle-size;
|
|
29
|
+
height: $accordion-triangle-size;
|
|
30
|
+
background-size: $accordion-triangle-size;
|
|
31
|
+
background-repeat: no-repeat;
|
|
32
|
+
content: "";
|
|
33
|
+
display: inline-block;
|
|
34
|
+
transform: rotate(-90deg);
|
|
35
|
+
transition: transform 0.1s ease-in-out;
|
|
36
|
+
position: absolute;
|
|
37
|
+
#{$accordion-arrow-position}: $padding;
|
|
38
|
+
// The triangle is vertically centered in the title
|
|
39
|
+
top: calc(50% - #{$accordion-triangle-size * 0.5});
|
|
40
|
+
|
|
41
|
+
@include background-triangle($accordion-triangle-color);
|
|
42
|
+
}
|
|
43
|
+
.is-active & {
|
|
44
|
+
&:before {
|
|
45
|
+
transform: rotate(0deg);
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
}
|
|
40
49
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
50
|
+
@if ($accordion-plusminus == true) {
|
|
51
|
+
// Center plus/minus
|
|
52
|
+
&:before {
|
|
53
|
+
line-height: 1;
|
|
54
|
+
margin-top: -0.5em;
|
|
55
|
+
}
|
|
44
56
|
}
|
|
45
57
|
}
|
|
46
58
|
|
|
@@ -5,14 +5,12 @@
|
|
|
5
5
|
@use "sass:meta";
|
|
6
6
|
|
|
7
7
|
$bottom-section-background-odd: if(
|
|
8
|
-
meta.variable-exists("bottom-section-background")
|
|
9
|
-
|
|
10
|
-
$form-background
|
|
8
|
+
sass(meta.variable-exists("bottom-section-background")): $bottom-section-background;
|
|
9
|
+
else: $form-background
|
|
11
10
|
) !default;
|
|
12
11
|
$bottom-section-background-even: if(
|
|
13
|
-
meta.variable-exists("bottom-section-background")
|
|
14
|
-
|
|
15
|
-
$body-background
|
|
12
|
+
sass(meta.variable-exists("bottom-section-background")): $bottom-section-background;
|
|
13
|
+
else: $body-background
|
|
16
14
|
) !default;
|
|
17
15
|
$bottom-section-background-image-overlay: rgba($black, 0.3);
|
|
18
16
|
|
|
@@ -26,9 +26,10 @@ $headline-font-size: 2 * $large-font-size !default;
|
|
|
26
26
|
/// @type Color
|
|
27
27
|
$headline-color: color-pick-contrast(
|
|
28
28
|
if(
|
|
29
|
-
$headline-background and $headline-background != none
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
sass($headline-background and $headline-background != none): get-background-color(
|
|
30
|
+
$headline-background
|
|
31
|
+
)
|
|
32
|
+
; else: get-background-color($fallback-background)
|
|
32
33
|
),
|
|
33
34
|
($title-color, $body-font-color-alt, $body-font-color),
|
|
34
35
|
6
|
|
@@ -8,9 +8,8 @@ $letter-signature-image-margin: 0 0 (0.5 * $global-margin) !default;
|
|
|
8
8
|
$letter-counter-font-family: $header-font-family !default;
|
|
9
9
|
$letter-counter-font-size: $large-font-size !default;
|
|
10
10
|
$letter-counter-line-height: if(
|
|
11
|
-
$letter-counter-font-size == $large-font-size
|
|
12
|
-
|
|
13
|
-
grid-lineheight($letter-counter-font-size)
|
|
11
|
+
sass($letter-counter-font-size == $large-font-size): $large-lineheight;
|
|
12
|
+
else: grid-lineheight($letter-counter-font-size)
|
|
14
13
|
) !default;
|
|
15
14
|
$letter-counter-font-weight: $global-weight-bold !default;
|
|
16
15
|
|
|
@@ -16,22 +16,18 @@ $mobile-menu-align-content: flex-start !default;
|
|
|
16
16
|
// Mobile menu items
|
|
17
17
|
$mobile-menu-item-font-size: $large-font-size !default;
|
|
18
18
|
$mobile-menu-item-line-height: if(
|
|
19
|
-
$mobile-menu-item-font-size == $large-font-size
|
|
20
|
-
|
|
21
|
-
grid-lineheight($mobile-menu-item-font-size)
|
|
19
|
+
sass($mobile-menu-item-font-size == $large-font-size): $large-lineheight;
|
|
20
|
+
else: grid-lineheight($mobile-menu-item-font-size)
|
|
22
21
|
) !default;
|
|
23
22
|
$mobile-menu-item-font-weight: $global-weight-bold !default;
|
|
24
23
|
$mobile-menu-item-color: $menu-item-color !default;
|
|
25
24
|
$mobile-menu-item-color-hover: if(
|
|
26
|
-
$mobile-menu-item-color == $menu-item-color
|
|
27
|
-
|
|
28
|
-
$mobile-menu-item-color
|
|
25
|
+
sass($mobile-menu-item-color == $menu-item-color): $menu-item-color-hover;
|
|
26
|
+
else: $mobile-menu-item-color
|
|
29
27
|
) !default;
|
|
30
28
|
$mobile-menu-item-decoration-hover: $menu-item-decoration-hover !default;
|
|
31
29
|
$mobile-menu-text-color: if(
|
|
32
|
-
$mobile-menu-item-color == $menu-item-color
|
|
33
|
-
$menu-text-color,
|
|
34
|
-
$mobile-menu-text-color
|
|
30
|
+
sass($mobile-menu-item-color == $menu-item-color): $menu-text-color; else: $mobile-menu-text-color
|
|
35
31
|
) !default;
|
|
36
32
|
$mobile-menu-text-font-weight: $mobile-menu-item-font-weight !default;
|
|
37
33
|
|
|
@@ -26,9 +26,9 @@ $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.channel(get-background-color($body-background), "lightness", $space: hsl) < 50
|
|
30
|
-
|
|
31
|
-
|
|
29
|
+
sass(color.channel(get-background-color($body-background), "lightness", $space: hsl) < 50):
|
|
30
|
+
$dark-gray;
|
|
31
|
+
else: $light-gray
|
|
32
32
|
) !default;
|
|
33
33
|
$recent-supporter-border-width: rem-calc(2) !default;
|
|
34
34
|
$recent-supporter-padding: (rem-calc(0.75 * $base-line-height) - $recent-supporter-border-width)
|
|
@@ -76,9 +76,8 @@ $closebutton-border-radius: 50% !default;
|
|
|
76
76
|
$menu-item-font-family: inherit !default;
|
|
77
77
|
$menu-item-font-size: $small-font-size !default;
|
|
78
78
|
$menu-item-line-height: if(
|
|
79
|
-
$menu-item-font-size == $small-font-size
|
|
80
|
-
|
|
81
|
-
grid-lineheight($menu-item-font-size)
|
|
79
|
+
sass($menu-item-font-size == $small-font-size): $small-lineheight;
|
|
80
|
+
else: grid-lineheight($menu-item-font-size)
|
|
82
81
|
) !default;
|
|
83
82
|
$menu-item-font-weight: $global-weight-normal !default;
|
|
84
83
|
$menu-item-color: inherit !default;
|
|
@@ -97,18 +96,15 @@ $dropdown-menu-item-color: color-pick-contrast(
|
|
|
97
96
|
($body-font-color, $body-font-color-alt)
|
|
98
97
|
) !default;
|
|
99
98
|
$dropdown-menu-item-color-hover: if(
|
|
100
|
-
$dropdownmenu-background
|
|
101
|
-
$dropdown-menu-item-color,
|
|
102
|
-
$menu-item-color-hover
|
|
99
|
+
sass($dropdownmenu-background): $dropdown-menu-item-color; else: $menu-item-color-hover
|
|
103
100
|
) !default;
|
|
104
101
|
$dropdown-menu-item-color-active: $dropdown-menu-item-color !default;
|
|
105
102
|
$dropdown-menu-item-height: $select-height !default;
|
|
106
103
|
$dropdown-menu-parent-font-weight: $global-weight-bold !default;
|
|
107
104
|
$dropdown-menu-parent-border-color: $input-border-color !default;
|
|
108
105
|
$dropdown-menu-parent-border-color-active: if(
|
|
109
|
-
$dropdown-menu-parent-border-color == $input-border-color
|
|
110
|
-
|
|
111
|
-
color.scale($dropdown-menu-parent-border-color, $lightness: -10%)
|
|
106
|
+
sass($dropdown-menu-parent-border-color == $input-border-color): $input-border-color-focus;
|
|
107
|
+
else: color.scale($dropdown-menu-parent-border-color, $lightness: -10%)
|
|
112
108
|
) !default;
|
|
113
109
|
$dropdown-menu-parent-border-width: $input-border-width !default;
|
|
114
110
|
$dropdownmenu-border: (
|
|
@@ -141,13 +137,14 @@ $accordion-item-color-hover: $accordion-item-color !default;
|
|
|
141
137
|
$accordion-item-padding: rem-calc($base-line-height) - $accordion-content-border-width !default;
|
|
142
138
|
$accordion-margin: rem-calc($base-line-height * 0.5) !default;
|
|
143
139
|
$accordion-plusminus: false !default;
|
|
140
|
+
$accordion-has-arrow: not $accordion-plusminus !default;
|
|
141
|
+
$accordion-arrow-position: left !default;
|
|
144
142
|
$accordion-radius: rem-calc(5) !default;
|
|
145
143
|
$accordion-separator: true !default;
|
|
146
144
|
$accordion-title-font-size: 1rem !default;
|
|
147
145
|
$accordion-title-line-height: if(
|
|
148
|
-
$accordion-title-font-size == 1rem
|
|
149
|
-
|
|
150
|
-
grid-lineheight($accordion-title-font-size)
|
|
146
|
+
sass($accordion-title-font-size == 1rem): unitless-calc($base-line-height) ;
|
|
147
|
+
else: grid-lineheight($accordion-title-font-size)
|
|
151
148
|
) !default;
|
|
152
149
|
$accordion-triangle-color: get-color(primary) !default;
|
|
153
150
|
$accordion-triangle-size: rem-calc($base-font-size) !default;
|
|
@@ -10,63 +10,60 @@
|
|
|
10
10
|
|
|
11
11
|
// Base colors
|
|
12
12
|
$donation-amount-background-color: if(
|
|
13
|
-
$option-button-fill == hollow
|
|
14
|
-
transparent,
|
|
15
|
-
$option-button-background
|
|
13
|
+
sass($option-button-fill == hollow): transparent; else: $option-button-background
|
|
16
14
|
) !default;
|
|
17
15
|
$donation-amount-background-color-checked: $option-button-background-checked !default;
|
|
18
16
|
|
|
19
17
|
// Button border colors
|
|
20
18
|
$donation-amount-border-color: if(
|
|
21
|
-
$option-button-fill == hollow
|
|
22
|
-
$donation-amount-background-color-checked,
|
|
23
|
-
transparent
|
|
19
|
+
sass($option-button-fill == hollow): $donation-amount-background-color-checked; else: transparent
|
|
24
20
|
) !default;
|
|
25
21
|
$donation-amount-border-color-checked: if(
|
|
26
|
-
$donation-amount-background-color-checked == $option-button-background-checked
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
sass($donation-amount-background-color-checked == $option-button-background-checked):
|
|
23
|
+
$option-button-border-color-checked;
|
|
24
|
+
else: transparent
|
|
29
25
|
) !default;
|
|
30
26
|
$donation-amount-border-color-hover: color.scale(
|
|
31
27
|
$donation-amount-border-color,
|
|
32
28
|
$lightness: $button-hollow-hover-lightness
|
|
33
29
|
) !default;
|
|
34
30
|
$donation-amount-border-color-focus: if(
|
|
35
|
-
$donation-amount-border-color-hover == transparent
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
$donation-amount-border-color-hover
|
|
31
|
+
sass($donation-amount-border-color-hover == transparent): color.scale(
|
|
32
|
+
$donation-amount-background-color-checked,
|
|
33
|
+
$lightness: $button-hollow-hover-lightness
|
|
34
|
+
)
|
|
35
|
+
; else: $donation-amount-border-color-hover
|
|
41
36
|
) !default;
|
|
42
37
|
|
|
43
38
|
// Button text colors
|
|
44
39
|
$donation-amount-text-color: if(
|
|
45
|
-
$donation-amount-background-color == transparent
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
40
|
+
sass($donation-amount-background-color == transparent): $donation-amount-border-color;
|
|
41
|
+
else: if(
|
|
42
|
+
sass($donation-amount-background-color == $option-button-background): $option-button-color;
|
|
43
|
+
else: color-pick-contrast(
|
|
44
|
+
$donation-amount-background-color,
|
|
45
|
+
($button-color, $button-color-alt)
|
|
46
|
+
)
|
|
47
|
+
)
|
|
52
48
|
) !default;
|
|
53
49
|
$donation-amount-text-color-hover: if(
|
|
54
|
-
$donation-amount-background-color == transparent
|
|
55
|
-
|
|
56
|
-
$donation-amount-text-color
|
|
50
|
+
sass($donation-amount-background-color == transparent): $donation-amount-border-color-hover;
|
|
51
|
+
else: $donation-amount-text-color
|
|
57
52
|
) !default;
|
|
58
53
|
$donation-amount-text-color-checked: if(
|
|
59
|
-
$donation-amount-background-color-checked == $option-button-background-checked
|
|
60
|
-
|
|
61
|
-
|
|
54
|
+
sass($donation-amount-background-color-checked == $option-button-background-checked):
|
|
55
|
+
$option-button-color-checked;
|
|
56
|
+
else: color-pick-contrast(
|
|
57
|
+
$donation-amount-background-color-checked,
|
|
58
|
+
($button-color, $button-color-alt)
|
|
59
|
+
)
|
|
62
60
|
) !default;
|
|
63
61
|
|
|
64
62
|
// Button typography
|
|
65
63
|
$donation-amount-font-size: $large-font-size !default;
|
|
66
64
|
$donation-amount-text-offset: if(
|
|
67
|
-
meta.type-of($button-text-offset) == map,
|
|
68
|
-
|
|
69
|
-
$button-text-offset
|
|
65
|
+
sass(meta.type-of($button-text-offset) == map): map.get($button-text-offset, default) ;
|
|
66
|
+
else: $button-text-offset
|
|
70
67
|
) !default;
|
|
71
68
|
|
|
72
69
|
// Button shape
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// Form field spacing
|
|
1
|
+
// Form field spacing and styling
|
|
2
2
|
// - - - - - - - - - - - - - - -
|
|
3
3
|
|
|
4
4
|
// Help texts margins
|
|
@@ -57,3 +57,29 @@ input.button.primary {
|
|
|
57
57
|
flex-basis: 100%;
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
+
|
|
61
|
+
// Opt-in styling when not in form group
|
|
62
|
+
.intro-text,
|
|
63
|
+
.checked-text {
|
|
64
|
+
&:not(.form-group .group-item) {
|
|
65
|
+
font-size: $form-label-font-size;
|
|
66
|
+
line-height: $form-label-line-height;
|
|
67
|
+
margin-top: $form-spacing * 2;
|
|
68
|
+
margin-bottom: $form-spacing * 2;
|
|
69
|
+
|
|
70
|
+
#{$text-tags} {
|
|
71
|
+
padding-#{$global-right}: 0;
|
|
72
|
+
margin-bottom: $form-spacing * 2;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
// Reset margins
|
|
76
|
+
p,
|
|
77
|
+
ul,
|
|
78
|
+
ol,
|
|
79
|
+
dl {
|
|
80
|
+
&:last-child {
|
|
81
|
+
margin-bottom: 0;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|
|
@@ -20,27 +20,36 @@
|
|
|
20
20
|
margin-bottom: $form-spacing * 2;
|
|
21
21
|
padding-#{$global-right}: 0;
|
|
22
22
|
}
|
|
23
|
+
}
|
|
23
24
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
25
|
+
// Override checked text colors and apply styles independent of form-groups
|
|
26
|
+
.checked-text {
|
|
27
|
+
h1,
|
|
28
|
+
.h1,
|
|
29
|
+
h2,
|
|
30
|
+
.h2,
|
|
31
|
+
h3,
|
|
32
|
+
.h3,
|
|
33
|
+
h4,
|
|
34
|
+
.h4,
|
|
35
|
+
h5,
|
|
36
|
+
.h5,
|
|
37
|
+
h6,
|
|
38
|
+
.h6,
|
|
39
|
+
a:not(.button),
|
|
40
|
+
blockquote,
|
|
41
|
+
p {
|
|
42
|
+
&,
|
|
43
|
+
#form-outer & {
|
|
44
|
+
color: $form-group-checked-text-color;
|
|
44
45
|
}
|
|
45
46
|
}
|
|
47
|
+
|
|
48
|
+
// Use form-groups styles also outside of form groups
|
|
49
|
+
&:not(.form-group .group-item) {
|
|
50
|
+
border: $form-group-border-width $form-group-border-style $form-group-border-color;
|
|
51
|
+
border-radius: $form-group-radius;
|
|
52
|
+
background: $form-group-background;
|
|
53
|
+
padding: $form-group-padding;
|
|
54
|
+
}
|
|
46
55
|
}
|
|
@@ -57,17 +57,15 @@ $form-label-font-family: inherit !default;
|
|
|
57
57
|
$form-label-font-size: $small-font-size !default;
|
|
58
58
|
$form-label-font-weight: $global-weight-bold !default;
|
|
59
59
|
$form-label-line-height: if(
|
|
60
|
-
$form-label-font-size == $small-font-size
|
|
61
|
-
|
|
62
|
-
grid-lineheight($form-label-font-size)
|
|
60
|
+
sass($form-label-font-size == $small-font-size): $small-lineheight;
|
|
61
|
+
else: grid-lineheight($form-label-font-size)
|
|
63
62
|
) !default;
|
|
64
63
|
|
|
65
64
|
// Borders
|
|
66
65
|
$input-border-width: rem-calc(2) !default;
|
|
67
66
|
$input-border-color: if(
|
|
68
|
-
$input-background == $form-background,
|
|
69
|
-
|
|
70
|
-
color.scale(get-background-color($form-background), $lightness: -5%)
|
|
67
|
+
sass($input-background == $form-background): color.scale($form-background, $lightness: -10%) ;
|
|
68
|
+
else: color.scale(get-background-color($form-background), $lightness: -5%)
|
|
71
69
|
) !default;
|
|
72
70
|
$input-border-color-focus: color.scale($input-border-color, $lightness: -10%) !default;
|
|
73
71
|
$input-border: $input-border-width solid $input-border-color !default;
|
|
@@ -117,21 +115,18 @@ $file-upload-help-color: $muted-font-color !default;
|
|
|
117
115
|
// Help texts
|
|
118
116
|
$helptext-color: $form-label-color !default;
|
|
119
117
|
$helptext-font-size: if(
|
|
120
|
-
$form-label-font-size == 1rem
|
|
121
|
-
$small-font-size,
|
|
122
|
-
0.8 * $form-label-font-size
|
|
118
|
+
sass($form-label-font-size == 1rem): $small-font-size; else: 0.8 * $form-label-font-size
|
|
123
119
|
) !default;
|
|
124
120
|
$helptext-line-height: if(
|
|
125
|
-
$helptext-font-size == $small-font-size
|
|
126
|
-
|
|
127
|
-
grid-lineheight($helptext-font-size)
|
|
121
|
+
sass($helptext-font-size == $small-font-size): $small-lineheight;
|
|
122
|
+
else: grid-lineheight($helptext-font-size)
|
|
128
123
|
) !default;
|
|
129
124
|
|
|
130
125
|
// Fieldsets
|
|
131
126
|
$fieldset-border: none !default;
|
|
132
127
|
$fieldset-margin: 2 * $form-spacing 0 !default;
|
|
133
|
-
$fieldset-padding: if($fieldset-border != none
|
|
134
|
-
$legend-padding: if($fieldset-border != none
|
|
128
|
+
$fieldset-padding: if(sass($fieldset-border != none): $form-spacing; else: 0) !default;
|
|
129
|
+
$legend-padding: if(sass($fieldset-border != none): 0 $form-spacing; else: 0) !default;
|
|
135
130
|
$legend-margin: 0 0 (2 * $form-spacing)
|
|
136
131
|
(-1 * get-side($legend-padding, left) - get-side($fieldset-padding, left)) !default;
|
|
137
132
|
$legend-color: $header-color-odd !default;
|
|
@@ -139,17 +134,15 @@ $legend-font-family: $form-label-font-family !default;
|
|
|
139
134
|
$legend-font-size: $lead-font-size !default;
|
|
140
135
|
$legend-font-weight: $header-font-weight !default;
|
|
141
136
|
$legend-line-height: if(
|
|
142
|
-
$legend-font-size == $lead-font-size
|
|
143
|
-
|
|
144
|
-
grid-lineheight($legend-font-size)
|
|
137
|
+
sass($legend-font-size == $lead-font-size): $lead-lineheight;
|
|
138
|
+
else: grid-lineheight($legend-font-size)
|
|
145
139
|
) !default;
|
|
146
140
|
|
|
147
141
|
// Errors
|
|
148
142
|
$input-error-font-size: $small-font-size !default;
|
|
149
143
|
$input-error-line-height: if(
|
|
150
|
-
$input-error-font-size == $small-font-size
|
|
151
|
-
|
|
152
|
-
grid-lineheight($input-error-font-size)
|
|
144
|
+
sass($input-error-font-size == $small-font-size): $small-lineheight;
|
|
145
|
+
else: grid-lineheight($input-error-font-size)
|
|
153
146
|
) !default;
|
|
154
147
|
$input-error-background: get-color(alert) !default;
|
|
155
148
|
|
|
@@ -181,3 +174,7 @@ $loader-color: get-color(primary) !default;
|
|
|
181
174
|
|
|
182
175
|
// Donation forms
|
|
183
176
|
$payment-icon-color: $form-label-color !default;
|
|
177
|
+
|
|
178
|
+
// M2D forms
|
|
179
|
+
$m2d-option-font-size: 1rem !default;
|
|
180
|
+
$m2d-option-checkbox-align: center !default;
|
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
// - - - - - - - - - - - - - - -
|
|
3
3
|
// Special styles for images, videos, iframes,…
|
|
4
4
|
|
|
5
|
+
// Keep aspect ratio when setting a height.
|
|
6
|
+
img {
|
|
7
|
+
width: auto;
|
|
8
|
+
}
|
|
9
|
+
|
|
5
10
|
// Wrapper to use full available width.
|
|
6
11
|
.media-stretch {
|
|
7
12
|
@extend .small-reverse-container-padding;
|
|
@@ -17,13 +17,10 @@ $fallback-background: $medium-gray !default;
|
|
|
17
17
|
|
|
18
18
|
// Borders
|
|
19
19
|
$form-border: if(
|
|
20
|
-
$form-background == $body-background
|
|
21
|
-
|
|
22
|
-
none
|
|
20
|
+
sass($form-background == $body-background): rem-calc($base-line-height * 0.5) solid $light-gray;
|
|
21
|
+
else: none
|
|
23
22
|
) !default;
|
|
24
23
|
$header-border: if(
|
|
25
|
-
$header-background == $body-background
|
|
26
|
-
rem-calc(4) solid $light-gray,
|
|
27
|
-
none
|
|
24
|
+
sass($header-background == $body-background): rem-calc(4) solid $light-gray; else: none
|
|
28
25
|
) !default;
|
|
29
26
|
$footer-border: none !default;
|
package/src/scss/main.scss
CHANGED
|
@@ -26,14 +26,10 @@ $body-font-color-alt: $white !default;
|
|
|
26
26
|
$muted-font-color: $medium-gray !default;
|
|
27
27
|
$title-color: get-color(primary) !default;
|
|
28
28
|
$header-color-even: if(
|
|
29
|
-
meta.variable-exists("header-color")
|
|
30
|
-
$header-color,
|
|
31
|
-
$body-font-color
|
|
29
|
+
sass(meta.variable-exists("header-color")): $header-color; else: $body-font-color
|
|
32
30
|
) !default;
|
|
33
31
|
$header-color-odd: if(
|
|
34
|
-
meta.variable-exists("header-color")
|
|
35
|
-
$header-color,
|
|
36
|
-
get-color(secondary)
|
|
32
|
+
sass(meta.variable-exists("header-color")): $header-color; else: get-color(secondary)
|
|
37
33
|
) !default;
|
|
38
34
|
$header-color-alt: $body-font-color-alt !default;
|
|
39
35
|
$header-small-font-color: $muted-font-color !default;
|
|
@@ -95,21 +91,19 @@ $anchor-text-decoration-hover: underline !default;
|
|
|
95
91
|
// Quotes
|
|
96
92
|
$blockquote-font-size: $lead-font-size !default;
|
|
97
93
|
$blockquote-line-height: if(
|
|
98
|
-
$blockquote-font-size == $lead-font-size
|
|
99
|
-
|
|
100
|
-
grid-lineheight($blockquote-font-size)
|
|
94
|
+
sass($blockquote-font-size == $lead-font-size): $lead-lineheight;
|
|
95
|
+
else: grid-lineheight($blockquote-font-size)
|
|
101
96
|
) !default;
|
|
102
97
|
$blockquote-padding: none !default;
|
|
103
98
|
$blockquote-border: none !default;
|
|
104
99
|
$cite-color: $blockquote-color !default;
|
|
105
100
|
$cite-font-size: $blockquote-font-size !default;
|
|
106
101
|
$cite-line-height: if(
|
|
107
|
-
$cite-font-size == $blockquote-font-size
|
|
108
|
-
|
|
109
|
-
grid-lineheight($cite-font-size)
|
|
102
|
+
sass($cite-font-size == $blockquote-font-size): $blockquote-line-height;
|
|
103
|
+
else: grid-lineheight($cite-font-size)
|
|
110
104
|
) !default;
|
|
111
105
|
$cite-font-style: normal !default;
|
|
112
106
|
$cite-pseudo-content: "" !default;
|
|
113
107
|
|
|
114
108
|
// Tags that usually make up text sections
|
|
115
|
-
$text-tags: p, h1, h2, h3, h4, h5, h6, dl, ul, ol, blockquote !default;
|
|
109
|
+
$text-tags: "p, h1, h2, h3, h4, h5, h6, dl, ul:not(.accordion), ol, blockquote" !default;
|