@moreonion/foundist 3.4.2 → 3.5.0
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 +10 -10
- 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/form/_fields.scss +27 -1
- package/src/scss/form/_form-group.scss +29 -20
- package/src/scss/form/_settings.scss +4 -0
- package/src/scss/main.scss +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@moreonion/foundist",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
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,10 +26,10 @@
|
|
|
26
26
|
"prepare": "husky"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@moreonion/foundation-base": "3.
|
|
29
|
+
"@moreonion/foundation-base": "3.5.0",
|
|
30
30
|
"foundation-sites": "6.9.0",
|
|
31
31
|
"jquery": "^3.7.0",
|
|
32
|
-
"sass-embedded": "^1.
|
|
32
|
+
"sass-embedded": "^1.89.0",
|
|
33
33
|
"select2": "^4.1.0-rc.0"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
@@ -40,14 +40,14 @@
|
|
|
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.1.0",
|
|
44
44
|
"postcss": "^8.5.0",
|
|
45
|
-
"prettier": "^3.
|
|
46
|
-
"stylelint": "^16.
|
|
45
|
+
"prettier": "^3.6.0",
|
|
46
|
+
"stylelint": "^16.21.0",
|
|
47
47
|
"stylelint-config-idiomatic-order": "^10.0.0",
|
|
48
|
-
"stylelint-config-recommended-scss": "^
|
|
49
|
-
"stylelint-scss": "^6.
|
|
50
|
-
"vite": "^
|
|
48
|
+
"stylelint-config-recommended-scss": "^15.0.0",
|
|
49
|
+
"stylelint-scss": "^6.12.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.9.2"
|
|
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 %}
|
|
@@ -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
|
}
|