diff --git a/src/components/modal/v2/styles/components/_header.scss b/src/components/modal/v2/styles/components/_header.scss index 70c78e6e28..dabe90c3eb 100644 --- a/src/components/modal/v2/styles/components/_header.scss +++ b/src/components/modal/v2/styles/components/_header.scss @@ -1,6 +1,6 @@ -@use "../globals/colors"; -@use "../globals/mixins"; -@use "../globals/variables"; +@use '../globals/colors'; +@use '../globals/mixins'; +@use '../globals/variables'; .header { &__container { @@ -91,7 +91,12 @@ black variables.$sticky-header-height-mobile, transparent 100px ); - mask-image: linear-gradient(to bottom, black, black variables.$sticky-header-height-mobile, transparent 100px); + mask-image: linear-gradient( + to bottom, + black, + black variables.$sticky-header-height-mobile, + transparent 100px + ); } } @@ -328,7 +333,7 @@ &.headline-gb-preapproved { max-width: 70%; - @include @include mixins.mobile { + @include mixins.mobile { max-width: 75%; } } @@ -420,23 +425,23 @@ @include mixins.mobile { margin: 3px 0px -50px -130px; } - @include smallMobile { + @include mixins.smallMobile { margin: 3px 0px -50px -60px; } - @include lander { + @include mixins.lander { margin: 30px 0px -50px -70px; - @include mobile { + @include mixins.mobile { margin: 5px 0px -50px -130px; } - @include smallMobile { + @include mixins.smallMobile { margin: 5px 0px -50px -60px; } + } } } - } &.checkout { background-color: colors.$white; diff --git a/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss b/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss index 7c9574050c..bddbbbe2d1 100644 --- a/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss +++ b/src/components/modal/v2/styles/components/_preapproval-disclaimer.scss @@ -1,5 +1,5 @@ -@use "../globals/colors"; -@use "../globals/mixins"; +@use '../globals/colors'; +@use '../globals/mixins'; .preapproval-disclaimer { text-align: left; @@ -144,11 +144,11 @@ border-radius: 12px; margin-bottom: 1rem; padding: 6px 16px 6px 16px; - @include lander { + @include mixins.lander { width: 430px; margin-bottom: 0; - @include mobile { + @include mixins.mobile { width: auto; } } @@ -156,7 +156,7 @@ &__privacy { font-size: 14px; line-height: 16px; - color: $black; + color: colors.$black; margin-top: 12px; margin-bottom: 20px; diff --git a/src/components/modal/v2/styles/globals/_mixins.scss b/src/components/modal/v2/styles/globals/_mixins.scss index 8c2e9562be..5ea932e701 100644 --- a/src/components/modal/v2/styles/globals/_mixins.scss +++ b/src/components/modal/v2/styles/globals/_mixins.scss @@ -1,4 +1,4 @@ -@use "variables"; +@use 'variables'; // TODO: until PPUI has images for the universal modals, we will be using the tablet view for desktops. @mixin desktop {