From ffd2acf8a1820b029929d4dc2127f307dd064211 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 16 Dec 2022 20:19:52 -0300 Subject: [PATCH] feat: Adiciona Css --- checkout/src/arquivos/js/components/Footer.js | 23 +++++-- .../sass/checkout/_checkout-autenticacao.scss | 61 +++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 12 +--- .../sass/checkout/_checkout-pagamento.scss | 8 +++ .../sass/checkout/_checkout-vazio.scss | 2 +- .../src/arquivos/sass/checkout/_checkout.scss | 12 ++-- .../src/arquivos/sass/partials/_footer.scss | 7 +++ 7 files changed, 98 insertions(+), 27 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 876dee8..a0b42cd 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -44,7 +44,7 @@ export default class Footer { this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.devIncons = await waitElement(".footerCheckout__developedBy"); this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); - this.myCart = await waitElement("#cart-title") + this.cartTitulo = await waitElement("#cart-title") } async footerCheckoutInnerHTML(){ this.footerCheckout.innerHTML = ` @@ -77,12 +77,16 @@ export default class Footer { // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; - let lista = this.list; + let list = this.listaPrateleira; + let cartTitle = this.cartTitulo; + let slickTitle = this.titleSlick; if (target.style.display == "none" && window.location.hash == "#/cart") { - lista.style.display = "block"; + list.style.display = "flex"; + list.style.display = "block"; this.fetchApiData(); } else { - lista.style.display = "none"; + this.cartTitulo.style.display = "none"; + list.style.display = "none"; } let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { @@ -91,8 +95,15 @@ export default class Footer { } mutations.forEach(function (mutation) { if (target.style.display != "none") { - lista.style.display = "none"; - } else lista.style.display = "block"; + list.style.display = "none"; + cartTitle.style.display == "none"; + if (list.style.display == "none"){ + slickTitle.style.display = "none"; + } + } else { + cartTitle.style.display = "block"; + list.style.display = "block"; + } }); }); diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 00dd0a5..60ddbcf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,3 +1,25 @@ +.client-pre-email-h{ + .client-pre-email, span, small{ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: #000000; + } + small{ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400 !important; + font-size: 20px !important; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: #000000 !important; + } +} .checkout-container { .client-pre-email { border-color: $color-gray4; @@ -107,10 +129,21 @@ } } } - + .payment-data{ + .accordion-group{ + @media (max-width: 1024px){ + width: 100%; + } + } + } .shipping-data, .payment-data, .client-profile-data { + @media (max-width: 1024px){ + width: 100%; + margin: 0; + margin-top: 12px; + } .accordion-group { border-radius: 8; border: 1px solid #E0E0E0; @@ -292,7 +325,20 @@ text-decoration: underline; } } - + .ship-complement{ + input{ + padding-right: 0px !important; + height: 35px; + width: 100%; + } + } + .ship-receiverName{ + input{ + padding-right: 0px !important; + height: 35px; + width: 100%; + } + } .shp-summary-group-price, .shp-summary-package { color: $color-gray4; @@ -346,6 +392,13 @@ display: none; } .vtex-omnishipping-1-x-address{ + .ship-street{ + display: none; + } + div{ + display: flex; + flex-direction: column; + } .text{ #ship-number{ width: 100%; @@ -354,10 +407,6 @@ } } } - div{ - display: flex; - flex-direction: column; - } } .vtex-omnishipping-1-x-addressFormPart1, input{ max-width: none; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index bbf4ff7..c1f3cb2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -5,7 +5,6 @@ } .cart-template { - font-family: $font-family; @include mq(md, max) { padding: 0 0; @@ -28,6 +27,9 @@ } .cart-fixed.affix { position: relative !important; + @media (max-width: 1024px){ + margin-bottom: 101px; + } } .cart-fixed { font-family: $font-family; @@ -384,11 +386,7 @@ width: max-content; .srp-container { - padding: 0 0 0 10px; - @include mq(md, max) { - padding: 0 16px; - } .srp-main-title { margin: 32px 0 12px; @@ -663,10 +661,6 @@ } } - @include mq(md, max) { - padding: 0 16px; - width: 100%; - } .coupon-column { .coupon { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 849fd49..52535d4 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -1,9 +1,17 @@ body .container-main.container-order-form .orderform-template.active { + @media (max-width: 1024px){ + display: flex; + flex-direction: column; + } .mini-cart { width: 32.3242%; margin-left: unset; margin-right: 0; float: right; + @media (max-width: 1024px){ + margin-top: 10px; + width: 100%; + } } .orderform-template-holder { width: 66.1132%; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index bc0f43b..2971841 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -12,6 +12,7 @@ } } &-title { + margin-top: 170px; font-family: 'Open Sans'; font-style: normal; font-weight: 700; @@ -35,7 +36,6 @@ line-height: 16px; text-align: center; text-transform: uppercase; - &:hover { background: none; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 0d3b4f7..d0d8516 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -28,10 +28,10 @@ footer .footerCheckout__wrapper { line-height: 38px; color: #000000; text-align: center; + padding-left: 50px; } width: 79.53125%; - margin: 0 auto; .itemList{ display: flex !important; align-items: center; @@ -81,7 +81,7 @@ footer .footerCheckout__wrapper { } .productLink{ height: 42px; - width: 242px; + width: 100%; display: flex; align-items: center; justify-content: center; @@ -95,6 +95,7 @@ footer .footerCheckout__wrapper { font-size: 13px; line-height: 18px; letter-spacing: 0.05em; + padding: 0 5px; text-transform: uppercase; &:hover{ text-decoration: none; @@ -145,7 +146,6 @@ body { width: 80%; } } - .btn-success { background: $color-black; text-shadow: none; @@ -154,11 +154,13 @@ body { background: lighten($color-black, 15%); } } - +.emailInfo{ + border: 1px solid #000000; + border-radius: 5px; +} .emailInfo h3 { color: $color-black !important; } - #cart-title, #orderform-title { color: #292929; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index f04872a..0aa3a0d 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,7 +1,14 @@ /* _footer.scss */ .footerCheckout { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; border-top: none; color: $color-gray2; + @media (max-width: 550px){ + align-items: normal; + } .footerCheckout__wrapper{ border-top: 1px solid black; margin: 0px;