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

Commit ca87da8

Browse files
AndyEPhippsAndyEPhipps
authored
Merge pull request #948 from comicrelief/947_payin_donate_theme_updates
Payin donate theme updates
2 parents 81ed6a9 + 8047df3 commit ca87da8

15 files changed

Lines changed: 400 additions & 64 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@comicrelief/pattern-lab",
3-
"version": "7.64.1",
3+
"version": "7.64.2",
44
"license": "GPL-3.0",
55
"description": "The centralised hub for Comic Relief's general and campaign pattern lab",
66
"scripts": {

‎sass/base/components/form/_standard-form.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ select {
7070
@include font-size($p-font-size);
7171
font-weight: 300;
7272
font-family: $body-font;
73-
background: transparent url($image-path + "drop-down-dark-purple.svg") calc(100% - 20px) 18px/20px 20px no-repeat;
73+
background: transparent url($image-path + "CR__Chevron_D.svg") calc(100% - 15px) 11px/26px 26px no-repeat;
7474
cursor: pointer;
7575
margin-bottom: 0;
7676
}

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

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,17 @@ button.btn,
55
button.cta,
66
button.cta-2 {
77
width:100%;
8-
height: 50px;
8+
height: 48px;
99
font-family: $montserrat;
10+
display: block;
11+
margin: 0 auto;
1012
@include font-size($button-cta-font-size);
11-
@include border-radius(8px);
13+
@include border-radius(25px);
1214
@include box-shadow-transition();
15+
16+
@include breakpoint($screen-md){
17+
width: auto;
18+
}
1319
}
1420

1521

@@ -19,17 +25,17 @@ button.btn {
1925
background-color: $colour--btn-light;
2026
color: $colour--black;
2127
padding: 13px 30px;
22-
@include border-radius(8px);
28+
@include border-radius(25px);
2329
@include box-shadow-transition();
2430
@include colour-transition();
2531

2632
&.secondary {
2733
background-color: transparent;
28-
border: 4px solid $colour--white;
34+
border: 2px solid $colour--white;
2935
color: $colour--white;
3036
padding: 10px 30px;
3137
@include font-size($button-cta-font-size);
32-
@include border-radius(8px);
38+
@include border-radius(25px);
3339
}
3440

3541
&:hover,
@@ -39,18 +45,22 @@ button.btn {
3945

4046
&.secondary {
4147
background-color: transparent;
42-
border: 4px solid $colour--white;
48+
border: 2px solid $colour--white;
4349
color: $colour--white;
4450
}
4551
}
4652

53+
&:focus {
54+
outline: none;
55+
box-shadow: 0 0 0px 4px $colour--system-blue;
56+
}
4757
&:active {
4858
background-color: $colour--btn-on-click;
4959
color: $colour--white;
5060

5161
&.secondary {
5262
background-color: transparent;
53-
border: 4px solid $colour--white;
63+
border: 2px solid $colour--white;
5464
color: $colour--white;
5565
}
5666
}
@@ -70,23 +80,43 @@ button.cta {
7080
background-color: $colour--cta-hover;
7181
color: $colour--white;
7282
}
83+
84+
&:focus {
85+
outline: none;
86+
box-shadow: 0 0 0px 4px $colour--system-blue;
87+
}
7388
}
7489

7590
a.cta-2,
7691
button.cta-2 {
77-
background-color: transparent;
78-
border: 4px solid $colour--white;
92+
background-color: rgba(255,255,255,0);
93+
border: 2px solid $colour--white;
7994
color: $colour--white;
8095
transition: all 0.1s ease-in-out;
8196
@include border-radius(30px);
82-
@include colour-transition-2();
97+
@include colour-transition();
8398
box-shadow: none;
8499
padding: 9px 30px;
85100

86-
&:hover,
101+
&:hover {
102+
background-color: rgba(255, 255, 255, 0.3);
103+
box-shadow: none;
104+
}
105+
87106
&:focus {
88-
background-color: transparent;
89-
border: 4px solid $colour--black;
90-
color: $colour--black;
107+
outline: none;
108+
box-shadow: 0 0 0px 4px $colour--system-blue;
109+
}
110+
111+
&.disabled,
112+
&:disabled {
113+
border: 2px solid $colour--cta2-disbled;
114+
color: $colour--cta2-disbled;
115+
opacity: 1;
116+
117+
&:hover,
118+
&:focus {
119+
background-color: transparent;
120+
}
91121
}
92122
}

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

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -116,23 +116,28 @@ textarea {
116116
// Back button
117117
.form__back {
118118
display: block;
119-
position: relative;
120-
margin-bottom: 30px;
121-
padding-left: 1em;
122-
font-weight: bold;
123-
text-align: left;
124-
cursor: pointer;
119+
text-indent: -9999px;
125120

126121
&:before {
127122
content: "";
128123
position: absolute;
129-
top: 25%;
124+
top: -6px;
130125
left: 0;
131126
width: 0.5em;
132127
height: 0.5em;
133-
border-left: 2px solid $colour--white;
134-
border-top: 2px solid $colour--white;
135-
transform: rotate(-45deg);
128+
background: transparent url($image-path + "CR__Arrow_L--white.svg") 0 0/30px 30px no-repeat;
129+
width: 30px;
130+
height: 30px;
131+
}
132+
133+
@include breakpoint($screen-md){
134+
text-indent: 0;
135+
position: relative;
136+
margin-bottom: 30px;
137+
padding-left: 45px;
138+
font-weight: bold;
139+
text-align: left;
140+
cursor: pointer;
136141
}
137142
}
138143

‎sass/themes/donate/components/full-height-single-image-single-copy/_full-height-single-image-single-copy.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,18 @@ main .paragraph--full-height-single-image-single-copy {
44
fieldset#giving_type_selector {
55
.form__giving-type {
66
.form__field--wrapper {
7-
&:first-child {
8-
@include border-radius(8px 0 0 8px);
9-
label {
7+
@include breakpoint($screen-md) {
8+
&:first-child {
109
@include border-radius(8px 0 0 8px);
10+
label {
11+
@include border-radius(8px 0 0 8px);
12+
}
1113
}
12-
}
13-
&:last-child {
14-
@include border-radius(0 8px 8px 0);
15-
label {
14+
&:last-child {
1615
@include border-radius(0 8px 8px 0);
16+
label {
17+
@include border-radius(0 8px 8px 0);
18+
}
1719
}
1820
}
1921
}
@@ -70,8 +72,10 @@ main .paragraph--full-height-single-image-single-copy {
7072
// Address
7173
#postcode_button {
7274
height: 50px;
73-
@extend button.btn.secondary;
74-
margin-top: 30px !important;
75+
@extend button.cta-2;
76+
margin: 30px 0 0 !important;
77+
display: block;
78+
font-size: 16px;
7579
}
7680

7781
// Checkbox
@@ -192,7 +196,7 @@ main .paragraph--full-height-single-image-single-copy {
192196
width: auto;
193197

194198
#postcode_button {
195-
width: 100%;
199+
width: auto;
196200
letter-spacing: 0;
197201
}
198202
}
@@ -222,11 +226,9 @@ main .paragraph--full-height-single-image-single-copy {
222226

223227
// Target 'manual address' link
224228
#field-wrapper--postcode + .form__field--wrapper {
225-
margin: 30px auto 10px;
226-
text-align: center;
229+
margin: 0 auto 10px;
227230

228231
&#field-wrapper--addressSelect {
229232
text-align: left;
230233
}
231234
}
232-

‎sass/themes/donate/components/giving-type-selector/_giving-type-selector.scss‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
&:hover {
1616
+ .label {
1717
background-color: $colour--btn-hover;
18-
color: $colour--black;
18+
color: $colour--white;
1919
}
2020
}
2121

@@ -33,9 +33,8 @@
3333
cursor: pointer;
3434

3535
+ label {
36-
@include colour-transition();
3736
background-color: $colour--btn-light;
38-
box-shadow: none;
37+
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 16px;
3938
color: $colour--black;
4039

4140
span {
@@ -49,9 +48,6 @@
4948
}
5049
}
5150

52-
&:hover,
53-
&:focus,
54-
&:active,
5551
&.selected,
5652
&:checked {
5753
& + label {
@@ -60,18 +56,18 @@
6056
}
6157

6258
&:hover,
63-
&:focus { bv
59+
&:focus {
6460
& + label {
6561
background-color: $colour--btn-hover;
62+
color: $colour--white;
6663
}
6764
};
68-
6965

70-
&:active {
71-
& + label {
72-
background-color: $colour--btn-on-click;
66+
&:active {
67+
& + label {
68+
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 16px;
69+
}
7370
}
74-
}
7571

7672
&:checked {
7773
&,
@@ -80,7 +76,7 @@
8076
&:active {
8177
& + label {
8278
background-color: $colour--btn-selected;
83-
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.4);
79+
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 16px;
8480
}
8581
}
8682
}
@@ -118,6 +114,7 @@
118114
// Chrome etc.
119115
outline: -webkit-focus-ring-color auto 5px;
120116
outline-offset: 0px;
117+
121118
}
122119
}
123120
}

‎sass/themes/donate/components/money-buy-block/_money-buy-block.scss‎

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
position: relative;
1616

1717
&.form__amount-submit {
18-
margin-top: 60px;
18+
margin-top: 45px;
1919
text-align: center;
2020

2121
#comicrelief_payinbundle_payment_amount_submit {
@@ -26,17 +26,57 @@
2626
}
2727
}
2828
}
29+
30+
// Shift button down to make room for error
31+
&.form__field-error-wrapper {
32+
& + .form__fieldset.form__amount-submit.submit-btn-wrapper {
33+
margin-top: 65px;
34+
35+
@include breakpoint($screen-md){
36+
margin-top: 70px;
37+
}
38+
39+
@include breakpoint($screen-lg){
40+
margin-top: 70px;
41+
}
42+
}
43+
}
44+
45+
// Adjust button to show larger alert message
46+
&.payin-alert {
47+
& + .form__fieldset.form__amount-submit.submit-btn-wrapper {
48+
margin-top: 85px;
49+
@include breakpoint($screen-md){
50+
margin-top: 90px;
51+
}
52+
}
53+
}
54+
55+
// Move second error msg under first
56+
&.payin-alert.form__field-error-wrapper {
57+
.form__field-error-container--amount + .form__field-error-container--payin-alert {
58+
margin-top: 40px;
59+
}
60+
// Move submit button accordingly
61+
& + .form__fieldset.form__amount-submit.submit-btn-wrapper {
62+
margin-top: 125px;
63+
@include breakpoint($screen-md){
64+
margin-top: 130px;
65+
}
66+
}
67+
}
2968
}
3069

31-
.form__field-error-container--amount {
70+
.form__field-error-container--amount,
71+
.form__field-error-container--payin-alert {
3272
position: absolute;
33-
top: 50px;
73+
top: 60px;
3474
width: 100%;
3575
left: 0;
3676
}
3777

3878
.form__togglebtn-amount {
39-
button.select-amount-btn {
79+
.select-amount-btn {
4080
position: relative;
4181
margin: 0 0 20px 0;
4282
padding: 10px 0;
@@ -64,6 +104,7 @@
64104
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
65105
color: $colour--white;
66106
border: none;
107+
// outline: none; // should we be doing this?
67108

68109
.select-amount,
69110
.select-amount--context {
@@ -222,3 +263,10 @@
222263
}
223264
}
224265
}
266+
267+
// Payin-specific
268+
section.payin #field-error--amount {
269+
.form-error {
270+
margin-top: 80px;
271+
}
272+
}

0 commit comments

Comments
 (0)