diff --git a/src/components/modal/v2/parts/views/LongTerm/styles.scss b/src/components/modal/v2/parts/views/LongTerm/styles.scss index 13ef25f465..d69e68e0e9 100644 --- a/src/components/modal/v2/parts/views/LongTerm/styles.scss +++ b/src/components/modal/v2/parts/views/LongTerm/styles.scss @@ -1,6 +1,6 @@ -@import '../../../styles/globals/colors'; -@import '../../../styles/globals/mixins'; -@import '../../../styles/globals/variables'; +@use '../../../styles/globals/colors'; +@use '../../../styles/globals/mixins'; +@use '../../../styles/globals/variables'; .spinner { display: block; @@ -8,7 +8,7 @@ left: 50%; top: 50%; border-radius: 50%; - border-top: 4px solid $spinner-green; + border-top: 4px solid colors.$spinner-green; width: 80px; height: 80px; opacity: 0; @@ -24,30 +24,30 @@ padding: 0px; font-size: 14px; margin: 0px; - @include tablet { + @include mixins.tablet { margin: 0px 44px 0px 44px; } - @include desktop { + @include mixins.desktop { margin-left: 30px; } - @include mobile { + @include mixins.mobile { margin-top: 20px; margin-left: 0px; } } .button__fixed-wrapper { - @include fixedWrapper; + @include mixins.fixedWrapper; bottom: 0; z-index: 1; - @include tablet { - border-radius: 0 0 $content-wrapper-border-radius $content-wrapper-border-radius; + @include mixins.tablet { + border-radius: 0 0 variables.$content-wrapper-border-radius variables.$content-wrapper-border-radius; overflow: hidden; - @include lander { + @include mixins.lander { border-radius: 0; } } @@ -58,29 +58,29 @@ flex-direction: column; align-items: center; - @include tablet { + @include mixins.tablet { margin-bottom: 0; - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; padding: 15px 0; .button { width: calc(80%); } } - @include mobile { + @include mixins.mobile { margin-bottom: 0; - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; padding: 15px 0; .button { width: calc(80%); } } - @include apiIframe { - max-width: $content-wrapper-max-width-api-iframe; + @include mixins.apiIframe { + max-width: variables.$content-wrapper-max-width-api-iframe; } } .checkout { - background: $white; + background: colors.$white; } diff --git a/src/components/modal/v2/parts/views/NoInterest/styles.scss b/src/components/modal/v2/parts/views/NoInterest/styles.scss index 77b9b571be..ba4ce0df08 100644 --- a/src/components/modal/v2/parts/views/NoInterest/styles.scss +++ b/src/components/modal/v2/parts/views/NoInterest/styles.scss @@ -1,6 +1,6 @@ -@import '../../../styles/globals/variables'; -@import '../../../styles/globals/mixins'; -@import '../../../styles/globals/colors'; +@use '../../../styles/globals/variables'; +@use '../../../styles/globals/mixins'; +@use '../../../styles/globals/colors'; .content { &__container { @@ -8,21 +8,21 @@ .button { padding: 15px 100px 15px 100px; - @include mobile { + @include mixins.mobile { padding: 15px 70px 15px 70px; width: 100%; } } .button__fixed-wrapper { - @include fixedWrapper; + @include mixins.fixedWrapper; bottom: 0; z-index: 1; - @include tablet { - border-radius: 0 0 $content-wrapper-border-radius $content-wrapper-border-radius; + @include mixins.tablet { + border-radius: 0 0 variables.$content-wrapper-border-radius variables.$content-wrapper-border-radius; overflow: hidden; - @include lander { + @include mixins.lander { border-radius: 0; } } @@ -33,28 +33,28 @@ flex-direction: column; align-items: center; - @include tablet { + @include mixins.tablet { background: white; margin-bottom: 0; - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; padding: 15px 0; .button { width: calc(80%); } } - @include mobile { + @include mixins.mobile { background: white; margin-bottom: 0; - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; padding: 15px 0; .button { width: calc(80%); } } - @include apiIframe { - max-width: $content-wrapper-max-width-api-iframe; + @include mixins.apiIframe { + max-width: variables.$content-wrapper-max-width-api-iframe; } } @@ -74,80 +74,80 @@ padding-top: 25px; margin: 0; - @include desktop { + @include mixins.desktop { padding-left: 15px; } - @include mobile { + @include mixins.mobile { padding-top: 5px; } - @include lander { - @include desktop { + @include mixins.lander { + @include mixins.desktop { border-radius: 0px 0px 100px 0px; } - @include tablet { + @include mixins.tablet { padding-bottom: 30px; margin-bottom: 0; } } - @include tablet { + @include mixins.tablet { padding-bottom: 50px; margin-bottom: 25px; } - @include mobile { + @include mixins.mobile { margin-bottom: 70px; } - @include smallMobile { + @include mixins.smallMobile { margin-bottom: 70px; } .terms { padding-left: 0px; - @include desktop { + @include mixins.desktop { margin-top: 0; margin-left: 30px; margin-right: 30px; } - @include tablet { + @include mixins.tablet { margin-top: 0; margin-left: 30px; margin-right: 30px; } &-item { - color: $gray; + color: colors.$gray; margin-bottom: 20px; font-size: 14px; display: flex; margin-left: unset; &.v5Dot1Design { - color: $v5-gray; + color: colors.$v5-gray; } - @include mobile { + @include mixins.mobile { margin-bottom: 10px; } - @include apiIframe { - @include tablet { + @include mixins.apiIframe { + @include mixins.tablet { margin-bottom: 15px; } } &.ppcc { - @include desktop { + @include mixins.desktop { margin-left: 17px; margin-bottom: 10px; } - @include tablet { + @include mixins.tablet { margin-left: 17px; } - @include mobile { + @include mixins.mobile { margin-left: 10px; margin-right: 10px; } @@ -158,13 +158,13 @@ &::before { /* pseudo class necessary for setting bullet color separate from font */ content: '\2022'; - color: $dark-gray; + color: colors.$dark-gray; - @include mobile { + @include mixins.mobile { padding: 0px 12.5px 0px 8px; } - @include smallMobile { + @include mixins.smallMobile { padding: 0px 12.5px 0px 0px; } padding: 0 12.5px; @@ -172,7 +172,7 @@ font-size: large; } &.v5Dot1Design::before { - color: $v5-gray; + color: colors.$v5-gray; } } // &-content { @@ -184,12 +184,12 @@ &:nth-child(2) { margin-top: 20px; } - @include desktop { + @include mixins.desktop { margin-left: 17px; margin-right: 45px; } - @include tablet { + @include mixins.tablet { margin-left: 17px; margin-right: 45px; @@ -198,7 +198,7 @@ } } - @include mobile { + @include mixins.mobile { margin-left: 10px; margin-right: 10px; } @@ -206,10 +206,10 @@ list-style: none; font-size: 14px; margin: 0 0 20px 0; - color: $gray; + color: colors.$gray; &.v5Dot1Design { - color: $v5-gray; + color: colors.$v5-gray; } } } diff --git a/src/components/modal/v2/parts/views/PayIn1/styles.scss b/src/components/modal/v2/parts/views/PayIn1/styles.scss index 9100947f8f..3c8dca3c90 100644 --- a/src/components/modal/v2/parts/views/PayIn1/styles.scss +++ b/src/components/modal/v2/parts/views/PayIn1/styles.scss @@ -1,11 +1,11 @@ -@import '../../../styles/globals/colors'; -@import '../../../styles/globals/mixins'; +@use '../../../styles/globals/colors'; +@use '../../../styles/globals/mixins'; .content__body { .content__row { padding-right: 50px; - @include mobile { + @include mixins.mobile { padding: 0px; } @@ -14,15 +14,15 @@ padding: 0px; font-size: 14px; margin: 0px; - @include tablet { + @include mixins.tablet { margin: 0px 44px 0px 44px; } - @include desktop { + @include mixins.desktop { margin-left: 30px; } - @include mobile { + @include mixins.mobile { margin-left: 0px; } } diff --git a/src/components/modal/v2/parts/views/ProductList/styles.scss b/src/components/modal/v2/parts/views/ProductList/styles.scss index f4dd738b0a..037bf1563b 100644 --- a/src/components/modal/v2/parts/views/ProductList/styles.scss +++ b/src/components/modal/v2/parts/views/ProductList/styles.scss @@ -1,16 +1,16 @@ -@import '../../../styles/globals/colors'; -@import '../../../styles/globals/mixins'; +@use '../../../styles/globals/colors'; +@use '../../../styles/globals/mixins'; p { - color: $text-main; + color: colors.$text-main; font-size: 18px; width: 100%; - @include mobile { + @include mixins.mobile { width: auto; } - @include lander { + @include mixins.lander { margin-top: 30px; } diff --git a/src/components/modal/v2/parts/views/ShortTerm/styles.scss b/src/components/modal/v2/parts/views/ShortTerm/styles.scss index bae4123cec..9a390d5936 100644 --- a/src/components/modal/v2/parts/views/ShortTerm/styles.scss +++ b/src/components/modal/v2/parts/views/ShortTerm/styles.scss @@ -1,6 +1,6 @@ -@import '../../../styles/globals/colors'; -@import '../../../styles/globals/mixins'; -@import '../../../styles/globals/variables'; +@use '../../../styles/globals/colors'; +@use '../../../styles/globals/mixins'; +@use '../../../styles/globals/variables'; .content__body { .donuts { @@ -8,7 +8,7 @@ align-items: center; width: 100%; - @include desktop { + @include mixins.desktop { min-height: 5em; top: 0; margin-bottom: 0px; @@ -23,22 +23,22 @@ margin: 0 auto; padding: 0 20px 15px 20px; - @include desktop { + @include mixins.desktop { transform: translate(0px, 1rem); position: relative; top: 30px; } - @include tablet { + @include mixins.tablet { max-width: 400px; } - @include mobile { + @include mixins.mobile { padding: 0 0 15px; justify-content: space-between; } - @include smallMobile { + @include mixins.smallMobile { padding: 0px; } @@ -48,7 +48,7 @@ } .v5Design & { - @include tablet { + @include mixins.tablet { margin-top: 20px; margin-bottom: 20px; } @@ -57,7 +57,7 @@ } .dashed-line-0 { - border-bottom: 1px dashed $dark-gray; + border-bottom: 1px dashed colors.$dark-gray; width: 100%; max-width: 95px; height: 1px; @@ -66,13 +66,13 @@ top: 3.4%; transform: translate(-50%, -50%); - @include lander { + @include mixins.lander { max-width: 130px; left: 37%; top: 3.5%; } - @include mobile { + @include mixins.mobile { z-index: 9; max-width: 90px; height: 1px; @@ -83,7 +83,7 @@ } .dashed-line-1 { - border-bottom: 1px dashed $dark-gray; + border-bottom: 1px dashed colors.$dark-gray; width: 100%; max-width: 100px; height: 1px; @@ -92,14 +92,14 @@ top: 3.4%; transform: translate(-50%, -50%); - @include lander { + @include mixins.lander { max-width: 130px; left: 63%; top: 3.5%; } - @include mobile { - border-bottom: 1px dashed $dark-gray; + @include mixins.mobile { + border-bottom: 1px dashed colors.$dark-gray; width: 100%; max-width: 90px; height: 1px; @@ -117,11 +117,11 @@ .learnMoreLink__container { font-size: 14px; - @include tablet { + @include mixins.tablet { margin-top: 10px; } - @include mobile { + @include mixins.mobile { margin-top: 20px; margin-left: 0px; } @@ -129,21 +129,21 @@ .button { padding: 15px 100px 15px 100px; - @include mobile { + @include mixins.mobile { padding: 15px 70px 15px 70px; width: 100%; } } .button__fixed-wrapper { - @include fixedWrapper; + @include mixins.fixedWrapper; bottom: 0; z-index: 1; - @include tablet { - border-radius: 0 0 $content-wrapper-border-radius $content-wrapper-border-radius; + @include mixins.tablet { + border-radius: 0 0 variables.$content-wrapper-border-radius variables.$content-wrapper-border-radius; overflow: hidden; - @include lander { + @include mixins.lander { border-radius: 0; } } @@ -154,33 +154,33 @@ flex-direction: column; align-items: center; - @include tablet { + @include mixins.tablet { background: white; margin-bottom: 0; - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; padding: 15px 0; .button { width: calc(80%); } } - @include mobile { + @include mixins.mobile { background: white; margin-bottom: 0; - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; padding: 15px 0; .button { width: calc(80%); } } - @include apiIframe { - max-width: $content-wrapper-max-width-api-iframe; + @include mixins.apiIframe { + max-width: variables.$content-wrapper-max-width-api-iframe; } &.checkout { .button { - @include tablet { + @include mixins.tablet { width: auto; } } @@ -188,10 +188,10 @@ } .checkout { - background: $white; + background: colors.$white; .donuts__container { - border: 1px solid $checkout-border; + border: 1px solid colors.$checkout-border; border-radius: 12px; margin-bottom: 15px; margin-top: -25px; @@ -214,13 +214,13 @@ .disclosure { &.v5Design { - color: $v5-gray; + color: colors.$v5-gray; padding-top: 24px; } &.checkout { padding-bottom: 60px; - @include mobile { + @include mixins.mobile { padding-bottom: 100px; } } diff --git a/src/components/modal/v2/styles/components/_body-content.scss b/src/components/modal/v2/styles/components/_body-content.scss index 547b8831d2..53672b617c 100644 --- a/src/components/modal/v2/styles/components/_body-content.scss +++ b/src/components/modal/v2/styles/components/_body-content.scss @@ -1,10 +1,14 @@ +@use "../globals/colors"; +@use "../globals/mixins"; +@use "../globals/variables"; + // Windows does not clip scrollbars with overflow hidden // and border radius so we wrap a div around the scrollable // section and can clip from there .content__wrapper-overflow { margin: auto; overflow: hidden; - border-radius: $content-wrapper-border-radius; + border-radius: variables.$content-wrapper-border-radius; width: 100%; // This forces all nested elements that use "position: fixed" to position relative // to this element instead of the normal browser window. We use this element since @@ -12,7 +16,7 @@ // elements would scroll as well. transform: translate(0, 0); - @include lander { + @include mixins.lander { // Remove the transform since the lander layout is a traditional full page with scrolling transform: none; // The hierarchy of elements on the lander variant requires that we set overflow-y to scroll and add a set height, @@ -20,34 +24,34 @@ overflow-y: scroll; height: 100vh; - @include tablet { + @include mixins.tablet { border-radius: 0; - background-color: $beige; + background-color: colors.$beige; } } - @include mobile { + @include mixins.mobile { border-radius: 0; } - @include tablet { - max-width: $content-wrapper-max-width-tablet; + @include mixins.tablet { + max-width: variables.$content-wrapper-max-width-tablet; } - @include desktop { - max-width: $content-wrapper-max-width-desktop; + @include mixins.desktop { + max-width: variables.$content-wrapper-max-width-desktop; } - @include apiIframe { - max-width: $content-wrapper-max-width-api-iframe; + @include mixins.apiIframe { + max-width: variables.$content-wrapper-max-width-api-iframe; border-radius: 0; } &.checkout { - @include tablet { - border: 1px solid $ql-dark-gray; - border-radius: $content-wrapper-border-radius-checkout; - max-width: $content-wrapper-max-width-tablet-checkout; + @include mixins.tablet { + border: 1px solid colors.$ql-dark-gray; + border-radius: variables.$content-wrapper-border-radius-checkout; + max-width: variables.$content-wrapper-max-width-tablet-checkout; } } } @@ -67,20 +71,20 @@ z-index: 1; // TODO: There appears to be a small 1px space below the content__container in windows // where it's background color is not showing. Is this specific to browserstack? - background: $beige; + background: colors.$beige; - @include tablet { + @include mixins.tablet { max-height: 90vh; } - @include desktop { + @include mixins.desktop { max-height: 90vh; } - @include mobile { + @include mixins.mobile { min-width: 285px; } - @include lander { + @include mixins.lander { height: auto; max-height: none; margin-bottom: 4rem; @@ -88,13 +92,13 @@ background: transparent; overflow: visible; - @include mobile { + @include mixins.mobile { min-height: 100vh; margin-bottom: 0; } } - @include apiIframe { + @include mixins.apiIframe { max-height: 100%; } } diff --git a/src/components/modal/v2/styles/components/_button.scss b/src/components/modal/v2/styles/components/_button.scss index c2e22c2cb4..31eea2de25 100644 --- a/src/components/modal/v2/styles/components/_button.scss +++ b/src/components/modal/v2/styles/components/_button.scss @@ -1,14 +1,17 @@ +@use "../globals/colors"; +@use "../globals/variables"; + .button__container { margin-top: 20px; margin-bottom: 10px; display: flex; justify-content: center; .button { - font-family: $paypal-pro; + font-family: variables.$paypal-pro; display: inline-block; - background: $black; + background: colors.$black; border: none; - color: $white; + color: colors.$white; border-radius: 3rem; padding: 0.7em 2.5em; font-size: 1rem; @@ -18,25 +21,25 @@ &:hover, &:focus { - background: $black; + background: colors.$black; } &:focus { text-decoration: underline; - outline: 3px solid $black; + outline: 3px solid colors.$black; } .v5Design & { - font-family: $paypal-pro; + font-family: variables.$paypal-pro; } .v5Dot1Design & { - background: $black; + background: colors.$black; } } &.checkout { - border-top: 1px solid $ql-dark-gray; - box-shadow: 0px 0px 2px $ql-dark-gray; + border-top: 1px solid colors.$ql-dark-gray; + box-shadow: 0px 0px 2px colors.$ql-dark-gray; } } diff --git a/src/components/modal/v2/styles/components/_calculator.scss b/src/components/modal/v2/styles/components/_calculator.scss index 1402d2ee85..4dfbf04e2c 100644 --- a/src/components/modal/v2/styles/components/_calculator.scss +++ b/src/components/modal/v2/styles/components/_calculator.scss @@ -1,3 +1,7 @@ +@use "../globals/colors"; +@use "../globals/mixins"; +@use "../globals/variables"; + .calculator { .loading & { .content__wrapper-overflow & { @@ -11,80 +15,80 @@ padding-right: 25px; padding-bottom: 10px; - @include desktop { + @include mixins.desktop { margin-top: 25px; margin-bottom: 10px; padding-left: 30px; padding-right: 60px; } - @include tablet { + @include mixins.tablet { margin-top: 20px; margin-bottom: 10px; padding-right: 0px; width: 315px; } - @include mobile { + @include mixins.mobile { margin-top: 20px; margin-bottom: 10px; } - @include smallMobile { + @include mixins.smallMobile { margin-top: 15px; } &.border-checkout { - @include tablet { + @include mixins.tablet { width: auto; margin-bottom: 20px; - border: 1px solid $checkout-border; - background-color: $white; + border: 1px solid colors.$checkout-border; + background-color: colors.$white; padding: 20px 20px 20px 20px; border-radius: 12px; } - @include mobile { + @include mixins.mobile { width: auto; margin-top: 20px; margin-bottom: 20px; - border: 1px solid $checkout-border; - background-color: $white; + border: 1px solid colors.$checkout-border; + background-color: colors.$white; padding: 20px 20px 20px 20px; border-radius: 12px; } - @include smallMobile { + @include mixins.smallMobile { width: auto; margin-top: 20px; margin-bottom: 20px; - border: 1px solid $checkout-border; - background-color: $white; + border: 1px solid colors.$checkout-border; + background-color: colors.$white; padding: 20px 20px 20px 20px; border-radius: 12px; } } .checkout & { - @include tablet { + @include mixins.tablet { margin-bottom: 0px; } - @include mobile { + @include mixins.mobile { margin-bottom: 0px; } } .form { .title { - color: $text-main; + color: colors.$text-main; font-weight: 400; font-size: 18px; margin-top: 0; margin-bottom: 10px; - @include desktop { - @include lander { + @include mixins.desktop { + @include mixins.lander { margin-top: 20px; } } @@ -121,11 +125,11 @@ } .input { - font-family: $paypal-open; + font-family: variables.$paypal-open; background: white; - border: 1px solid $checkout-border; + border: 1px solid colors.$checkout-border; border-radius: 3px; - color: $text-main; + color: colors.$text-main; font-size: 18px; padding: 1.75rem 0.5rem 0.25rem; @@ -133,7 +137,7 @@ padding-top: 16px; padding-bottom: 16px; &::placeholder { - font-family: $paypal-open; + font-family: variables.$paypal-open; font-size: 14px; } } @@ -145,7 +149,7 @@ } &.v5Design { - @include tablet { + @include mixins.tablet { margin-right: 15px; } .input__label { @@ -156,7 +160,7 @@ width: 100%; padding-left: 12px; padding-bottom: 8px; - @include mobile { + @include mixins.mobile { padding-right: 0px; } } @@ -172,10 +176,10 @@ font-weight: 700; } label { - color: $v5-gray; + color: colors.$v5-gray; } input { - border: 1px solid $v5-gray; + border: 1px solid colors.$v5-gray; } // @include tablet { display: flex; @@ -202,11 +206,11 @@ } .calculator__error { - color: $text-main; + color: colors.$text-main; font-size: 14px; margin-top: 10px; - @include tablet { + @include mixins.tablet { display: flex; } @@ -216,11 +220,11 @@ align-items: flex-start; max-width: 317px; - @include desktop { + @include mixins.desktop { margin: auto; } - @include mobile { + @include mixins.mobile { margin: auto; } } @@ -241,29 +245,29 @@ } .finance-terms__disclaimer { - color: $gray; + color: colors.$gray; font-size: 14px; line-height: 1.5; - @include mobile { + @include mixins.mobile { margin-top: 0px; } - @include smallMobile { + @include mixins.smallMobile { margin-top: 0px; } &.v5Design { - color: $v5-gray; + color: colors.$v5-gray; padding-top: 16px; } } &.v5Design { text-align: left; - @include tablet { + @include mixins.tablet { width: 88%; } - @include mobile { + @include mixins.mobile { width: 100%; padding-right: 0px; } diff --git a/src/components/modal/v2/styles/components/_content.scss b/src/components/modal/v2/styles/components/_content.scss index 3b9757da13..7b8f4f0308 100644 --- a/src/components/modal/v2/styles/components/_content.scss +++ b/src/components/modal/v2/styles/components/_content.scss @@ -1,16 +1,20 @@ +@use "../globals/colors"; +@use "../globals/mixins"; +@use "../globals/variables"; + .content__container { position: relative; background: transparent; box-sizing: border-box; padding-top: 0; - background: $beige; + background: colors.$beige; padding-bottom: 1.5rem; flex-grow: 1; - margin-top: -$sticky-header-radius; + margin-top: -(variables.$sticky-header-radius); z-index: 1000; main { - color: $gray; + color: colors.$gray; padding-top: 0; height: 100%; box-sizing: border-box; @@ -25,8 +29,8 @@ flex-direction: column; padding: 0 20px; - @include lander { - @include mobile { + @include mixins.lander { + @include mixins.mobile { padding: 0px 20px 100px 20px; } } @@ -37,13 +41,13 @@ display: flex; flex-direction: column; margin: 0 -20px; - background: $white; + background: colors.$white; padding-top: 1.5rem; padding-left: 25px; padding-right: 25px; &.product-list { - @include tablet { + @include mixins.tablet { padding-left: 65px; padding-right: 65px; } @@ -56,20 +60,20 @@ &.v5Dot1Design { button { - background-color: $white; + background-color: colors.$white; } } } - @include lander { + @include mixins.lander { &.no-interest { - @include mobile { + @include mixins.mobile { padding-top: 0rem; } } } - @include desktop { + @include mixins.desktop { height: 100%; .content__col { @@ -79,7 +83,7 @@ } &.checkout { - background-color: $white; + background-color: colors.$white; } .content__col { @@ -87,13 +91,13 @@ display: flex; flex-direction: column; - @include mobile { + @include mixins.mobile { width: 100%; } &.collapsed { &:last-child { - @include desktop { + @include mixins.desktop { position: absolute; right: 0; } @@ -101,14 +105,14 @@ } &:first-child { - @include tablet { + @include mixins.tablet { align-items: center; width: 100%; } - @include lander { + @include mixins.lander { &.no-interest { - @include mobile { + @include mixins.mobile { padding-top: 1.5rem; } } @@ -116,13 +120,13 @@ } &:last-child { - @include tablet { + @include mixins.tablet { display: none; } - @include mobile { + @include mixins.mobile { display: none; } - @include smallMobile { + @include mixins.smallMobile { display: none; } } @@ -137,20 +141,20 @@ font-size: 14px; line-height: 20px; - @include desktop { + @include mixins.desktop { margin: 42px 30px 23px 30px; } - @include tablet { + @include mixins.tablet { margin: 42px 44px 20px 44px; } - @include mobile { + @include mixins.mobile { margin-top: 10px; } &.v5Design { - color: $v5-gray; + color: colors.$v5-gray; margin-top: 20px; &.DE { margin-top: auto; @@ -158,7 +162,7 @@ } &.checkout { - @include mobile { + @include mixins.mobile { margin-bottom: 60px; } } @@ -166,11 +170,11 @@ &.checkout { &.disclosure { - @include desktop { + @include mixins.desktop { margin: 0px 30px 23px 30px; } - @include tablet { + @include mixins.tablet { margin: 20px 10px 70px 10px; } } @@ -178,13 +182,13 @@ } &.v4Design { - background: $v4-gray; + background: colors.$v4-gray; } &.v5Design { - background: $v5-white; + background: colors.$v5-white; } &.checkout { - background-color: $white; + background-color: colors.$white; } } diff --git a/src/components/modal/v2/styles/components/_donut.scss b/src/components/modal/v2/styles/components/_donut.scss index ff68d0aa81..05e4b81fda 100644 --- a/src/components/modal/v2/styles/components/_donut.scss +++ b/src/components/modal/v2/styles/components/_donut.scss @@ -1,4 +1,6 @@ -@import '../globals/mixins'; +@use '../globals/mixins'; +@use "../globals/colors"; +@use "../globals/variables"; $webpage: 1640px; $green500: #388c00; @@ -13,7 +15,7 @@ $donut-text-v5: #545d68; flex-direction: column; align-items: center; - @include mobile { + @include mixins.mobile { width: 70px; } @@ -22,7 +24,7 @@ $donut-text-v5: #545d68; &.donut__qualifying_payment { svg { text { - color: $text-main; + color: colors.$text-main; transform: translate(1px, 3px); } } @@ -31,10 +33,10 @@ $donut-text-v5: #545d68; &:first-of-type { .donut__ { &payment { - font-family: $paypal-open; + font-family: variables.$paypal-open; } ×tamp { - font-family: $paypal-open; + font-family: variables.$paypal-open; } } } @@ -46,9 +48,9 @@ $donut-text-v5: #545d68; text { font-size: 0.5rem; line-height: 20px; - font-family: $paypal-open; + font-family: variables.$paypal-open; font-weight: 600; - color: $gray; + color: colors.$gray; } .donut__background { @@ -61,7 +63,7 @@ $donut-text-v5: #545d68; .donut__background__line { stroke: none; } - @include smallHeightMobile { + @include mixins.smallHeightMobile { max-width: 60px; } } @@ -82,8 +84,8 @@ $donut-text-v5: #545d68; } &.donut__payment { - font-family: $paypal-open; - color: $text-main; + font-family: variables.$paypal-open; + color: colors.$text-main; font-size: 0.9rem; margin-top: 0.3rem; @@ -101,10 +103,10 @@ $donut-text-v5: #545d68; } &.donut__timestamp { - color: $text-main; - font-family: $paypal-open; + color: colors.$text-main; + font-family: variables.$paypal-open; font-size: 0.9rem; - @include desktop { + @include mixins.desktop { line-height: 22px; } white-space: nowrap; @@ -125,12 +127,12 @@ $donut-text-v5: #545d68; } span.donut__timestamp_v5, span.donut__payment_v5 { - color: $text-main; + color: colors.$text-main; } } span.donut__timestamp_v5Dot1, span.donut__payment_v5Dot1 { - color: $v5-gray; + color: colors.$v5-gray; } .svg { display: flex; @@ -140,20 +142,20 @@ $donut-text-v5: #545d68; &::after { content: ''; flex-grow: 1; - border-top: 1px dashed $dark-gray; + border-top: 1px dashed colors.$dark-gray; width: 100%; max-width: 50px; transform: translateX((97%)); margin-top: -50%; margin-bottom: 50%; - @include smallHeightMobile { + @include mixins.smallHeightMobile { transform: translateX((100%)); } - @include mobile { + @include mixins.mobile { max-width: 45px; } - @include smallMobile { + @include mixins.smallMobile { max-width: 35px; } } @@ -173,7 +175,7 @@ $donut-text-v5: #545d68; &__3 { @extend .donut__single_payment_line; .svg { - @include mobile { + @include mixins.mobile { position: relative; } @@ -182,14 +184,14 @@ $donut-text-v5: #545d68; transform: translateX((100%)); margin-left: 50%; - @include smallHeightMobile { + @include mixins.smallHeightMobile { transform: translateX((75%)); } - @include mobile { + @include mixins.mobile { max-width: none; padding-left: 2px; } - @include smallMobile { + @include mixins.smallMobile { max-width: min(55px, calc(100vw * 0.3)); transform: translateX((57%)); } diff --git a/src/components/modal/v2/styles/components/_header.scss b/src/components/modal/v2/styles/components/_header.scss index ccd4d37041..685bdcef1a 100644 --- a/src/components/modal/v2/styles/components/_header.scss +++ b/src/components/modal/v2/styles/components/_header.scss @@ -1,47 +1,51 @@ +@use "../globals/colors"; +@use "../globals/mixins"; +@use "../globals/variables"; + .header { &__container { position: relative; - @include desktop { + @include mixins.desktop { padding-bottom: 30px; } - @include tablet { + @include mixins.tablet { padding-bottom: 40px; } - @include mobile { + @include mixins.mobile { padding-bottom: 40px; } } &__fixed-wrapper { - @include fixedWrapper; + @include mixins.fixedWrapper; z-index: 0; top: 0; overflow: hidden; - border-radius: $content-wrapper-border-radius $content-wrapper-border-radius 0 0; + border-radius: variables.$content-wrapper-border-radius variables.$content-wrapper-border-radius 0 0; &--front { z-index: 1; } - @include mobile { + @include mixins.mobile { border-radius: 0; } - @include apiIframe { + @include mixins.apiIframe { border-radius: 0; } - @include lander { + @include mixins.lander { border-radius: 0; } .v4Design { - background-color: $v4-gray; + background-color: colors.$v4-gray; } .v5Design { - background-color: $v5-white; + background-color: colors.$v5-white; } } @@ -49,17 +53,17 @@ overflow: hidden; height: 25rem; // Needs to be tall enough to seamlessly flow behind the main body content max-height: 85vh; // Prevent it from bleeding below on small height tablet views - background-color: $beige; + background-color: colors.$beige; // We have multiple backgrounds to give the appearance of // reserving space at the top of the modal when scrolling. // This requires having a portion of the background with a // higher z-index so that the content scrolls underneath &--sticky { - height: $sticky-header-height-tablet-desktop; + height: variables.$sticky-header-height-tablet-desktop; - @include mobile { - height: $sticky-header-height-mobile; + @include mixins.mobile { + height: variables.$sticky-header-height-mobile; } } @@ -70,29 +74,29 @@ -webkit-mask-image: linear-gradient( to bottom, black, - black $sticky-header-height-tablet-desktop, + black variables.$sticky-header-height-tablet-desktop, transparent 100px ); mask-image: linear-gradient( to bottom, black, - black $sticky-header-height-tablet-desktop, + black variables.$sticky-header-height-tablet-desktop, transparent 100px ); - @include mobile { + @include mixins.mobile { -webkit-mask-image: linear-gradient( to bottom, black, - black $sticky-header-height-mobile, + black variables.$sticky-header-height-mobile, transparent 100px ); - mask-image: linear-gradient(to bottom, black, black $sticky-header-height-mobile, transparent 100px); + mask-image: linear-gradient(to bottom, black, black variables.$sticky-header-height-mobile, transparent 100px); } } &.checkout { - background-color: $white; + background-color: colors.$white; } } @@ -108,10 +112,10 @@ position: sticky; top: 0; width: 100%; - flex: 0 0 $sticky-header-height-tablet-desktop; + flex: 0 0 variables.$sticky-header-height-tablet-desktop; - @include mobile { - flex: 0 0 $sticky-header-height-mobile; + @include mixins.mobile { + flex: 0 0 variables.$sticky-header-height-mobile; } .logo { @@ -121,19 +125,19 @@ transition: transform 0.2s ease-out; padding: 0 20px; - @include desktop { + @include mixins.desktop { padding: 0px; margin-left: 48px; } - @include tablet { + @include mixins.tablet { padding: 0px; margin-left: 56px; } &--scroll { transform: translate(-3rem, 0); - @include mobile { + @include mixins.mobile { transform: translate(0, 0); } } @@ -155,17 +159,17 @@ outline: -webkit-focus-ring-color solid 2px; } - @include desktop { + @include mixins.desktop { margin-left: auto; margin-right: 2px; } - @include tablet { + @include mixins.tablet { margin-left: auto; margin-right: 2px; } - @include mobile { + @include mixins.mobile { margin-top: 1px; margin-right: 2px; } @@ -175,11 +179,11 @@ width: 48px; pointer-events: none; - @include desktop { + @include mixins.desktop { margin: 0px; } - @include tablet { + @include mixins.tablet { margin: 0px; } @@ -210,7 +214,7 @@ margin: 10px auto 10px 10px; padding-left: 0px; - @include mobile { + @include mixins.mobile { margin-left: 15px; } } @@ -221,16 +225,16 @@ padding-top: 2rem; position: relative; - @include desktop { + @include mixins.desktop { padding-bottom: 40px; } - @include tablet { + @include mixins.tablet { width: 100%; padding-bottom: 40px; } .checkout & { - @include tablet { + @include mixins.tablet { padding-bottom: 44px; } } @@ -241,19 +245,19 @@ bottom: 36px; pointer-events: none; - @include desktop { + @include mixins.desktop { &.background-mobile { display: none; } } - @include tablet { + @include mixins.tablet { &.background-mobile { display: none; } } - @include mobile { + @include mixins.mobile { &.background-desktop { display: none; } @@ -265,11 +269,11 @@ font-weight: 400; line-height: 36px; text-align: left; - color: $text-main; + color: colors.$text-main; margin-left: 52px; margin-top: 10px; - @include desktop { + @include mixins.desktop { margin-bottom: 10px; br { @@ -277,9 +281,9 @@ } } - @include tablet { + @include mixins.tablet { margin-left: 62px; - @include lander { + @include mixins.lander { max-width: 100%; } @@ -291,32 +295,32 @@ } } - @include mobile { + @include mixins.mobile { margin-bottom: 5px; margin-left: 22px; max-width: 84%; } - @include smallMobile { + @include mixins.smallMobile { font-size: 1.7rem; max-width: 81%; } &.headline-de { - @include tablet { + @include mixins.tablet { margin-right: 102px; } - @include mobile { + @include mixins.mobile { line-height: 30px; margin-right: 50px; margin-left: 0px; padding: 10px 25px 0px; } - @include apiIframe { + @include mixins.apiIframe { max-width: 500px; - @include mobile { + @include mixins.mobile { max-width: 279px; } } @@ -324,19 +328,19 @@ &.headline-gb-preapproved { max-width: 50%; - @include mobile { + @include mixins.mobile { max-width: 75%; } } &.headline-us-preapproved { - @include smallMobile { + @include mixins.smallMobile { max-width: 75%; } } &.v5Design { - font-family: $paypal-pro; + font-family: variables.$paypal-pro; font-weight: bold; font-size: 32px; line-height: 36px; @@ -348,28 +352,28 @@ font-weight: 400; line-height: 24px; text-align: left; - color: $text-main; + color: colors.$text-main; margin: 0px; - @include desktop { + @include mixins.desktop { margin-left: 52px; margin-top: 0px; margin-bottom: 80px; } - @include tablet { + @include mixins.tablet { max-width: 380px; margin-left: 62px; margin-bottom: 60px; } - @include mobile { + @include mixins.mobile { max-width: 75%; padding: 10px 22px 100px; line-height: 20px; } - @include smallMobile { + @include mixins.smallMobile { max-width: 67%; } @@ -380,7 +384,7 @@ &.v5Design { max-width: 503px; margin-bottom: 0px; - @include mobile { + @include mixins.mobile { padding: 10px 22px 40px; } &.DE { @@ -392,7 +396,7 @@ margin-left: 42px; padding-right: 10px; - @include mobile { + @include mixins.mobile { margin-left: 0px; } } @@ -413,14 +417,14 @@ padding: 2px 8px; margin: 0px 0px -20px 10px; - @include mobile { + @include mixins.mobile { margin: 10px 0px -10px 10px; } } } &.checkout { - background-color: $white; + background-color: colors.$white; // logo icons svg { @@ -428,18 +432,18 @@ bottom: 0px; right: -20px; - @include mobile { + @include mixins.mobile { right: -22px; } } h2 { - font-family: $paypal-pro; + font-family: variables.$paypal-pro; font-weight: bold; margin-bottom: 5px; margin-top: 20px; - @include tablet { + @include mixins.tablet { margin-left: 20px; } } @@ -448,15 +452,15 @@ max-width: 400px; margin-top: -1px; - @include desktop { + @include mixins.desktop { margin-bottom: 0px; } - @include tablet { + @include mixins.tablet { margin-bottom: 10px; margin-left: 20px; padding: 0px 10px 0px 0px; } - @include mobile { + @include mixins.mobile { padding: 10px 22px 50px; } } diff --git a/src/components/modal/v2/styles/components/_inline-links.scss b/src/components/modal/v2/styles/components/_inline-links.scss index 67fc7ca85d..92e294708e 100644 --- a/src/components/modal/v2/styles/components/_inline-links.scss +++ b/src/components/modal/v2/styles/components/_inline-links.scss @@ -1,9 +1,12 @@ +@use "../globals/colors"; +@use "../globals/variables"; + // inline-link, Singular; the component InlineLinks provides multiple links in a wall of text, // but the class is applied to only one element .inline-link { text-decoration: underline; - color: $light-blue; - font-family: $paypal-open; + color: colors.$light-blue; + font-family: variables.$paypal-open; font-weight: 600; &::before { diff --git a/src/components/modal/v2/styles/components/_instructions.scss b/src/components/modal/v2/styles/components/_instructions.scss index b0b2feda1a..30bafb237e 100644 --- a/src/components/modal/v2/styles/components/_instructions.scss +++ b/src/components/modal/v2/styles/components/_instructions.scss @@ -1,26 +1,29 @@ +@use "../globals/colors"; +@use "../globals/mixins"; + .instructions { text-align: left; box-sizing: border-box; - @include desktop { + @include mixins.desktop { padding-left: 30px; } - @include tablet { + @include mixins.tablet { width: 100%; justify-content: center; } ol { - @include desktop { + @include mixins.desktop { padding: 0px; } - @include mobile { + @include mixins.mobile { padding: 0px; } &.ppc { - @include mobile { + @include mixins.mobile { margin-top: -11px; margin-bottom: 0px; } @@ -28,7 +31,7 @@ } li { - color: $text-main; + color: colors.$text-main; list-style: none; line-height: 24px; font-size: 18px; @@ -39,7 +42,7 @@ font-weight: 700; line-height: 24px; text-align: left; - color: $text-main; + color: colors.$text-main; margin-left: 42px; margin-top: 10px; @@ -47,7 +50,7 @@ margin-top: 22px; } - @include desktop { + @include mixins.desktop { margin-bottom: 10px; br { @@ -55,9 +58,9 @@ } } - @include tablet { + @include mixins.tablet { margin-left: 32px; - @include lander { + @include mixins.lander { max-width: 100%; } @@ -66,13 +69,13 @@ } } - @include mobile { + @include mixins.mobile { margin-bottom: 5px; margin-left: 0px; max-width: 84%; } - @include smallMobile { + @include mixins.smallMobile { max-width: 81%; } } @@ -81,25 +84,25 @@ font-weight: 400; line-height: 20px; text-align: left; - color: $text-main; + color: colors.$text-main; margin: 0px; - @include desktop { + @include mixins.desktop { margin-top: 0px; margin-left: 32px; margin-bottom: 30px; } - @include tablet { + @include mixins.tablet { margin-top: 10px; margin-left: 32px; margin-bottom: 10px; } - @include mobile { + @include mixins.mobile { padding-bottom: 10px; } - @include smallMobile { + @include mixins.smallMobile { font-size: 1rem; } } @@ -109,10 +112,10 @@ &:last-child { li { - @include tablet { + @include mixins.tablet { padding-bottom: 0px; } - @include mobile { + @include mixins.mobile { padding-bottom: 0px; } } @@ -133,7 +136,7 @@ .instructions__bullet { font-size: 18px; - color: $text-main; + color: colors.$text-main; margin-right: 0.7rem; span { @@ -153,33 +156,33 @@ margin-top: 5px; } - @include lander { - @include tablet { + @include mixins.lander { + @include mixins.tablet { margin: 0px; } - @include mobile { + @include mixins.mobile { margin: 0px; } } &__border-checkout { - @include tablet { - border: 1px solid $checkout-border; - background-color: $white; + @include mixins.tablet { + border: 1px solid colors.$checkout-border; + background-color: colors.$white; padding: 6px 16px 6px 16px; border-radius: 12px; } - @include mobile { - border: 1px solid $checkout-border; - background-color: $white; + @include mixins.mobile { + border: 1px solid colors.$checkout-border; + background-color: colors.$white; padding: 6px 16px 6px 16px; border-radius: 12px; } - @include smallMobile { - border: 1px solid $checkout-border; - background-color: $white; + @include mixins.smallMobile { + border: 1px solid colors.$checkout-border; + background-color: colors.$white; padding: 6px 16px 6px 16px; border-radius: 12px; } @@ -199,33 +202,33 @@ } ol { - @include tablet { + @include mixins.tablet { width: 88%; } } .instructions__border-checkout { ol { - @include tablet { + @include mixins.tablet { padding-left: 20px; } } h2 { - @include tablet { + @include mixins.tablet { margin-left: 20px; } } .checkout & { ol { - @include tablet { + @include mixins.tablet { padding-left: 0px; } } h2 { - @include tablet { + @include mixins.tablet { margin-left: 0px; } } @@ -235,13 +238,13 @@ &.checkout { h2 { - @include tablet { + @include mixins.tablet { margin-left: 0px; } } ol { - @include tablet { + @include mixins.tablet { padding-left: 5px; } } diff --git a/src/components/modal/v2/styles/components/_loading-shimmer.scss b/src/components/modal/v2/styles/components/_loading-shimmer.scss index f68772c576..1897ee5470 100644 --- a/src/components/modal/v2/styles/components/_loading-shimmer.scss +++ b/src/components/modal/v2/styles/components/_loading-shimmer.scss @@ -1,3 +1,5 @@ +@use "../globals/mixins"; + @keyframes shimmer { 0% { background-position: -2000px 0; @@ -20,12 +22,12 @@ margin-top: 25px; margin-bottom: 25px; - @include mobile { + @include mixins.mobile { margin-top: 20px; margin-bottom: 5px; } } - @include tablet { + @include mixins.tablet { &:first-child { margin-top: 35px; } @@ -77,7 +79,7 @@ &.shimmer { margin-top: 25px; - @include mobile { + @include mixins.mobile { margin-top: 8px; } } diff --git a/src/components/modal/v2/styles/components/_modal-frame.scss b/src/components/modal/v2/styles/components/_modal-frame.scss index e2e7be0811..1d03158f25 100644 --- a/src/components/modal/v2/styles/components/_modal-frame.scss +++ b/src/components/modal/v2/styles/components/_modal-frame.scss @@ -1,3 +1,5 @@ +@use "../globals/mixins"; + // Windows scrollbar offset hack .modal-wrapper { display: flex; @@ -7,8 +9,8 @@ width: 100%; height: 100%; - @include lander { - @include mobile { + @include mixins.lander { + @include mixins.mobile { position: fixed; } } diff --git a/src/components/modal/v2/styles/components/_offer-accordion.scss b/src/components/modal/v2/styles/components/_offer-accordion.scss index 10af5f0247..52d0577850 100644 --- a/src/components/modal/v2/styles/components/_offer-accordion.scss +++ b/src/components/modal/v2/styles/components/_offer-accordion.scss @@ -1,15 +1,17 @@ -@import '../globals/mixins'; +@use '../globals/mixins'; +@use "../globals/colors"; +@use "../globals/variables"; .accordion { &__container { - border: 1px solid $light-gray; + border: 1px solid colors.$light-gray; border-radius: 12px; font-size: 13px; width: 311px; - color: $text-main; + color: colors.$text-main; margin-bottom: 10px; - @include mobile { + @include mixins.mobile { width: auto; margin-right: -25px; } @@ -21,7 +23,7 @@ margin-top: 35px; } &.active { - outline: 3px solid $light-blue; + outline: 3px solid colors.$light-blue; border-color: transparent; } &.v5Design { @@ -39,8 +41,8 @@ &.open { &.v5Design { - background-color: $white; - outline: 3px solid $black; + background-color: colors.$white; + outline: 3px solid colors.$black; border-color: transparent; } &.v5Dot1Design { @@ -75,9 +77,9 @@ &__header-container { - font-family: $paypal-open; + font-family: variables.$paypal-open; font-size: 18px; - color: $text-main; + color: colors.$text-main; display: flex; justify-content: space-between; padding: 25px 18px 22px 13px; @@ -108,7 +110,7 @@ transition: height 0.2s linear; margin-bottom: inherit; - @include smallMobile { + @include mixins.smallMobile { min-height: 190px; } } @@ -122,13 +124,13 @@ padding-top: 0px; .accordion__offer-field-title { - color: $text-main; // Default black color for all countries + color: colors.$text-main; // Default black color for all countries } } } .accordion__row .accordion__offer-apr-disclaimer { - color: $gray; + color: colors.$gray; line-height: 1.3; padding-bottom: 9px; } @@ -137,7 +139,7 @@ // Only DE gets the blue color &__container.DE { .accordion__collapsible .accordion__row:first-child .accordion__offer-field-title { - color: $light-blue; + color: colors.$light-blue; } } } diff --git a/src/components/modal/v2/styles/components/_offer-card.scss b/src/components/modal/v2/styles/components/_offer-card.scss index 680959878e..21fcf6cfac 100644 --- a/src/components/modal/v2/styles/components/_offer-card.scss +++ b/src/components/modal/v2/styles/components/_offer-card.scss @@ -1,6 +1,10 @@ +@use "../globals/colors"; +@use "../globals/mixins"; +@use "../globals/variables"; + strong { - font-family: $paypal-open; - color: $text-main; + font-family: variables.$paypal-open; + color: colors.$text-main; } .offer { @@ -11,7 +15,7 @@ strong { &:not(:last-child)::after { content: ''; - border-bottom: 1px solid $offer-border-gray; + border-bottom: 1px solid colors.$offer-border-gray; display: block; margin-top: 20px; margin-bottom: 20px; @@ -20,7 +24,7 @@ strong { margin-top: 15px; } - @include mobile { + @include mixins.mobile { margin-top: 20px; margin-bottom: 5px; } @@ -32,13 +36,13 @@ strong { } } - @include desktop { + @include mixins.desktop { &:last-child { margin-bottom: 20px; } } - @include tablet { + @include mixins.tablet { &:first-child { margin-top: 35px; @@ -55,7 +59,7 @@ strong { } } - @include mobile { + @include mixins.mobile { &:last-child { margin-bottom: 20px; @@ -72,7 +76,7 @@ strong { padding-bottom: 10px; } - @include mobile { + @include mixins.mobile { &:first-child { padding-bottom: 10px; } @@ -84,16 +88,16 @@ strong { } &__field-header { font-size: 18px; - @include mobile { + @include mixins.mobile { font-size: 18px; margin-top: 16px; } - @include smallMobile { + @include mixins.smallMobile { font-size: 1rem; } &.v5Dot1Design { - color: $text-main !important; + color: colors.$text-main !important; font-weight: bold !important; } @@ -114,45 +118,45 @@ strong { &__field-title { display: flex; font-size: 18px; - color: $gray; + color: colors.$gray; margin: 0px; - @include smallMobile { + @include mixins.smallMobile { font-size: 18px; } &:is(strong) { - color: $text-main; + color: colors.$text-main; } &.v5Dot1Design { - color: $text-main !important; + color: colors.$text-main !important; font-weight: bold !important; } .checkout & { font-size: 16px; & :last-of-type { - color: $text-main !important; + color: colors.$text-main !important; } } } &__field-value { font-size: 18px; - color: $gray; + color: colors.$gray; margin: 0px; - @include mobile { + @include mixins.mobile { font-size: 18px; } - @include smallMobile { + @include mixins.smallMobile { font-size: 0.9rem; } &:is(strong) { - color: $text-main; + color: colors.$text-main; } &.v5Dot1Design { - color: $text-main !important; + color: colors.$text-main !important; font-weight: bold !important; } diff --git a/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss b/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss index 334bd6c246..ad5decdb7e 100644 --- a/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss +++ b/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss @@ -1,27 +1,30 @@ +@use "../globals/colors"; +@use "../globals/mixins"; + .preapproval-disclaimer { text-align: left; box-sizing: border-box; - @include desktop { + @include mixins.desktop { padding-left: 30px; } - @include tablet { + @include mixins.tablet { width: 100%; justify-content: center; } ul { list-style: disc; - @include desktop { + @include mixins.desktop { padding: 0px; } - @include mobile { + @include mixins.mobile { padding: 0px; } &.ppc { - @include mobile { + @include mixins.mobile { margin-top: -11px; margin-bottom: 0px; } @@ -32,10 +35,10 @@ li { margin-left: 0.6rem; - @include desktop { + @include mixins.desktop { margin-left: 0.6rem; } - @include mobile { + @include mixins.mobile { margin-left: 1.2rem; } @@ -46,7 +49,7 @@ } li { - color: $black; + color: colors.$black; line-height: 20px; font-size: 14px; padding-bottom: 16px; @@ -56,11 +59,11 @@ font-weight: 700; line-height: 24px; text-align: left; - color: $text-main; + color: colors.$text-main; margin-left: 42px; margin-top: 22px; - @include desktop { + @include mixins.desktop { margin-bottom: 10px; br { @@ -68,9 +71,9 @@ } } - @include tablet { + @include mixins.tablet { margin-left: 32px; - @include lander { + @include mixins.lander { max-width: 100%; } @@ -79,12 +82,12 @@ } } - @include mobile { + @include mixins.mobile { margin-bottom: 5px; margin-left: 0px; } - @include smallMobile { + @include mixins.smallMobile { font-size: 1rem; } } @@ -93,25 +96,25 @@ line-height: 20px; font-weight: 400; text-align: left; - color: $dark-gray; + color: colors.$dark-gray; margin: 0px; - @include desktop { + @include mixins.desktop { margin-top: 0px; margin-left: 32px; margin-bottom: 30px; } - @include tablet { + @include mixins.tablet { margin-left: 32px; margin-bottom: 30px; } - @include mobile { + @include mixins.mobile { padding-bottom: 20px; } - @include smallMobile { + @include mixins.smallMobile { max-width: 67%; } @@ -120,11 +123,11 @@ } } - @include lander { - @include tablet { + @include mixins.lander { + @include mixins.tablet { margin: 0px; } - @include mobile { + @include mixins.mobile { margin: 0px; } } @@ -137,7 +140,7 @@ padding-left: 5px; } - border: 1px solid $checkout-border; + border: 1px solid colors.$checkout-border; border-radius: 12px; margin-bottom: 1rem; padding: 6px 16px 6px 16px; diff --git a/src/components/modal/v2/styles/components/_product-list-link.scss b/src/components/modal/v2/styles/components/_product-list-link.scss index b6617a7041..d50b3adf4b 100644 --- a/src/components/modal/v2/styles/components/_product-list-link.scss +++ b/src/components/modal/v2/styles/components/_product-list-link.scss @@ -1,21 +1,25 @@ +@use "../globals/colors"; +@use "../globals/mixins"; +@use "../globals/variables"; + .product-list-link { display: flex; border: none; background: transparent; min-width: 315px; text-decoration: underline; - color: $light-blue; - font-family: $paypal-open; + color: colors.$light-blue; + font-family: variables.$paypal-open; font-size: 14px; font-weight: 600; cursor: pointer; padding: 0; - @include desktop { + @include mixins.desktop { margin: 0px 0px 20px 30px; } - @include tablet { + @include mixins.tablet { margin: 0px 44px 20px 44px; .checkout & { @@ -23,7 +27,7 @@ } } - @include mobile { + @include mixins.mobile { margin: 20px 0px 20px 0px; .checkout & { @@ -36,7 +40,7 @@ } &.de { - @include mobile { + @include mixins.mobile { margin-top: 0px; } } diff --git a/src/components/modal/v2/styles/components/_tile.scss b/src/components/modal/v2/styles/components/_tile.scss index a9f77d0307..9c9645c473 100644 --- a/src/components/modal/v2/styles/components/_tile.scss +++ b/src/components/modal/v2/styles/components/_tile.scss @@ -1,5 +1,6 @@ -@import '../globals/colors'; -@import '../globals/mixins'; +@use '../globals/colors'; +@use '../globals/mixins'; +@use "../globals/variables"; .tile { // normalize button before styling it @@ -17,7 +18,7 @@ padding: 12px 12px 15px 20px; border-radius: 12px; margin-bottom: 31px; - background: $white; + background: colors.$white; box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.04), 0px 1px 12px rgba(0, 0, 0, 0.08); cursor: pointer; @@ -35,13 +36,13 @@ margin-bottom: 16px; } - @include mobile { + @include mixins.mobile { height: 119px; min-width: 295px; max-width: 100%; } - @include smallMobile { + @include mixins.smallMobile { min-width: auto; } @@ -50,31 +51,31 @@ .tile__col { .tile__header { - font-family: $paypal-pro; + font-family: variables.$paypal-pro; display: flex; font-size: 18px; font-weight: 600; line-height: 24px; align-items: center; - color: $text-main; + color: colors.$text-main; } .tile__body { - font-family: $paypal-open; + font-family: variables.$paypal-open; margin-top: 5px; font-size: 18px; font-weight: 400; line-height: 24px; display: flex; align-items: center; - color: $text-main; + color: colors.$text-main; &.v5Design { font-size: 100%; } &.v5Dot1Design { - color: $v5-gray; + color: colors.$v5-gray; } } } diff --git a/src/components/modal/v2/styles/globals/_common.scss b/src/components/modal/v2/styles/globals/_common.scss index 9d5fbe9366..dd054969d4 100644 --- a/src/components/modal/v2/styles/globals/_common.scss +++ b/src/components/modal/v2/styles/globals/_common.scss @@ -1,3 +1,6 @@ +@use "colors"; +@use "variables"; + html, body { height: 100% !important; @@ -11,30 +14,30 @@ html { &.lander { // Overscroll background color since we use an SVG pattern // for the core background which moves with the overscroll - background: $lander-beige; + background: colors.$lander-beige; } &.v4Design { - background: $v4-lander-gray; + background: colors.$v4-lander-gray; .content__wrapper-overflow { - background-color: $v4-gray; + background-color: colors.$v4-gray; } } &.v5Design { - background: $v5-lander-gray; + background: colors.$v5-lander-gray; .content__wrapper-overflow { - background-color: $v5-white; + background-color: colors.$v5-white; } } } body { margin: 0; - font-family: $paypal-open; - color: $text-main; + font-family: variables.$paypal-open; + color: colors.$text-main; font-weight: 400; font-size: 16px; } diff --git a/src/components/modal/v2/styles/globals/_mixins.scss b/src/components/modal/v2/styles/globals/_mixins.scss index c23837fc77..8c2e9562be 100644 --- a/src/components/modal/v2/styles/globals/_mixins.scss +++ b/src/components/modal/v2/styles/globals/_mixins.scss @@ -1,3 +1,5 @@ +@use "variables"; + // TODO: until PPUI has images for the universal modals, we will be using the tablet view for desktops. @mixin desktop { @media (min-width: 99999999px) /* min-width: 1366px */ { @@ -54,15 +56,15 @@ pointer-events: none; @include tablet { - max-width: $content-wrapper-max-width-tablet; + max-width: variables.$content-wrapper-max-width-tablet; } @include desktop { - max-width: $content-wrapper-max-width-desktop; + max-width: variables.$content-wrapper-max-width-desktop; } @include apiIframe { - max-width: $content-wrapper-max-width-api-iframe; + max-width: variables.$content-wrapper-max-width-api-iframe; } :first-child { diff --git a/src/components/modal/v2/styles/index.scss b/src/components/modal/v2/styles/index.scss index f130002cc2..ce447c699d 100644 --- a/src/components/modal/v2/styles/index.scss +++ b/src/components/modal/v2/styles/index.scss @@ -1,24 +1,24 @@ // Global stylesheets -@import './globals/colors'; -@import './globals/variables'; -@import './globals/fonts'; -@import './globals/mixins'; -@import './globals/common'; +@use 'globals/colors'; +@use 'globals/variables'; +@use 'globals/fonts'; +@use 'globals/mixins'; +@use 'globals/common'; // Component stylesheets -@import './components/button'; -@import './components/calculator'; -@import './components/body-content'; -@import './components/content'; -@import './components/header'; -@import './components/instructions'; -@import './components/preapproval-disclaimer'; -@import './components/inline-links'; -@import './components/loading-shimmer'; -@import './components/modal-frame'; -@import './components/offer-card'; -@import './components/overlay'; -@import './components/product-list-link'; -@import './components/donut'; -@import './components/tile'; -@import './components/offer-accordion'; +@use 'components/button'; +@use 'components/calculator'; +@use 'components/body-content'; +@use 'components/content'; +@use 'components/header'; +@use 'components/instructions'; +@use 'components/preapproval-disclaimer'; +@use 'components/inline-links'; +@use 'components/loading-shimmer'; +@use 'components/modal-frame'; +@use 'components/offer-card'; +@use 'components/overlay'; +@use 'components/product-list-link'; +@use 'components/donut'; +@use 'components/tile'; +@use 'components/offer-accordion';