Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Style updates for new donation thank-you page #298

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Style updates for new donation thank-you page #298

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7f50e7f
Add "hidden" class for form elements
sjwmoveon Sep 22, 2021
397ba8b
Really hide element
sjwmoveon Sep 22, 2021
15d4aa5
Style updates for new donation thank-you page
sjwmoveon Nov 10, 2021
9f71522
Remove unused 'hidden' style
sjwmoveon Nov 15, 2021
9b619de
Fix padding on "Copy URL" button
sjwmoveon Nov 16, 2021
6e4b0a0
Add custom CTA button background color
sjwmoveon Nov 16, 2021
5e2926b
Merge branch 'main' of github.com:MoveOnOrg/giraffe
sjwmoveon Nov 17, 2021
ebe7f70
More formatting tweaks
sjwmoveon Dec 9, 2021
b6edbd9
Increase legal footer to 20px
sjwmoveon Jan 4, 2022
8db8180
Make icon and text color change simultaneous on hover
sjwmoveon May 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/styles/components/_form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@ form {

box-shadow: none;

.hidden {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there an existing class called d-none on the donation thank you pages with the same CSS property?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see that, but I do see .hide, with the same property (in /pages/_donate_thanks.css:42. It might be better to move this definition higher in the css and unify it.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Whoops! I think what happened was I forgot to clean out the branch from the unsubscribe changes, and so those commits got put into the new pull request. I removed the ".hidden" style since it's not necessary.

display: none !important;
}

.input-block {
position: relative;
color: $dark-gray;
Expand Down
75 changes: 75 additions & 0 deletions src/styles/mo-components/_social.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@
@include btn--azure;
padding: 10px 20px;
color: $white;
&.social_2021 {
padding: 13px 19px;
font-family: "Roboto Condensed", sans-serif;
text-transform: uppercase;
width: 100%;
}

&:active,
&:visited {
Expand Down Expand Up @@ -69,3 +75,72 @@
}
}
}


.thankyou p,
.share-block {
p {
font-size:18px;
}
&.bg-teal {
background-color: #CAF4FF;
}
.share-item-url {
background-color: #D2D2D2;
color: #000000;
cursor: pointer;
padding: 10px;
}

}

.share-item-facebook { background-color: #0C188A; }
.share-item-facebook:hover { background-color: #1877F2; }
.share-item-facebook-messenger {
border: 1px #3B5998 solid;
background-color: #FFF;
color: #3B5998;
&:hover { background-color: #0C188A; }
}
.share-item-twitter { background-color: #5AA5EB;
&:hover { background-color: #51BDFF; }
}
.share-item-email { background-color: #DC6868;
&:hover { background-color: #FF3E27; }
}
.share-item-sms { background-color: #3EA755;
&:hover {background-color: #1F7231; }
}
.share-block {
&.share-btn-icon {
display: flex;
transition: all .3s;
}
}
.share-item-url:hover {
background-color: #717171;
color: #FFF;
}
.share-block{
.share-btn-icon { display: flex; transition: all .3s; }
.share-btn-icon-hover { display: none; transition: all .3s; }
.share-item-facebook-messenger:hover {
.share-btn-icon { display: none; }
.share-btn-icon-hover { display: flex; }
}
.share-item-url:hover {
.share-btn-icon { display: none; }
.share-btn-icon-hover { display: flex; }
}
.input-block-wrapper {
align-self: center;
.input-block {
width: 100%;
padding: 10px;
font-size: 16px;
}
@include respond((
text-align: center left left
));
}
}
17 changes: 7 additions & 10 deletions src/styles/pages/_donate_thanks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
body.donation-pagetype.thanks-page {
color: #555555;
color: #000000;
padding-top: 0;

p {
font-size: 18px;
font-size: 24px;
}

div[role="main"] {
Expand All @@ -17,7 +17,7 @@ body.donation-pagetype.thanks-page {

h2 {
font-weight: 200;
font-size: 64px;
font-size: 40px;
margin-left: -3px;
text-transform: none;
}
Expand All @@ -29,6 +29,7 @@ body.donation-pagetype.thanks-page {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
font-size: 24px;

td {
padding: 8px;
Expand Down Expand Up @@ -494,14 +495,10 @@ body.donation-pagetype.thanks-page {
.donation-legal {
margin: 50px auto auto;

> div {
background-color: #f3f3f3;
}
}

.legal {
color: #555555;
font-size: 16px;
font-size: 20px;
padding: 40px;
@media screen and (min-width: $bp-md) {
padding: 40px 100px;
Expand All @@ -514,7 +511,7 @@ body.donation-pagetype.thanks-page {

h4 {
color: #000000;
font-size: 24px;
font-size: 25px;
font-weight: 400;
margin-bottom: 12.5px;
}
Expand All @@ -525,4 +522,4 @@ body.donation-pagetype.thanks-page {
text-align: left;
padding: 0;
}
}
}