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

Commit

Permalink
Merge pull request #948 from comicrelief/947_payin_donate_theme_updates
Browse files Browse the repository at this point in the history 
Payin donate theme updates
  • Loading branch information
@AndyEPhipps
AndyEPhipps authored Jul 13, 2020
2 parents 81ed6a9 + 8047df3 commit ca87da8
Show file tree
Hide file tree
Showing 15 changed files with 400 additions and 64 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@comicrelief/pattern-lab",
"version": "7.64.1",
"version": "7.64.2",
"license": "GPL-3.0",
"description": "The centralised hub for Comic Relief's general and campaign pattern lab",
"scripts": {
Expand Down
2 changes: 1 addition & 1 deletion sass/base/components/form/_standard-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ select {
@include font-size($p-font-size);
font-weight: 300;
font-family: $body-font;
background: transparent url($image-path + "drop-down-dark-purple.svg") calc(100% - 20px) 18px/20px 20px no-repeat;
background: transparent url($image-path + "CR__Chevron_D.svg") calc(100% - 15px) 11px/26px 26px no-repeat;
cursor: pointer;
margin-bottom: 0;
}
Expand Down
58 changes: 44 additions & 14 deletions sass/themes/donate/components/buttons/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,17 @@ button.btn,
button.cta,
button.cta-2 {
width:100%;
height: 50px;
height: 48px;
font-family: $montserrat;
display: block;
margin: 0 auto;
@include font-size($button-cta-font-size);
@include border-radius(8px);
@include border-radius(25px);
@include box-shadow-transition();

@include breakpoint($screen-md){
width: auto;
}
}


Expand All @@ -19,17 +25,17 @@ button.btn {
background-color: $colour--btn-light;
color: $colour--black;
padding: 13px 30px;
@include border-radius(8px);
@include border-radius(25px);
@include box-shadow-transition();
@include colour-transition();

&.secondary {
background-color: transparent;
border: 4px solid $colour--white;
border: 2px solid $colour--white;
color: $colour--white;
padding: 10px 30px;
@include font-size($button-cta-font-size);
@include border-radius(8px);
@include border-radius(25px);
}

&:hover,
Expand All @@ -39,18 +45,22 @@ button.btn {

&.secondary {
background-color: transparent;
border: 4px solid $colour--white;
border: 2px solid $colour--white;
color: $colour--white;
}
}

&:focus {
outline: none;
box-shadow: 0 0 0px 4px $colour--system-blue;
}
&:active {
background-color: $colour--btn-on-click;
color: $colour--white;

&.secondary {
background-color: transparent;
border: 4px solid $colour--white;
border: 2px solid $colour--white;
color: $colour--white;
}
}
Expand All @@ -70,23 +80,43 @@ button.cta {
background-color: $colour--cta-hover;
color: $colour--white;
}

&:focus {
outline: none;
box-shadow: 0 0 0px 4px $colour--system-blue;
}
}

a.cta-2,
button.cta-2 {
background-color: transparent;
border: 4px solid $colour--white;
background-color: rgba(255,255,255,0);
border: 2px solid $colour--white;
color: $colour--white;
transition: all 0.1s ease-in-out;
@include border-radius(30px);
@include colour-transition-2();
@include colour-transition();
box-shadow: none;
padding: 9px 30px;

&:hover,
&:hover {
background-color: rgba(255, 255, 255, 0.3);
box-shadow: none;
}

&:focus {
background-color: transparent;
border: 4px solid $colour--black;
color: $colour--black;
outline: none;
box-shadow: 0 0 0px 4px $colour--system-blue;
}

&.disabled,
&:disabled {
border: 2px solid $colour--cta2-disbled;
color: $colour--cta2-disbled;
opacity: 1;

&:hover,
&:focus {
background-color: transparent;
}
}
}
25 changes: 15 additions & 10 deletions sass/themes/donate/components/form/_form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,23 +116,28 @@ textarea {
// Back button
.form__back {
display: block;
position: relative;
margin-bottom: 30px;
padding-left: 1em;
font-weight: bold;
text-align: left;
cursor: pointer;
text-indent: -9999px;

&:before {
content: "";
position: absolute;
top: 25%;
top: -6px;
left: 0;
width: 0.5em;
height: 0.5em;
border-left: 2px solid $colour--white;
border-top: 2px solid $colour--white;
transform: rotate(-45deg);
background: transparent url($image-path + "CR__Arrow_L--white.svg") 0 0/30px 30px no-repeat;
width: 30px;
height: 30px;
}

@include breakpoint($screen-md){
text-indent: 0;
position: relative;
margin-bottom: 30px;
padding-left: 45px;
font-weight: bold;
text-align: left;
cursor: pointer;
}
}

Expand Down
28 changes: 15 additions & 13 deletions ...omponents/full-height-single-image-single-copy/_full-height-single-image-single-copy.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,18 @@ main .paragraph--full-height-single-image-single-copy {
fieldset#giving_type_selector {
.form__giving-type {
.form__field--wrapper {
&:first-child {
@include border-radius(8px 0 0 8px);
label {
@include breakpoint($screen-md) {
&:first-child {
@include border-radius(8px 0 0 8px);
label {
@include border-radius(8px 0 0 8px);
}
}
}
&:last-child {
@include border-radius(0 8px 8px 0);
label {
&:last-child {
@include border-radius(0 8px 8px 0);
label {
@include border-radius(0 8px 8px 0);
}
}
}
}
Expand Down Expand Up @@ -70,8 +72,10 @@ main .paragraph--full-height-single-image-single-copy {
// Address
#postcode_button {
height: 50px;
@extend button.btn.secondary;
margin-top: 30px !important;
@extend button.cta-2;
margin: 30px 0 0 !important;
display: block;
font-size: 16px;
}

// Checkbox
Expand Down Expand Up @@ -192,7 +196,7 @@ main .paragraph--full-height-single-image-single-copy {
width: auto;

#postcode_button {
width: 100%;
width: auto;
letter-spacing: 0;
}
}
Expand Down Expand Up @@ -222,11 +226,9 @@ main .paragraph--full-height-single-image-single-copy {

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

&#field-wrapper--addressSelect {
text-align: left;
}
}

23 changes: 10 additions & 13 deletions sass/themes/donate/components/giving-type-selector/_giving-type-selector.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
&:hover {
+ .label {
background-color: $colour--btn-hover;
color: $colour--black;
color: $colour--white;
}
}

Expand All @@ -33,9 +33,8 @@
cursor: pointer;

+ label {
@include colour-transition();
background-color: $colour--btn-light;
box-shadow: none;
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 16px;
color: $colour--black;

span {
Expand All @@ -49,9 +48,6 @@
}
}

&:hover,
&:focus,
&:active,
&.selected,
&:checked {
& + label {
Expand All @@ -60,18 +56,18 @@
}

&:hover,
&:focus { bv
&:focus {
& + label {
background-color: $colour--btn-hover;
color: $colour--white;
}
};


&:active {
& + label {
background-color: $colour--btn-on-click;
&:active {
& + label {
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 16px;
}
}
}

&:checked {
&,
Expand All @@ -80,7 +76,7 @@
&:active {
& + label {
background-color: $colour--btn-selected;
box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.4);
box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 16px;
}
}
}
Expand Down Expand Up @@ -118,6 +114,7 @@
// Chrome etc.
outline: -webkit-focus-ring-color auto 5px;
outline-offset: 0px;

}
}
}
56 changes: 52 additions & 4 deletions sass/themes/donate/components/money-buy-block/_money-buy-block.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
position: relative;

&.form__amount-submit {
margin-top: 60px;
margin-top: 45px;
text-align: center;

#comicrelief_payinbundle_payment_amount_submit {
Expand All @@ -26,17 +26,57 @@
}
}
}

// Shift button down to make room for error
&.form__field-error-wrapper {
& + .form__fieldset.form__amount-submit.submit-btn-wrapper {
margin-top: 65px;

@include breakpoint($screen-md){
margin-top: 70px;
}

@include breakpoint($screen-lg){
margin-top: 70px;
}
}
}

// Adjust button to show larger alert message
&.payin-alert {
& + .form__fieldset.form__amount-submit.submit-btn-wrapper {
margin-top: 85px;
@include breakpoint($screen-md){
margin-top: 90px;
}
}
}

// Move second error msg under first
&.payin-alert.form__field-error-wrapper {
.form__field-error-container--amount + .form__field-error-container--payin-alert {
margin-top: 40px;
}
// Move submit button accordingly
& + .form__fieldset.form__amount-submit.submit-btn-wrapper {
margin-top: 125px;
@include breakpoint($screen-md){
margin-top: 130px;
}
}
}
}

.form__field-error-container--amount {
.form__field-error-container--amount,
.form__field-error-container--payin-alert {
position: absolute;
top: 50px;
top: 60px;
width: 100%;
left: 0;
}

.form__togglebtn-amount {
button.select-amount-btn {
.select-amount-btn {
position: relative;
margin: 0 0 20px 0;
padding: 10px 0;
Expand Down Expand Up @@ -64,6 +104,7 @@
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
color: $colour--white;
border: none;
// outline: none; // should we be doing this?

.select-amount,
.select-amount--context {
Expand Down Expand Up @@ -222,3 +263,10 @@
}
}
}

// Payin-specific
section.payin #field-error--amount {
.form-error {
margin-top: 80px;
}
}
Loading

0 comments on commit ca87da8

Please sign in to comment.