diff --git a/public/css/hop-styling.css b/public/css/hop-styling.css index ded3578c8..1f0b0ddc2 100644 --- a/public/css/hop-styling.css +++ b/public/css/hop-styling.css @@ -15,6 +15,7 @@ body .validation-info { } body .italicSmall { font-style: normal; + font-size: 14px; } body span { line-height: 24px; @@ -27,7 +28,7 @@ body .form-group { display: flex; flex-direction: column; } -body h2 { +body .headerlinecontainer .headerline1 { font-size: 20px; line-height: 32px; font-weight: 400; @@ -76,12 +77,12 @@ body .creditCardSpecific div { body .creditCardSpecific div .headerlinecontainer { padding: 0; } -body .creditCardSpecific div .headerlinecontainer .headerline5v2 { - display: none; -} body .creditCardSpecific div label { font-weight: 500; } +body .creditCardSpecific div:first-child { + display: none; +} body .creditCardSpecific #infoRow2 { margin-bottom: 0; } @@ -91,7 +92,7 @@ body #cardExpirationContainer { justify-content: space-between; padding: 0; } -@media (min-width: 368px) { +@media (min-width: 400px) { body #cardExpirationContainer { flex-direction: row; } @@ -116,7 +117,6 @@ body .optional-label:after { } body .buttonContainer { height: 48px; - margin-top: 36px; } body .buttonContainer button { position: relative; diff --git a/public/css/hop-styling.scss b/public/css/hop-styling.scss index 81b798b78..0e646a591 100644 --- a/public/css/hop-styling.scss +++ b/public/css/hop-styling.scss @@ -16,6 +16,7 @@ body { .italicSmall { font-style: normal; + font-size: 14px; } span { @@ -32,11 +33,13 @@ body { flex-direction: column; } - h2 { - font-size: 20px; - line-height: 32px; - font-weight: 400; - margin: 24px 0; + .headerlinecontainer { + .headerline1 { + font-size: 20px; + line-height: 32px; + font-weight: 400; + margin: 24px 0; + } } input, @@ -86,13 +89,13 @@ body { padding: 8px 0; .headerlinecontainer { padding: 0; - .headerline5v2 { - display: none; - } } label { font-weight: 500; } + &:first-child { + display: none; + } } #infoRow2 { margin-bottom: 0; @@ -104,7 +107,7 @@ body { flex-direction: column; justify-content: space-between; padding: 0; - @media (min-width: 368px) { + @media (min-width: 400px) { flex-direction: row; .card_expirationYear, .card_expirationMonth { @@ -132,7 +135,6 @@ body { .buttonContainer { height: 48px; - margin-top: 36px; button { position: relative; background: linear-gradient(270deg, #1574a1 0%, #003d58 100%); diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue index 2d7b1248e..b8aee6a99 100644 --- a/src/layouts/payment/payment.vue +++ b/src/layouts/payment/payment.vue @@ -20,14 +20,12 @@ scrolling="no"> -