Current Path : /var/test/www/html/wp-content/plugins/give/src/Views/Form/Templates/Sequoia/assets/css/ |
Current File : /var/test/www/html/wp-content/plugins/give/src/Views/Form/Templates/Sequoia/assets/css/form.scss |
/* stylelint-disable */ @import 'mixins'; @import 'util'; // Icons @import './icons/fontawesome'; @import './icons/regular'; @import './icons/solid'; @import './icons/brands'; // Receipt Styles @import 'receipt'; @import 'recurring'; @import 'feerecovery'; @import 'ffm'; @import 'tributes'; @import 'newsletter'; @import 'square'; // Structure html { margin: 0; padding: 0; border: 0; } body { margin: 10px; font-family: 'Montserrat', sans-serif; color: #555; } form { margin: 0 !important; position: relative; } // Typography h2 { font-weight: 600; font-size: 26px; line-height: 30px; color: #333; } .give-stripe-becs-mandate-acceptance-text, .give-stripe-sepa-mandate-acceptance-text, p { font-size: 15px; font-weight: 400; line-height: 24px; color: #6f6f6f; } .give-stripe-becs-mandate-acceptance-text, .give-stripe-sepa-mandate-acceptance-text { margin-bottom: 16px !important; &::before, &::after { display: none !important; content: none !important; } &:empty { margin-bottom: 0 !important; } } // Container .give-embed-form, .give-embed-receipt { max-width: 552px; margin: auto; border-radius: 6px; color: #696969; display: flex; flex-direction: column; background-color: #fff; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); width: 100%; overflow: hidden; position: relative; } // Buttons .give-btn { background-color: #28c77b; font-family: 'Montserrat', sans-serif; color: #fff; font-weight: 500; text-align: center; border-radius: 4px; font-size: 30px; padding-top: 15px; padding-bottom: 15px; &:focus { outline: none; box-shadow: 0 0 8px #28c77b; } &:hover { filter: brightness(1.2); } } .advance-btn, .give-submit, .download-btn { order: 99 !important; display: flex; align-items: center; justify-content: center; padding: 20px 28px !important; border-radius: 4px; border: none; font-size: 22px; line-height: 20px; margin-top: 48px; margin-bottom: 16px; min-width: 236px; filter: brightness(1); transition: filter 0.2s ease; > i { font-size: 15px; margin-left: 15px; } @media screen and (max-width: $break-phone) { margin-top: 26px; } } .advance-btn:disabled, .give-submit:disabled, .download-btn:disabled { filter: grayscale(0.3); opacity: 0.6; } .download-btn { font-size: 16px; line-height: 20px; margin-top: 10px; margin-bottom: 15px; padding: 16px 10px !important; > i { font-size: 16px; margin-left: 15px; } } // Notices .give_error, .give_success, .give_warning { @include before-after-content-none; position: relative; margin: 20px 20px 0 20px; padding: 10px 15px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); border-width: 0 0 0 5px; font-weight: 400; font-size: 16px; line-height: 24px; word-break: break-word; color: #555 !important; > strong { font-weight: 500 !important; } } // Images .image { display: block; width: 100%; height: auto; position: relative; overflow: hidden; padding: 55.4% 0 0 0; margin: 0; img { display: block; width: 100%; height: 100%; position: absolute; object-fit: cover; top: 0; bottom: 0; left: 0; right: 0; } } // Navigator Styles .give-form-navigator { display: flex; align-items: center; background: #fbfbfb; border-bottom: 1px solid #f2f2f2; height: 50px; width: 100%; position: absolute; z-index: 99; transition: transform 0.2s ease; transform: translate3d(0, -50px, 0); &.nav-visible { transform: translate3d(0, 0, 0); transition-delay: 0.15s; } > .back-btn { padding: 0 20px; height: 100%; background: none; border: none; color: #424242; font-size: 12px; position: absolute; border-radius: 6px 0 0 0; overflow: hidden; cursor: pointer; &:focus { outline: none; background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.09487); } } > .title { flex: 1; text-align: center; font-size: 15px; font-weight: 500; color: #424242; } } // Footer Styles .form-footer { display: flex; flex-direction: column; .navigator-tracker { display: flex; align-items: center; margin: 5px auto 15px auto; .step-tracker { background-color: #e4e4e4; border-radius: 50%; overflow: hidden; height: 12px; width: 12px; margin: 7.5px; padding: 0; cursor: pointer; transition: background-color 0.2s ease; border: none; &.current { background-color: #747474; } &:focus { border: 1px solid #959595; outline: none; } } @media screen and (max-width: $break-phone) { margin: 5px auto 5px auto; } } .secure-notice { margin-top: 15px; color: #989898; display: flex; align-items: center; justify-content: center; height: 60px; justify-content: center; background: #fbfbfb; border-top: 1px solid #f2f2f2; font-size: 12px; > i { padding: 8px; font-size: 12px; } } } // Section Styles .give-section { display: flex; flex-direction: column; > * { margin-right: auto; margin-left: auto; } } // Introduction Styles .introduction { display: flex; flex-direction: column; text-align: center; width: 100%; .headline { max-width: 75%; margin-bottom: 16px; margin-top: 30px; } .seperator { width: 90px; height: 4px; background: #28c77b; border-radius: 4px; } .description { font-size: 16px; font-weight: 500; margin: 18px 70px 29px 70px; @media screen and (max-width: $break-phone) { margin: 14px 12px 16px 12px; } } .description + .advance-btn { margin-top: 6px !important; @media screen and (max-width: $break-phone) { margin-top: 10px !important; } } .income-stats { width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; background-color: #fbfbfb; color: #767676; font-weight: 500; font-size: 14px; .number { color: #4c4c4c; font-size: 18px; } > div { display: flex; flex: 1 1 0%; flex-direction: column; align-items: center; padding: 10px; border-color: #f2f2f2; border-style: solid; border-width: 1px 0 1px 0; &:first-of-type { border-right: 1px solid #f2f2f2; } &:last-of-type { border-left: 1px solid #f2f2f2; } } } .progress-bar { width: 100%; border-bottom: 1px solid #f2f2f2; > div { margin: 20px; } } } // Progress Bar Styles .give-progress-bar { height: 20px; position: relative; border-radius: 20px; overflow: hidden; background: #f1f1f1; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.09487); > span { border-radius: 20px; background: linear-gradient(180deg, #28c77b 0%, #28c77b 100%), linear-gradient(180deg, #fff 0%, #ccc 100%); background-blend-mode: multiply; position: relative; overflow: hidden; } } // Choose Amount Styles .choose-amount { > * { order: 2; } > .give_error { order: 1; margin-right: 20px; margin-left: 20px; } .content { text-align: center; margin: 24px 30px 22px 30px; font-size: 15px; @media screen and (max-width: $break-phone) { margin: 20px 20px 16px 20px; } } // Amount Total .give-total-wrap { width: 100%; } .give-donation-amount { @include before-after-content-none; display: flex; width: 207px; align-items: center; background-color: #fff; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.22); border: 1px solid #979797; border-radius: 4px !important; overflow: hidden; padding: 18px 24px; float: none !important; margin: 5px auto 15px !important; @media screen and (max-width: $break-phone) { padding: 12px 16px; margin-top: 0; margin-bottom: 5px; } .give-amount-top { font-family: 'Montserrat', sans-serif; height: auto !important; width: auto !important; text-align: center; font-weight: 500 !important; font-size: 42px !important; line-height: 1 !important; color: #333; border: 0 !important; &:focus { outline: none; } } span.give-currency-symbol { background-color: transparent !important; border: 0 !important; position: relative; z-index: 3; padding: 0 !important; color: #555; &.give-currency-position-before { padding-right: 24px !important; border-right: dotted #aaa 1px !important; } &.give-currency-position-after { padding-left: 24px !important; border-left: dotted #aaa 1px !important; } } } // Amount Buttons .give-donation-levels-wrap { @include before-after-content-none; display: grid !important; grid-gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin: 24px 30px 0 30px !important; @media screen and (max-width: $break-phone) { margin: 16px 20px 0 20px !important; } li { margin: 0 !important; } .give-donation-level-btn { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; background: #28c77b; border: 2px solid #28c77b; line-height: 1; text-align: center; color: #fff; padding-top: 24px; padding-bottom: 24px; @media screen and (max-width: $break-phone) { font-size: 21px; } > .currency { font-size: 14px; &.currency--before { margin: 0 6px 11px 0; @media screen and (max-width: $break-phone) { font-size: 11px; margin: 0 3px 6px 0; } } &.currency--after { margin: 0 0 11px 6px; @media screen and (max-width: $break-phone) { font-size: 11px; margin: 0 0 6px 3px; } } } &.give-btn-level-custom { height: 100%; font-size: 18px; line-height: 1.2; padding: 10px; @media screen and (max-width: $break-phone) { font-size: 14px; } } &.give-default-level { background: #fff; border: 2px solid #28c77b; color: #28c77b; } @media screen and (max-width: $break-phone) { padding-top: 16px; padding-bottom: 16px; } } } } // Payment Section .payment { > * { order: 99; } .donation-errors { position: relative; width: 100%; } #give-anonymous-donation-wrap { .give-label { display: block !important; font-weight: 400; font-size: 14px; line-height: 1.4; padding: 0 0 0 32px; width: calc(100% - 40px); margin-left: 0; color: #696969; display: inline-block; &::before { content: ' '; position: absolute; top: calc(50% - 12px); left: 0; width: 20px; height: 20px; border: 1px solid #b4b9be; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } &::after { transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease; border-radius: 11px; width: 20px; height: 20px; position: absolute; top: calc(50% - 12px); left: 0; content: ' '; display: block; background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%231E8CBE'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); } &.active { &::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } } } #give_terms_agreement { order: 3; background: #fff; border: 1px solid rgba(255, 255, 255, 0); box-sizing: border-box; box-shadow: 0 0 16px rgba(0, 0, 0, 0.121203); border-radius: 5px; margin: 20px 0 0 0 !important; padding: 0 !important; position: relative; transition: border 0.2s ease; width: auto !important; padding: 17px 20px 17px 22px !important; display: flex; justify-content: space-between; flex-wrap: wrap; input[type='checkbox'] { bottom: 14px; left: 27px; } #give_show_terms { order: 3; @media screen and (max-width: $break-phone) { bottom: 20px; left: 60px; position: absolute; z-index: 99; } } #give_terms { margin-bottom: 17px; max-height: 300px; padding: 0 10px 0 0; overflow-y: scroll !important; > p:first-of-type { margin-top: 0; } } label { margin: 0; padding: 0 0 0 40px; width: calc(100% - 180px); display: inline-block; font-weight: 400; font-size: 16px; line-height: 1.4; position: relative; cursor: pointer; @media screen and (max-width: $break-phone) { width: calc(100% - 30px); padding: 0 0 30px 40px; } } &:hover { border: 1px solid #3398db; .give-mc-message-text::before { background-color: rgba(245, 245, 245, 0.815); } } &.active { border: 1px solid #3398db; } } [id*='give-checkout-login-register-'] { width: 100%; @media screen and (max-width: $break-phone) { display: flex !important; justify-content: center; } .give-login-message { @media screen and (max-width: $break-phone) { width: fit-content !important; margin-right: auto !important; margin-left: auto !important; text-align: center; } } } [id*='give-create-account-wrap-'] { @media screen and (max-width: $break-phone) { display: flex !important; justify-content: center; margin-bottom: 2px !important; } input { display: none; } label { padding-left: 30px; font-size: 14px; @media screen and (max-width: $break-phone) { width: fit-content !important; } .give-tooltip { padding-left: 6px; } &::before { content: ' '; position: absolute; top: calc(50% - 12px); left: 0; width: 20px; height: 20px; border: 1px solid #b4b9be; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } &::after { transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease; border-radius: 11px; width: 20px; height: 20px; position: absolute; top: calc(50% - 12px); left: 0; content: ' '; display: block; background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%231E8CBE'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); } &.checked { &::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } } } .give-login-message { font-size: 14px; } [id*='give-login-fields-'] { display: grid; grid-template-columns: 1fr; .give-user-login-fields-container { grid-row: 1; } .give-new-account-link { grid-row: 2; display: none; } [id*='give-user-login-submit-'] { grid-row: 3; display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; > * { order: 99; } .give-submit { margin-top: 0; margin-bottom: 12px; flex-basis: 100%; order: 1; padding: 14px !important; line-height: 1; font-size: 16px; } .give-cancel-login { padding: 0; background: none !important; font-size: 14px; display: inline-block; width: fit-content; border: none !important; text-decoration: underline; color: #b8b8b8; margin-left: 10px; font-weight: 400; } [id*='give-forgot-password-wrap-'] { font-size: 14px; display: inline-block; a { color: #b8b8b8; font-weight: 400; } } } } #give_error_invalid_donation_maximum, #give_error_invalid_donation_amount { cursor: pointer; } > .give_error { margin-right: 20px; margin-left: 20px; } .heading { padding: 39px 3px 0; font-size: 16px; font-weight: 500; color: #6b6b6b; text-align: center; @media screen and (max-width: $break-phone) { padding: 20px 3px 0; } } .subheading { @media screen and (max-width: $break-phone) { padding-left: 20px !important; padding-right: 20px !important; } } .give_notices { width: 100%; order: 1; } .give_notices + .heading { padding: 28px 3px 0; } .give_error + .heading { padding: 28px 3px 0; } .subheading { padding: 5px 0 34px 0; font-style: italic; font-size: 12px; color: #767676; text-align: center; @media screen and (max-width: $break-phone) { padding: 5px 0 20px 0; } } fieldset { padding: 0 20px; > fieldset { padding: 0; } } #give_checkout_user_info { legend { display: none; } } #give-payment-mode-select { .gateway-stripe-google_pay, .gateway-stripe-apple_pay { display: none !important; } legend { display: none; } ul { @include before-after-content-none; display: grid; grid-gap: 10px; grid-template-rows: 1fr; margin: 0; > li { @include background-lightgray; margin: 0 !important; padding: 14px 20px !important; border-radius: 4px; border: 1px solid #f1f1f1; position: relative; display: flex; justify-content: flex-start; align-items: center; .give-gateway-option { font-size: 14px; text-align: left; padding-left: 23px; padding-right: 12px; font-weight: 600; color: #333; flex-grow: 1; line-height: 1.4; } } input[type='radio'] { opacity: 0 !important; position: absolute !important; } .give-gateway-option::before { content: ' '; position: absolute; top: calc(50% - 10px); left: 15px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #b4b9be; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } input[type='radio']:checked + .give-gateway-option::after { transform: scale3d(1, 1, 1); } input[type='radio'] + .give-gateway-option::after { transform: scale3d(0, 0, 0); transition: transform 0.2s ease; border-radius: 11px; width: 8px; height: 8px; position: absolute; top: calc(50% - 5px); left: 20px; content: ' '; display: block; background: #333; } } } #give_offline_payment_info { > ol { list-style: none; padding: 0; > li { line-height: 1.4; padding: 4px 0; font-size: 15px; } } } #give_purchase_form_wrap { background: #fbfbfb; padding: 20px 20px 6px 20px; @media screen and (max-width: $break-phone) { padding: 14px 14px 0 14px; } fieldset { padding: 0; } .cc-address { margin-bottom: 0; } .no-fields { margin-bottom: 8px; } &.give-single-gateway-wrap { background: none; padding: 0; margin: 0 20px; } } #give_purchase_submit { display: flex; flex-direction: column; order: 3; #give-final-total-wrap { display: none; } input[value='stripe_apple_pay'] ~ .give-stripe-payment-request-button, input[value='stripe_google_pay'] ~ .give-stripe-payment-request-button { margin: 16px auto 16px auto; order: 3; &.StripeElement { margin-top: 48px; display: flex !important; justify-content: center; } > *:not(.give_error) { width: 236px; } } } #donate-fieldset { display: flex; flex-direction: column; } .give-submit-button-wrap { display: flex; flex-direction: column; align-items: center; position: relative; order: 3; .sequoia-loader { height: 30px; width: 30px; bottom: 32px; position: absolute; font-size: 4px; } .give-submit:not(:disabled) + .sequoia-loader { display: none; } } } // Fieldsets and Inputs fieldset { legend { display: none; } p { position: relative; > i { position: absolute; bottom: calc(50% - 6px); left: 14px; font-size: 12px; color: #989898; } } .give-ffm-form-row-responsive { position: relative; > i { position: absolute; bottom: 18px; left: 22px; font-size: 12px; color: #989898; } } .give_error, .give_success, .give_warning { margin: 20px 0; } } .give-label { display: none !important; } input[type='checkbox'] { opacity: 0 !important; position: absolute !important; } input[type='checkbox'] + label { font-weight: 500; font-size: 16px; line-height: 1.4; padding: 0 0 0 32px; width: calc(100% - 82px); margin-left: 0; color: #333; display: inline-block; &::before { content: ' '; position: absolute; top: calc(50% - 12px); left: 0; width: 20px; height: 20px; border: 1px solid #b4b9be; background-color: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); } &::after { transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease; border-radius: 11px; width: 20px; height: 20px; position: absolute; top: calc(50% - 12px); left: 0; content: ' '; display: block; background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%231E8CBE'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: center; clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); -webkit-clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%); } &.checked { &::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } } } input[type='checkbox']:checked + label::after { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } .give-square-cc-fields, .give-stripe-cc-field, .give-stripe-single-cc-field-wrap, form[id*='give-form'] .form-row textarea, form[id*='give-form'] .form-row input[type='text'], form[id*='give-form'] .form-row input[type='tel'], form[id*='give-form'] .form-row input[type='email'], form[id*='give-form'] .form-row input[type='password'], form[id*='give-form'] .form-row input[type='url'], form[id*='give-form'] .form-row textarea.required, form[id*='give-form'] .form-row input[type='text'].required, form[id*='give-form'] .form-row input[type='tel'].required, form[id*='give-form'] .form-row input[type='email'].required, form[id*='give-form'] .form-row input[type='password'].required, form[id*='give-form'] .form-row input[type='url'].required, #give-recurring-form .form-row textarea, #give-recurring-form .form-row input[type='text'], #give-recurring-form .form-row input[type='tel'], #give-recurring-form .form-row input[type='email'], #give-recurring-form .form-row input[type='password'], #give-recurring-form .form-row input[type='url'], form.give-form .form-row textarea, form.give-form .form-row input[type='text'], form.give-form .form-row input[type='tel'], form.give-form .form-row input[type='email'], form.give-form .form-row input[type='password'], form.give-form .form-row input[type='url'] { font-family: 'Montserrat', sans-serif; background: #fff; border: 1px solid #b8b8b8 !important; box-sizing: border-box; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.152289); border-radius: 4px !important; font-weight: 400; height: auto; font-size: 14px; line-height: 1; color: #828382; padding: 14px !important; } .give-square-cc-fields { height: 52px; } form[id*='give-form'] .form-row textarea, #give-recurring-form .form-row textarea, form.give-form .form-row textarea { line-height: 1.4; } form[id*='give-form'] .form-row select, #give-recurring-form .form-row select, form.give-form .form-row select, form[id*='give-form'] .form-row select.required, #give-recurring-form .form-row select.required, form.give-form .form-row select.required, .give-select { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; color: #828382; line-height: 1.2; padding: 12px !important; min-height: 48px; margin: 0; border: 1px solid #b8b8b8 !important; border-radius: 4px !important; box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.152289), 0 1px 0 1px rgba(0, 0, 0, 0.04); -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.66016 7.19531C5.90625 7.44141 6.31641 7.44141 6.5625 7.19531L11.8945 1.89062C12.1406 1.61719 12.1406 1.20703 11.8945 0.960938L11.2656 0.332031C11.0195 0.0859375 10.6094 0.0859375 10.3359 0.332031L6.125 4.54297L1.88672 0.332031C1.61328 0.0859375 1.20312 0.0859375 0.957031 0.332031L0.328125 0.960938C0.0820312 1.20703 0.0820312 1.61719 0.328125 1.89062L5.66016 7.19531Z' fill='%23A2A3A2'/%3E%3C/svg%3E"), linear-gradient(to bottom, #fff 0%, #fff 100%); background-repeat: no-repeat, repeat; background-position: right 0.7em top 50%, 0 0; background-size: 0.65em auto, 100%; } form[id*='give-form'] .form-row select.multiselect, #give-recurring-form .form-row select.multiselect, form.give-form .form-row select.multiselect { background-image: none; } .give-input:hover, .give-select:hover { border: 1px solid rgb(54, 54, 54); } // Tooltip Styles .give-tooltip { margin: 0 !important; &::after { display: block; padding: 12px 18px; background: #383838; color: #fff; font-size: 16px; font-family: 'Montserrat', sans-serif; border-radius: 4px; line-height: 1.2; text-align: center; text-shadow: 0 -1px 0 #000; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2); word-wrap: normal; white-space: normal; width: 136px; max-width: 136px; } &.narrow { &::after { width: fit-content; } } } // Loader .sequoia-loader { background-image: url("data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='utf-8'?%3E%3C!-- Generator: Adobe Illustrator 24.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 349 348' style='enable-background:new 0 0 349 348;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0{fill:%23FFFFFF;} %3C/style%3E%3Cpath class='st0' d='M25.1,204.57c-13.38,0-24.47-10.6-24.97-24.08C0.04,178.09,0,175.97,0,174C0,77.78,78.28-0.5,174.5-0.5 c13.81,0,25,11.19,25,25s-11.19,25-25,25C105.85,49.5,50,105.35,50,174c0,1.37,0.03,2.85,0.1,4.65c0.51,13.8-10.27,25.39-24.07,25.9 C25.72,204.56,25.41,204.57,25.1,204.57z'/%3E%3Cpath class='st0' d='M174.5,348.5c-13.81,0-25-11.19-25-25c0-13.81,11.19-25,25-25c68.65,0,124.5-55.85,124.5-124.5 c0-1.38-0.03-2.85-0.1-4.65c-0.51-13.8,10.26-25.4,24.06-25.91c13.83-0.53,25.4,10.26,25.91,24.06c0.09,2.39,0.13,4.51,0.13,6.49 C349,270.22,270.72,348.5,174.5,348.5z'/%3E%3C/svg%3E"); pointer-events: none; opacity: 0; &.spinning { opacity: 1; transition: opacity 0.2s ease; animation: load 0.6s linear infinite; } } @keyframes load { from { transform: rotateZ(0deg); } to { transform: rotateZ(180deg); } } // Slide Animation Styles .slide-in-right, .slide-in-left, .slide-out-right, .slide-out-left { position: absolute; width: 100%; } .slide-in-right { animation-name: slideInRight; animation-duration: 0.3s; animation-fill-mode: forwards; } .slide-out-right { animation-name: slideOutRight; animation-duration: 0.3s; animation-fill-mode: forwards; } .slide-in-left { animation-name: slideInLeft; animation-duration: 0.3s; animation-fill-mode: forwards; } .slide-out-left { animation-name: slideOutLeft; animation-duration: 0.3s; animation-fill-mode: forwards; } [id*='give_secure_site_wrapper'] { font-size: 12px; color: #8d8e8e; padding-top: 0; line-height: 1.2; span.padlock { font-size: 12px; margin-right: 4px; line-height: 1; &::before { font-family: 'Font Awesome 5 Free'; font-weight: 900; content: '\f023'; } } } /* Hide everything which is not output by Give core or addon */ body > *:not([class^='give']):not([id^='give']) { display: none; } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } } @keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } } @keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }