diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index ba441329c..da2f3ef22 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -18,7 +18,7 @@ body .validation-info { display: none; } body .italicSmall { - font-style: normal; + font-style: italic; font-size: 14px; } body span { @@ -274,7 +274,7 @@ body .cc-error-container #alert-message { #fmg-checkout-shared #other-payments-container label span.paymentOptionText { margin: auto 0; padding-left: 0; - font-weight: 400; + font-weight: 600; } #fmg-checkout-shared #other-payments-container #afterpayParentLink label > span:first-of-type { width: 100%; @@ -297,7 +297,7 @@ body .cc-error-container #alert-message { text-align: right; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .paymentSelection #creditCardImages > img { - width: 20%; + width: 12%; } #fmg-checkout-shared #other-payments-container #creditCardParentDiv .creditCardSpecific { padding: 0 2%; @@ -309,11 +309,13 @@ body .cc-error-container #alert-message { margin-top: 24px; margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } #fmg-checkout-shared #other-payments-container .disclaimerContainerv2 { margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } @media only screen and (max-device-width: 767px) { diff --git a/public/scss/hop-styling.scss b/public/scss/hop-styling.scss index cfd2c9727..d3afaf985 100644 --- a/public/scss/hop-styling.scss +++ b/public/scss/hop-styling.scss @@ -20,7 +20,7 @@ body { } .italicSmall { - font-style: normal; + font-style: italic; font-size: 14px; } @@ -332,7 +332,7 @@ body { &.paymentOptionText { margin: auto 0; padding-left: 0; - font-weight: 400; + font-weight: 600; } } } @@ -372,7 +372,7 @@ body { text-align: right; > img { - width: 20%; + width: 12%; } } } @@ -390,12 +390,14 @@ body { margin-top: 24px; margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } .disclaimerContainerv2 { margin-bottom: 24px; font-size: 14px; + font-weight: 600; color: #525656; } } diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index b11c5a9af..20a7b9624 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -4,7 +4,7 @@
-
+
+ +
+ + + + +
+ +
+
-
- - - -
- -
- -
- .hop-iframe { position: relative; - min-height: 650px; width: 100%; + min-height: 650px; border: 0 none; + + @include media-breakpoint-down(lg) { + min-height: 1688px; + } } #pageLoadingModal { background-color: red; } +#card-container { + display: flex; + & > iframe { + flex-basis: 55%; + margin-right: 9%; + } + & > #cart-container { + flex-basis: 36%; + } + + @include media-breakpoint-down(lg) { + flex-direction: column; + & > iframe { + flex-basis: 100%; + margin-right: 0; + } + & > #cart-container { + flex-basis: 100%; + + & > button#submit-payment { + display: none; + } + } + } +} .payment-method-question { - padding: 0 1.5rem; - .question-text span { - text-align: left; + padding: 0; + + & .list-button-content { + justify-content: center; } }