|
|
|
|
|
|
|
|
|
|
|
{"togglable_footerCTA":null,"togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":"on"}
{"togglable_footerCTA":null,"togglable_memberCTA":null,"togglable_testCTA":null,"togglable_newslettercta":"on"}
|
|
/* Donation Frequency Radios */
.donation-radio ul li label {
padding-left: 10px;
}
input[type=radio] {
margin-top: 5px;
}
.donation-radio {
background: #fafafa;
padding: 20px;
}
.donation-radio ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.donation-radio ul li {
display: inline;
}
/* Donaination amount flex container */
.donation-amt-container
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -10px;
}
/* Donation amount boxes */
.donation-amt
{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
margin: 10px;
background-color: #dc1836;
background-image: url(/media/website_pages/donate/box.png);
text-align: center;
color: white;
min-height: 180px;
background-size: 75%;
background-position: right bottom;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
transition: .2s all linear;
}
.donation-amt p {
padding: 0 30px;
flex-shrink: 1;
width: auto;
}
.donation-amt h3 {
font-size: 2.8rem;
font-weight: 600;
flex-shrink: 1;
width: auto;
}
/* Donation amount - selected */
.donation-amt-selected {
background-color: #ed9635;
}
.donation-amt-selected::after {
content: "SELECTED";
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
background: #dc1836;
padding: 5px 10px;
border-radius: 0;
font-weight: bolder;
}
select {
display: inline;
}
.donation-gift .formRow.formRow2Col, .donation-gift .formRow {
background: transparent;
}
.donation-other-content ul li {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-other-content input[type=text]{
}
.donation-other-content button {
margin-bottom: 0px !important;
}
.donation-gift button[type=submit], .donation-other-content button {
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
.donation-gift strong {
color: #111;
}
.donation-gift small {
color: #696969;
}
.donation-other-content ul {
list-style: none;
padding: 0px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-gift input[type=checkbox] {
margin-top: 7px;
}
fieldset {
border: 2px solid #333333;
}
/* Mobile optimise */
@media(max-width: 991px) {
.donation-other-content ul li {
display: table;
padding: 10px 0;
margin: 0 auto;
}
}
@media(max-width: 768px) {
.donation-radio ul li label {
padding-left: 0;
}
.donation-gift {
padding: 20px;
}
.donation-other {
padding: 20px;
}
}
@media (max-width: 500px) {
.donation-radio ul li {
display: block;
text-align: center;
padding: 0;
}
.donation-amt {
max-height: 150px;
min-height: 150px;
}
#donation_frequency_monthly_tooltip {
margin-left: 0px;
}
#donation_frequency_monthly_tooltip.donation_frequency_monthly_tooltip_show {
max-width: 100%;
display: show !important;
transform: scale(1);
white-space: unset;
}
#donation_frequency_monthly_tooltip:before {
top: 0;
left: 0;
}
}
.donation-other {
background: #efefef;
padding: 20px 60px;
}
/* Donation Frequency Radios */
.donation-radio ul li label {
padding-left: 10px;
}
input[type=radio] {
margin-top: 5px;
}
.donation-radio {
background: #fafafa;
padding: 20px;
}
.donation-radio ul {
list-style: none;
text-align: center;
padding: 0;
margin: 0;
}
.donation-radio ul li {
display: inline;
}
/* Donaination amount flex container */
.donation-amt-container
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: -10px;
}
/* Donation amount boxes */
.donation-amt
{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
width: 350px;
margin: 10px;
background-color: #dc1836;
background-image: url(/media/website_pages/donate/box.png);
text-align: center;
color: white;
min-height: 180px;
background-size: 75%;
background-position: right bottom;
background-repeat: no-repeat;
position: relative;
cursor: pointer;
transition: .2s all linear;
}
.donation-amt p {
padding: 0 30px;
flex-shrink: 1;
width: auto;
}
.donation-amt h3 {
font-size: 2.8rem;
font-weight: 600;
flex-shrink: 1;
width: auto;
}
/* Donation amount - selected */
.donation-amt-selected {
background-color: #ed9635;
}
.donation-amt-selected::after {
content: "SELECTED";
position: absolute;
top: 10px;
right: 10px;
font-size: 11px;
background: #dc1836;
padding: 5px 10px;
border-radius: 0;
font-weight: bolder;
}
select {
display: inline;
}
.donation-gift .formRow.formRow2Col, .donation-gift .formRow {
background: transparent;
}
.donation-other-content ul li {
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-other-content input[type=text]{
}
.donation-other-content button {
margin-bottom: 0px !important;
}
.donation-gift button[type=submit], .donation-other-content button {
outline: none;
border: transparent;
color: #fff;
padding: 10px 25px 8px 25px;
border-radius: 50px;
margin: 2px;
cursor: pointer;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
margin-bottom: 50px;
}
.donation-gift strong {
color: #111;
}
.donation-gift small {
color: #696969;
}
.donation-other-content ul {
list-style: none;
padding: 0px;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 1rem;
}
.donation-gift input[type=checkbox] {
margin-top: 7px;
}
fieldset {
border: 2px solid #333333;
}
/* Mobile optimise */
@media(max-width: 991px) {
.donation-other-content ul li {
display: table;
padding: 10px 0;
margin: 0 auto;
}
}
@media(max-width: 768px) {
.donation-radio ul li label {
padding-left: 0;
}
.donation-gift {
padding: 20px;
}
.donation-other {
padding: 20px;
}
}
@media (max-width: 500px) {
.donation-radio ul li {
display: block;
text-align: center;
padding: 0;
}
.donation-amt {
max-height: 150px;
min-height: 150px;
}
#donation_frequency_monthly_tooltip {
margin-left: 0px;
}
#donation_frequency_monthly_tooltip.donation_frequency_monthly_tooltip_show {
max-width: 100%;
display: show !important;
transform: scale(1);
white-space: unset;
}
#donation_frequency_monthly_tooltip:before {
top: 0;
left: 0;
}
}
.donation-other {
background: #efefef;
padding: 20px 60px;
}
|
|
// Helper function to clear selection
function donationClearSelection()
{
var arrSelected = document.getElementsByClassName('donation-amt-selected');
for (var i = arrSelected.length-1; i >= 0; i--)
{
arrSelected[i].classList.remove('donation-amt-selected');
}
}
// Amount buttons on click
function donationAmountClick(nElement)
{
donationClearSelection();
var nAmount = document.getElementById('donation_amount');
nAmount.value = nElement.getAttribute('data-value');
nElement.classList.add('donation-amt-selected');
// Trigger onchange
var event;
if (typeof window.Event == 'function') { event = new Event('change'); }
else { event = document.createEvent('Event'); event.initEvent('change', true, true, true);}
nAmount.dispatchEvent(event);
}
// Helper function to clear selection
function donationClearSelection()
{
var arrSelected = document.getElementsByClassName('donation-amt-selected');
for (var i = arrSelected.length-1; i >= 0; i--)
{
arrSelected[i].classList.remove('donation-amt-selected');
}
}
// Amount buttons on click
function donationAmountClick(nElement)
{
donationClearSelection();
var nAmount = document.getElementById('donation_amount');
nAmount.value = nElement.getAttribute('data-value');
nElement.classList.add('donation-amt-selected');
// Trigger onchange
var event;
if (typeof window.Event == 'function') { event = new Event('change'); }
else { event = document.createEvent('Event'); event.initEvent('change', true, true, true);}
nAmount.dispatchEvent(event);
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|