/* ==|============================== THE MODAL WINDOW TO DONATE =================== */ /* ==|============================== New Styles to Donation Modal =================== */ .payModal { a { color: $blue; &:hover { color: $orange; } } .modal-dialog { @media(max-width: $tablet - 1) { margin-top: 0; } } .modal-content { // padding: 0 0 6.441vw; padding: 0 0 calc(#{$module-marginbottom} * 2); position: relative; } .modal-header { left: 0; margin-left: 0; margin-right: 0; // padding-top: 5.948vw; padding-top: 1em; position: absolute; top: 0; width: 100%; z-index: -1; } .curr_amount { margin: 1.778em 0 1.722em; padding: 0; position: relative; &:after { clear: both; content: ""; display: table; } .form-group { // border-bottom: 3px solid $turquoise; margin-bottom: 0; display: block; margin: 0 30%; width: 40%; input { border-width: 0; border-bottom: 3px solid $turquoise; font-size: 3em; height: 1.01em; padding: 0; text-align: center; @include placeholder { color: $blue; // new name for $darkBlue-bg; font-size: 0.5em; } _::-webkit-full-page-media, _:future, :root & { height: 1.15em; } &:focus { border-color: transparent transparent $orange transparent; } &::selection { background-color: $orange; color: $white; } @media (min-width: $tablet) { font-size: 3.556em; } &.million { font-size: 1.8em; margin: 0.3em 0 0.37em; @media (min-width: $tablet) { font-size: 2em; margin: 0.4em 0; } } &.trillion { font-size: 0.97em; margin: 1.2em 0 0.9em; @media (min-width: $tablet) { font-size: 1em; margin: 1.45em 0 1.15em; } } } &:first-child { border-bottom: none; font-size: $font-size-base-mobile; left: calc(30% - 6.5em); margin: 0; position: absolute; top: 0; width: auto; z-index: 5; input, select, > .select-drop { background-color: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; font-weight: $font-normal-weight; height: 1.5em; line-height: 1; padding: 0; &:focus { border-bottom-color: $orange; outline: 0; } } > select.select-drop { margin: 10px 0px; min-width: 6em; } > div.select-drop { color: $blue; } @media (min-width: $tablet) { font-size: $font-size-base-tablet; top: calc(35% - 0.75em); } } } input, select { background-color: $white; color: $blue; // New name for $darkBlue-bg; } .amount-options { .custom-amount { .form-group { position: static; input { @include placeholder { color: $grey; font-size: 1em; } border-bottom-color: $turquoise; font-size: 1em; &:focus { border-bottom-color: $orange; } &[type=number] { @include normalizeNumberField(); } } } } } } form { @media(min-width: $tablet) and (max-width: $desktop - 1) { @at-root .payModal.inside-column { form { padding-left: 15px; padding-right: 15px; .modal-buttons, .form-buttons, .button--toolbar { margin-left: -10px; margin-right: -10px; } } } } // padding-top: 1.5em; .form-group { &:first-of-type, &:nth-of-type(4) { float: none; clear: both; width: 100%; } } & > .form-group--date > .form-control { // padding: 0 0 0 0.77em; padding: 0; i { display: none; } } } .payment-errors { clear: both; margin: 0; text-align: center; width: 100%; } .flash.fixed { left: 0; padding: 10px; // top: 24.5vh; top: 26vh; width: 100%; z-index: 10; button { } } &.faux-modal .flash.fixed { position: absolute; } .donateFooter { @include flexAlign(center); @include flexboxPrefix; height: 5em; justify-content: center; @include flexJustify(center); margin: 1.5em 30% -2em 36%; _::-webkit-full-page-media, _:future, :root & { margin: 2em 0 0 0; } .donateFooterCol { margin: 0 5%; text-align: center; div { font-size: 12px; } a { svg { height: 1.5em; } &:hover { svg { .stripeBox { fill: $orange; } } } img.paypal-badge { margin: 0 2em; } } } &:after { clear: both; content: ""; display: block; } } &.tip { .modal-header { color: $blue; // new name for $darkBlue-bg; text-align: center; z-index: 1; @media (min-width: $tablet + 1) { padding-top: 0; top: 0.8em; } } .toppingDonate { padding-top: 4em; #toppingIcon { height: 3em; } h2 { display: none; } } } } // payment modal header .toppingDonate { @include flexAlign(center); @include flexboxPrefix; @include flexDirectionPrefix(column); @include flexJustify(center); background-color: $turquoise; color: $white; height: 26vh; margin: 0 -15px; padding: 0.5em 0 1.5em; position: relative; text-align: center; text-transform: uppercase; @media (min-width: $tablet) { border-top-left-radius: $modal-dialog-borderRadius; border-top-right-radius: $modal-dialog-borderRadius; margin: 0 -16.772%; .payModal.inside-column & { border-radius: 0; } } @media(min-width: $tablet) and (max-width: $desktop - 1) { .payModal.inside-column & { margin: 0; } } @media (min-width: $tablet) and (max-height: 480px) { height: 130px; } @media (min-width: $tablet) and (min-height: 1100px) { height: 240px; } #toppingIcon, #toppingMusicIcon { height: 4em; max-width: 100vw; & > g { fill: $white; } } h2 { font-size: $font-size-titulos-mobile; margin: 0; padding: 0; word-break: break-word; @media (min-width: $tablet) { font-size: $font-size-titulos-tablet; } } h3 { color: $blue; /* font-family: Montserrat; */ /* font-size: 18px; */ margin: 0.2em 0; text-transform: none; } > p { // font-family: $font-set; font-size: 16px; margin-bottom: 0; text-transform: none; } &.no-icon { p { font-family: $font-set; margin: 1em 2em; } } &.gradient-bg { @include gradientBGangle($fucsia, $orange); } &--profile { // @include flexJustify(space-between); padding-bottom: 4.5vh; // display: block; // height: auto; // padding-top: $module-marginbottom; } &__buskerName { color: $blue; font-weight: 700; } &__legal { font-size: $font-size-secundarios-mobile-vw; position: absolute; top: $module-marginbottom; right: $module-marginbottom; @media (min-width: $tablet) { font-size: $font-size-secundarios-tablet; } } .profileImg { @include profileImgCustom(12vh, 2px, $blue, 5px, 0); margin-bottom: $module-marginbottom; min-height: 12vh; @media (min-width: $tablet) { // @include profileImgCustom(12vh, 1px, $blue, 5px, 0); // margin-bottom: $module-marginbottom; // min-height: 12vh; box-shadow: 0 0 0 1px $blue; } } } // Apple pay ButtonLink #apple-pay-button { background-color: black; background-image: -webkit-named-image(apple-pay-logo-white); background-origin: content-box; background-repeat: no-repeat; background-size: 100% 100%; border-radius: 10px; height: 44px; padding: 10px 0; width: 100%; } // Apple pay switch ButtonLink .link--button { background: none; border: none; color: $darkGrey; cursor: pointer; font-size: $font-size-secundarios-mobile-vw; padding: 0.25em 1em; text-decoration: underline; @media (min-width: $tablet) { font-size: $font-size-secundarios-tablet; } } .form-buttons button:only-of-type { display: block; float: none; margin-left: auto; margin-right: auto; } // New styles usig Stripe Elements on form .stripe-elements-form { .modal & > .form-group, .faux-modal & > .form-group { float: none; clear: both; width: 100%; } .form-group input, .elements-wrapper { padding: $form-ctrl-padding; } .elements-wrapper { background-color: $lighterGrey; display: block; font-weight: $font-normal-weight; } .on-focus .elements-wrapper { background-color: $lightGrey; } .paymentButtonCover { max-height: 1px; position: relative; &:after { background-color: rgba($white, 0.5); content: ''; height: 66px; left: 0; position: absolute; top: -1px; width: 101%; z-index: 99; } } } .modal, .modal.bootbox, .faux-modal { .payment-banner { background-color: rgba($white, 0.2); height: 4.5vh; left: 0; margin: 0 -15px; position: absolute; top: 21.5vh; width: 100vw; z-index: 5; @media (min-width: $tablet) { margin: 0; height: 1.55556em; top: calc(26vh - 1.55556em); width: 100%; } @media (min-width: $tablet) and (max-height: 480px) { top: calc(130px - 1.55556em); } @media (min-width: $tablet) and (min-height: 1100px) { top: calc(240px - 1.55556em); } & > div { text-align: center; } button { margin: 0 1em; } button, & > div > span { display: inline-block; color: $white; font-size: 3.140vw; font-weight: 400; height: auto; margin: 0; padding: 0; // text-decoration: underline; text-transform: none; width: auto; @media (min-width: $tablet) { font-size: 14px; } & > span { // font-weight: 700; } &.selected { color: $darkBlue; // New name for $blue-bg; } .fake-toggle { background-color: $turquoiseDark; // Formerly $turquoiseMultiply50; border-radius: 0.8em; box-shadow: inset 0 0 0 $turquoiseDark; // Formerly $turquoiseMultiply50; display: inline-block; height: 1.5em; line-height: 1.3; margin: 0 1em; width: 3em; @include transition(all 0.25s); span { background-color: $darkBlue; // New name for $blue-bg; border: 2px solid $turquoiseDark; // Formerly $turquoiseMultiply50; border-radius: 50%; display: block; height: 1.5em; margin-left: 1.5em; width: 1.5em; @include transition(all 0.25s); &.selected { margin-left: 0; } } } &:hover, &:focus { .fake-toggle { background-color: lighten($turquoise, 25%); span { border-color: lighten($turquoise, 25%) } } } } &.theme-light { button, & > div > span { @include opacity(0.8); &.selected { @include opacity(1); color: $white; } .fake-toggle { background-color: rgba($white, 0.5); box-shadow: inset 0 0 0 rgba($white, 0.5); span { background-color: $white; // New name for $blue-bg; border: 2px solid $lightGrey; // Formerly $turquoiseMultiply50; } } &:hover, &:focus { .fake-toggle { background-color: $blue; span { border-color: $blue; } } } } button { &:hover, &:focus { color: $blue; } } } ul.nav-tabs { margin: 0; padding: 0; li { display: block; i[class^="icon-"] { display: none; } &.active { display: flex; // @include flexboxPrefix(); align-items: center; justify-content: center; i[class^="icon-"] { display: block; } span { display: none; } &>a:after { content: none; } } &.unavailable { display: none; } } } } } .paypalMsg.no-msg { // padding-top: calc(1.33333333em * 5.75); } .donateThankyou { &__msg { color: $blue; margin-bottom: $module-marginbottom; text-align: center; &__title { font-size: $font-size-main-title-mobile-vw; @media (min-width: $tablet) { font-size: $font-size-main-title-tablet; } } &__content { font-size: $font-size-titulos-mobile-vw; @media (min-width: $tablet) { font-size: $font-size-titulos-tablet; } } } .checkbox input { & + label { &:before { border-radius: 0.16667em; } } &:checked { & + label { &:before { background-color: transparent; color: $fucsia; content: "\f00c"; font-family: FontAwesome; } } } } } .donation { &__value { display: block; } }