From 8d96fa876494e536c9c75b3d52464adb54485a20 Mon Sep 17 00:00:00 2001 From: WillSimao Date: Mon, 19 Dec 2022 11:07:33 -0300 Subject: [PATCH] feat(Autenticacao): conserta observation --- checkout/src/arquivos/js/components/Footer.js | 10 +- .../sass/checkout/_checkout-autenticacao.scss | 197 +++++++++++++++++- .../sass/checkout/_checkout-carrinho.scss | 13 +- .../src/arquivos/sass/utils/_variaveis.scss | 2 + 4 files changed, 202 insertions(+), 20 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ef29240..1fc61b4 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,14 +8,15 @@ export default class Footer { async init() { await this.selectors(); this.verificaPag(); - await this.onUpdate(); - await this.addCarrossel(); + // await this.onUpdate(); this.addProdutos(); this.entregaCarrinho(); this.unidadeCarrinho(); this.creatPaymentsIcons(); this.creatVtexIconPci(); this.creatDevIconsM3(); + await this.addCarrossel(); + await this.verificaOnload(); } async selectors() { @@ -31,6 +32,11 @@ export default class Footer { } + + async verificaOnload () { + window.addEventListener('load', this.onUpdat()) + }; + async onUpdate() { let target = this.checkoutVazio; let config = { childList: true, attributes: true }; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 426fa47..04b25e6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -158,21 +158,58 @@ .shipping-data, .payment-data, .client-profile-data { + .client-profile-data { + max-width: 331px; + height: 459px; + width: 100%; + + .collapsed { + display: none; + span { + font-size: 0; + } + .icon-user { + display: none; + } + } + } + + label { + margin-bottom: 0; + } .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 8px; + border: 1px solid $color-gray3; font-family: $font-family; - padding: 16px; + padding: 24px 16px 0; .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; - i::before { - fill: #303030; - } + .accordion-toggle-active { + i::after { + content: ''; + } + } + span { + color: #303030; + margin-bottom: 8px; + padding: 0; + font-family: $font-family-secundary; + + i::before { + content: ''; + } + + i::after { + background-image: url('https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png%22'); + background-repeat: no-repeat; + background-size: 100% 100%; + width: 20px; + height: 20px; + display: block; + content: ''; + float: right; + } } a { @@ -184,7 +221,11 @@ display: flex; justify-content: center; padding: 6px 5px 6px 8px; + opacity: 0; } + + + } .accordion-inner { @@ -192,21 +233,57 @@ /* General configurations */ + .hipping-summar-info, + .notification { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + } + + .client-notice { color: $color-black; + margin-bottom: 26px; + font-size: 0px !important; + + &::before { + content: 'Identificação'; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + } } p { + margin-top: 12px; + margin-bottom: 0; label { color: $color-black; font-weight: 500; + margin-bottom: 0; } + span { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + margin-left: 8px; + } + select, input { border-radius: 0; border: 1px solid $color-gray4; box-shadow: none; + width: 18px; + height: 18px; } .help.error { @@ -214,10 +291,102 @@ } } + .box-client-info-pf { + + .client-notice { + margin-top: 0; + } + + label { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + } + + #client-email { + width: 297px; + height: 42px; + padding: 0 6px; + border-radius: 5px; + border: 1px solid $color-gray9; + } + #client-last-name, + #client-first-name { + padding: 0 6px; + width: 141px; + height: 42px; + border: 1px solid $color-gray9; + border-radius: 5px; + } + #client-document { + padding: 0 6px; + width: 142.06px; + height: 44px; + border: 1px solid $color-gray9; + border-radius: 5px; + } + #client-phone { + padding: 0 6px; + width: 142.06px; + height: 44px; + border: 1px solid $color-gray9; + border-radius: 5px; + + } + + } + + .newsletter { + #opt-in-newsletter { + width: 18px; + height: 18px; + border: 1px solid #828282; + border-radius: 3px; + padding: 0; + } + .newsletter-text { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + } + + label { + padding: 0 0 0 20px; + } + + } + + .btn-submit-wrapper { + display: flex; + align-items: center; + justify-content: center; + margin: 44px 0; + #go-to-shipping { + width: 100%; + height: 42px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + background-color: $color-blue-200; + color: $color-white; + margin: 0; + + } + } + .box-client-info-pj { + display: none; .link a#is-corporate-client, .link a#not-corporate-client { - color: $color-black; font-weight: 500; text-decoration: underline; } @@ -333,4 +502,10 @@ } } } + .Items { + border-bottom: 1px solid $color-gray4; + } + .info { + border-bottom: 1px solid $color-gray4; + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 9ad46ab..19e2fd7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -13,11 +13,8 @@ display: none; } .cart { - border: 1px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; - padding: 16px; - + border-bottom: 1px solid $color-gray9; + border-radius: 0; @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -31,6 +28,10 @@ .cart-fixed { font-family: $font-family; width: 100%; + border: 1px solid #E5E5E5; + border-radius: 8px; + max-width: 331px; + width: 100%; h2 { background: $color-white; border: none; @@ -48,8 +49,6 @@ } .cart { - border: 1px solid $color-gray4; - ul li { border-top: none; margin-top: 0; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 6ce985b..fcd3285 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -18,6 +18,8 @@ $color-gray5: #e5e5e5; $color-gray6: #989898; $color-gray7: #c4c4c4; $color-gray8: #2e2d2d; +$color-gray9: #E0E0E0; +$color-gray10: #808080; $color-blue-100: #6fd5f2; $color-blue-200: #00C8FF; -- 2.34.1