From 9244276d1f7b6d9952080a00c7df90cabe521c4f Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Mon, 12 Dec 2022 20:13:46 -0300 Subject: [PATCH 1/8] =?UTF-8?q?Feat(Checkout):=20Cria=20Css=20de=20element?= =?UTF-8?q?os=20do=20checkout=20vazio(Bot=C3=A3o,=20linhas)=20e=20Cria=20J?= =?UTF-8?q?s=20para=20colocar=20icones=20no=20Footer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 46 +++++++++++++++++++ checkout/src/arquivos/js/components/Header.js | 6 +++ .../sass/checkout/_checkout-vazio.scss | 22 ++++++--- .../src/arquivos/sass/checkout/_checkout.scss | 29 ++++++++++-- .../src/arquivos/sass/partials/_footer.scss | 35 +++++++++++++- .../src/arquivos/sass/partials/_header.scss | 3 +- 6 files changed, 128 insertions(+), 13 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..203e20f 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,12 +8,16 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + this.addIconsCardAndVtxpci(); + this.addIconVtexAndM3(); } async selectors() { //Para verificar se o carrinho está vazio e remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar o waitElement this.checkoutVazio = await waitElement(".empty-cart-content"); + this.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps"); + this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy"); } onUpdate() { @@ -37,4 +41,46 @@ export default class Footer { slidesToScroll: 1, }); } + addIconVtexAndM3() { + if (this.iconsVtexAndM3 && window.innerWidth > 1024) { + this.iconsVtexAndM3.innerHTML = ` +
  • + + Powered By + Img Icone Vtex + +
    • + +
  • + + Developed By + Img Icone M3 + +
    • + `; + } + } + + addIconsCardAndVtxpci() { + if (this.iconesCartoesAndVtexpci && window.innerWidth > 1024) { + this.iconesCartoesAndVtexpci.innerHTML = ` +
  • + Img bandeira Mastercard + Img bandeira Visa + adad + Img bandeira Elo + Img bandeira Hipercard + Img Paypal + Img Boleto + +
    • +
  • + +
    • +
  • + Img Vtxpci +
    • + `; + } + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..acf2789 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -17,5 +17,11 @@ export default class Header { timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); + this.progressBar = await waitElement("#progressBar"); } + + progressBarCronstructor (){ + + } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..144d7df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -9,16 +9,21 @@ } } + &-message{ + display: none; + } + &-title { - font-size: 20px; + margin: 170px 0 32px 0; + font-size: 24px; + line-height: 33px; } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; + border: 1px solid $color-black; + border-radius: 0; + // transition: ease-in 0.22s all; outline: none; font-family: $font-family; font-style: normal; @@ -27,11 +32,14 @@ line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-black; text-transform: uppercase; + margin: 0 0 0 0; + width: 31.74%; + padding: 15px 0; &:hover { - background: lighten($color-black, 5); + background: lighten($color-white, 5); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..ee3cce5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,14 +9,28 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 100%; margin: auto auto 0 auto; + border-top: 1px solid black; + .container{ + display: flex; + align-items: center; + width: 94.9734%; + } } footer .footerCheckout__prateleira, header { - width: 79.53125%; + width: 100%; margin: 0 auto; } +header{ + border-bottom: 1px solid black; + padding: 29px 0; +} +.headerCheckout__safeBuy{ + display: flex; + gap: 8px; +} body { display: flex; @@ -52,13 +66,16 @@ body { width: 80%; } } +.row-fluid .full-cart.active{ + margin-bottom: 0; +} .btn-success { - background: $color-black; + background: $color-white; text-shadow: none; &:hover { - background: lighten($color-black, 15%); + background: lighten($color-white, 15%); } } @@ -81,6 +98,10 @@ body { margin-left: 30px; } } +#cart-title{ + display: none !important; +} + .dropdown { &__content { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..e765cfd 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -10,6 +10,7 @@ } &__address { + color: $color-gray2; font-family: $font-family; font-style: normal; @@ -17,7 +18,11 @@ font-size: 10px; line-height: 12px; text-transform: capitalize; - max-width: 40%; + width: 33%; + + &::after{ + content: "."; + } @include mq(md, max) { margin-bottom: 24px; @@ -30,12 +35,27 @@ display: flex; justify-self: center; list-style: none; + margin: 0; + width: 33%; + justify-content: center; @include mq(md, max) { align-self: center; margin-bottom: 12px; } + .footer-imgs-cards { + width: 10.01%; + margin-right: 12px; + &-final{ + width: 10.01%; + margin-right: 0px + } + } + .footer-imgs-vtexpci{ + width: 84.4%; + } + &__divider { background-color: $color-gray4; display: inline-block; @@ -50,6 +70,19 @@ display: flex; list-style-type: none; margin: 0; + width: 33%; + justify-content: flex-end; + + .Link1{ + justify-content: end; + + &__footer-imgs-logoVtex{ + width: 20%; + } + } + .footer-imgs-logoM3{ + width: 17%; + } li:last-child { margin-left: 16px; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..17902c7 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,7 +1,8 @@ /* _header.scss */ .headerCheckout { .container { - width: auto !important; + width: 79.53125%; + margin: 0 auto; } &__wrapper { align-items: center; From a2665465a46ce76472cc8c7b59aa2e1ecf44ee1b Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Tue, 13 Dec 2022 02:53:45 -0300 Subject: [PATCH 2/8] =?UTF-8?q?Feat(Chekout):=20Cria=20barra=20de=20progre?= =?UTF-8?q?sso,=20e=20finaliza=20a=20estiliza=C3=A7=C3=A3o=20de=20=20eleme?= =?UTF-8?q?ntos=20da=20pagina=20de=20carrinho=20vazio?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Header.js | 51 +++++++++--- .../sass/checkout/_checkout-vazio.scss | 10 ++- .../src/arquivos/sass/checkout/_checkout.scss | 1 + .../src/arquivos/sass/partials/_header.scss | 78 ++++++++++++++++++- 4 files changed, 128 insertions(+), 12 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index acf2789..65843ae 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,20 +8,53 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + // console.log(this.item); + this.progressBarCronstructor(); } async selectors() { - this.item = await waitElement("#my-element", { - //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar - timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise - interval: 1000, // vai verificar a cada 1 segundo se o elemento existe - }); - this.progressBar = await waitElement("#progressBar"); + // this.item = await waitElement("#my-element", { + // //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar + // timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise + // interval: 1000, // vai verificar a cada 1 segundo se o elemento existe + // }); + this.progressBar = await waitElement(".progress-bar"); } - progressBarCronstructor (){ + progressBarCronstructor() { + if (this.progressBar && window.innerWidth > 1024) { + this.progressBar.innerHTML = ` + + `; + } } - } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 144d7df..2f7d767 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -15,8 +15,14 @@ &-title { margin: 170px 0 32px 0; - font-size: 24px; - line-height: 33px; + font-size: 0px; + line-height: 0px; + + &::after{ + content: "SEU CARRINHO ESTÁ VAZIO"; + font-size: 24px; + line-height: 33px; + } } &-links { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ee3cce5..dad4e1c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -30,6 +30,7 @@ header{ .headerCheckout__safeBuy{ display: flex; gap: 8px; + height: 15px; } body { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 17902c7..56e7d0a 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -8,11 +8,87 @@ align-items: center; display: flex; justify-content: space-between; + + .progress-bar{ + height: 35px; + .container-total{ + display: grid; + padding: 0; + grid-template-columns: 2fr 1fr 2fr; + width: 439px; + /* border: 1px solid rgb(59, 51, 51); */ + margin: 0; + + .li-volta-borda-1, + .li-volta-borda-2, + .li-volta-centro { + display: flex; + flex-direction: column; + list-style: none; + /* border: 1px solid violet; */ + } + .p-text{ + width: max-content; + font-weight: 400; + font-size: 12px; + line-height: 14px; + margin-bottom: 9px; + } + .p-bola{ + border: 1px solid black; + border-radius: 50%; + width: 10px; + height: 10px; + background-color: white; + } + .div-itens{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + .div-flex1, + .div-flex2, + .div-flex3 { + display: flex; + position: relative; + width: 100%; + } + + .div-flex1{ + justify-content: flex-start; + } + .div-flex2{ + justify-content: center; + } + .div-flex3{ + justify-content: flex-end; + } + .p-borda-1{ + border-top: 1.5px solid black; + position: absolute; + left: 25.6%; + bottom: 5px; + margin: 0; + width: 95.9%; + transform: translateY(-7px); + } + .p-borda-2{ + border-top: 1.5px solid black; + position: absolute; + right: 22%; + bottom: 5px; + margin: 0; + width: 99.3%; + transform: translateY(-7px); + } + } + } } &__logo { img { - height: 52px; + height: 37.14px; width: auto; } } From cfc869ee611bf7dcb6423f40a3f945861dacb403 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Tue, 13 Dec 2022 10:37:12 -0300 Subject: [PATCH 3/8] Feat(Chekout): Cria as paginas de meu carrinho, e pagina de coleta de email --- .../sass/checkout/_checkout-autenticacao.scss | 57 +++++-- .../sass/checkout/_checkout-carrinho.scss | 143 +++++++++++++----- .../src/arquivos/sass/checkout/_checkout.scss | 21 ++- .../src/arquivos/sass/partials/_footer.scss | 8 +- .../src/arquivos/sass/partials/_header.scss | 8 +- 5 files changed, 174 insertions(+), 63 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..3990982 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -6,8 +6,10 @@ .link-cart { a { - color: $color-black; + color: red; font-size: 14px; + line-height: 16px; + text-transform: uppercase; &:hover { color: lighen($color-black, 10); @@ -22,30 +24,54 @@ justify-content: center; h3 { - margin-bottom: 16px; + margin-bottom: 20px; + margin-top: 7px; span { - color: #303030; - font-size: 24px; + color: #f30606; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-weight: 400; + letter-spacing: 0.09em; } small { - color: $color-gray4; + color: red; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + font-weight: 400; + padding: 0; + letter-spacing: 0.09em; } } } .client-email { - margin: 0 0 16px; + display: flex; + margin: 0 0 47px; + width: 57%; + justify-content: flex-start; input { box-shadow: none; color: $color-black; font-family: $font-family; padding: 0 16px; - border: 2px solid $color-gray3; + border: 1px solid red; box-sizing: border-box; - border-radius: 5px; + border-radius: 5px 0px 0px 5px; + width: 77%; + height: 52px; + &::placeholder{ + color: red; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + } @media (max-width: 490px) { width: auto; @@ -67,9 +93,22 @@ position: absolute; } } + #btn-client-pre-email{ + right: 14px; + padding: 4px 26px; + height: 52px; + background-color: red; + border-radius: 0px 8px 8px 0px; + } span.help.error { color: red; + position: absolute; + left: 213px; + top: 50px; + font-weight: 700; + font-size: 12px; + line-height: 16px; } } @@ -93,7 +132,7 @@ } i::before { - color: $color-black; + color: red; font-size: 1rem; opacity: 1; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..c093081 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -16,7 +16,7 @@ border: 3px solid $color-gray3; box-sizing: border-box; border-radius: 5px; - padding: 16px; + padding: 16px 16px 5px 16px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -112,9 +112,9 @@ th { color: $color-black; - padding: 0 0 16px; + padding: 0 0 13px; font-style: normal; - font-weight: bold; + font-weight: 400; font-size: 14px; line-height: 16px; @@ -124,6 +124,29 @@ display: none; } } + &.shipping-date{ + font-size: 0; + line-height: 0; + &::after{ + content: "Frete"; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: red; + } + } + &.product-price{ + font-size: 0; + line-height: 0; + &::after{ + content: "Unidade"; + font-weight: 400; + font-size: 14px; + line-height: 16px; + color: red + ; + } + } } .product-image { @@ -136,9 +159,9 @@ } img { - height: 60px; + height: 70px; max-width: 100%; - width: auto; + width: 100%; @include mq(sm, max) { height: 72px; @@ -155,7 +178,7 @@ } a { - color: $color-blue; + color: $color-black; font-style: normal; font-weight: normal; font-size: 12px; @@ -214,15 +237,18 @@ } } } + td.product-price{ + padding: 10px 5px 0 5px; + } td.quantity { align-items: center; border: 1px solid $color-gray3; - border-radius: 0; + border-radius: 8px; box-sizing: border-box; display: flex; justify-content: center; - margin: 6px auto 0; + margin: 15px auto 0; max-height: 38px; max-width: 118px; padding: 0; @@ -234,7 +260,7 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: none; border-radius: 0; border-width: 0 1px; display: block; @@ -253,17 +279,31 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; + color: $color-white; display: block; font-weight: 500; - padding: 1px 12px; + // padding: 1px 12px; } } + .item-quantity-change-decrement{ + width: 16px; + height: 16px; + margin-left: 11px; + } + .item-quantity-change-increment { + width: 16px; + height: 16px; + margin-right: 11px; + } .icon-minus-sign { &:before { content: "-"; - font-size: 16px; + font-size: 14px; + background-color: #00C8FF; + border-radius: 50%; + height: 100%; + width: 100%; } } @@ -271,6 +311,10 @@ &:before { content: "+"; font-size: 14px; + background-color: #00C8FF; + border-radius: 50%; + height: 100%; + width: 100%; } } @@ -367,7 +411,7 @@ color: $color-gray2; font-size: 12px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10px; } button.shp-open-options { @@ -375,13 +419,14 @@ border: none; border-radius: 5px; color: $color-gray2; - font-size: 16px; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; font-weight: 500; outline: none; padding: 12px 40px; transition: all 0.2s linear; + margin-top: 0; &:hover { background-color: lighten($color-gray5, 5); @@ -395,6 +440,7 @@ .srp-data { width: 280px; + margin-top: 0; @include mq(cstm, max) { width: calc(100vw - 32px); @@ -404,8 +450,12 @@ margin-bottom: 40px; } + .ship-country { + display: none; + } + .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue; border: none; border-radius: 5px; color: $color-white; @@ -429,7 +479,8 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; + padding-bottom: 0; &__wrapper { background-color: $color-white; @@ -444,12 +495,12 @@ } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black; border-radius: 100px; } .blue { - color: $color-blue; + color: $color-black; } label { @@ -470,7 +521,7 @@ font-size: 12px; line-height: 14px; color: $color-black; - margin-bottom: 12px; + margin-bottom: 2px; } input { @@ -485,7 +536,7 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue; border: none; border-radius: 5px; color: $color-white; @@ -495,7 +546,7 @@ outline: none; position: absolute; right: -150px; - top: 36px; + top: 26px; transition: all 0.2s linear; width: 96px; text-transform: uppercase; @@ -513,19 +564,29 @@ font-family: $font-family; font-style: normal; font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; + font-size: 0px; + line-height: 0px; + color: $color-black; margin-top: 7px; + + &::after{ + content: "Não sei meu código postal"; + font-size: 10px; + line-height: 12px; + + :hover{ + text-decoration: underline; + } + } } span.help.error { color: red; font-size: 12px; position: absolute; - left: 0; + left: 63px; width: 100%; - top: 17px; + top: 5px; } } } @@ -598,7 +659,6 @@ #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; cursor: pointer; } } @@ -608,7 +668,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black; text-decoration: none; } } @@ -641,7 +701,7 @@ } .coupon-fields { - margin-bottom: 32px; + margin-bottom: 20px; @include mq(sm, max) { span { @@ -663,8 +723,10 @@ color: $color-gray4; font-size: 12px; height: 34px; - padding: 0 12px; - max-width: 160px; + padding: 0 0 0 16px; + max-width: 204px; + width: 51%; + margin-right: 7.4px; @include mq(sm, max) { max-width: 100%; @@ -673,9 +735,9 @@ } button { - background: $color-black; + background: blue; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; font-size: 12px; height: 36px; @@ -683,7 +745,7 @@ margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 133px; text-transform: uppercase; @include mq(md, max) { @@ -743,6 +805,9 @@ } } } + .coupon-data{ + display: block !important; + } .cart-links-bottom { display: flex; @@ -764,7 +829,7 @@ .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 14px; @include mq(md, max) { margin-bottom: 0px; @@ -776,13 +841,13 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black; } } .btn-place-order-wrapper { a { - background: $color-green; + background: $color-blue; border: none; border-radius: 5px; display: block; @@ -797,10 +862,10 @@ &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; + font-weight: 700; font-size: 13px; letter-spacing: 0.05em; - color: $color-white; + color: red; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index dad4e1c..107f05f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -86,13 +86,12 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: red; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; - margin: 40px 0 30px; - letter-spacing: 0.1em; + font-weight: 700; + font-size: 24px; + line-height: 33px; + margin: 17px 0; text-transform: uppercase; @include mq(md, max) { @@ -100,7 +99,15 @@ body { } } #cart-title{ - display: none !important; + display: block !important; + font-weight: 700; + font-size: 24px; + line-height: 33px; + width: max-content; + color: #292929; + margin: 16px 0; + letter-spacing: 0.05em; + } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index e765cfd..4ebb8b1 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -69,19 +69,19 @@ align-items: center; display: flex; list-style-type: none; - margin: 0; - width: 33%; + margin: 0 0 0 158px; + width: 21%; justify-content: flex-end; .Link1{ justify-content: end; &__footer-imgs-logoVtex{ - width: 20%; + width: 35%; } } .footer-imgs-logoM3{ - width: 17%; + width: 27.5%; } li:last-child { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 56e7d0a..f476faa 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -67,19 +67,19 @@ .p-borda-1{ border-top: 1.5px solid black; position: absolute; - left: 25.6%; + left: 25%; bottom: 5px; margin: 0; - width: 95.9%; + width: 97%; transform: translateY(-7px); } .p-borda-2{ border-top: 1.5px solid black; position: absolute; - right: 22%; + right: 21.5%; bottom: 5px; margin: 0; - width: 99.3%; + width: 100.8%; transform: translateY(-7px); } } From 0de462bae398205c67e7cf8ab2fd73ef69c1c142 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Thu, 15 Dec 2022 23:54:50 -0300 Subject: [PATCH 4/8] Feat(Checkout): Finaliza paginas de compra Pc, com a cores erradas --- .../sass/checkout/_checkout-autenticacao.scss | 188 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 85 +++++++- .../sass/checkout/_checkout-pagamento.scss | 4 + .../src/arquivos/sass/checkout/_checkout.scss | 36 ++++ .../src/arquivos/sass/partials/_footer.scss | 22 +- .../src/arquivos/sass/utils/_variaveis.scss | 4 + 6 files changed, 294 insertions(+), 45 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 3990982..a0a346b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -99,6 +99,7 @@ height: 52px; background-color: red; border-radius: 0px 8px 8px 0px; + position: static; } span.help.error { @@ -146,36 +147,96 @@ } } } + .newsletter{ + margin-bottom: 44px; + } + #go-to-shipping{ + width: 100%; + margin-bottom: 3px; + } + p.input.ship-country.text{ + display: none; + + } + .vtex-omnishipping-1-x-addressFormPart1 small{ + margin-left: 0; + } .shipping-data, .payment-data, .client-profile-data { .accordion-group { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid red; + border-radius: 8px; font-family: $font-family; - padding: 16px; + padding: 17px 17px 29px 17px; + + .accordion-toggle{ + font-weight: 400; + font-size: 16px; + line-height: 20px; + } + + // .accordion-toggle-active{ + // font-size: 0; + // line-height: 0; + // margin-bottom: 36px !important; + // &::after{ + // content: "Identificação"; + // font-weight: 400; + // font-size: 16px; + // line-height: 19px; + // color: red; + // } + // } + p.link.link-gift-card{ + display: none !important; + } + .row-fluid:before{ + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seu dados"; + font-weight: 400; + font-size: 14px; + line-height: 24px; + letter-spacing: -0.01em; + } + .accordion-heading { span { - color: #303030; - margin-bottom: 8px; + color: red; + margin-bottom: 15px; padding: 0; - i::before { - fill: #303030; + i { + font-size: 0; + line-height: 0; + &.icon-edit{ + + &::before{ + content: ""; + width: 20px; + height: 20px; + background-image:url(https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png) ; + background-repeat: no-repeat; + margin-top: 7px; + background-size: contain; + } + } } } a { align-items: center; - background-color: #303030; + background-color: $color-white; border-radius: 8px; border: none; color: $color-white; display: flex; justify-content: center; - padding: 6px 5px 6px 8px; + padding: 0; + display: block !important; + outline: none; } } @@ -183,23 +244,32 @@ padding: 0; /* General configurations */ + .box-client-info-pj{ + display: none; + } .client-notice { color: $color-black; + display: none; } p { label { - color: $color-black; + color: red; font-weight: 500; } select, input { - border-radius: 0; - border: 1px solid $color-gray4; + border-radius: 5px; + border: 1px solid red; box-shadow: none; + padding: 10px 6px; } + #ship-postalCode{ + width: 100%; + max-width: 95%; + } .help.error { color: red; @@ -222,10 +292,17 @@ button.submit { border: none; border-radius: 5px; - background: $color-black; + background: red; margin-top: 8px; outline: none; transition: all 0.2s linear; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: pink; + letter-spacing: 0.05em; + text-transform: uppercase; + width: 100%; &:hover { background: lighten($color-black, 5); @@ -246,14 +323,16 @@ .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; - font-size: 14px; - font-weight: 500; + color: red; + font-weight: 700; + font-size: 14px; + line-height: 19px; } .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid red; + border-radius: 8px; + margin-bottom: 15px; label { background-color: $color-white; @@ -269,30 +348,45 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + color: red; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + margin-bottom: 11px; } .shp-summary-group-info { border-color: $color-gray4; + border: none; } .address-summary { background: none; - border-color: $color-gray4; - border-radius: 0; + border-color: red; + border-radius: 8px; color: #303030; padding: 12px; + padding-top: 2px; + &::before{ + content: ""; + width: 24px; + height: 24px; + background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); + background-repeat: no-repeat; + background-size: 24px; + } @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: red; + float: right; + font-weight: 400; + font-size: 12px; + line-height: 16px; } } @@ -303,25 +397,63 @@ .shp-summary-group-price { padding-right: 16px; + display: none; } .shp-summary-package { - padding-left: 16px; + padding-left: 12px; } .vtex-omnishipping-1-x-summaryChange { border-color: #303030; color: #303030; + display: none; } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; + background-color: red; + border: 1px solid pink; } .vtex-omnishipping-1-x-deliveryOptionActive { text-shadow: 1.3px 1px lighten($color-black, 50); + color: blue; } + .vtex-omnishipping-1-x-deliveryOptionInactive{ + color: blue; + } + p.input.ship-number.required.text{ + width: 100%; + } + input#ship-number.input-mini, + input#ship-complement.input-large, + input#ship-receiverName.input-xlarge { + width: 95%; + } + // input#ship-receiverName.input-xlarge{ + // value = "" + // } + .steps-view{ + width: 57%; + margin-top: 35px; + + } + span.payment-group-item-text{ + background-image: none !important; + } + .payment-group-item{ + border-right: 1px solid red ; + border: 1px solid red; + border-radius: 6px; + display: none; + opacity: 0.3; + margin-bottom: 12px; + padding: 3px 18px 3px 8px; + } + .payment-group-item.active{ + margin-left: 5px; + border-radius: 6px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index c093081..3ec1c30 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -3,6 +3,14 @@ width: 100%; } } +.PaymentCardNumber input { + width: 64%; + height: 25px; +} +input#creditCardpayment-card-0Number.input.medium{ + width: 64%; + height: 25px; +} .cart-template { font-family: $font-family; @@ -30,13 +38,18 @@ } .cart-fixed { font-family: $font-family; - width: 100%; + width: 99.5%; + border: 1px solid red; + height: 397px !important; + border-radius: 8px; h2 { background: $color-white; border: none; color: #303030; font-size: 14px; font-weight: 500; + text-align: start; + padding: 24px 0 0 17px; } .item-unavailable { @@ -48,7 +61,7 @@ } .cart { - border: 1px solid $color-gray4; + border: none; ul li { border-top: none; @@ -76,6 +89,11 @@ #go-to-cart-button a { color: #303030; text-decoration: underline; + margin-right: 17px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-align: right; } .summary-totalizers { @@ -85,12 +103,13 @@ } #payment-data-submit { - background: $color-black; + background: red; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + border-top: 15px; &:hover { background: lighten($color-black, 5); } @@ -169,9 +188,23 @@ } } } - + .badge{ + display: none; + } + #hproduct-item-2616{ + width: 60px; + } + .price{ + padding-top: 15px; + } .product-name { padding-right: 0; + width: 39%; + white-space: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + padding-top: 30px; @include mq(lg, max) { width: 250px; @@ -796,15 +829,51 @@ td.info, td.monetary { font-style: normal; - font-weight: normal; - font-size: 18px; - line-height: 21px; + font-weight: 700; + font-size: 14px; + line-height: 19px; color: $color-black; + padding-top: 30px; + float: none; + } + td.info{ + font-weight: 700; + font-size: 18px; + line-height: 25px; + padding-left: 17px; + } + td.monetary{ + padding-right: 17px; } } } } } + .Items{ + border-top: 1px solid; + border-bottom: 1px solid; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + .Discounts{ + border-bottom: 1px solid; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } .coupon-data{ display: block !important; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..64ababb 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,8 +4,12 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + .payment-submit-wrap{ + margin-top: 15px; + } } .orderform-template-holder { width: 66.1132%; } + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 107f05f..58d147d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -39,6 +39,42 @@ body { min-height: 100% !important; padding-top: 0 !important; + .PaymentCardNumber input { + width: 64%; + height: 25px; + } + p.PaymentCardHolderDocument.input.text.required.mask{ + display: none; + } + .PaymentInstallments select{ + width: 68%; + } + input#creditCardpayment-card-0Name.input-medium{ + width: 34%; + height: 25px; + } + .input#creditCardpayment-card-0Code.input-mini{ + width: 16%; + height: 25px; + } + // a#payment-group-SPEIPaymentGroup.payment-group-item, + // a#payment-group-MercadoPagoPaymentGroup.payment-group-item, + // a#payment-group-PSEPaymentGroup.payment-group-item, + // a#payment-group-promissoryPaymentGroup.payment-group-item, + // a#payment-group-creditDirectSalePaymentGroup.payment-group-item, + // a#payment-group-creditControlPaymentGroup.payment-group-item { + // display: none; + // } + a#payment-group-creditCardPaymentGroup.payment-group-item, + a#payment-group-bankInvoicePaymentGroup.payment-group-item { + display: block; + + } + .payment-group-list-btn{ + width: 105%; + } + + @include mq(md, max) { padding-left: 0; } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 4ebb8b1..3a13fe0 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -18,7 +18,7 @@ font-size: 10px; line-height: 12px; text-transform: capitalize; - width: 33%; + width: 33.33%; &::after{ content: "."; @@ -36,7 +36,7 @@ justify-self: center; list-style: none; margin: 0; - width: 33%; + width: 33.33%; justify-content: center; @include mq(md, max) { @@ -45,10 +45,10 @@ } .footer-imgs-cards { - width: 10.01%; - margin-right: 12px; + width: 10.8%; + margin-right: 2.8%; &-final{ - width: 10.01%; + width: 10.8%; margin-right: 0px } } @@ -69,23 +69,27 @@ align-items: center; display: flex; list-style-type: none; - margin: 0 0 0 158px; - width: 21%; + margin: 0 0 0 0px; + width: 33.33%; justify-content: flex-end; .Link1{ justify-content: end; &__footer-imgs-logoVtex{ - width: 35%; + width: 40%; } } .footer-imgs-logoM3{ width: 27.5%; } + li:first-child { + width: 26.61%; + } li:last-child { - margin-left: 16px; + margin-left: 2.5%; + width: 25.58%; } a { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..982abc2 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,14 +6,18 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black: #000000; +; $color-white: #fff; + $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #58595B; $color-blue: #4267b2; From 724d3559e4c5271237a23345c9cdfe51a013eb9a Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Fri, 16 Dec 2022 07:37:53 -0300 Subject: [PATCH 5/8] Feat(Checkout): Cria Layout completo --- .../sass/checkout/_checkout-autenticacao.scss | 165 +++++++++----- .../sass/checkout/_checkout-carrinho.scss | 207 +++++++++++------- .../sass/checkout/_checkout-vazio.scss | 26 ++- .../src/arquivos/sass/checkout/_checkout.scss | 134 +++++++++++- .../src/arquivos/sass/partials/_header.scss | 11 +- .../src/arquivos/sass/utils/_variaveis.scss | 16 +- 6 files changed, 401 insertions(+), 158 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index a0a346b..779b8e5 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -6,14 +6,16 @@ .link-cart { a { - color: red; + color: $color-black2; + font-weight: 400; + font-family: $font-family-secundary; font-size: 14px; line-height: 16px; text-transform: uppercase; - &:hover { - color: lighen($color-black, 10); - } + // &:hover { + // color: lighen($color-black, 10); + // } } } @@ -28,22 +30,22 @@ margin-top: 7px; span { - color: #f30606; + color: $color-black2; + font-family: $font-family-secundary; font-size: 20px; line-height: 23px; text-transform: uppercase; font-weight: 400; - letter-spacing: 0.09em; } small { - color: red; + color: $color-black2; + font-family: $font-family-secundary; font-size: 20px; line-height: 23px; text-transform: uppercase; font-weight: 400; padding: 0; - letter-spacing: 0.09em; } } } @@ -59,13 +61,14 @@ color: $color-black; font-family: $font-family; padding: 0 16px; - border: 1px solid red; + border: 1px solid $color-black2; + border-right: none; box-sizing: border-box; border-radius: 5px 0px 0px 5px; width: 77%; height: 52px; &::placeholder{ - color: red; + color: $color-black2; font-weight: 400; font-size: 12px; line-height: 16px; @@ -97,9 +100,15 @@ right: 14px; padding: 4px 26px; height: 52px; - background-color: red; + background-color: $color-blue2; border-radius: 0px 8px 8px 0px; position: static; + font-family: $font-family; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; } span.help.error { @@ -116,11 +125,15 @@ .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black2; + border-radius: 5px; h3 { - color: #303030; + color: $color-black2; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; margin: 0 0 8px 0; } @@ -129,11 +142,16 @@ li { span { - color: $color-black; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + color: $color-black2; } i::before { - color: red; + color: $color-blue2; font-size: 1rem; opacity: 1; } @@ -153,6 +171,7 @@ #go-to-shipping{ width: 100%; margin-bottom: 3px; + margin-top: 0; } p.input.ship-country.text{ display: none; @@ -165,31 +184,28 @@ .shipping-data, .payment-data, .client-profile-data { + .accordion-group { border-radius: 0; - border: 1px solid red; + border: 1px solid $color-gray3; border-radius: 8px; font-family: $font-family; padding: 17px 17px 29px 17px; + span{ + font-size: 12px; + line-height: 14px; + } + .accordion-toggle{ font-weight: 400; font-size: 16px; line-height: 20px; } + div.row-fluid:before{ + display: none; + } - // .accordion-toggle-active{ - // font-size: 0; - // line-height: 0; - // margin-bottom: 36px !important; - // &::after{ - // content: "Identificação"; - // font-weight: 400; - // font-size: 16px; - // line-height: 19px; - // color: red; - // } - // } p.link.link-gift-card{ display: none !important; } @@ -204,7 +220,7 @@ .accordion-heading { span { - color: red; + color: $color-black; margin-bottom: 15px; padding: 0; @@ -255,16 +271,29 @@ p { label { - color: red; - font-weight: 500; + color: $color-gray2; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + span.newsletter-text{ + color: $color-gray9; + } } select, input { border-radius: 5px; - border: 1px solid red; + border: 1px solid $color-gray10; box-shadow: none; padding: 10px 6px; + + &#opt-in-newsletter{ + border-radius: 3px; + color: $color-gray11; + } } #ship-postalCode{ width: 100%; @@ -288,18 +317,22 @@ .state-inscription-box span { font-weight: 500; } + .submit.btn-submit-wrapper{ + margin-top: 0; + } button.submit { border: none; - border-radius: 5px; - background: red; + border-radius: 8px; + background: $color-blue2; margin-top: 8px; outline: none; transition: all 0.2s linear; + font-family: $font-family; font-weight: 700; font-size: 14px; line-height: 19px; - color: pink; + color: $color-white; letter-spacing: 0.05em; text-transform: uppercase; width: 100%; @@ -316,21 +349,24 @@ /* Shipping configurations */ .ship-postalCode small a { - color: #303030; - font-weight: 500; + color: $color-black; + font-weight: 400; + font-size: 12px; + line-height: 16px; text-decoration: underline; } .vtex-omnishipping-1-x-deliveryGroup { p { - color: red; + color: $color-gray2; font-weight: 700; font-size: 14px; line-height: 19px; + font-style: normal; } .shp-lean { - border: 1px solid red; + border: 1px solid $color-gray10; border-radius: 8px; margin-bottom: 15px; @@ -348,12 +384,13 @@ } .delivery-address-title { - color: red; + color: $color-gray2; font-weight: 700; font-size: 12px; line-height: 16px; letter-spacing: 0.05em; margin-bottom: 11px; + font-style: normal; } .shp-summary-group-info { @@ -363,7 +400,7 @@ .address-summary { background: none; - border-color: red; + border-color: $color-gray10; border-radius: 8px; color: #303030; padding: 12px; @@ -382,11 +419,12 @@ } a { - color: red; + color: $color-blue2; float: right; font-weight: 400; font-size: 12px; line-height: 16px; + text-transform: lowercase; } } @@ -411,16 +449,20 @@ } .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: red; - border: 1px solid pink; + background-color: $color-white; + border: 1px solid $color-black; } .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - color: blue; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + color: $color-purple; } .vtex-omnishipping-1-x-deliveryOptionInactive{ - color: blue; + color: $color-gray8; } p.input.ship-number.required.text{ width: 100%; @@ -430,9 +472,6 @@ input#ship-receiverName.input-xlarge { width: 95%; } - // input#ship-receiverName.input-xlarge{ - // value = "" - // } .steps-view{ width: 57%; margin-top: 35px; @@ -442,17 +481,35 @@ background-image: none !important; } .payment-group-item{ - border-right: 1px solid red ; - border: 1px solid red; + border-right: 1px solid $color-black2 ; + border: 1px solid $color-black2; border-radius: 6px; display: none; opacity: 0.3; margin-bottom: 12px; - padding: 3px 18px 3px 8px; + mix-blend-mode: normal; + padding: 13px 24.5px; + background: $color-gray3; + color: $color-gray6; + font-weight: 400; + font-size: 14px; + line-height: 24px; + text-align: center; + letter-spacing: -0.01em; + + &-text{ + padding: 5px 0 5px 0; + } } .payment-group-item.active{ margin-left: 5px; border-radius: 6px; + border-right: 1px solid $color-orange ; + border: 1px solid $color-orange; + color: $color-orange; + text-decoration: none; + opacity: 1; + background: rgba(220, 221, 227, 0.3); } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 3ec1c30..54706cf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -21,7 +21,7 @@ input#creditCardpayment-card-0Number.input.medium{ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px 16px 5px 16px; @@ -39,15 +39,17 @@ input#creditCardpayment-card-0Number.input.medium{ .cart-fixed { font-family: $font-family; width: 99.5%; - border: 1px solid red; + border: 1px solid $color-gray5; height: 397px !important; border-radius: 8px; h2 { background: $color-white; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-black; + font-family: $font-family-secundary; + font-size: 16px; + line-height: 19px; + font-weight: 400; text-align: start; padding: 24px 0 0 17px; } @@ -103,20 +105,26 @@ input#creditCardpayment-card-0Number.input.medium{ } #payment-data-submit { - background: red; + background: $color-green2; border: none; border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; border-top: 15px; - &:hover { - background: lighten($color-black, 5); - } + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; - &:active { - background: darken($color-black, 5); - } + // &:hover { + // background: lighten($color-black, 5); + // } + + // &:active { + // background: darken($color-black, 5); + // } } } @@ -127,11 +135,16 @@ input#creditCardpayment-card-0Number.input.medium{ .cart-items { .product-item { padding: 16px 0; + + .product-name{ + padding-top: 10px; + } } th { color: $color-black; padding: 0 0 13px; + font-family: $font-family-secundary; font-style: normal; font-weight: 400; font-size: 14px; @@ -151,7 +164,7 @@ input#creditCardpayment-card-0Number.input.medium{ font-weight: 400; font-size: 14px; line-height: 16px; - color: red; + color: $color-black; } } &.product-price{ @@ -162,8 +175,7 @@ input#creditCardpayment-card-0Number.input.medium{ font-weight: 400; font-size: 14px; line-height: 16px; - color: red - ; + color: $color-black; } } } @@ -200,11 +212,13 @@ input#creditCardpayment-card-0Number.input.medium{ .product-name { padding-right: 0; width: 39%; + font-family: $font-family-secundary; white-space: normal; font-weight: 400; font-size: 12px; line-height: 14px; padding-top: 30px; + color: $color-black2; @include mq(lg, max) { width: 250px; @@ -344,7 +358,7 @@ input#creditCardpayment-card-0Number.input.medium{ &:before { content: "+"; font-size: 14px; - background-color: #00C8FF; + background-color: $color-blue2; border-radius: 50%; height: 100%; width: 100%; @@ -373,11 +387,17 @@ input#creditCardpayment-card-0Number.input.medium{ display: none; } span { + font-family: $font-family-secundary; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; + + &.total-selling-price{ + font-weight: 700; + line-height: 19px; + } } } @@ -428,12 +448,12 @@ input#creditCardpayment-card-0Number.input.medium{ } .srp-main-title { - margin: 32px 0 12px; + margin: 33px 0 12px; font-style: normal; font-weight: normal; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black2; @include mq(md, max) { margin-top: 0; @@ -442,16 +462,16 @@ input#creditCardpayment-card-0Number.input.medium{ .srp-description { color: $color-gray2; - font-size: 12px; + font-size: 14px; line-height: 18px; margin: 0 0 10px; } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray7; border: none; - border-radius: 5px; - color: $color-gray2; + border-radius: 8px; + color: $color-black2; font-size: 14px; letter-spacing: 0.05em; line-height: 19px; @@ -460,6 +480,7 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 12px 40px; transition: all 0.2s linear; margin-top: 0; + text-transform: uppercase; &:hover { background-color: lighten($color-gray5, 5); @@ -488,26 +509,27 @@ input#creditCardpayment-card-0Number.input.medium{ } .srp-pickup-my-location__button { - background-color: $color-blue; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; + font-family: $font-family; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } - &:active { - background-color: darken($color-black, 5); - } + // &:active { + // background-color: darken($color-black, 5); + // } } } @@ -528,12 +550,16 @@ input#creditCardpayment-card-0Number.input.medium{ } &__current { - border: 1px solid $color-black; + border: 1px solid $color-black2; border-radius: 100px; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .blue { - color: $color-black; + color: $color-black2 !important; + } + .gray{ + color: $color-gray8; } label { @@ -552,8 +578,8 @@ input#creditCardpayment-card-0Number.input.medium{ font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-black; + line-height: 16px; + color: $color-black2; margin-bottom: 2px; } @@ -569,43 +595,47 @@ input#creditCardpayment-card-0Number.input.medium{ } & ~ button { - background-color: $color-blue; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; + font-family: $font-family; font-size: 12px; + line-height: 19px; + font-weight: 700; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05px; outline: none; position: absolute; right: -150px; top: 26px; transition: all 0.2s linear; - width: 96px; + width: 100px; text-transform: uppercase; - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } - &:active { - background-color: darken($color-black, 5); - } + // &:active { + // background-color: darken($color-black, 5); + // } } small a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 0px; line-height: 0px; - color: $color-black; + color: $color-black2; margin-top: 7px; &::after{ content: "Não sei meu código postal"; font-size: 10px; line-height: 12px; + font-weight: 400; :hover{ text-decoration: underline; @@ -696,12 +726,12 @@ input#creditCardpayment-card-0Number.input.medium{ } } span { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $color-black2; text-decoration: none; } } @@ -714,6 +744,7 @@ input#creditCardpayment-card-0Number.input.medium{ .coupon-column { .coupon { margin: 0; + } .link-coupon-add { @@ -721,7 +752,9 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 12px; text-decoration: underline; } - + .coupon-label{ + margin-bottom: 4px; + } .coupon-label label { margin-bottom: 12px; font-family: $font-family; @@ -731,6 +764,7 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; color: $color-gray2; cursor: none; + text-align: left; } .coupon-fields { @@ -750,7 +784,7 @@ input#creditCardpayment-card-0Number.input.medium{ } input { - border: 2px solid $color-gray3; + border: 1px solid $color-gray5; border-radius: 5px; box-shadow: none; color: $color-gray4; @@ -768,13 +802,16 @@ input#creditCardpayment-card-0Number.input.medium{ } button { - background: blue; + background: $color-blue2; border: none; border-radius: 8px; - color: $color-white; - font-size: 12px; + color: $color-black2; + font-family: $font-family; + font-size: 14px; + font-weight: 400; + line-height: 19px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05px; margin-left: 6px; outline: none; transition: all 0.2s linear; @@ -785,13 +822,13 @@ input#creditCardpayment-card-0Number.input.medium{ width: 138px; } - &:hover { - background-color: lighten($color-black, 5); - } + // &:hover { + // background-color: lighten($color-black, 5); + // } - &:active { - background-color: darken($color-black, 5); - } + // &:active { + // background-color: darken($color-black, 5); + // } } } } @@ -817,6 +854,7 @@ input#creditCardpayment-card-0Number.input.medium{ &.info { text-align: left; + font-family: $font-family-secundary; } &.monetary { @@ -833,49 +871,51 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 19px; color: $color-black; - padding-top: 30px; + // padding-top: 30px; float: none; } td.info{ font-weight: 700; font-size: 18px; line-height: 25px; - padding-left: 17px; + // padding-left: 17px; + font-family: $font-family; } td.monetary{ - padding-right: 17px; + padding-right: 0px; } } } } } .Items{ - border-top: 1px solid; + // border-top: 1px solid; border-bottom: 1px solid; .info{ - padding: 26px 0 !important; - padding-left: 17px !important; + padding: 20px 0 10px 0 ; + padding-left: 0; float: none; } .monetary{ - padding-right: 17px !important; + padding-right: 0px ; float: none; } } .Discounts{ border-bottom: 1px solid; .info{ - padding: 26px 0 !important; - padding-left: 17px !important; + padding: 20px 0 10px 0 ; + padding-left: 0; float: none; } .monetary{ - padding-right: 17px !important; + padding-right: 0px ; float: none; } } .coupon-data{ display: block !important; + margin-top: 33px; } .cart-links-bottom { @@ -905,36 +945,37 @@ input#creditCardpayment-card-0Number.input.medium{ } a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-black; + color: $color-black2; + text-decoration: none; } } .btn-place-order-wrapper { a { - background: $color-blue; + background: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; display: block; font-size: 0; transition: ease-in 0.22s all; padding: 12px 19px; - &:hover { - background-color: darken($color-green, 5); - } + // &:hover { + // background-color: darken($color-green, 5); + // } &:after { content: "finalizar compra"; font-family: $font-family; font-weight: 700; - font-size: 13px; + font-size: 14px; letter-spacing: 0.05em; - color: red; + color: $color-black2; text-transform: uppercase; vertical-align: middle; line-height: 19px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 2f7d767..1a32b2b 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -20,8 +20,11 @@ &::after{ content: "SEU CARRINHO ESTÁ VAZIO"; + font-family: $font-family; + font-weight: 700; font-size: 24px; line-height: 33px; + color: $color-black2; } } @@ -29,16 +32,16 @@ .link-choose-products { border: 1px solid $color-black; border-radius: 0; - // transition: ease-in 0.22s all; + transition: ease-in 0.22s all; outline: none; - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: 500; - font-size: 14px; - line-height: 16px; + font-weight: 400; + font-size: 0px; + line-height: 0px; text-align: center; letter-spacing: 0.05em; - color: $color-black; + color: $color-black2; text-transform: uppercase; margin: 0 0 0 0; width: 31.74%; @@ -47,6 +50,17 @@ &:hover { background: lighten($color-white, 5); } + &::before{ + content: "Continuar comprando"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + color: $color-black2; + text-transform: uppercase; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 58d147d..078423f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -11,7 +11,7 @@ html { footer .footerCheckout__wrapper { width: 100%; margin: auto auto 0 auto; - border-top: 1px solid black; + border-top: 1px solid $color-black2; .container{ display: flex; align-items: center; @@ -24,7 +24,7 @@ header { margin: 0 auto; } header{ - border-bottom: 1px solid black; + border-bottom: 1px solid $color-black2; padding: 29px 0; } .headerCheckout__safeBuy{ @@ -57,6 +57,128 @@ body { width: 16%; height: 25px; } + #ship-postalCode{ + border: 1px solid $color-gray8; + border-radius: 8px; + } + #find-pickups-manualy-button-denied{ + color: $color-black2; + outline: none; + &:hover{ + background: $color-white; + color: $color-black2; + } + &:active{ + background: $color-white; + color: $color-black2; + } + } + #payment-data-submit{ + i.icon-lock{ + display: none; + } + } + tbody.totalizers-list{ + tr.srp-summary-result.hide{ + display: none; + } + } + div.cart-fixed.cart-fixed-transition.affix-top{ + .Items{ + border-top: 1px solid $color-gray10; + border-bottom: 1px solid $color-gray10; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + .Discounts{ + border-bottom: 1px solid $color-gray10; + .info{ + padding: 26px 0 !important; + padding-left: 17px !important; + float: none; + } + .monetary{ + padding-right: 17px !important; + float: none; + } + } + tfoot { + td.info, + td.monetary { + padding-top: 30px; + padding-bottom: 0px; + } + td.info{ + padding-left: 17px; + } + td.monetary{ + padding-right: 17px; + } + } + div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ + margin-bottom: 0; + } + button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{ + margin-top: 47px; + } + } + div#client-profile-data.span6.client-profile-data{ + .client-profile-email{ + margin-bottom: 6px; + } + .client-profile-summary{ + span{ + margin-bottom: 6px; + } + } + span{ + font-size: 0; + line-height: 0; + &::after{ + content: "Identificação"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + } + } + span.accordion-toggle.collapsed, + span.email, + span.name, + span.tel, + span.newsletter-text{ + &::after{ + display: none; + } + } + span.email, + span.name, + span.tel{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray2; + } + span.newsletter-text{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray9; + } + } // a#payment-group-SPEIPaymentGroup.payment-group-item, // a#payment-group-MercadoPagoPaymentGroup.payment-group-item, // a#payment-group-PSEPaymentGroup.payment-group-item, @@ -116,13 +238,9 @@ body { } } -.emailInfo h3 { - color: $color-black !important; -} - #cart-title, #orderform-title { - color: red; + color: $color-black2; font-family: $font-family; font-weight: 700; font-size: 24px; @@ -140,7 +258,7 @@ body { font-size: 24px; line-height: 33px; width: max-content; - color: #292929; + color: $color-black; margin: 16px 0; letter-spacing: 0.05em; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index f476faa..82bce17 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -25,7 +25,6 @@ display: flex; flex-direction: column; list-style: none; - /* border: 1px solid violet; */ } .p-text{ width: max-content; @@ -33,13 +32,15 @@ font-size: 12px; line-height: 14px; margin-bottom: 9px; + font-family: $font-family-secundary; + color: $color-black2; } .p-bola{ - border: 1px solid black; + border: 1px solid $color-black2; border-radius: 50%; width: 10px; height: 10px; - background-color: white; + background-color: $color-white; } .div-itens{ display: flex; @@ -100,10 +101,10 @@ text-transform: uppercase; font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $color-gray; + color: $color-black; } i { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 982abc2..78a25f6 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,22 +6,34 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; -$color-black: #000000; -; +$color-black2: #000000; + $color-white: #fff; +$color-purple: #41115D; + + $color-gray: #6c6c6c; $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #58595B; +$color-gray7: #EDEDED; +$color-gray8: #C4C4C4; +$color-gray9: #808080; +$color-gray10: #E0E0E0; +$color-gray11: #828282; $color-blue: #4267b2; +$color-blue2: #00C8FF; $color-green: #4caf50; +$color-green2: #298541; + +$color-orange: #F15A31; /* Grid breakpoints */ $grid-breakpoints: ( From 82062a7577fdaca28c971049b7f588362c8c3d58 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Sat, 17 Dec 2022 22:58:13 -0300 Subject: [PATCH 6/8] =?UTF-8?q?Feat(Checkout):=20Cria=20fun=C3=A7=C3=A3o?= =?UTF-8?q?=20ProgressBar=20e=20prateleira(estilizada=20no=20desktop)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/arquivos/js/components/CheckoutUI.js | 1 + checkout/src/arquivos/js/components/Footer.js | 59 +++++++- checkout/src/arquivos/js/components/Header.js | 132 +++++++++++++++++- checkout/src/arquivos/sass/checkout.scss | 1 + .../src/arquivos/sass/checkout/_checkout.scss | 21 +-- checkout/src/arquivos/sass/lib/_slick.scss | 10 +- .../src/arquivos/sass/partials/_header.scss | 7 +- .../arquivos/sass/partials/_prateleira.scss | 93 ++++++++++++ 8 files changed, 306 insertions(+), 18 deletions(-) diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js index f68f3b2..6e4aff7 100644 --- a/checkout/src/arquivos/js/components/CheckoutUI.js +++ b/checkout/src/arquivos/js/components/CheckoutUI.js @@ -66,4 +66,5 @@ export default class CheckoutUI { ); }); } + } diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 203e20f..1247c4b 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -6,10 +6,16 @@ export default class Footer { } async init() { + this.list = await this.Api(); await this.selectors(); // this.onUpdate(); this.addIconsCardAndVtxpci(); this.addIconVtexAndM3(); + this.createShelf(); + this.shelfList = await waitElement(".footerCheckout__shelfList"); + this.shelfItens(); + // await this.shelfUpdate(); + this.addCarrossel(); } async selectors() { @@ -18,6 +24,11 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); this.iconesCartoesAndVtexpci = await waitElement(".footerCheckout__stamps"); this.iconsVtexAndM3 = await waitElement(".footerCheckout__developedBy"); + this.prateleira = await waitElement(".footerCheckout__prateleira"); + this.itensShelf = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1000, + }); } onUpdate() { @@ -35,10 +46,12 @@ export default class Footer { observer.observe(target, config); } async addCarrossel() { - const elemento = await waitElement("#my-element"); + const elemento = await waitElement(".footerCheckout__shelfList"); $(elemento).slick({ slidesToShow: 4, slidesToScroll: 1, + arrows: true, + infinite: false, }); } addIconVtexAndM3() { @@ -83,4 +96,48 @@ export default class Footer { `; } } + createShelf() { + if (this.itensShelf) { + this.itensShelf.innerHTML = ` +
    +

    Você também pode gostar:

    +
    +
      + `; + } + } + async shelfItens() { + let structure = ""; + + this.list.forEach((response) => { + const sku = response.skus.map( + (item) => `
    • ${item}
      • ` + ); + + structure += ` +
    • +
      +
      ${response.name}
      +
        ${sku}
      + +
      • + `; + }); + this.shelfList.innerHTML = structure; + } + async Api() { + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + return fetch(api) + .then((response) => response.json()) + .then((data) => { + const peçaBase = data.map((response) => ({ + name: response.productName, + skus: response.items.map((item) => item.name), + img: response.items[0].images[0].imageUrl, + link: response.link, + })); + return peçaBase; + }); + } } diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 65843ae..b36a173 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,8 +8,8 @@ export default class Header { async init() { await this.selectors(); - // console.log(this.item); this.progressBarCronstructor(); + await this.progressBarProgress(); } async selectors() { @@ -18,7 +18,10 @@ export default class Header { // timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise // interval: 1000, // vai verificar a cada 1 segundo se o elemento existe // }); - this.progressBar = await waitElement(".progress-bar"); + this.progressBar = await waitElement("#progressBar", { + timeout: 5000, + interval: 1000, + }); } progressBarCronstructor() { @@ -29,7 +32,7 @@ export default class Header {

      Meu Carrinho

      -

      +

      @@ -39,7 +42,7 @@ export default class Header {

      Dados Pessoais

      -

      +

      @@ -48,7 +51,7 @@ export default class Header {

      Pagamento

      -

      +

      @@ -56,5 +59,124 @@ export default class Header { `; } + if (this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ``; + } + } + async progressBarProgress() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarLista = document.querySelectorAll("#progressBar ul li"); + progressBarLista.forEach((li) => { + const Bola1 = li.children[0].children[0].children["p-bola1"]; + const Bola2 = li.children[0].children[0].children["p-bola2"]; + const Bola3 = li.children[0].children[0].children["p-bola3"]; + + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (Bola1) { + Bola1.classList.add("active"); + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + ) { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + if (Bola2) { + Bola2.classList.add("active"); + } + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + + if (Bola3) { + Bola3.classList.add("active"); + } + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (Bola1) { + Bola1.classList.add("active"); + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if ( + window.location.hash === "#/email" || + window.location.hash === "#/profile" || + window.location.hash === "#/shipping" + ) { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + if (Bola2) { + Bola2.classList.add("active"); + } + + if (Bola3) { + if (Bola3.classList.contains("active")) { + Bola3.classList.remove("active"); + } + } + } else if (window.location.hash == "#/payment") { + if (Bola1) { + if (Bola1.classList.contains("active")) { + Bola1.classList.remove("active"); + } + } + + if (Bola2) { + if (Bola2.classList.contains("active")) { + Bola2.classList.remove("active"); + } + } + if (Bola3) { + Bola3.classList.add("active"); + } + } + }); + }); + } } } diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..c6f1a38 100644 --- a/checkout/src/arquivos/sass/checkout.scss +++ b/checkout/src/arquivos/sass/checkout.scss @@ -3,3 +3,4 @@ @import "./partials/header"; @import "./partials/footer"; @import "./checkout/checkout.scss"; +@import "./partials/prateleira.scss"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 078423f..3b46e0d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -129,8 +129,8 @@ body { margin-top: 47px; } } - div#client-profile-data.span6.client-profile-data{ - .client-profile-email{ + div.step.accordion-group.client-profile-data { + .client-profile-email{ margin-bottom: 6px; } .client-profile-summary{ @@ -179,13 +179,16 @@ body { color: $color-gray9; } } - // a#payment-group-SPEIPaymentGroup.payment-group-item, - // a#payment-group-MercadoPagoPaymentGroup.payment-group-item, - // a#payment-group-PSEPaymentGroup.payment-group-item, - // a#payment-group-promissoryPaymentGroup.payment-group-item, - // a#payment-group-creditDirectSalePaymentGroup.payment-group-item, - // a#payment-group-creditControlPaymentGroup.payment-group-item { - // display: none; + // form.form-page.client-pre-email.anim-death.anim-current{ + // span{ + // div#client-profile-data.span6.client-profile-data span{ + // font-size: 20px; + // line-height: 23px; + // } + // &::after{ + // display: none; + // } + // } // } a#payment-group-creditCardPaymentGroup.payment-group-item, a#payment-group-bankInvoicePaymentGroup.payment-group-item { diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..6af1493 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -99,16 +99,22 @@ .slick-arrow { font-size: 0; position: absolute; + top: 50%; + transform: translateY(-100%); } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") no-repeat center center; z-index: 4; - left: 10px; + left: 0; + border: none; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg") + no-repeat center center; z-index: 4; - right: 10px; + right: 16px; + border: none; } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 82bce17..76bdaa9 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -35,7 +35,9 @@ font-family: $font-family-secundary; color: $color-black2; } - .p-bola{ + .p-bola1, + .p-bola2, + .p-bola3 { border: 1px solid $color-black2; border-radius: 50%; width: 10px; @@ -83,6 +85,9 @@ width: 100.8%; transform: translateY(-7px); } + .active{ + background: $color-black2; + } } } } diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..0e2c226 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,94 @@ /* _prateleira.scss */ +.footerCheckout { + border-top: none; + color: $color-gray2; + + .footerCheckout__prateleira{ + width: 79.38%; + margin-bottom: 54px; + } + .footerCheckout__shelfList{ + margin: 0; + } + .footerCheckout__shelfList-wrapper{ + margin: 0; + } + .footerCheckout__shelfList-wrapper, + .footerCheckout__shelfList-name, + .footerCheckout__shelfList-skus-wrapper, + .footerCheckout__shelfList-button { + margin-right: 16px; + } + + + .footerCheckout__prateleira-title{ + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: $color-black2; + } + .footerCheckout__shelfList-name{ + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + text-align: center; + color: $color-black2; + margin: 20px 0; + width: 95%; + } + .footerCheckout__shelfList-skus-wrapper{ + .footerCheckout__shelfList-skus{ + background: $color-blue2; + border-radius: 8px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: max-content; + padding: 4px 5.6px 4px 5.6px; + color: $color-white; + margin-right: 5px; + letter-spacing: 0.05em; + text-transform: uppercase; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + } + display: flex; + text-align: center; + justify-content: center; + + li::marker{ + font-size: 0; + } + &#text{ + font-size: 0; + } + } + .footerCheckout__shelfList-button{ + justify-content: center; + width: 95%; + background: $color-blue2; + border-radius: 8px; + padding: 0; + border: none; + height: 42px; + margin: 20px 0 0 0; + + a{ + color: $color-white; + letter-spacing: 0.05em; + text-transform: uppercase; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + } + } +} From f64723544db91857e1b954dd27dfe940a39a7549 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Sun, 18 Dec 2022 20:22:34 -0300 Subject: [PATCH 7/8] Feat(Checkout): Cria responsividade mobile --- checkout/src/arquivos/js/components/Footer.js | 22 +- .../sass/checkout/_checkout-autenticacao.scss | 89 ++++++- .../sass/checkout/_checkout-carrinho.scss | 148 +++++++++-- .../sass/checkout/_checkout-pagamento.scss | 12 +- .../sass/checkout/_checkout-vazio.scss | 18 +- .../src/arquivos/sass/checkout/_checkout.scss | 230 ++++++++++++++++-- .../src/arquivos/sass/partials/_footer.scss | 9 + .../src/arquivos/sass/partials/_header.scss | 3 + .../arquivos/sass/partials/_prateleira.scss | 5 + .../src/arquivos/sass/utils/_variaveis.scss | 1 + 10 files changed, 481 insertions(+), 56 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 1247c4b..fea78ed 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -14,8 +14,13 @@ export default class Footer { this.createShelf(); this.shelfList = await waitElement(".footerCheckout__shelfList"); this.shelfItens(); - // await this.shelfUpdate(); - this.addCarrossel(); + if (window.innerWidth > 1024){ + this.addCarrossel(); + } + if (window.innerWidth < 1024){ + this.addCarrosselMobile(); + } + } async selectors() { @@ -54,8 +59,17 @@ export default class Footer { infinite: false, }); } + async addCarrosselMobile() { + const elemento = await waitElement(".footerCheckout__shelfList"); + $(elemento).slick({ + slidesToShow: 3, + slidesToScroll: 1, + arrows: true, + infinite: false, + }); + } addIconVtexAndM3() { - if (this.iconsVtexAndM3 && window.innerWidth > 1024) { + if (this.iconsVtexAndM3) { this.iconsVtexAndM3.innerHTML = `
    • @@ -75,7 +89,7 @@ export default class Footer { } addIconsCardAndVtxpci() { - if (this.iconesCartoesAndVtexpci && window.innerWidth > 1024) { + if (this.iconesCartoesAndVtexpci) { this.iconesCartoesAndVtexpci.innerHTML = `
    • Img bandeira Mastercard diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 779b8e5..620fb9c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -4,6 +4,10 @@ font-family: $font-family; padding-top: 8px; + @media screen and (max-width: 1024px) { + padding-top: 11px; + } + .link-cart { a { color: $color-black2; @@ -13,9 +17,9 @@ line-height: 16px; text-transform: uppercase; - // &:hover { - // color: lighen($color-black, 10); - // } + @media screen and (max-width: 1024px) { + margin-right: 16px; + } } } @@ -29,6 +33,11 @@ margin-bottom: 20px; margin-top: 7px; + @media screen and (max-width: 1024px) { + margin-bottom: 38px; + margin-top: 49px; + } + span { color: $color-black2; font-family: $font-family-secundary; @@ -36,6 +45,11 @@ line-height: 23px; text-transform: uppercase; font-weight: 400; + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } small { @@ -46,6 +60,11 @@ text-transform: uppercase; font-weight: 400; padding: 0; + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 16px; + } } } } @@ -56,6 +75,10 @@ width: 57%; justify-content: flex-start; + @media screen and (max-width: 1024px) { + width: 97%; + } + input { box-shadow: none; color: $color-black; @@ -67,6 +90,11 @@ border-radius: 5px 0px 0px 5px; width: 77%; height: 52px; + + @media screen and (max-width: 1024px) { + width: 88%; + } + &::placeholder{ color: $color-black2; font-weight: 400; @@ -109,6 +137,12 @@ line-height: 19px; letter-spacing: 0.05em; text-transform: uppercase; + color: $color-black2; + + @media screen and (max-width: 1024px) { + padding: 4px 18px; + height: 50px; + } } span.help.error { @@ -119,6 +153,11 @@ font-weight: 700; font-size: 12px; line-height: 16px; + + @media screen and (max-width: 1024px) { + left: 435px; + margin-top: 7px; + } } } @@ -192,6 +231,15 @@ font-family: $font-family; padding: 17px 17px 29px 17px; + @media screen and (max-width: 1024px) { + padding: 17px 17px 44px 17px; + margin-bottom: 17px; + .PaymentCardNumber input { + width: 97%; + height: 33px; + } + } + span{ font-size: 12px; line-height: 14px; @@ -376,6 +424,10 @@ color: #303030; padding: 8px 12px; + @media screen and (max-width: 1024px) { + padding: 13px 12px; + } + svg path { fill: #d8c8ac; } @@ -471,11 +523,26 @@ input#ship-complement.input-large, input#ship-receiverName.input-xlarge { width: 95%; + + @media screen and (max-width: 1024px) { + width: 98.5%; + } + } + .payment-group{ + width: 32.7%; + + @media screen and (max-width: 1024px) { + width: 100%; + } } .steps-view{ width: 57%; margin-top: 35px; + @media screen and (max-width: 1024px) { + width: 96.85%; + } + } span.payment-group-item-text{ background-image: none !important; @@ -496,13 +563,20 @@ line-height: 24px; text-align: center; letter-spacing: -0.01em; + margin-left: 0; + width: 76.8%; + + @media screen and (max-width: 1024px) { + margin-left: 0; + width: 94.6%; + } &-text{ padding: 5px 0 5px 0; } } .payment-group-item.active{ - margin-left: 5px; + margin-left: 0px; border-radius: 6px; border-right: 1px solid $color-orange ; border: 1px solid $color-orange; @@ -510,6 +584,13 @@ text-decoration: none; opacity: 1; background: rgba(220, 221, 227, 0.3); + width: 76.8%; + + + @media screen and (max-width: 1024px) { + margin-left: 0; + width: 94.6%; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 54706cf..558e9f7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -26,6 +26,24 @@ input#creditCardpayment-card-0Number.input.medium{ border-radius: 5px; padding: 16px 16px 5px 16px; + @media screen and (max-width: 1024px) { + padding: 16px 0; + position: relative; + } + .table.cart-items{ + @media screen and (max-width: 1024px) { + thead{ + display: none; + } + tbody{ + .shipping-date.empty, + .quantity-price { + display: none; + } + } + } + } + @include mq(md, max) { margin: 0px 0 25px 0; border-left: none; @@ -41,7 +59,14 @@ input#creditCardpayment-card-0Number.input.medium{ width: 99.5%; border: 1px solid $color-gray5; height: 397px !important; + max-height: 397px !important; border-radius: 8px; + + @media screen and (max-width: 1024px) { + margin: 0; + padding-bottom: 50px; + } + h2 { background: $color-white; border: none; @@ -65,6 +90,10 @@ input#creditCardpayment-card-0Number.input.medium{ .cart { border: none; + @media screen and (max-width: 1024px) { + padding: 34px 16px 16px 16px; + } + ul li { border-top: none; margin-top: 0; @@ -138,6 +167,11 @@ input#creditCardpayment-card-0Number.input.medium{ .product-name{ padding-top: 10px; + + @media screen and (max-width: 1024px) { + position: absolute; + padding-top: 5px; + } } } @@ -185,6 +219,10 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: 60px; + @media screen and (max-width: 1024px) { + padding: 0 16px; + } + @include mq(sm, max) { width: 72px; } @@ -253,6 +291,10 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 12px; line-height: 14px; + @media screen and (max-width: 1024px) { + display: none; + } + @include mq(md, max) { display: none; } @@ -274,6 +316,11 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 12px; line-height: 14px; text-decoration-line: line-through; + + @media screen and (max-width: 1024px) { + padding-left: 8px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -286,6 +333,18 @@ input#creditCardpayment-card-0Number.input.medium{ } td.product-price{ padding: 10px 5px 0 5px; + @media screen and (max-width: 1024px) { + float: right; + padding: 26px 16px 0 0; + height: 37px; + } + } + td.item-remove{ + @media screen and (max-width: 1024px) { + position: absolute; + right: 10px; + top: 11px; + } } td.quantity { @@ -301,6 +360,12 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: max-content !important; + @media screen and (max-width: 1024px) { + float: left; + height: 34px; + margin: 28px auto 0; + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -318,6 +383,10 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-gray2; box-shadow: none; + @media screen and (max-width: 1024px) { + padding: 0 3px; + } + @include mq(lg, max) { width: 24px !important; } @@ -408,13 +477,15 @@ input#creditCardpayment-card-0Number.input.medium{ } .item-remove { - @media (max-width: 490px) { - top: 0; - } .icon::before { color: $color-gray4; font-size: 15px; + @media screen and (max-width: 1024px) { + color: $color-gray8; + font-size: 13px; + } + @include mq(md, max) { font-size: 18px; } @@ -446,6 +517,9 @@ input#creditCardpayment-card-0Number.input.medium{ @include mq(md, max) { padding: 0 16px; } + @media screen and (max-width: 1024px) { + padding: 0 0 0 16px; + } .srp-main-title { margin: 33px 0 12px; @@ -465,6 +539,10 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 18px; margin: 0 0 10px; + + @media screen and (max-width: 1024px) { + max-width: 17.32rem; + } } button.shp-open-options { @@ -496,6 +574,10 @@ input#creditCardpayment-card-0Number.input.medium{ width: 280px; margin-top: 0; + @media screen and (max-width: 1024px) { + width: 343px; + } + @include mq(cstm, max) { width: calc(100vw - 32px); } @@ -522,14 +604,6 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 19px; letter-spacing: 0.05em; - - // &:hover { - // background-color: lighten($color-black, 5); - // } - - // &:active { - // background-color: darken($color-black, 5); - // } } } @@ -613,13 +687,11 @@ input#creditCardpayment-card-0Number.input.medium{ width: 100px; text-transform: uppercase; - // &:hover { - // background-color: lighten($color-black, 5); - // } + @media screen and (max-width: 1024px) { + right: -36px; + top: 28px; + } - // &:active { - // background-color: darken($color-black, 5); - // } } small a { @@ -748,8 +820,10 @@ input#creditCardpayment-card-0Number.input.medium{ } .link-coupon-add { - color: #303030; + font-family: $font-family-secundary; + color: $color-black2; font-size: 12px; + line-height: 14px; text-decoration: underline; } .coupon-label{ @@ -765,6 +839,10 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-gray2; cursor: none; text-align: left; + + @media screen and (max-width: 1024px) { + margin: 48px 0 4px 0; + } } .coupon-fields { @@ -795,6 +873,14 @@ input#creditCardpayment-card-0Number.input.medium{ width: 51%; margin-right: 7.4px; + @media screen and (max-width: 1024px) { + padding: 0 0 0 12px; + margin-right: 0; + max-width: none; + width: 84.5%; + float: left; + } + @include mq(sm, max) { max-width: 100%; width: 100%; @@ -822,13 +908,6 @@ input#creditCardpayment-card-0Number.input.medium{ width: 138px; } - // &:hover { - // background-color: lighten($color-black, 5); - // } - - // &:active { - // background-color: darken($color-black, 5); - // } } } } @@ -850,6 +929,10 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 16px; color: $color-black; padding: 12px 0; + + @media screen and (max-width: 1024px) { + padding: 10px 0; + } } &.info { @@ -871,15 +954,17 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 19px; color: $color-black; - // padding-top: 30px; float: none; } td.info{ font-weight: 700; font-size: 18px; line-height: 25px; - // padding-left: 17px; font-family: $font-family; + + @media screen and (max-width: 1024px) { + padding: 14px 0; + } } td.monetary{ padding-right: 0px; @@ -916,6 +1001,11 @@ input#creditCardpayment-card-0Number.input.medium{ .coupon-data{ display: block !important; margin-top: 33px; + + @media screen and (max-width: 1024px) { + margin-top: 48.35px; + margin-bottom: 10px; + } } .cart-links-bottom { @@ -952,6 +1042,10 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; color: $color-black2; text-decoration: none; + + &#cart-choose-more-products.more.link-choose-more-products{ + margin-right: 0; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 64ababb..ae343e6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -4,12 +4,22 @@ body .container-main.container-order-form .orderform-template.active { margin-left: unset; margin-right: 0; float: right; + + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + margin-bottom: 70px; + } + .payment-submit-wrap{ margin-top: 15px; } } .orderform-template-holder { width: 66.1132%; + @media screen and (max-width: 1024px) { + width: 100%; + } } - + } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 1a32b2b..5f46c87 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -17,6 +17,9 @@ margin: 170px 0 32px 0; font-size: 0px; line-height: 0px; + @media screen and (max-width: 1024px) { + margin: 170px 0 22px 0; + } &::after{ content: "SEU CARRINHO ESTÁ VAZIO"; @@ -25,6 +28,11 @@ font-size: 24px; line-height: 33px; color: $color-black2; + + @media screen and (max-width: 1024px) { + font-size: 18px; + line-height: 25px; + } } } @@ -47,9 +55,13 @@ width: 31.74%; padding: 15px 0; - &:hover { - background: lighten($color-white, 5); - } + @media screen and (max-width: 1024px) { + width: 30.31%; + } + + // &:hover { + // background: lighten($color-white, 5); + // } &::before{ content: "Continuar comprando"; font-family: $font-family-secundary; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 3b46e0d..b545b2a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -16,6 +16,13 @@ footer .footerCheckout__wrapper { display: flex; align-items: center; width: 94.9734%; + @media screen and (max-width: 1024px) { + flex-direction: column; + align-items: baseline; + width: 97%; + gap: 16px; + background-color: rebeccapurple; + } } } footer .footerCheckout__prateleira, @@ -26,6 +33,9 @@ header { header{ border-bottom: 1px solid $color-black2; padding: 29px 0; + @media screen and (max-width: 1024px) { + padding: 16px 0; + } } .headerCheckout__safeBuy{ display: flex; @@ -39,9 +49,22 @@ body { min-height: 100% !important; padding-top: 0 !important; - .PaymentCardNumber input { + .SecurityEnvironmentIcon{ + @media screen and (max-width: 1024px) { + display: none; + } + } + .vtex-omnishipping-1-x-leanShippingOptionActive{ + background: $color-gray12 !important; + } + + #creditCardpayment-card-0Number { width: 64%; height: 25px; + @media screen and (max-width: 1024px) { + width: 97%; + height: 33px; + } } p.PaymentCardHolderDocument.input.text.required.mask{ display: none; @@ -60,6 +83,10 @@ body { #ship-postalCode{ border: 1px solid $color-gray8; border-radius: 8px; + + @media screen and (max-width: 1024px) { + width: 100%; + } } #find-pickups-manualy-button-denied{ color: $color-black2; @@ -78,6 +105,12 @@ body { display: none; } } + p.input.ship-postalCode.required.text{ + @media screen and (max-width: 1024px) { + width: 75%; + } + } + tbody.totalizers-list{ tr.srp-summary-result.hide{ display: none; @@ -125,9 +158,9 @@ body { div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ margin-bottom: 0; } - button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{ - margin-top: 47px; - } + } + button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{ + margin-top: 47px; } div.step.accordion-group.client-profile-data { .client-profile-email{ @@ -179,17 +212,6 @@ body { color: $color-gray9; } } - // form.form-page.client-pre-email.anim-death.anim-current{ - // span{ - // div#client-profile-data.span6.client-profile-data span{ - // font-size: 20px; - // line-height: 23px; - // } - // &::after{ - // display: none; - // } - // } - // } a#payment-group-creditCardPaymentGroup.payment-group-item, a#payment-group-bankInvoicePaymentGroup.payment-group-item { display: block; @@ -197,6 +219,9 @@ body { } .payment-group-list-btn{ width: 105%; + @media screen and (max-width: 1024px) { + width: 100%; + } } @@ -226,10 +251,177 @@ body { .container-order-form, .container-cart { width: 80%; + @media screen and (max-width: 1024px) { + width: 100%; + } + } + .row-fluid .full-cart.active, .row-fluid .orderform-template.active{ + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } + .row-fluid{ + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } + #client-profile-data{ + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + + span.help.error{ + font-size: 12px; + line-height: 14px; + &::after{ + display: none; + } + } + } + p.client-email.input.text.required{ + @media screen and (max-width: 1024px) { + width: 100%; + } + + #client-email{ + @media screen and (max-width: 1024px) { + width: 98.5%; + } + } + } + p.client-first-name.input.pull-left.text.required{ + @media screen and (max-width: 1024px) { + width: 50%; + margin-right: 0.5%; + } + #client-first-name{ + @media screen and (max-width: 1024px) { + width: 95.7%; + } + } + } + p.client-last-name.input.pull-left.text.required{ + @media screen and (max-width: 1024px) { + width: 49.5%; + } + #client-last-name{ + @media screen and (max-width: 1024px) { + width: 96.9%; + } + } + } + p.client-document.input.pull-left.text.required.mask{ + @media screen and (max-width: 1024px) { + width: 50%; + margin-right: 0.5%; + margin-bottom: 0; + } + #client-document{ + @media screen and (max-width: 1024px) { + width: 95.7%; + } + } + } + p.client-phone.input.pull-left.text.required.mask{ + @media screen and (max-width: 1024px) { + width: 49.5%; + margin-bottom: 0; + } + #client-phone{ + @media screen and (max-width: 1024px) { + width: 96.9%; + } + } + } + p.newsletter{ + @media screen and (max-width: 1024px) { + margin-top: 0; + } + } + } + #shipping-data{ + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + margin: 0; + } + div.accordion-inner.shipping-container{ + div.box-step{ + #postalCode-finished-loading{ + @media screen and (max-width: 1024px) { + width: 33%; + } + } + p.input.ship-postalCode.required.text{ + @media screen and (max-width: 1024px) { + width: 100%; + } + #ship-postalCode{ + @media screen and (max-width: 1024px) { + max-width: 98.5%; + } + } + } + div.vtex-omnishipping-1-x-address{ + @media screen and (max-width: 1024px) { + margin-bottom: 0; + } + p.input.ship-number.required.text{ + @media screen and (max-width: 1024px) { + margin-right: 0; + } + } + } + + } + } + } + #payment-data{ + @media screen and (max-width: 1024px) { + width: 100%; + padding: 0 16px; + margin: 0; + } + div.step.accordion-group.store-country-BRA.active{ + @media screen and (max-width: 1024px) { + width: 96.4%; + } + } + } + } + } + .container-cart { + + @media screen and (max-width: 1024px) { + width: 100%; + } } } .row-fluid .full-cart.active{ margin-bottom: 0; + + .row-fluid.summary{ + @media screen and (max-width: 1024px) { + display: flex; + flex-direction: column; + } + .span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ + @media screen and (max-width: 1024px) { + width: 100%; + margin: 0; + padding: 0 16px; + } + } + } + .clearfix.pull-right.cart-links.cart-links-bottom.hide{ + width: 97%; + padding: 0 16px; + + @media screen and (max-width: 1024px) { + margin-bottom: 3px; + } + } + } .btn-success { @@ -256,7 +448,7 @@ body { } } #cart-title{ - display: block !important; + // display: block !important; font-weight: 700; font-size: 24px; line-height: 33px; @@ -264,7 +456,11 @@ body { color: $color-black; margin: 16px 0; letter-spacing: 0.05em; - +} +#orderform-title{ + @media screen and (max-width: 1024px) { + margin: 16px 0 16px 16px; + } } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 3a13fe0..34b4e11 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -51,6 +51,10 @@ width: 10.8%; margin-right: 0px } + @media screen and (max-width: 1024px) { + width: 11.8%; + margin-right: 1.6%; + } } .footer-imgs-vtexpci{ width: 84.4%; @@ -73,6 +77,11 @@ width: 33.33%; justify-content: flex-end; + @media screen and (max-width: 1024px) { + justify-content: normal; + + } + .Link1{ justify-content: end; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 76bdaa9..1709158 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -3,6 +3,9 @@ .container { width: 79.53125%; margin: 0 auto; + @media screen and (max-width: 1024px) { + width: 97%; + } } &__wrapper { align-items: center; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 0e2c226..045ba3a 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -6,6 +6,11 @@ .footerCheckout__prateleira{ width: 79.38%; margin-bottom: 54px; + + @media screen and (max-width: 1024px) { + width: 96.5%; + margin: 0 10px 54px auto; + } } .footerCheckout__shelfList{ margin: 0; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 78a25f6..784f5a1 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -26,6 +26,7 @@ $color-gray8: #C4C4C4; $color-gray9: #808080; $color-gray10: #E0E0E0; $color-gray11: #828282; +$color-gray12: #F2F2F2; $color-blue: #4267b2; $color-blue2: #00C8FF; From 6ec191d2120daad44eeed7da1a97479bb0aa83d1 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Sun, 18 Dec 2022 23:48:34 -0300 Subject: [PATCH 8/8] =?UTF-8?q?Feat(Checkout):=20Cria=20a=20responsividade?= =?UTF-8?q?=20do=20que=20deu=20tempo=20da=20televis=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 62 +++++ .../sass/checkout/_checkout-autenticacao.scss | 59 ++++- .../sass/checkout/_checkout-carrinho.scss | 220 +++++++++++++----- .../sass/checkout/_checkout-vazio.scss | 13 +- .../src/arquivos/sass/checkout/_checkout.scss | 178 +++++++------- .../src/arquivos/sass/partials/_footer.scss | 10 + .../src/arquivos/sass/partials/_header.scss | 37 ++- .../arquivos/sass/partials/_prateleira.scss | 23 +- 8 files changed, 464 insertions(+), 138 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index fea78ed..77e3b2d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -20,6 +20,7 @@ export default class Footer { if (window.innerWidth < 1024){ this.addCarrosselMobile(); } + this.prateleiraView(); } @@ -34,6 +35,7 @@ export default class Footer { timeout: 5000, interval: 1000, }); + this.pratWrapper = await waitElement(".footerCheckout") } onUpdate() { @@ -154,4 +156,64 @@ export default class Footer { return peçaBase; }); } + + async prateleiraView() { + if (this.prateleira) { + const FooterCheck = document.querySelectorAll(".footerCheckout"); + FooterCheck.forEach((f) => { + const prat = f.children[0]; + + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + if (prat) { + prat.classList.add("view"); + } + + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/email" || + window.location.href === "https://m3academy.myvtex.com/checkout/#/profile" || + window.location.href == "https://m3academy.myvtex.com/checkout/#/shipping" + ) { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + } else if ( + window.location.href === "https://m3academy.myvtex.com/checkout/#/payment" + ) { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + if (prat) { + prat.classList.add("view"); + } + + } else if ( + window.location.hash === "#/email" || + window.location.hash === "#/profile" || + window.location.hash === "#/shipping" + ) { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + + } else if (window.location.hash == "#/payment") { + if (prat) { + if (prat.classList.contains("view")) { + prat.classList.remove("view"); + } + } + } + }); + }); + } + } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 620fb9c..ca21ab2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -20,6 +20,11 @@ @media screen and (max-width: 1024px) { margin-right: 16px; } + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } @@ -46,6 +51,11 @@ text-transform: uppercase; font-weight: 400; + @media screen and (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } + @media screen and (max-width: 1024px) { font-size: 14px; line-height: 16px; @@ -61,6 +71,11 @@ font-weight: 400; padding: 0; + @media screen and (min-width: 2500px) { + font-size: 40px; + line-height: 47px; + } + @media screen and (max-width: 1024px) { font-size: 14px; line-height: 16px; @@ -75,6 +90,10 @@ width: 57%; justify-content: flex-start; + @media screen and (min-width: 2500px) { + padding: 1px 0; + } + @media screen and (max-width: 1024px) { width: 97%; } @@ -102,6 +121,11 @@ line-height: 16px; display: flex; align-items: center; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } @media (max-width: 490px) { @@ -139,6 +163,11 @@ text-transform: uppercase; color: $color-black2; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + @media screen and (max-width: 1024px) { padding: 4px 18px; height: 50px; @@ -174,6 +203,11 @@ font-size: 12px; line-height: 16px; margin: 0 0 8px 0; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } ul { @@ -187,12 +221,21 @@ font-size: 12px; line-height: 16px; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } i::before { color: $color-blue2; font-size: 1rem; opacity: 1; + + @media screen and (min-width: 2500px) { + font-size: 1.5rem; + } } } } @@ -201,6 +244,10 @@ color: $color-black; font-size: 6rem; opacity: 0.5; + + @media screen and (min-width: 2500px) { + font-size: 9.8rem; + } } } } @@ -456,7 +503,14 @@ border-radius: 8px; color: #303030; padding: 12px; - padding-top: 2px; + padding-top: 15px; + position: relative; + + span.street, + span.neighborhood{ + padding-left: 31px; + } + &::before{ content: ""; width: 24px; @@ -464,6 +518,9 @@ background-image: url(https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png); background-repeat: no-repeat; background-size: 24px; + position: absolute; + left: 11px; + top: 23px; } @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 558e9f7..e7dd5bf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -7,7 +7,7 @@ width: 64%; height: 25px; } -input#creditCardpayment-card-0Number.input.medium{ +input#creditCardpayment-card-0Number.input.medium { width: 64%; height: 25px; } @@ -30,12 +30,12 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 16px 0; position: relative; } - .table.cart-items{ + .table.cart-items { @media screen and (max-width: 1024px) { - thead{ + thead { display: none; } - tbody{ + tbody { .shipping-date.empty, .quantity-price { display: none; @@ -98,6 +98,11 @@ input#creditCardpayment-card-0Number.input.medium{ border-top: none; margin-top: 0; padding-top: 0; + .hproduct.item.muted { + span.shipping-date.pull-left { + display: none; + } + } &:not(:first-child) { margin-top: 8px; @@ -146,14 +151,6 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 19px; letter-spacing: 0.05em; text-transform: uppercase; - - // &:hover { - // background: lighten($color-black, 5); - // } - - // &:active { - // background: darken($color-black, 5); - // } } } @@ -165,7 +162,7 @@ input#creditCardpayment-card-0Number.input.medium{ .product-item { padding: 16px 0; - .product-name{ + .product-name { padding-top: 10px; @media screen and (max-width: 1024px) { @@ -184,32 +181,47 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 16px; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + @include mq(md, max) { &.quantity-price, &.shipping-date { display: none; } } - &.shipping-date{ + &.shipping-date { font-size: 0; line-height: 0; - &::after{ + &::after { content: "Frete"; font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } - &.product-price{ + &.product-price { font-size: 0; line-height: 0; - &::after{ + &::after { content: "Unidade"; font-weight: 400; font-size: 14px; line-height: 16px; color: $color-black; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } @@ -219,6 +231,11 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: 60px; + @media screen and (min-width: 2500px) { + width: 146px; + height: 156px; + } + @media screen and (max-width: 1024px) { padding: 0 16px; } @@ -232,19 +249,28 @@ input#creditCardpayment-card-0Number.input.medium{ max-width: 100%; width: 100%; + @media screen and (min-width: 2500px) { + height: 156px; + } + + @media screen and (min-width: 2500px) { + width: 146px; + // height: 156px; + } + @include mq(sm, max) { height: 72px; width: auto; } } } - .badge{ + .badge { display: none; } - #hproduct-item-2616{ + #hproduct-item-2616 { width: 60px; } - .price{ + .price { padding-top: 15px; } .product-name { @@ -270,11 +296,16 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; transition: ease-in 0.22s all; - &:hover { - color: darken($color-blue, 10); - text-decoration: none; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; } + // &:hover { + // color: darken($color-blue, 10); + // text-decoration: none; + // } + @media (max-width: 490px) { margin-left: 23px; } @@ -286,11 +317,21 @@ input#creditCardpayment-card-0Number.input.medium{ } } + td.quantity-price{ + @media screen and (min-width: 2500px) { + width: 188px; + } + } td.shipping-date { color: $color-gray2; font-size: 12px; line-height: 14px; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + @media screen and (max-width: 1024px) { display: none; } @@ -317,6 +358,11 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; text-decoration-line: line-through; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + @media screen and (max-width: 1024px) { padding-left: 8px; } @@ -331,7 +377,7 @@ input#creditCardpayment-card-0Number.input.medium{ } } } - td.product-price{ + td.product-price { padding: 10px 5px 0 5px; @media screen and (max-width: 1024px) { float: right; @@ -339,7 +385,7 @@ input#creditCardpayment-card-0Number.input.medium{ height: 37px; } } - td.item-remove{ + td.item-remove { @media screen and (max-width: 1024px) { position: absolute; right: 10px; @@ -401,7 +447,7 @@ input#creditCardpayment-card-0Number.input.medium{ // padding: 1px 12px; } } - .item-quantity-change-decrement{ + .item-quantity-change-decrement { width: 16px; height: 16px; margin-left: 11px; @@ -416,7 +462,7 @@ input#creditCardpayment-card-0Number.input.medium{ &:before { content: "-"; font-size: 14px; - background-color: #00C8FF; + background-color: #00c8ff; border-radius: 50%; height: 100%; width: 100%; @@ -462,10 +508,19 @@ input#creditCardpayment-card-0Number.input.medium{ font-size: 14px; line-height: 16px; color: $color-black; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } - &.total-selling-price{ + &.total-selling-price { font-weight: 700; line-height: 19px; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } } } @@ -517,6 +572,12 @@ input#creditCardpayment-card-0Number.input.medium{ @include mq(md, max) { padding: 0 16px; } + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + max-width: none; + } + @media screen and (max-width: 1024px) { padding: 0 0 0 16px; } @@ -529,6 +590,11 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 33px; color: $color-black2; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-top: 0; } @@ -540,6 +606,12 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 18px; margin: 0 0 10px; + @media screen and (min-width: 2500px) { + max-width: 34.5rem; + font-size: 28px; + line-height: 36px; + } + @media screen and (max-width: 1024px) { max-width: 17.32rem; } @@ -560,6 +632,11 @@ input#creditCardpayment-card-0Number.input.medium{ margin-top: 0; text-transform: uppercase; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -632,7 +709,7 @@ input#creditCardpayment-card-0Number.input.medium{ .blue { color: $color-black2 !important; } - .gray{ + .gray { color: $color-gray8; } @@ -691,7 +768,6 @@ input#creditCardpayment-card-0Number.input.medium{ right: -36px; top: 28px; } - } small a { @@ -703,13 +779,13 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-black2; margin-top: 7px; - &::after{ + &::after { content: "Não sei meu código postal"; font-size: 10px; line-height: 12px; font-weight: 400; - :hover{ + :hover { text-decoration: underline; } } @@ -790,6 +866,10 @@ input#creditCardpayment-card-0Number.input.medium{ padding: 0; width: 346px; + @media screen and (min-width: 2500px) { + width: 688px; + } + .coupon-data { #cart-link-coupon-add { text-decoration: none; @@ -805,6 +885,11 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; color: $color-black2; text-decoration: none; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } @@ -816,7 +901,6 @@ input#creditCardpayment-card-0Number.input.medium{ .coupon-column { .coupon { margin: 0; - } .link-coupon-add { @@ -826,7 +910,7 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 14px; text-decoration: underline; } - .coupon-label{ + .coupon-label { margin-bottom: 4px; } .coupon-label label { @@ -907,7 +991,6 @@ input#creditCardpayment-card-0Number.input.medium{ @include mq(md, max) { width: 138px; } - } } } @@ -930,6 +1013,11 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-black; padding: 12px 0; + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } + @media screen and (max-width: 1024px) { padding: 10px 0; } @@ -942,6 +1030,10 @@ input#creditCardpayment-card-0Number.input.medium{ &.monetary { text-align: right; + + @media screen and (min-width: 2500px) { + width: 188px; + } } } } @@ -955,50 +1047,60 @@ input#creditCardpayment-card-0Number.input.medium{ line-height: 19px; color: $color-black; float: none; + + @media screen and (min-width: 2500px) { + font-size: 36px; + line-height: 49px; + } } - td.info{ + td.info { font-weight: 700; font-size: 18px; line-height: 25px; font-family: $font-family; + @media screen and (min-width: 2500px) { + font-size: 36px; + line-height: 49px; + } + @media screen and (max-width: 1024px) { padding: 14px 0; } } - td.monetary{ + td.monetary { padding-right: 0px; } } } } } - .Items{ + .Items { // border-top: 1px solid; border-bottom: 1px solid; - .info{ - padding: 20px 0 10px 0 ; + .info { + padding: 20px 0 10px 0; padding-left: 0; float: none; } - .monetary{ - padding-right: 0px ; + .monetary { + padding-right: 0px; float: none; } } - .Discounts{ + .Discounts { border-bottom: 1px solid; - .info{ - padding: 20px 0 10px 0 ; + .info { + padding: 20px 0 10px 0; padding-left: 0; float: none; } - .monetary{ - padding-right: 0px ; + .monetary { + padding-right: 0px; float: none; } } - .coupon-data{ + .coupon-data { display: block !important; margin-top: 33px; @@ -1030,6 +1132,11 @@ input#creditCardpayment-card-0Number.input.medium{ text-align: center; margin-bottom: 14px; + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + @include mq(md, max) { margin-bottom: 0px; } @@ -1043,8 +1150,14 @@ input#creditCardpayment-card-0Number.input.medium{ color: $color-black2; text-decoration: none; - &#cart-choose-more-products.more.link-choose-more-products{ + &#cart-choose-more-products.more.link-choose-more-products { margin-right: 0; + + @media screen and (min-width: 2500px) { + height: 156px; + font-size: 24px; + line-height: 28px; + } } } } @@ -1059,10 +1172,6 @@ input#creditCardpayment-card-0Number.input.medium{ transition: ease-in 0.22s all; padding: 12px 19px; - // &:hover { - // background-color: darken($color-green, 5); - // } - &:after { content: "finalizar compra"; font-family: $font-family; @@ -1074,6 +1183,11 @@ input#creditCardpayment-card-0Number.input.medium{ vertical-align: middle; line-height: 19px; text-shadow: none; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 5f46c87..80eb4a8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -29,6 +29,11 @@ line-height: 33px; color: $color-black2; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } + @media screen and (max-width: 1024px) { font-size: 18px; line-height: 25px; @@ -59,9 +64,6 @@ width: 30.31%; } - // &:hover { - // background: lighten($color-white, 5); - // } &::before{ content: "Continuar comprando"; font-family: $font-family-secundary; @@ -72,6 +74,11 @@ text-align: center; color: $color-black2; text-transform: uppercase; + + @media screen and (min-width: 2500px) { + font-size: 28px; + line-height: 33px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index b545b2a..6e4d7b1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,7 +12,8 @@ footer .footerCheckout__wrapper { width: 100%; margin: auto auto 0 auto; border-top: 1px solid $color-black2; - .container{ + + .container { display: flex; align-items: center; width: 94.9734%; @@ -21,7 +22,6 @@ footer .footerCheckout__wrapper { align-items: baseline; width: 97%; gap: 16px; - background-color: rebeccapurple; } } } @@ -30,17 +30,20 @@ header { width: 100%; margin: 0 auto; } -header{ +header { border-bottom: 1px solid $color-black2; padding: 29px 0; @media screen and (max-width: 1024px) { padding: 16px 0; } } -.headerCheckout__safeBuy{ +.headerCheckout__safeBuy { display: flex; gap: 8px; height: 15px; + @media screen and (min-width: 2500px) { + height: 33px; + } } body { @@ -48,13 +51,17 @@ body { flex-direction: column; min-height: 100% !important; padding-top: 0 !important; + position: relative; - .SecurityEnvironmentIcon{ + .SecurityEnvironmentIcon { @media screen and (max-width: 1024px) { display: none; } } - .vtex-omnishipping-1-x-leanShippingOptionActive{ + .view { + display: block !important; + } + .vtex-omnishipping-1-x-leanShippingOptionActive { background: $color-gray12 !important; } @@ -66,21 +73,24 @@ body { height: 33px; } } - p.PaymentCardHolderDocument.input.text.required.mask{ + div.row-fluid.orderform-template.span12.active{ + min-height: 580px; + } + p.PaymentCardHolderDocument.input.text.required.mask { display: none; } - .PaymentInstallments select{ + .PaymentInstallments select { width: 68%; } - input#creditCardpayment-card-0Name.input-medium{ + input#creditCardpayment-card-0Name.input-medium { width: 34%; height: 25px; } - .input#creditCardpayment-card-0Code.input-mini{ + .input#creditCardpayment-card-0Code.input-mini { width: 16%; height: 25px; } - #ship-postalCode{ + #ship-postalCode { border: 1px solid $color-gray8; border-radius: 8px; @@ -88,56 +98,56 @@ body { width: 100%; } } - #find-pickups-manualy-button-denied{ + #find-pickups-manualy-button-denied { color: $color-black2; outline: none; - &:hover{ + &:hover { background: $color-white; color: $color-black2; } - &:active{ + &:active { background: $color-white; color: $color-black2; } } - #payment-data-submit{ - i.icon-lock{ + #payment-data-submit { + i.icon-lock { display: none; } } - p.input.ship-postalCode.required.text{ + p.input.ship-postalCode.required.text { @media screen and (max-width: 1024px) { width: 75%; } } - tbody.totalizers-list{ - tr.srp-summary-result.hide{ + tbody.totalizers-list { + tr.srp-summary-result.hide { display: none; } } - div.cart-fixed.cart-fixed-transition.affix-top{ - .Items{ + div.cart-fixed.cart-fixed-transition.affix-top { + .Items { border-top: 1px solid $color-gray10; border-bottom: 1px solid $color-gray10; - .info{ + .info { padding: 26px 0 !important; padding-left: 17px !important; float: none; } - .monetary{ + .monetary { padding-right: 17px !important; float: none; } } - .Discounts{ + .Discounts { border-bottom: 1px solid $color-gray10; - .info{ + .info { padding: 26px 0 !important; padding-left: 17px !important; float: none; } - .monetary{ + .monetary { padding-right: 17px !important; float: none; } @@ -148,33 +158,33 @@ body { padding-top: 30px; padding-bottom: 0px; } - td.info{ + td.info { padding-left: 17px; } - td.monetary{ + td.monetary { padding-right: 17px; } } - div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ + div.span5.totalizers.summary-totalizers.cart-totalizers.pull-right { margin-bottom: 0; } } - button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block{ + button#payment-data-submit.submit.btn.btn-success.btn-large.btn-block { margin-top: 47px; } div.step.accordion-group.client-profile-data { - .client-profile-email{ + .client-profile-email { margin-bottom: 6px; } - .client-profile-summary{ - span{ + .client-profile-summary { + span { margin-bottom: 6px; } } - span{ + span { font-size: 0; line-height: 0; - &::after{ + &::after { content: "Identificação"; font-family: $font-family-secundary; font-style: normal; @@ -188,14 +198,14 @@ body { span.email, span.name, span.tel, - span.newsletter-text{ - &::after{ + span.newsletter-text { + &::after { display: none; } } span.email, span.name, - span.tel{ + span.tel { font-family: $font-family; font-style: normal; font-weight: 400; @@ -203,7 +213,7 @@ body { line-height: 16px; color: $color-gray2; } - span.newsletter-text{ + span.newsletter-text { font-family: $font-family; font-style: normal; font-weight: 400; @@ -215,16 +225,14 @@ body { a#payment-group-creditCardPaymentGroup.payment-group-item, a#payment-group-bankInvoicePaymentGroup.payment-group-item { display: block; - } - .payment-group-list-btn{ + .payment-group-list-btn { width: 105%; @media screen and (max-width: 1024px) { width: 100%; } } - @include mq(md, max) { padding-left: 0; } @@ -255,134 +263,134 @@ body { width: 100%; } } - .row-fluid .full-cart.active, .row-fluid .orderform-template.active{ + .row-fluid .full-cart.active, + .row-fluid .orderform-template.active { @media screen and (max-width: 1024px) { display: flex; flex-direction: column; } - .row-fluid{ + .row-fluid { @media screen and (max-width: 1024px) { display: flex; flex-direction: column; } - #client-profile-data{ + #client-profile-data { @media screen and (max-width: 1024px) { width: 100%; padding: 0 16px; - span.help.error{ + span.help.error { font-size: 12px; line-height: 14px; - &::after{ + &::after { display: none; } } } - p.client-email.input.text.required{ + p.client-email.input.text.required { @media screen and (max-width: 1024px) { width: 100%; } - #client-email{ + #client-email { @media screen and (max-width: 1024px) { width: 98.5%; } } } - p.client-first-name.input.pull-left.text.required{ + p.client-first-name.input.pull-left.text.required { @media screen and (max-width: 1024px) { width: 50%; margin-right: 0.5%; } - #client-first-name{ + #client-first-name { @media screen and (max-width: 1024px) { width: 95.7%; } } } - p.client-last-name.input.pull-left.text.required{ + p.client-last-name.input.pull-left.text.required { @media screen and (max-width: 1024px) { width: 49.5%; } - #client-last-name{ + #client-last-name { @media screen and (max-width: 1024px) { width: 96.9%; } } } - p.client-document.input.pull-left.text.required.mask{ + p.client-document.input.pull-left.text.required.mask { @media screen and (max-width: 1024px) { width: 50%; margin-right: 0.5%; margin-bottom: 0; } - #client-document{ + #client-document { @media screen and (max-width: 1024px) { width: 95.7%; } } } - p.client-phone.input.pull-left.text.required.mask{ + p.client-phone.input.pull-left.text.required.mask { @media screen and (max-width: 1024px) { width: 49.5%; margin-bottom: 0; } - #client-phone{ + #client-phone { @media screen and (max-width: 1024px) { width: 96.9%; } } } - p.newsletter{ + p.newsletter { @media screen and (max-width: 1024px) { margin-top: 0; } } } - #shipping-data{ + #shipping-data { @media screen and (max-width: 1024px) { width: 100%; padding: 0 16px; margin: 0; } - div.accordion-inner.shipping-container{ - div.box-step{ - #postalCode-finished-loading{ + div.accordion-inner.shipping-container { + div.box-step { + #postalCode-finished-loading { @media screen and (max-width: 1024px) { width: 33%; } } - p.input.ship-postalCode.required.text{ + p.input.ship-postalCode.required.text { @media screen and (max-width: 1024px) { width: 100%; } - #ship-postalCode{ + #ship-postalCode { @media screen and (max-width: 1024px) { max-width: 98.5%; } } } - div.vtex-omnishipping-1-x-address{ + div.vtex-omnishipping-1-x-address { @media screen and (max-width: 1024px) { margin-bottom: 0; } - p.input.ship-number.required.text{ + p.input.ship-number.required.text { @media screen and (max-width: 1024px) { margin-right: 0; } } } - } } } - #payment-data{ + #payment-data { @media screen and (max-width: 1024px) { width: 100%; padding: 0 16px; margin: 0; } - div.step.accordion-group.store-country-BRA.active{ + div.step.accordion-group.store-country-BRA.active { @media screen and (max-width: 1024px) { width: 96.4%; } @@ -391,21 +399,20 @@ body { } } .container-cart { - @media screen and (max-width: 1024px) { width: 100%; } } } -.row-fluid .full-cart.active{ +.row-fluid .full-cart.active { margin-bottom: 0; - .row-fluid.summary{ + .row-fluid.summary { @media screen and (max-width: 1024px) { display: flex; flex-direction: column; } - .span5.totalizers.summary-totalizers.cart-totalizers.pull-right{ + .span5.totalizers.summary-totalizers.cart-totalizers.pull-right { @media screen and (max-width: 1024px) { width: 100%; margin: 0; @@ -413,15 +420,19 @@ body { } } } - .clearfix.pull-right.cart-links.cart-links-bottom.hide{ + .clearfix.pull-right.cart-links.cart-links-bottom.hide { width: 97%; padding: 0 16px; + @media screen and (min-width: 2500px) { + width: 34.4%; + padding: 0; + } + @media screen and (max-width: 1024px) { - margin-bottom: 3px; + margin-bottom: 25px; } } - } .btn-success { @@ -443,11 +454,16 @@ body { margin: 17px 0; text-transform: uppercase; + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } + @include mq(md, max) { margin-left: 30px; } } -#cart-title{ +#cart-title { // display: block !important; font-weight: 700; font-size: 24px; @@ -456,14 +472,18 @@ body { color: $color-black; margin: 16px 0; letter-spacing: 0.05em; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } } -#orderform-title{ +#orderform-title { @media screen and (max-width: 1024px) { margin: 16px 0 16px 16px; } } - .dropdown { &__content { &--closed { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 34b4e11..5b06b97 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -20,6 +20,11 @@ text-transform: capitalize; width: 33.33%; + @media screen and (min-width: 2500px) { + font-size: 20px; + line-height: 27px; + } + &::after{ content: "."; } @@ -112,6 +117,11 @@ line-height: 12px; text-decoration: none; + @media screen and (min-width: 2500px) { + font-size: 18px; + line-height: 25px; + } + span { margin-right: 8px; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 1709158..f58c6ba 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -19,9 +19,12 @@ padding: 0; grid-template-columns: 2fr 1fr 2fr; width: 439px; - /* border: 1px solid rgb(59, 51, 51); */ margin: 0; + @media screen and (min-width: 2500px) { + width: 1078px; + } + .li-volta-borda-1, .li-volta-borda-2, .li-volta-centro { @@ -37,6 +40,11 @@ margin-bottom: 9px; font-family: $font-family-secundary; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } .p-bola1, .p-bola2, @@ -46,6 +54,11 @@ width: 10px; height: 10px; background-color: $color-white; + + @media screen and (min-width: 2500px) { + width: 22px; + height: 22px; + } } .div-itens{ display: flex; @@ -78,6 +91,12 @@ margin: 0; width: 97%; transform: translateY(-7px); + + @media screen and (min-width: 2500px) { + transform: translateY(-12px); + left: 21.6%; + width: 100.5%; + } } .p-borda-2{ border-top: 1.5px solid black; @@ -87,6 +106,12 @@ margin: 0; width: 100.8%; transform: translateY(-7px); + + @media screen and (min-width: 2500px) { + transform: translateY(-12px); + right: 17.8%; + width: 104.2%; + } } .active{ background: $color-black2; @@ -99,6 +124,11 @@ img { height: 37.14px; width: auto; + + @media screen and (min-width: 2500px) { + min-width: 382px; + height: 91.2px; + } } } @@ -113,6 +143,11 @@ font-size: 12px; line-height: 14px; color: $color-black; + + @media screen and (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } i { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 045ba3a..bee6bfe 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -6,10 +6,12 @@ .footerCheckout__prateleira{ width: 79.38%; margin-bottom: 54px; + display: none; + margin: 0 9.7% 54px auto; @media screen and (max-width: 1024px) { width: 96.5%; - margin: 0 10px 54px auto; + margin: 0 1% 54px auto; } } .footerCheckout__shelfList{ @@ -34,6 +36,11 @@ line-height: 38px; text-align: center; color: $color-black2; + + @media screen and (min-width: 2500px) { + font-size: 48px; + line-height: 76px; + } } .footerCheckout__shelfList-name{ font-family: $font-family; @@ -45,6 +52,10 @@ color: $color-black2; margin: 20px 0; width: 95%; + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } } .footerCheckout__shelfList-skus-wrapper{ .footerCheckout__shelfList-skus{ @@ -63,6 +74,11 @@ font-weight: 700; font-size: 13px; line-height: 18px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } } display: flex; text-align: center; @@ -94,6 +110,11 @@ font-weight: 700; font-size: 13px; line-height: 18px; + + @media screen and (min-width: 2500px) { + font-size: 26px; + line-height: 35px; + } } } }