@moreonion/foundist 2.1.1 → 3.0.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/.vscode/settings.json +16 -0
- package/README.md +5 -9
- package/package.json +6 -28
- package/src/html/basic-action-page-cover-1col.html +27 -27
- package/src/html/basic-action-page-cover-2col-reversed.html +27 -27
- package/src/html/basic-action-page-cover-2col.html +27 -27
- package/src/html/basic-action-page-cover-banner.html +27 -27
- package/src/html/basic-action-page-reversed.html +22 -23
- package/src/html/basic-action-page-with-banner-reversed.html +27 -27
- package/src/html/basic-action-page-with-banner.html +27 -27
- package/src/html/basic-action-page-with-callouts.html +28 -28
- package/src/html/basic-action-page.html +22 -23
- package/src/html/build-index.html +9 -0
- package/src/html/dev-index.html +49 -0
- package/src/html/donation-action-page.html +20 -20
- package/src/html/e2t-action-page.html +25 -28
- package/src/html/includes/accordion.html +25 -25
- package/src/html/includes/basic-form-with-errors.html +28 -26
- package/src/html/includes/basic-form.html +11 -7
- package/src/html/includes/cookiebar.html +5 -5
- package/src/html/includes/donate-form.html +11 -8
- package/src/html/includes/e2t-single-form.html +29 -27
- package/src/html/includes/form-items/_macros.html +76 -0
- package/src/html/includes/form-items/checkboxes.html +18 -18
- package/src/html/includes/form-items/country-select-options.html +253 -0
- package/src/html/includes/form-items/donation-amount.html +63 -64
- package/src/html/includes/form-items/donation-interval.html +14 -13
- package/src/html/includes/form-items/fake-field.html +2 -2
- package/src/html/includes/form-items/fieldset.html +9 -7
- package/src/html/includes/form-items/file-upload.html +7 -7
- package/src/html/includes/form-items/giftaid.html +16 -0
- package/src/html/includes/form-items/inline-radios.html +14 -14
- package/src/html/includes/form-items/opt-in-checkbox.html +5 -5
- package/src/html/includes/form-items/opt-in-radios.html +7 -7
- package/src/html/includes/form-items/payment-icons.html +17 -17
- package/src/html/includes/form-items/paymethod-selector.html +24 -24
- package/src/html/includes/form-items/radios-with-error.html +8 -8
- package/src/html/includes/form-items/radios.html +14 -14
- package/src/html/includes/form-items/select-with-error.html +257 -257
- package/src/html/includes/form-items/textarea.html +2 -2
- package/src/html/includes/form-items/webform-steps.html +13 -13
- package/src/html/includes/language-switcher.html +10 -10
- package/src/html/includes/login-form.html +5 -3
- package/src/html/includes/menu.html +3 -3
- package/src/html/includes/overlay.html +4 -4
- package/src/html/includes/pagination.html +13 -13
- package/src/html/includes/pgbar-thermometer.html +8 -8
- package/src/html/includes/pgbar.html +5 -5
- package/src/html/includes/recent-supporters-agregated.html +32 -32
- package/src/html/includes/recent-supporters-comments.html +31 -31
- package/src/html/includes/recent-supporters-empty.html +3 -3
- package/src/html/includes/recent-supporters.html +26 -26
- package/src/html/includes/share-buttons.html +30 -28
- package/src/html/includes/sticky-button.html +1 -1
- package/src/html/includes/teasers.html +25 -5
- package/src/html/includes/toggle-element-show-more.html +3 -3
- package/src/html/includes/toggle-element-toggle.html +2 -2
- package/src/html/login-page.html +5 -7
- package/src/html/snippets-demo.html +13 -15
- package/src/html/teaser-page.html +7 -7
- package/src/html/templates/action-page-cover-1col.html +12 -83
- package/src/html/templates/action-page-cover-banner.html +15 -85
- package/src/html/templates/action-page-reversed.html +16 -82
- package/src/html/templates/action-page.html +21 -80
- package/src/html/templates/base.html +31 -0
- package/src/html/templates/page.html +93 -0
- package/src/html/templates/share-page.html +3 -0
- package/src/html/thank-you-page-cover-1col.html +14 -14
- package/src/html/thank-you-page-cover-2col.html +17 -13
- package/src/html/thank-you-page-cover-banner.html +14 -14
- package/src/html/thank-you-page-with-banner.html +14 -14
- package/src/html/thank-you-page.html +15 -15
- package/src/html/typography-static-page.html +18 -20
- package/src/js/foundist.js +33 -12
- package/src/scss/_settings.scss +3 -3
- package/src/scss/components/_settings.scss +6 -2
- package/src/scss/form/_fields.scss +19 -0
- package/src/scss/form/_settings.scss +6 -2
- package/src/scss/layout/_cover.scss +3 -2
- package/src/scss/main.scss +2 -0
- package/src/scss/typography/_settings.scss +2 -0
- package/src/html/empty-action-page.html +0 -29
- package/src/html/empty-static-page.html +0 -21
- package/src/html/includes/form-items/country-select.html +0 -258
- package/src/html/includes/form-items/email.html +0 -4
- package/src/html/includes/form-items/first-name.html +0 -4
- package/src/html/includes/form-items/last-name.html +0 -4
- package/src/html/includes/form-items/password.html +0 -5
- package/src/html/includes/form-items/submit-button.html +0 -2
- package/src/html/includes/form-items/text-with-description.html +0 -5
- package/src/html/includes/form-items/text-with-error.html +0 -5
- package/src/html/includes/teaser.html +0 -17
- package/src/html/index.html +0 -51
- package/src/html/templates/action-page-cover-2col-reversed.html +0 -97
- package/src/html/templates/action-page-cover-2col.html +0 -97
- package/src/html/templates/action-page-with-banner-reversed.html +0 -91
- package/src/html/templates/action-page-with-banner.html +0 -91
- package/src/html/templates/static-page-cover-1col.html +0 -80
- package/src/html/templates/static-page-cover-2col.html +0 -88
- package/src/html/templates/static-page-cover-banner.html +0 -81
- package/src/html/templates/static-page-with-banner.html +0 -77
- package/src/html/templates/static-page.html +0 -73
- package/src/html/templates/teaser-page.html +0 -73
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<fieldset class="form-wrapper fieldset giftaid">
|
|
2
|
+
<div class="fieldset-wrapper">
|
|
3
|
+
<div class="form-item">
|
|
4
|
+
<p><strong>Increase your donation by 25%</strong> without additional cost to you by ticking the box below</p>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="form-item extra-spacing">
|
|
7
|
+
<div class="form-item form-type-checkbox">
|
|
8
|
+
<input type="checkbox" id="giftaid-checkbox" name="giftaid-checkbox" value="1" class="form-checkbox">
|
|
9
|
+
<label class="option" for="giftaid-checkbox"><span>I am a UK tax payer and I want you to claim Gift Aid on my donation*</span></label>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="form-item">
|
|
13
|
+
<p class="small muted">* This is the small print that you may want to add to your giftaid field but it’s really optional.</p>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</fieldset>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<div class="form-item inline extra-spacing">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<label for="radios-1">What is most important to you?</label>
|
|
3
|
+
<div id="radios" class="form-radios">
|
|
4
|
+
<div class="form-item form-type-radio">
|
|
5
|
+
<input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
|
|
6
|
+
<label class="option" for="radios-1">Whales</label>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="form-item form-type-radio">
|
|
9
|
+
<input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
|
|
10
|
+
<label class="option" for="radios-2">Pandas</label>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="form-item form-type-radio">
|
|
13
|
+
<input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
|
|
14
|
+
<label class="option" for="radios-3">Bees</label>
|
|
15
|
+
</div>
|
|
7
16
|
</div>
|
|
8
|
-
<div class="form-item form-type-radio">
|
|
9
|
-
<input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
|
|
10
|
-
<label class="option" for="radios-2">Pandas</label>
|
|
11
|
-
</div>
|
|
12
|
-
<div class="form-item form-type-radio">
|
|
13
|
-
<input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
|
|
14
|
-
<label class="option" for="radios-3">Bees</label>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
17
|
</div>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<div class="form-item extra-spacing">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<label for="newsletter-checkbox" class="show-for-sr">Newsletter</label>
|
|
3
|
+
<div class="form-item form-type-checkbox">
|
|
4
|
+
<input type="checkbox" id="newsletter-checkbox" name="newsletter-checkbox" value="opt-in" class="form-checkbox">
|
|
5
|
+
<label class="option" for="newsletter-checkbox">Please keep me up to date and send me your regular newsletter about this topic</label>
|
|
6
|
+
</div>
|
|
7
7
|
</div>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
<div class="form-item extra-spacing">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
2
|
+
<label for="newsletter-opt-in">Would you like to get our newsletter? <span class="form-required" title="This field is required.">*</span></label>
|
|
3
|
+
<div class="form-item form-type-radio">
|
|
4
|
+
<input type="radio" id="newsletter-opt-in" name="newsletter" value="opt-in" class="form-radio"> <label class="option" for="newsletter-opt-in">Yes, I’d love to</label>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="form-item form-type-radio">
|
|
7
|
+
<input type="radio" id="newsletter-no-change" name="newsletter" value="no-change" class="form-radio"> <label class="option" for="newsletter-no-change">No, thank you</label>
|
|
8
|
+
</div>
|
|
9
9
|
</div>
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
<div class="form-item">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
2
|
+
<div class="payment-icons muted">
|
|
3
|
+
<span class="secure-payment-icon"><span class="show-for-sr">Your payment is secure</span></span>
|
|
4
|
+
<span class="apple-pay-icon"><span class="show-for-sr">Apple Pay</span></span>
|
|
5
|
+
<span class="credit-card-icon"><span class="show-for-sr">Credit Card</span></span>
|
|
6
|
+
<span class="direct-debit-icon"><span class="show-for-sr">Direct Debit</span></span>
|
|
7
|
+
<span class="google-pay-icon"><span class="show-for-sr">Google Pay</span></span>
|
|
8
|
+
<span class="mastercard-icon"><span class="show-for-sr">Master Card</span></span>
|
|
9
|
+
<span class="paypal-icon"><span class="show-for-sr">PayPal</span></span>
|
|
10
|
+
<span class="paypal-pp-icon"><span class="show-for-sr">PayPal</span></span>
|
|
11
|
+
<span class="sage-pay-icon"><span class="show-for-sr">SagePay</span></span>
|
|
12
|
+
<span class="sepa-icon"><span class="show-for-sr">SEPA</span></span>
|
|
13
|
+
<span class="stripe-icon"><span class="show-for-sr">Stripe</span></span>
|
|
14
|
+
<span class="visa-icon"><span class="show-for-sr">VISA</span></span>
|
|
15
|
+
<span class="direct-debit-logo"><span class="show-for-sr">Direct Debit</span></span>
|
|
16
|
+
<span class="giftaid-logo"><span class="show-for-sr">Giftaid</span></span>
|
|
17
|
+
<span class="fr-regulator-logo"><span class="show-for-sr">Fundraising Regulator</span></span>
|
|
18
|
+
</div>
|
|
19
19
|
</div>
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
<h3>Pay via</h3>
|
|
2
2
|
<p>There might be an introductory sentence here meow.</p>
|
|
3
3
|
<div class="paymethod-select-wrapper form-item">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
4
|
+
<div class="form-item form-type-radios">
|
|
5
|
+
<div id="payment-method-selector" class="form-radios paymethod-select-radios">
|
|
6
|
+
<div class="form-item form-type-radio">
|
|
7
|
+
<input
|
|
8
|
+
class="paymethod-select-radios form-radio"
|
|
9
|
+
type="radio"
|
|
10
|
+
id="paymethod-select-payment-method-selector-2"
|
|
11
|
+
name="paymethod_select[payment_method_selector]"
|
|
12
|
+
value="2"
|
|
13
|
+
checked="checked"
|
|
14
|
+
/>
|
|
15
|
+
<label class="option" for="paymethod-select-payment-method-selector-2">Direct debit</label>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="form-item form-type-radio">
|
|
18
|
+
<input
|
|
19
|
+
class="paymethod-select-radios form-radio"
|
|
20
|
+
type="radio"
|
|
21
|
+
id="paymethod-select-payment-method-selector-3"
|
|
22
|
+
name="paymethod_select[payment_method_selector]"
|
|
23
|
+
value="3"
|
|
24
|
+
/>
|
|
25
|
+
<label class="option" for="paymethod-select-payment-method-selector-3">SEPA</label>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
27
28
|
</div>
|
|
28
|
-
</div>
|
|
29
29
|
</div>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<div class="form-item extra-spacing">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
2
|
+
<label for="radios-error" class="is-invalid-label">Would you like to get our newsletter? <span class="form-required" title="This field is required.">*</span></label>
|
|
3
|
+
<div class="form-item form-type-radio">
|
|
4
|
+
<input type="radio" id="radios-error" name="newsletter" value="opt-in" class="form-radio is-invalid-input"> <label class="option" for="radios-error">Yes, I’d love to</label>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="form-item form-type-radio">
|
|
7
|
+
<input type="radio" id="radios-error-2" name="newsletter" value="no-change" class="form-radio"> <label class="option" for="radios-error-2">No, thank you</label>
|
|
8
|
+
</div>
|
|
9
|
+
<label for="radios-error" generated="true" class="error form-error is-visible">Do you want to receive our newsletter? field is required.</label>
|
|
10
10
|
</div>
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
<div class="form-item extra-spacing">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
2
|
+
<label for="radios-1">What is most important to you?</label>
|
|
3
|
+
<div id="radios" class="form-radios">
|
|
4
|
+
<div class="form-item form-type-radio">
|
|
5
|
+
<input type="radio" id="radios-1" name="radios" value="1" class="form-radio">
|
|
6
|
+
<label class="option" for="radios-1">Whales</label>
|
|
7
|
+
</div>
|
|
8
|
+
<div class="form-item form-type-radio">
|
|
9
|
+
<input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
|
|
10
|
+
<label class="option" for="radios-2">Pandas</label>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="form-item form-type-radio">
|
|
13
|
+
<input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
|
|
14
|
+
<label class="option" for="radios-3">Bees</label>
|
|
15
|
+
</div>
|
|
7
16
|
</div>
|
|
8
|
-
<div class="form-item form-type-radio">
|
|
9
|
-
<input type="radio" id="radios-2" name="radios" value="2" class="form-radio">
|
|
10
|
-
<label class="option" for="radios-2">Pandas</label>
|
|
11
|
-
</div>
|
|
12
|
-
<div class="form-item form-type-radio">
|
|
13
|
-
<input type="radio" id="radios-3" name="radios" value="2" class="form-radio">
|
|
14
|
-
<label class="option" for="radios-3">Bees</label>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
17
|
</div>
|