From 92495b560a6dd35e77ad226ddb3ff54dbbe4a943 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Sun, 18 Dec 2022 07:34:08 -0300 Subject: [PATCH] feat: adiciona css checkout dados pessoais entrega 1280px --- checkout/src/arquivos/js/components/Footer.js | 18 +++--- .../sass/checkout/_checkout-autenticacao.scss | 63 +++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 18 ++++-- .../sass/checkout/_checkout-pagamento.scss | 40 ++++++++++-- .../sass/checkout/_checkout-vazio.scss | 5 ++ .../src/arquivos/sass/partials/_footer.scss | 19 +++++- .../src/arquivos/sass/partials/_header.scss | 18 ++++-- 7 files changed, 151 insertions(+), 30 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index fb564db..77b6c85 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -12,11 +12,9 @@ export default class Footer { if (window.location.hash === "#/cart") { await this.cartUpdate(); } - this.emptyTitle = await waitElement(".empty-cart-title"); this.emptyButton = await waitElement(".link-choose-products"); this.paymentsMethods = await waitElement(".footerCheckout__payments"); this.certification = await waitElement(".footerCheckout__vtexpci"); - this.emptyCartTitle(); this.emptyCartButton(); this.addPaymentsMethodsIcons(); this.addCertificationIcon(); @@ -41,6 +39,7 @@ export default class Footer { events() { window.addEventListener("hashchange", this.outPrateleira.bind(this)); + window.addEventListener("resize", this.onRisize.bind(this)); } async cartUpdate() { @@ -54,8 +53,6 @@ export default class Footer { mutations.map((mutation) => { const cartStatus = mutation.target.attributes.style.nodeValue; - console.log(cartStatus); - if (cartStatus === "display: none;") { this.renderPrateleira(); this.cartTitle.classList.remove("inactive"); @@ -93,7 +90,6 @@ export default class Footer { `; @@ -142,10 +138,6 @@ export default class Footer { } } - emptyCartTitle() { - this.emptyTitle.innerHTML = `Seu Carrinho está Vazio`; - } - emptyCartButton() { this.emptyButton.innerHTML = `Continuar Comprando`; } @@ -184,9 +176,17 @@ export default class Footer { `; } + async onRisize(e) { + const windowSize = e.target.innerWidth; + + console.log(windowSize); + } + async addCarrossel() { const elemento = await waitElement(".footerCheckout__prateleira-container"); $(elemento).slick({ + slidesToShow: 4, + slidesToScroll: 1, infinite: false, prevArrow: "", diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index de7ef30..37af741 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -289,6 +289,10 @@ /* Shipping configurations */ + .ship-country { + display: none; + } + .ship-postalCode small a { color: #303030; font-weight: 500; @@ -303,8 +307,9 @@ } .shp-lean { - border: 1px solid $color-gray4; + border: 1px solid $color-gray11; border-radius: 0; + border-radius: 8px; label { background-color: $color-white; @@ -331,11 +336,19 @@ .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; + border-color: $color-gray11; + border-radius: 8px; color: #303030; padding: 12px; + &:first-child::before { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png"); + background-size: 21px 20px; + width: 21px; + height: 20px; + } + @include mq(md, max) { background-position: 8px 9px; } @@ -345,6 +358,10 @@ font-weight: 500; text-decoration: underline; } + + .ship-street { + display: none !important; + } } .shp-summary-group-price, @@ -366,12 +383,46 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: $color-white; + border: 1px solid $color-gray2; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); + // text-shadow: 1.3px 1px lighten($color-black, 50); + color: $color-gray2; + text-transform: uppercase; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + color: $color-gray8; + text-transform: uppercase; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .totalizers-list { + td { + padding: 25px 0 !important; + } + } + } + + .shipping-container { + .ship-postalCode { + display: flex; + flex-direction: column; + input { + width: 280px; + max-width: 280px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 27ccc48..2114b41 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -133,6 +133,10 @@ } } + .cart-fixed-transition { + height: auto !important; + } + .lookatme { background-color: $color-white; } @@ -187,13 +191,17 @@ } .product-image { - width: 6.062%; - padding: 0; + // width: 6.062%; + // padding: 0; + height: 60px; + width: 60px; img { - width: 100%; - max-width: 100%; - height: 60px !important; + // width: 100%; + // max-width: 100%; + // height: 60px !important; + min-height: 100%; + min-width: 100%; @include mq(sm, max) { height: 72px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 87e74b5..baf2901 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -56,13 +56,27 @@ body .container-main.container-order-form .orderform-template.active { a { align-items: center; - background-color: #303030; + background: transparent; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 0; + margin-top: 10px; + + &::after { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + } + + img { + width: 20px; + height: 20px; + } } } } @@ -84,13 +98,31 @@ body .container-main.container-order-form .orderform-template.active { a { align-items: center; - background-color: #303030; + background: transparent; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 0; + margin-top: 10px; + + &::after { + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + background-size: 20px; + width: 20px; + height: 20px; + content: ""; + } + } + + .accordion-toggle-active { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-gray2; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 9396ce2..bc146f2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -18,6 +18,11 @@ line-height: 33px; text-align: center; text-transform: uppercase; + + @media (max-width: 1024px) { + font-size: 18px; + line-height: 25px; + } } &-message { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 7892471..4d6ef7f 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -106,8 +106,12 @@ border-radius: 8px; text-transform: uppercase; + @media (min-width: 1108px) and (max-width: 1167px) { + font-size: 11.7px; + } + @media (min-width: 1025px) and (max-width: 1107px) { - font-size: 11.5px; + font-size: 9.7px; } } } @@ -145,6 +149,11 @@ width: 95%; height: 65px; + @media (max-width: 1024px) { + flex-direction: column; + align-items: flex-start; + } + &::before, &::after { display: none; @@ -162,6 +171,10 @@ text-transform: capitalize; max-width: 40%; + @media (max-width: 1024px) { + margin: 15px 0; + } + @include mq(md, max) { margin-bottom: 24px; max-width: 100%; @@ -213,6 +226,10 @@ margin: 0; gap: 16px; + @media (max-width: 1024px) { + margin-top: 10px !important; + } + li:first-child { a { align-items: center; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 45ee213..a147cd9 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -9,6 +9,12 @@ display: flex; justify-content: center; width: 80% !important; + + @media (max-width: 1024px) { + width: 100% !important; + margin: 0; + } + #progressBar { width: 439px; height: 35px; @@ -103,13 +109,17 @@ justify-content: space-between; height: 37.14px; width: 100%; + + @media (max-width: 1024px) { + margin: 0 16px; + } } &__logo { display: flex; align-items: center; justify-content: center; - width: 15.194%; + width: auto; img { height: 37.14px; width: 100%; @@ -118,11 +128,9 @@ &__safeBuy { display: flex; - width: 11.622%; + width: auto; height: 17px; - @media (min-width: 1025px) and (max-width: 1276px) { - width: 14.5%; - } + img { // width: 10.09%; width: 12px;