Skip to content
This repository was archived by the owner on Jul 25, 2023. It is now read-only.

Commit d009c1d

Browse files
AndyEPhippsAndyEPhipps
authored
Merge pull request #937 from comicrelief/936_donate_theme_updates
Donate theme updates
2 parents 58aa19f + 3922abd commit d009c1d

17 files changed

Lines changed: 785 additions & 118 deletions

File tree

‎sass/base/core/_base-1-mixins.scss‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -275,28 +275,47 @@
275275
}
276276
}
277277

278-
@mixin placeholder($color, $font-size, $body-font) {
278+
@mixin placeholder($color, $font-size, $body-font, $line-height:"normal", $font-weight:"normal", $font-size--md: $font-size, $line-height--md:"normal") {
279279
@include optional-at-root('::placeholder') {
280280
color: $color;
281281
font-size: $font-size;
282+
line-height: $line-height;
282283
font-family: $body-font;
283284
opacity: 1;
284285
overflow: visible;
286+
font-weight: $font-weight;
287+
288+
@include breakpoint($screen-md) {
289+
font-size: $font-size--md;
290+
line-height: $line-height--md;
291+
}
285292
}
286293
@include optional-at-root('::-webkit-input-placeholder') {
287294
color: $color;
288295
font-size: $font-size;
296+
line-height: $line-height;
289297
font-family: $body-font;
290298
opacity: 1;
291299
overflow: visible;
300+
font-weight: $font-weight;
301+
@include breakpoint($screen-md) {
302+
font-size: $font-size--md;
303+
line-height: $line-height--md;
304+
}
292305
}
293306

294307
@include optional-at-root(':-ms-input-placeholder') {
295308
color: $color;
296309
font-size: $font-size;
310+
line-height: $line-height;
297311
font-family: $body-font;
298312
opacity: 1;
299313
overflow: visible;
314+
font-weight: $font-weight;
315+
@include breakpoint($screen-md) {
316+
font-size: $font-size--md;
317+
line-height: $line-height--md;
318+
}
300319
}
301320

302321
// safari only hack

‎sass/themes/donate/components/background-colours/_background-colours.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.bg--transparent {
2+
background-color: transparent;
3+
}
4+
5+
.bg--blue-gradient {
6+
// Non-gradient browser fallback:
7+
background-color: #00407e;
8+
background-image: linear-gradient(to top right, $colour--bg-gradient-top-right, $colour--bg-gradient-bottom-left);
9+
}

‎sass/themes/donate/components/buttons/_buttons.scss‎

Lines changed: 89 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,92 @@
1-
.form__field--submit {
2-
.btn {
3-
width : 100%;
4-
border-radius: 30px;
5-
@include breakpoint($screen-lg) {
6-
width: auto;
1+
a.btn,
2+
a.cta,
3+
a.cta-2,
4+
button.btn,
5+
button.cta,
6+
button.cta-2 {
7+
width:100%;
8+
height: 50px;
9+
font-family: $montserrat;
10+
@include font-size($button-cta-font-size);
11+
@include border-radius(8px);
12+
@include box-shadow-transition();
13+
}
14+
15+
16+
// Buttons: primary action
17+
a.btn,
18+
button.btn {
19+
background-color: $colour--btn-light;
20+
color: $colour--black;
21+
padding: 13px 30px;
22+
@include border-radius(8px);
23+
@include box-shadow-transition();
24+
@include colour-transition();
25+
26+
&.secondary {
27+
background-color: transparent;
28+
border: 4px solid $colour--white;
29+
color: $colour--white;
30+
padding: 10px 30px;
31+
@include font-size($button-cta-font-size);
32+
@include border-radius(8px);
33+
}
34+
35+
&:hover,
36+
&:focus {
37+
background-color: $colour--btn-hover;
38+
color: $colour--white;
39+
40+
&.secondary {
41+
background-color: transparent;
42+
border: 4px solid $colour--white;
43+
color: $colour--white;
44+
}
45+
}
46+
47+
&:active {
48+
background-color: $colour--btn-on-click;
49+
color: $colour--white;
50+
51+
&.secondary {
52+
background-color: transparent;
53+
border: 4px solid $colour--white;
54+
color: $colour--white;
755
}
856
}
957
}
58+
59+
// CTAs - classes to be finalised
60+
a.cta,
61+
button.cta {
62+
background-color: $colour--red;
63+
color: $colour--white;
64+
@include border-radius(30px);
65+
@include box-shadow-transition();
66+
@include colour-transition();
67+
68+
&:hover,
69+
&:focus {
70+
background-color: $colour--cta-hover;
71+
color: $colour--white;
72+
}
73+
}
74+
75+
a.cta-2,
76+
button.cta-2 {
77+
background-color: transparent;
78+
border: 4px solid $colour--white;
79+
color: $colour--white;
80+
transition: all 0.1s ease-in-out;
81+
@include border-radius(30px);
82+
@include colour-transition-2();
83+
box-shadow: none;
84+
padding: 9px 30px;
85+
86+
&:hover,
87+
&:focus {
88+
background-color: transparent;
89+
border: 4px solid $colour--black;
90+
color: $colour--black;
91+
}
92+
}

‎sass/themes/donate/components/form/_form.scss‎

Lines changed: 102 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,14 @@
1717
&.form__row--your--address {
1818
.form__field--postcode {
1919
display: flex;
20+
flex-direction: column;
2021

2122
.form__field--text {
2223
width: 100%;
2324
}
2425

2526
.form__btn {
26-
width: auto;
27+
width: 100%;
2728
}
2829
}
2930
}
@@ -40,7 +41,7 @@
4041
.form__fieldset {
4142
h1 {
4243
text-transform: inherit;
43-
color: $colour-deep-violet;
44+
color: $colour--white;
4445
}
4546
}
4647

@@ -54,16 +55,23 @@ form,
5455
form a,
5556
input {
5657
font-family: $body-font;
57-
color: $colour-deep-violet;
58+
color: $colour--white;
59+
@include font-size($field-font-size);
60+
font-weight: 500;
61+
}
62+
63+
form a {
64+
color: $colour--white;
5865
}
5966

6067
input[type="email"],
6168
input[type="number"],
6269
input[type="text"],
70+
input[type="tel"],
6371
select,
6472
textarea {
65-
border: 1px solid $colour-deep-violet;
66-
@include placeholder(#757575, 18px, $body-font);
73+
border: 1px solid $colour--field-border;
74+
@include placeholder($colour--placeholder, 18px, $body-font, 22px, 700, 20px, 24px);
6775
}
6876

6977

@@ -122,8 +130,8 @@ textarea {
122130
left: 0;
123131
width: 0.5em;
124132
height: 0.5em;
125-
border-left: 2px solid $colour-dark-purple;
126-
border-top: 2px solid $colour-dark-purple;
133+
border-left: 2px solid $colour--white;
134+
border-top: 2px solid $colour--white;
127135
transform: rotate(-45deg);
128136
}
129137
}
@@ -139,7 +147,9 @@ h2 {
139147
@include font-size($h3-font-size);
140148
}
141149
.form__row--giftaid p {
142-
text-align: left;
150+
text-align: center;
151+
@include font-size($field-font-size);
152+
font-weight: 500;
143153
}
144154
.form__subcopy--bfpo {
145155
font-size: 16px;
@@ -158,24 +168,19 @@ button.payment-button {
158168
padding: 18px 30px;
159169
}
160170

161-
button[type="submit"],
162-
#comicrelief_payinbundle_payment_card,
163-
#comicrelief_payinbundle_payment_directdebit {
164-
@extend .btn--deep-violet;
165-
}
166171
// Apple Pay button only shows when supported
167172
#comicrelief_payinbundle_payment_apple_pay {
168173
display: none;
169174
// fallback if apple pay styling doesn't come through
170175
// making sure this doesn't stick out if apple styling does come through
171-
height: 54px;
172-
@extend .btn--black;
176+
height: 55px;
177+
@extend button.cta;
173178
// apple pay styling
174179
&:after {
175180
margin-top: -1px;
176181
height: 55px;
177182
-webkit-appearance: -apple-pay-button;
178-
-apple-pay-button-style: black;
183+
-apple-pay-button-style: white;
179184
}
180185
}
181186
// PayPal fallback styling
@@ -187,14 +192,91 @@ button[type="submit"],
187192

188193
.form__row--giftaid {
189194
.giftaid-title {
190-
width: 185px;
191-
margin: 15px auto;
195+
width: 220px;
196+
margin: 15px auto;
192197
height: 105px;
193-
background: url($image-path+"gift_aid_logo.png") no-repeat center;
198+
background: url($image-path+"gift_aid_logo--white.png") no-repeat center;
194199
background-size: contain;
195200

196201
@include breakpoint($screen-lg) {
197-
margin: 15px auto 15px 0;
202+
margin: 15px auto 15px;
198203
}
199204
}
200205
}
206+
207+
label, legend, .form__field-label {
208+
@include font-size($field-label-font-size);
209+
margin-bottom: 10px;
210+
font-weight: 700;
211+
}
212+
213+
#field-label--giftaid {
214+
font-weight: 500;
215+
}
216+
217+
.form__field-additional-text {
218+
font-family: $montserrat;
219+
@include font-size($form-error-font-size);
220+
font-weight: 500;
221+
222+
a {
223+
font-family: inherit;
224+
font-size: inherit;
225+
line-height: inherit;
226+
font-weight: inherit;
227+
border-bottom: 1px solid $colour--white;
228+
}
229+
}
230+
231+
.form-error {
232+
padding: 6px;
233+
width: 100%;
234+
background-color: $colour--error-msg-bg;
235+
@include border-radius(8px);
236+
@include font-size($form-error-font-size);
237+
font-weight: 500;
238+
239+
&:before {
240+
width: 16px;
241+
height: 16px;
242+
}
243+
}
244+
245+
#field-wrapper--accountHolder {
246+
.form__field-wrapper--checkbox {
247+
min-height: 45px;
248+
}
249+
.form__field.form__field--checkbox {
250+
height: 40px;
251+
width: 40px;
252+
top: 0;
253+
left: 0;
254+
255+
& + span {
256+
top: 0;
257+
left: 0;
258+
}
259+
260+
@include breakpoint($screen-md) {
261+
top: 3px;
262+
& + span {
263+
top: 3px;
264+
}
265+
}
266+
}
267+
#field-label--accountHolder {
268+
padding-left: 5px;
269+
270+
@include breakpoint($screen-md) {
271+
padding-left: 10px;
272+
}
273+
}
274+
}
275+
276+
#address-detail {
277+
.form__fieldset.form__field--wrapper {
278+
label.form__field-label span {
279+
font-weight: 500 !important;
280+
}
281+
}
282+
}

‎sass/themes/donate/components/form/images/gift_aid_logo--white.png‎

37.6 KB
Loading

0 commit comments

Comments
 (0)