/* UNDERLINE PSEUDO-ELEMENTS
* We often like to add an underline to a header element to give it a little
* more attention. These classes are perfect for that since they use the after
* pseudo element to create a bottom underline which doesn't take up the whole
* width of the element.
*/
.underline-blue::after,
.underline-green::after,
.underline-red::after {
border-bottom-style: solid;
border-width: 2px;
content: "";
display: block;
margin: 5px auto 25px auto;
max-width: 30%;
padding: 3px 0;
}
.underline-blue::after {
border-color: #4D9DB3;
}
.underline-green::after {
border-color: #4DA394;
}
.underline-red::after {
border-color: #F53D57;
}
/* BORDER COLORS
* By adding these classes to
elements we can create a colored horizontal
* rule to help break up the page, but with more visual interest or more
* noticeably than a simple grey horizontal rule.
*/
.border-blue {
border-color: #4D9DB3;
}
.border-green {
border-color: #4DA394;
}
.border-red {
border-color: #F53D57;
}
hr.red-divider {
border-top: 3px solid #ff0000;
}
/* INPUT OVERLAYS
* Input overlays allow certain elements to appear to be overlaid on top of
* form controls without needing to do a bunch of fancy position magic. It
* works by making a wrapping div behave as the form control while displaying
* the contained elements in a flexbox.
*
* Most of the time this will be used to display a currency label. The
* currency label will be aligned according to the language defined on the
* tag.
*
* Alternatively the field can display some text, such as a "×"
* character. Text formatted like this will always be displayed on the left
* side of the input.
*/
.input-overlay {
align-items: center;
background-color: #FAFAFA;
border: 1px solid #D2D2D2;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
color: #555555;
display: flex;
-webkit-transition: border-color ease-in-out 0.15s,
-webkit-box-shadow ease-in-out 0.15s;
-o-transition: border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
transition: border-color ease-in-out 0.15s,
box-shadow ease-in-out 0.15s;
}
.input-overlay:focus-within {
border-color: #66AFE9;
}
.input-overlay.disabled {
background-color: #EEEEEE;
cursor: not-allowed;
}
.input-overlay > .input-overlay-currency {
order: 2;
padding-left: 12px;
}
.input-overlay > .input-overlay-text {
order: 1;
padding-left: 12px;
}
.input-overlay > .input-overlay-text,
.input-overlay > span.input-overlay-currency {
font-size: inherit;
font-weight: 900;
}
.input-overlay > .form-control {
background-color: transparent;
border: none;
border-radius: 0;
height: 34.4px;
-webkit-box-shadow: none;
box-shadow: none;
order: 3;
}
.input-group > .input-overlay {
border-radius: 0;
}
.input-group > .input-overlay:first-child {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.input-group > .input-overlay:last-child {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
.input-group.input-group-sm > .input-overlay > .input-overlay-currency,
.input-overlay.input-overlay-sm > .input-overlay-currency,
.input-group.input-group-sm .input-overlay > .input-overlay-text,
.input-overlay.input-overlay-sm > .input-overlay-text {
padding-left: 10px;
}
.input-group.input-group-sm > .input-overlay > .form-control,
.input-overlay.input-overlay-sm > .form-control {
height: 28.4px;
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
}
.input-group > .input-overlay {
border-radius: 0;
}
.input-group > .input-overlay:first-child {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.input-group > .input-overlay:last-child {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
/* Certain languages display the currency label on the right side of the value
* instead of the left. By switching the flex order and a little bit of
* padding we can properly render the donation field for all languages.
*
* Any languages added or removed here should also be updated in the Django
* settings: `settings.CURRENCY_RIGHT_ALIGN`.
*/
html[lang="de"] .input-overlay > .input-overlay-currency,
html[lang="fi"] .input-overlay > .input-overlay-currency,
html[lang="fr"] .input-overlay > .input-overlay-currency,
html[lang="sv"] .input-overlay > .input-overlay-currency {
order: 3;
padding-left: 0;
padding-right: 12px;
}
html[lang="de"] .input-overlay > .form-control,
html[lang="fi"] .input-overlay > .form-control,
html[lang="fr"] .input-overlay > .form-control,
html[lang="sv"] .input-overlay > .form-control {
order: 2;
}
html[lang="de"] .input-overlay.input-overlay-sm > .input-overlay-currency,
html[lang="fi"] .input-overlay.input-overlay-sm > .input-overlay-currency,
html[lang="fr"] .input-overlay.input-overlay-sm > .input-overlay-currency,
html[lang="sv"] .input-overlay.input-overlay-sm > .input-overlay-currency {
padding-right: 10px;
}
/* Patch the button in the same input group as an input overlay so that the
* background color transitions instead of jumping to its hover state. The
* input overlay transitions its border nicely and having the two match seems
* good.
*/
.input-overlay + .input-group-btn > .btn {
-webkit-transition: background ease-in-out 0.15s;
-o-transition: background ease-in-out 0.15s;
transition: background ease-in-out 0.15s;
}
/* Patch buttons in input groups to a height which matches the form control.
* Whether from GFA's modifications to Bootstrap or natively in Bootstrap they
* don't line up nicely.
*/
.input-group-btn > .btn {
line-height: 24px;
}
/* DONATION FIELDS
* The donation field is a pretty simple wrapper around an input group native
* to Bootstrap. Just convert it to a flexbox so we can control the sizing
* more precisely and set a maximum width on the whole form.
*/
.donation-field {
max-width: 450px;
width: 100%;
}
.donation-field > .input-group {
display: flex;
flex-wrap: wrap;
}
.donation-field > .input-group > .input-overlay {
flex: 2;
}
.donation-field > .input-group > .input-overlay:focus-within,
.donation-field > .input-group > .form-control:focus {
z-index: 3;
}
.donation-field > .input-group > .input-overlay + .form-control {
flex: 1;
left: -1px;
}
.donation-field > .input-group > .input-overlay > .form-control {
font-size: 1em;
font-weight: 500;
}
.donation-field > .input-group > .input-group-btn {
flex-shrink: 0;
width: auto;
}
.donation-field > .input-group > .input-group-btn:nth-child(3) {
margin-top: 10px;
width: 100%;
}
.donation-field > .input-group > .input-group-btn > .btn {
width: 100%;
white-space: nowrap;
}
@media (max-width: 767px) {
/* When a recurrence dropdown is included in the donation field the button
* drops to a second line and needs to regain the rounded left corners.
*/
.donation-field > .input-group > select.form-control + .input-group-btn > .btn {
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
.donation-field > .input-group > .input-overlay + .form-control {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
}
}
@media (min-width: 768px) {
.donation-field > .input-group > .input-group-btn:nth-child(3) {
margin-top: 0;
width: auto;
}
}
/* DONATION BOXES AND RIBBONS
* Donation boxes create a form where a series of three buttons allow donors
* to give a pre-suggested donation amount with a single click, while also
* allowing them to enter a donation amount of their own choosing.
* Donation ribbons are pretty similar in function, but are laid out a little
* differently, usually outside of a container element.
*/
.donation-box {
border-bottom: 1px solid #D2D2D2;
border-top: 1px solid #D2D2D2;
padding: 15px 0;
}
.donation-box > h3:first-child {
margin-top: 0;
}
.donation-ribbon {
margin-bottom: 0;
padding: 1.5rem 0;
}
.donation-ribbon > .container > .donation-title {
color: #FFF;
font-weight: 600;
margin: 0 0 1.5rem 0;
text-align: center;
width: 100%;
}
.donation-ribbon > .container > .donation-options {
width: 100%;
}
.donation-ribbon .btn,
.donation-ribbon .input-overlay {
background-color: rgba(0, 0, 0, 0.3);
border-color: transparent;
color: white;
transition: background-color 0.15s ease-in-out;
}
.donation-ribbon .btn:focus,
.donation-ribbon .btn:hover,
.donation-ribbon .input-overlay:focus-within,
.donation-ribbon .input-overlay:hover {
background-color: rgba(0, 0, 0, 0.18);
}
.donation-ribbon .input-overlay .input-overlay-currency,
.donation-ribbon .input-overlay .form-control {
color: rgba(255, 255, 255, 0.8);
}
.donation-ribbon .donation-input-group {
display: flex;
}
.donation-ribbon .donation-input-group .input-overlay {
flex-grow: 1;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-color: rgba(255, 255, 255, 0.5);
}
.donation-ribbon .donation-input-group .btn {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.donation-box .donation-btn-group,
.donation-ribbon .donation-btn-group {
display: flex;
}
.donation-box .donation-btn-group > .btn,
.donation-ribbon .donation-btn-group > .btn {
margin: 0 3px;
flex-grow: 1;
-webkit-transition: background ease-in-out 0.15s;
-o-transition: background ease-in-out 0.15s;
transition: background ease-in-out 0.15s;
}
.donation-box .donation-btn-group > .btn:first-child,
.donation-ribbon .donation-btn-group > .btn:first-child {
margin-left: 0;
}
.donation-box .donation-btn-group > .btn:last-child,
.donation-ribbon .donation-btn-group > .btn:last-child {
margin-right: 0;
}
.donation-box .donation-btn-group + .donation-input-group,
.donation-ribbon .donation-btn-group + .donation-input-group {
margin-top: 15px;
}
.donation-box .input-group > .input-overlay > .form-control,
.donation-ribbon .donation-input-group > .input-overlay > .form-control {
height: 40px;
}
.donation-box .input-group > .input-group-btn > .btn,
.donation-ribbon .donation-input-group > .input-group-btn > .btn {
height: 41.6px;
}
@media (min-width: 768px) {
.donation-ribbon {
position: relative;
}
.donation-ribbon-arrow::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 50%;
top: 0;
background-color: rgba(255, 255, 255, 0.4);
clip-path: polygon(0% 0%, 89% 0%, 100% 50%, 89% 100%, 0 100%);
mix-blend-mode: overlay;
pointer-events: none;
}
.donation-ribbon > .container {
align-items: center;
display: flex;
}
.donation-ribbon > .container > .donation-title {
margin-bottom: 0;
margin-right: 10rem;
text-align: right;
}
.donation-box .donation-btn-group {
margin-bottom: 0;
margin-right: 3px;
width: 100%;
}
.donation-box .input-group {
margin-left: 3px;
max-height: 42px;
}
.donation-box > .donation-options {
display: flex;
}
}
@media (min-width: 992px) {
.donation-ribbon-arrow::before {
clip-path: polygon(0% 0%, 93% 0%, 100% 50%, 93% 100%, 0 100%);
}
.donation-ribbon .donation-btn-group {
margin-bottom: 0;
margin-right: 3px;
width: 100%;
}
.donation-ribbon .donation-input-group {
margin-left: 3px;
}
.donation-ribbon .donation-input-group .input-overlay {
border-bottom-right-radius: 3px;
border-top-right-radius: 3px;
border-right-color: transparent;
margin-right: 3px;
}
.donation-ribbon .donation-input-group .btn {
background-color: rgba(255, 255, 255, 0.35);
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
margin-left: 3px;
opacity: 0;
pointer-events: none;
transition: background-color 0.15s ease-in-out,
opacity 0.15s ease-in-out;
}
.donation-ribbon .donation-input-group .btn:focus,
.donation-ribbon .donation-input-group .btn:hover {
background-color: rgba(255, 255, 255, 0.25);
}
.donation-ribbon .donation-input-group .btn.active {
opacity: 1;
pointer-events: auto;
}
.donation-ribbon > .container > .donation-options {
display: flex;
}
.donation-box .donation-btn-group + .donation-input-group,
.donation-ribbon .donation-btn-group + .donation-input-group {
margin-top: 0;
}
}
@media (min-width: 1200px) {
.donation-ribbon > .container > .donation-title {
font-size: 28px;
margin-right: 10rem;
}
}
/* FORM FIELDSETS
* By wrapping two or more `.form-group` elements with a `