From 6f1bc31a816a5d161d97b06b522838edf83d9ebf Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sun, 18 Dec 2022 12:36:33 -0300 Subject: [PATCH] =?UTF-8?q?feat(autenticacao):=20Adapta=20a=20ultima=20p?= =?UTF-8?q?=C3=A1gina=20de=20pagamento=20para=20o=20layout=20do=20figma?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-autenticacao.scss | 177 +++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 4 + 2 files changed, 151 insertions(+), 30 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 0743781..093744a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -144,12 +144,29 @@ } } + .client-profile-data { + .accordion-heading { + span { + span { + font-size: 0; + &::before { + content: "Identificação"; + font-family: $font-family-secundary; + font-weight: 400; + font-size: 16px; + line-height: 19px; + } + } + } + } + } + .shipping-data, .payment-data, .client-profile-data { .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; + border-radius: 8px; font-family: $font-family; padding: 16px; @@ -160,13 +177,19 @@ padding: 0; i::before { + display: none; fill: #303030; } } a { + background: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png") + no-repeat center; align-items: center; - background-color: #303030; + width: 30px; + height: 30px; + z-index: 6; + // background-color: #303030; border-radius: 8px; border: none; color: $color-white; @@ -183,27 +206,43 @@ .client-notice { color: $color-black; + font-size: 0; + } + + #is-corporate-client { + font-size: 0; } p { label { - color: $color-black; - font-weight: 500; + font-family: $font-family; + color: $color-gray2; + font-weight: 400; + font-size: 14px; + line-height: 19px; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray8; + border-radius: 5px; + // height: 42px; box-shadow: none; } + #client-phone, + #client-document { + height: 44px; + } + .help.error { color: red; } } .box-client-info-pj { + display: none; + .link a#is-corporate-client, .link a#not-corporate-client { color: $color-black; @@ -218,11 +257,17 @@ button.submit { border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; + border-radius: 8px; + width: 100%; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + background: $color-blue2; + margin-top: 45px; outline: none; transition: all 0.2s linear; + cursor: pointer; &:hover { background: lighten($color-black, 5); @@ -235,22 +280,34 @@ /* Shipping configurations */ + .ship-postalCode { + input { + width: 95% !important; + max-width: 95% !important; + height: 45px; + } + } .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: $color-black; + // display: flex; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + color: $color-gray2; + font-style: normal; + font-weight: 700; font-size: 14px; - font-weight: 500; + line-height: 19px; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-gray8; + border-radius: 8px; label { background-color: $color-white; @@ -259,16 +316,19 @@ padding: 8px 12px; svg path { - fill: #d8c8ac; + // fill: #d8c8ac; + background: #00c8ff; + border-radius: 3px; } } } } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-gray2; } .shp-summary-group-info { @@ -277,9 +337,11 @@ .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; + border-color: $color-gray8; + border-radius: 8px; + font-weight: 400; + font-size: 12px; + line-height: 16px; padding: 12px; @include mq(md, max) { @@ -287,9 +349,59 @@ } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + font-size: 0; + + &::after { + content: "alterar"; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-blue2; + text-decoration: none; + } + } + } + + #payment-group-MercadoPagoPaymentGroup .payment-group-item-text, + #payment-group-bankInvoicePaymentGroup .payment-group-item-text, + #payment-group-creditCardPaymentGroup .payment-group-item-text, + #payment-group-creditCardPaymentGroup .payment-group-item-text, + #payment-group-instantPaymentPaymentGroup[data-name="Pix"] + .payment-group-item-text { + background-image: none; + } + + .payment-group-item { + border: 1px solid $color-black2 !important; + border-radius: 6px; + display: block; + margin-left: 5px; + margin-right: 40px; + margin-top: 12px; + opacity: 0.7; + width: 100%; + padding: 0 18px 0 8px; + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + -o-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; + + span { + text-align: center; + color: $color-gray10 !important; + padding-right: 0; + font-family: $font-family; + font-weight: 400; + font-size: 14px; + line-height: 24px; + + &::selection { + color: $color-red2 !important; + } + } + + &:focus { + border-color: $color-red2 !important; } } @@ -311,13 +423,18 @@ color: #303030; } + .vtex-omnishipping-1-x-addressFormPart1 small { + margin: 0; + } + .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white; + border: 1px solid $color-black; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + color: $color-black; + // text-shadow: 1.3px 1px lighten($color-black, 50); } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f494e92..065826c 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -9,6 +9,7 @@ $color-black: #292929; $color-black2: #000000; $color-red: #ff0000; +$color-red2: #f15a31; $color-white: #fff; @@ -19,6 +20,9 @@ $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #989898; $color-gray7: #c4c4c4; +$color-gray8: #e0e0e0; +$color-gray9: #808080; +$color-gray10: #58595b; $color-blue: #4267b2; $color-blue2: #00c8ff; -- 2.34.1