From 7f50e7f3c91749a99e379ca261b99308d32384e2 Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Wed, 22 Sep 2021 16:17:37 -0400 Subject: [PATCH 1/9] Add "hidden" class for form elements --- src/styles/components/_form.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index a91514e..1639f1f 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -17,6 +17,10 @@ form { box-shadow: none; + .hidden { + display: none; + } + .input-block { position: relative; color: $dark-gray; From 397ba8bb4ffc2fd977e6c172575f92e3a1feeb07 Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Wed, 22 Sep 2021 16:33:49 -0400 Subject: [PATCH 2/9] Really hide element --- src/styles/components/_form.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index 1639f1f..0fd69d5 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -18,7 +18,7 @@ form { box-shadow: none; .hidden { - display: none; + display: none !important; } .input-block { From 15d4aa5e7be0857ae6c5f30e06f6ceaee1dd5c91 Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Wed, 10 Nov 2021 16:43:46 -0500 Subject: [PATCH 3/9] Style updates for new donation thank-you page --- src/styles/mo-components/_social.scss | 75 +++++++++++++++++++++++++++ src/styles/pages/_donate_thanks.scss | 17 +++--- 2 files changed, 82 insertions(+), 10 deletions(-) diff --git a/src/styles/mo-components/_social.scss b/src/styles/mo-components/_social.scss index 11fe22c..34f31fc 100644 --- a/src/styles/mo-components/_social.scss +++ b/src/styles/mo-components/_social.scss @@ -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 { @@ -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 + )); + } +} diff --git a/src/styles/pages/_donate_thanks.scss b/src/styles/pages/_donate_thanks.scss index 7afb548..aeec220 100644 --- a/src/styles/pages/_donate_thanks.scss +++ b/src/styles/pages/_donate_thanks.scss @@ -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"] { @@ -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; } @@ -29,6 +29,7 @@ body.donation-pagetype.thanks-page { background-color: transparent; border-collapse: collapse; border-spacing: 0; + font-size: 24px; td { padding: 8px; @@ -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; @@ -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; } @@ -525,4 +522,4 @@ body.donation-pagetype.thanks-page { text-align: left; padding: 0; } -} \ No newline at end of file +} From 9f715229b84c4287b659a62bdb422de41cfe7006 Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Mon, 15 Nov 2021 11:52:32 -0500 Subject: [PATCH 4/9] Remove unused 'hidden' style --- src/styles/components/_form.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index 0fd69d5..a91514e 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -17,10 +17,6 @@ form { box-shadow: none; - .hidden { - display: none !important; - } - .input-block { position: relative; color: $dark-gray; From 9b619de2066753ba44a7f8afce3aae3537eed1ea Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Tue, 16 Nov 2021 16:08:49 -0500 Subject: [PATCH 5/9] Fix padding on "Copy URL" button --- src/styles/mo-components/_social.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/mo-components/_social.scss b/src/styles/mo-components/_social.scss index 34f31fc..29ec13a 100644 --- a/src/styles/mo-components/_social.scss +++ b/src/styles/mo-components/_social.scss @@ -89,7 +89,7 @@ background-color: #D2D2D2; color: #000000; cursor: pointer; - padding: 10px; + padding: 13px 19px; } } From 6e4b0a0f0962df7abfb853cd7b2facf8501a4228 Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Tue, 16 Nov 2021 16:09:35 -0500 Subject: [PATCH 6/9] Add custom CTA button background color --- src/styles/mo-components/_social.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styles/mo-components/_social.scss b/src/styles/mo-components/_social.scss index 29ec13a..44f984b 100644 --- a/src/styles/mo-components/_social.scss +++ b/src/styles/mo-components/_social.scss @@ -40,6 +40,9 @@ text-transform: uppercase; width: 100%; } + &.cta { + background-color:$cerulean; + } &:active, &:visited { From ebe7f709cb3932d47aef1ae1ec124ee142983a01 Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Thu, 9 Dec 2021 18:20:54 -0500 Subject: [PATCH 7/9] More formatting tweaks --- src/styles/pages/_donate.scss | 7 ++++++- src/styles/pages/_donate_thanks.scss | 30 +++++++++++++--------------- 2 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/styles/pages/_donate.scss b/src/styles/pages/_donate.scss index 5a08292..3fc9acd 100644 --- a/src/styles/pages/_donate.scss +++ b/src/styles/pages/_donate.scss @@ -639,6 +639,11 @@ body.donate-page.donate { font-weight: 400; margin-bottom: 12.5px; } + + p { + font-size: 16px; + } + } .legal .small { @@ -1281,4 +1286,4 @@ body.donate-page.donate { width: 150%; margin-left: -25%; } -} \ No newline at end of file +} diff --git a/src/styles/pages/_donate_thanks.scss b/src/styles/pages/_donate_thanks.scss index 9fda6fa..b5d6094 100644 --- a/src/styles/pages/_donate_thanks.scss +++ b/src/styles/pages/_donate_thanks.scss @@ -3,7 +3,7 @@ body.donation-pagetype.thanks-page { padding-top: 0; p { - font-size: 24px; + font-size: 20px; } div[role="main"] { @@ -25,14 +25,14 @@ body.donation-pagetype.thanks-page { table { width: 100%; max-width: 100%; - margin-bottom: 25px; + margin-bottom: 50px; background-color: transparent; border-collapse: collapse; border-spacing: 0; - font-size: 24px; + font-size: 20px; td { - padding: 8px; + padding: 18px 8px 18px 0; line-height: 1.4; vertical-align: top; border-top: 1px solid #ddd; @@ -496,27 +496,25 @@ body.donation-pagetype.thanks-page { } .donation-legal { - margin: 50px auto auto; + margin: 110px auto auto; } .legal { - font-size: 20px; - padding: 40px; + padding: 40px 40px 40px 0px; @media screen and (min-width: $bp-md) { - padding: 40px 100px; - } - - a { - color: $azure; - text-decoration: underline; + padding: 40px 100px 40px 0px; } h4 { + @include font(roboto); color: #000000; - font-size: 25px; - font-weight: 400; - margin-bottom: 12.5px; + font-size:16px; + font-weight: 700; + margin-bottom: 0; + } + p { + font-size: 16px; } } From b6edbd981aa8d3693fc43f281b6dd8bf45c38def Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Tue, 4 Jan 2022 12:00:34 -0500 Subject: [PATCH 8/9] Increase legal footer to 20px --- src/styles/pages/_donate_thanks.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/pages/_donate_thanks.scss b/src/styles/pages/_donate_thanks.scss index b5d6094..5374e28 100644 --- a/src/styles/pages/_donate_thanks.scss +++ b/src/styles/pages/_donate_thanks.scss @@ -509,12 +509,12 @@ body.donation-pagetype.thanks-page { h4 { @include font(roboto); color: #000000; - font-size:16px; + font-size:20px; font-weight: 700; margin-bottom: 0; } p { - font-size: 16px; + font-size: 20px; } } From 8db8180c032927066415364fc25ae5b7855f2f3a Mon Sep 17 00:00:00 2001 From: sjwmoveon Date: Tue, 17 May 2022 13:43:42 -0400 Subject: [PATCH 9/9] Make icon and text color change simultaneous on hover --- src/styles/mo-components/_social.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/styles/mo-components/_social.scss b/src/styles/mo-components/_social.scss index 44f984b..dd69cbc 100644 --- a/src/styles/mo-components/_social.scss +++ b/src/styles/mo-components/_social.scss @@ -93,6 +93,7 @@ color: #000000; cursor: pointer; padding: 13px 19px; + transition-duration: 0s; } } @@ -123,6 +124,7 @@ .share-item-url:hover { background-color: #717171; color: #FFF; + transition-duration: 0s; } .share-block{ .share-btn-icon { display: flex; transition: all .3s; }