From a4845808d91d73bbab75e758f4baa398afcfce68 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 13 Dec 2022 16:42:05 -0300 Subject: [PATCH 01/24] feat(header): Adiciona html da barra de progresso --- checkout/src/arquivos/js/components/Header.js | 50 +++++++++++++++++-- 1 file changed, 47 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 6744524..49d4390 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,14 +8,58 @@ export default class Header { async init() { await this.selectors(); - console.log(this.item); + //console.log(this.item); + this.progressBarHTML(); } async selectors() { - this.item = await waitElement("#my-element", { + /*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"); + } + + progressBarHTML() { + if(this.progressBar && window.innerWidth >1024) { + this.progressBar.innerHTML = ` + + `; + } + + if(this.progressBar && window.innerWidth <= 1024) { + this.progressBar.innerHTML = ""; + } } } From 0f14bfe41857b8a92b51feb0021ec728e1ac11dc Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 13 Dec 2022 22:54:09 -0300 Subject: [PATCH 02/24] fix(header): Corrige erro em classes --- checkout/src/arquivos/js/components/Header.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index 49d4390..bb3d0b0 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -37,7 +37,7 @@ export default class Header {
  • -
    +

    Dados Pessoais

    @@ -50,7 +50,7 @@ export default class Header {

    Pagamento

    -

    +

    • From 7409bb9cc9592a91ad313d08e8efd33f0cbbb9ae Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 13 Dec 2022 22:56:37 -0300 Subject: [PATCH 03/24] feat(header): Aplica css na barra de progresso --- .../src/arquivos/sass/checkout/_checkout.scss | 4 + .../src/arquivos/sass/partials/_header.scss | 105 +++++++++++++++++- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 3 files changed, 107 insertions(+), 3 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5fb011f..8cfe2a8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -3,6 +3,10 @@ @import "./checkout-pagamento"; @import "./checkout-autenticacao"; +* { + box-sizing: border-box; +} + html { height: 100%; min-height: 100%; diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 8b44777..b0b050a 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,12 +1,111 @@ /* _header.scss */ .headerCheckout { + padding: 29px 0; + .container { width: auto !important; + + #progressBar { + width: 439px; + + ul { + list-style-type: none; + display: flex; + align-items: center; + justify-content: space-between; + margin: 0 !important; + } + + li { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 39.40%; + } + + li .container-li { + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + position: relative; + } + + li:first-child .container-li { + align-items: flex-start; + } + + li:last-child .container-li { + align-items: flex-end; + } + + li .progress-bar-center { + width: auto; + } + + li .progress-bar-center .container-li { + align-items: center; + margin-left: 7px; + } + + li .container-li div { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + + li .container-li div .progress-bar-text { + font-family: $font-family-secundary; + line-height: 14px; + font-size: 12px; + font-weight: 400; + color: $color-black2; + margin-bottom: 9px; + } + + #progress-bar-circle-1, + #progress-bar-circle-2, + #progress-bar-circle-3 { + width: 12px; + height: 12px; + border: 1px solid $color-black2; + background-color: $color-white; + border-radius: 50%; + z-index: map-get($z-index, level2 ); + } + + #progress-bar-circle-1.active, + #progress-bar-circle-2.active, + #progress-bar-circle-3.active { + border: none; + background-color: $color-black2; + } + + .progress-bar-line-1, + .progress-bar-line-2 { + position: absolute; + width: 177px; + height: 1px; + border-top: 1px solid $color-black2; + bottom: 5px; + } + + .progress-bar-line-1 { + left: 28%; + } + + .progress-bar-line-2 { + right: 25%; + } + } } + &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 2fr 1fr 2fr; + align-items: center; } &__logo { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index f000abe..02599ac 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; +$color-black2: #000000; $color-white: #fff; From a888a232b4159cb807c54bb2e3a3a6f1afa19f73 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Tue, 13 Dec 2022 23:40:01 -0300 Subject: [PATCH 04/24] feat(header): Aplica css no elemento de compra segura --- checkout/src/arquivos/sass/partials/_header.scss | 13 +++++++++---- checkout/src/arquivos/sass/utils/_variaveis.scss | 1 + 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index b0b050a..eebcbf2 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -116,6 +116,11 @@ } &__safeBuy { + display: flex; + align-items: center; + justify-content: flex-end; + gap: 8px; + span { align-items: center; display: flex; @@ -124,12 +129,12 @@ font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-gray; + line-height: 16px; + color: $color-gray6; } - i { - margin-right: 8px; + img { + width: 12px; } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 02599ac..31efc82 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6:#292929; $color-blue: #4267b2; From 629d07ba5c90d6d892a5dd72ead750af259cc69b Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 14 Dec 2022 01:18:42 -0300 Subject: [PATCH 05/24] =?UTF-8?q?refactor:=20Exclui=20vari=C3=A1vel=20com?= =?UTF-8?q?=20valor=20repetido?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/sass/utils/_variaveis.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 31efc82..02599ac 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,7 +15,6 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; -$color-gray6:#292929; $color-blue: #4267b2; From a4650f09019f9f66b5f2b82144a094f84f6c5ccd Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 14 Dec 2022 01:22:27 -0300 Subject: [PATCH 06/24] feat(header): Aplica css na logo e na borda bottom, e ajusta css header --- .../src/arquivos/sass/checkout/_checkout.scss | 7 ++++++- .../src/arquivos/sass/partials/_header.scss | 21 ++++++++++--------- 2 files changed, 17 insertions(+), 11 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 8cfe2a8..98c2eb7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -16,9 +16,14 @@ footer .footerCheckout__wrapper { width: 94.9734%; margin: auto auto 0 auto; } + +header { + width: 100%; + border-bottom: 1px solid $color-black2; +} + footer .footerCheckout__prateleira, header { - width: 79.53125%; margin: 0 auto; } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index eebcbf2..a4950b4 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,9 +1,8 @@ /* _header.scss */ .headerCheckout { - padding: 29px 0; - .container { - width: auto !important; + width: 79.53125%; + padding: 29px 0; #progressBar { width: 439px; @@ -103,22 +102,24 @@ } &__wrapper { - display: grid; - grid-template-columns: 2fr 1fr 2fr; - align-items: center; + align-items: center; + display: flex; + justify-content: space-between; } &__logo { + width: 15.284%; + img { - height: 52px; - width: auto; + width: 100%; + height: auto; } } &__safeBuy { display: flex; align-items: center; - justify-content: flex-end; + justify-content: center; gap: 8px; span { @@ -130,7 +131,7 @@ font-weight: normal; font-size: 12px; line-height: 16px; - color: $color-gray6; + color: $color-black; } img { From 78aa7171bad91c1bd8db48fbf02ba3c0c499f14c Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 14 Dec 2022 12:28:31 -0300 Subject: [PATCH 07/24] =?UTF-8?q?refactor(header):=20Aplica=20mudan=C3=A7a?= =?UTF-8?q?=20no=20c=C3=B3digo=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/sass/partials/_header.scss | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index a4950b4..3c46fd9 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -53,6 +53,7 @@ flex-direction: column; align-items: center; justify-content: center; + width: auto; } li .container-li div .progress-bar-text { @@ -92,7 +93,7 @@ } .progress-bar-line-1 { - left: 28%; + left: 25%; } .progress-bar-line-2 { @@ -102,13 +103,14 @@ } &__wrapper { - align-items: center; - display: flex; - justify-content: space-between; + display: grid; + grid-template-columns: 2fr 1fr 2fr; + align-items: center; } &__logo { - width: 15.284%; + display: block; + width: 53.741%; img { width: 100%; @@ -119,7 +121,7 @@ &__safeBuy { display: flex; align-items: center; - justify-content: center; + justify-content: flex-end; gap: 8px; span { From 8365bff72b6f575fa10786d0b1670367748ef3ab Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 14 Dec 2022 15:39:49 -0300 Subject: [PATCH 08/24] feat(header): Aplica css no header desktop para telas a partir de 2500px --- .../src/arquivos/sass/partials/_header.scss | 47 +++++++++++++++++-- .../src/arquivos/sass/utils/_variaveis.scss | 3 +- 2 files changed, 46 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 3c46fd9..2f0e98e 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -5,7 +5,11 @@ padding: 29px 0; #progressBar { - width: 439px; + width: 440px; + + @include mq(xg, min) { + width: 1081px; + } ul { list-style-type: none; @@ -20,7 +24,7 @@ flex-direction: column; align-items: center; justify-content: center; - width: 39.40%; + width: 100%; } li .container-li { @@ -63,6 +67,12 @@ font-weight: 400; color: $color-black2; margin-bottom: 9px; + + @include mq(xg, min) { + line-height: 28px; + font-size: 24px; + margin-bottom: 15px; + } } #progress-bar-circle-1, @@ -74,6 +84,11 @@ background-color: $color-white; border-radius: 50%; z-index: map-get($z-index, level2 ); + + @include mq(xg, min) { + width: 24px; + height: 24px; + } } #progress-bar-circle-1.active, @@ -86,18 +101,31 @@ .progress-bar-line-1, .progress-bar-line-2 { position: absolute; - width: 177px; + width: 176px; height: 1px; border-top: 1px solid $color-black2; bottom: 5px; + + @include mq(xg, min) { + width: 449px; + bottom: 10px; + } } .progress-bar-line-1 { left: 25%; + + @include mq(xg, min) { + left: 21.5%; + } } .progress-bar-line-2 { right: 25%; + + @include mq(xg, min) { + right: 21.5%; + } } } } @@ -112,6 +140,10 @@ display: block; width: 53.741%; + @include mq(xg, min) { + width: 382px; + } + img { width: 100%; height: auto; @@ -134,10 +166,19 @@ font-size: 12px; line-height: 16px; color: $color-black; + + @include mq(xg, min) { + line-height: 33px; + font-size: 24px; + } } img { width: 12px; + + @include mq(xg, min) { + width: 29px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 02599ac..0dfa0b5 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -27,7 +27,8 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, + xg : 2500px ) !default; $z-index: ( From bc65d570b8a0366aa27a7efbba8bc771e3bd5cfe Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 14 Dec 2022 17:20:23 -0300 Subject: [PATCH 09/24] feat(header): Aplica css no header mobiles --- checkout/src/arquivos/js/components/Header.js | 4 +- .../src/arquivos/sass/partials/_header.scss | 37 ++++++++++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 5 ++- 3 files changed, 36 insertions(+), 10 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index bb3d0b0..fb05e00 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -56,9 +56,7 @@ export default class Header { `; - } - - if(this.progressBar && window.innerWidth <= 1024) { + } else if(this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ""; } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 2f0e98e..f5deba5 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,8 +1,17 @@ /* _header.scss */ .headerCheckout { .container { - width: 79.53125%; - padding: 29px 0; + width: 96.875%; + padding: 16px 0 !important; + + @include mq(xm, min) { + width: 79.53125%; + padding: 29px 0; + } + + @include mq(xp, max) { + width: 91.4666%; + } #progressBar { width: 440px; @@ -131,19 +140,30 @@ } &__wrapper { - display: grid; - grid-template-columns: 2fr 1fr 2fr; - align-items: center; + display: flex; + align-items: center; + justify-content: space-between; + + @include mq(xm, min) { + display: grid; + grid-template-columns: 2fr 1fr 2fr; + align-items: center; + } } &__logo { display: block; - width: 53.741%; + max-width: 155px; + width: 100%; @include mq(xg, min) { width: 382px; } + @include mq(xpp, max) { + min-width: 45.2%; + } + img { width: 100%; height: auto; @@ -155,6 +175,11 @@ align-items: center; justify-content: flex-end; gap: 8px; + min-width: 119px; + + @include mq(xm, min) { + width: 100%; + } span { align-items: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 0dfa0b5..5738aa9 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,10 +23,13 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, - cstm: 400, + xpp: 376px, + cstm: 400px, sm: 576px, + xp: 599px, md: 768px, lg: 992px, + xm: 1025px, xl: 1200px, xg : 2500px ) !default; From 40575c76050cfe2287d161e2f8c654b641543c54 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Wed, 14 Dec 2022 17:33:15 -0300 Subject: [PATCH 10/24] =?UTF-8?q?refactor(header):=20Aplica=20mudan=C3=A7a?= =?UTF-8?q?=20no=20css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/sass/partials/_header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index f5deba5..ae26ae2 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -6,7 +6,7 @@ @include mq(xm, min) { width: 79.53125%; - padding: 29px 0; + padding: 29px 0 !important; } @include mq(xp, max) { @@ -157,7 +157,7 @@ width: 100%; @include mq(xg, min) { - width: 382px; + min-width: 382px; } @include mq(xpp, max) { From 7a768f242fdaa1ee119cd48d2f9af5ead90c82b3 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 15 Dec 2022 12:18:08 -0300 Subject: [PATCH 11/24] feat(header): Aplica o script na barra de progresso --- checkout/src/arquivos/js/components/Header.js | 112 ++++++++++++++++-- 1 file changed, 103 insertions(+), 9 deletions(-) diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index fb05e00..c111f2d 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -8,22 +8,16 @@ export default class Header { async init() { await this.selectors(); - //console.log(this.item); this.progressBarHTML(); + await this.progressBarChange(); } 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"); } progressBarHTML() { - if(this.progressBar && window.innerWidth >1024) { + if (this.progressBar && window.innerWidth > 1024) { this.progressBar.innerHTML = `
    • @@ -56,8 +50,108 @@ export default class Header {
    `; - } else if(this.progressBar && window.innerWidth <= 1024) { + } else if (this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ""; } } + + async progressBarChange() { + if (this.progressBar && window.innerWidth > 1024) { + const progressBarList = document.querySelectorAll("#progressBar ul li"); + + progressBarList.forEach((li) => { + const progressBarCircle1 = li.children[0].children[0].children["progress-bar-circle-1"]; + const progressBarCircle2 = li.children[0].children[0].children["progress-bar-circle-2"]; + const progressBarCircle3 = li.children[0].children[0].children["progress-bar-circle-3"]; + + if (window.location.href === "https://m3academy.myvtex.com/checkout/#/cart") { + + if (progressBarCircle1) { + progressBarCircle1.classList.add("active"); + } + + if (progressBarCircle2) { + progressBarCircle2.classList.remove("active"); + } + + if (progressBarCircle3) { + progressBarCircle3.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 (progressBarCircle1) { + progressBarCircle1.classList.remove("active"); + } + + if (progressBarCircle3) { + progressBarCircle3.classList.remove("active"); + } + + if (progressBarCircle2) { + progressBarCircle2.classList.add("active"); + } + + } else if (window.location.href === "https://m3academy.myvtex.com/checkout/#/payment") { + + if (progressBarCircle1) { + progressBarCircle1.classList.remove("active"); + } + + if (progressBarCircle2) { + progressBarCircle2.classList.remove("active"); + } + + if (progressBarCircle3) { + progressBarCircle3.classList.add("active"); + } + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + + if (progressBarCircle1) { + progressBarCircle1.classList.add("active"); + } + + if (progressBarCircle2) { + progressBarCircle2.classList.remove("active"); + } + + if (progressBarCircle3) { + progressBarCircle3.classList.remove("active"); + } + + } else if (window.location.hash == "#/email" || window.location.hash == "#/profile" || window.location.hash == "#/shipping") { + + if (progressBarCircle1) { + progressBarCircle1.classList.remove("active"); + } + + if (progressBarCircle3) { + progressBarCircle3.classList.remove("active"); + } + + if (progressBarCircle2) { + progressBarCircle2.classList.add("active"); + } + + } else if (window.location.hash == "#/payment") { + + if (progressBarCircle1) { + progressBarCircle1.classList.remove("active"); + } + + if (progressBarCircle2) { + progressBarCircle2.classList.remove("active"); + } + + if (progressBarCircle3) { + progressBarCircle3.classList.add("active"); + } + } + }); + }); + } + } } From 9add999e45ad5be304fad720ccf8449f5170c7d5 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 15 Dec 2022 14:05:41 -0300 Subject: [PATCH 12/24] feat(footer): Aplica css --- .../src/arquivos/sass/partials/_footer.scss | 22 +++++++++++++------ .../src/arquivos/sass/utils/_variaveis.scss | 1 + 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c7c65c2..8c0e7f0 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,21 +1,28 @@ /* _footer.scss */ .footerCheckout { - border-top: none; - color: $color-gray2; + width: 100%; + border-top: 1px solid $color-black2; &__wrapper { align-items: center; display: flex; + padding: 16px 0; + } + + .container { + display: flex; + align-items: center; justify-content: space-between; + width: 100%; } &__address { - color: $color-gray2; + color: $color-black; font-family: $font-family; font-style: normal; font-weight: normal; font-size: 10px; - line-height: 12px; + line-height: 14px; text-transform: capitalize; max-width: 40%; @@ -30,6 +37,7 @@ display: flex; justify-self: center; list-style: none; + margin: 0; @include mq(md, max) { align-self: center; @@ -37,7 +45,7 @@ } &__divider { - background-color: $color-gray4; + background-color: $color-gray6; display: inline-block; height: 24px; margin: 0 8px; @@ -57,12 +65,12 @@ a { align-items: center; - color: $color-gray2; + color: $color-black; display: flex; font-family: $font-family; font-style: normal; font-weight: normal; - font-size: 10px; + font-size: 9px; line-height: 12px; text-decoration: none; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 5738aa9..60cb8f9 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; +$color-gray6: #C4C4C4; $color-blue: #4267b2; From b6ed53f8b9d682c4e83611b3d9ab005ae554b431 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 15 Dec 2022 15:34:39 -0300 Subject: [PATCH 13/24] feat(footer): Cria o html dos icones de pagamento e vtex pci e aplica css no mesmo --- checkout/src/arquivos/js/components/Footer.js | 30 +++++++++++++++++++ .../src/arquivos/sass/partials/_footer.scss | 18 +++++++++++ 2 files changed, 48 insertions(+) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..0740de4 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,6 +7,8 @@ export default class Footer { async init() { await this.selectors(); + this.PaymentsIconsHTML(); + this.VtexPciIconHTML(); // this.onUpdate(); } @@ -14,6 +16,34 @@ export default class Footer { //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.paymentsIcons = await waitElement(".footerCheckout__payments"); + this.vtexpciIcon = await waitElement(".footerCheckout__vtexpci"); + } + + PaymentsIconsHTML() { + if (this.paymentsIcons) { + this.paymentsIcons.innerHTML = ` + + Logo Mastercard + Logo Visa + Logo American Express + Logo Elo + Logo Hipercard + Logo PayPal + Logo Boleto + + `; + } + } + + VtexPciIconHTML() { + if (this.vtexpciIcon) { + this.vtexpciIcon.innerHTML = ` + + Ícone Vtex PCI + + `; + } } onUpdate() { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 8c0e7f0..4d21745 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -44,12 +44,30 @@ margin-bottom: 12px; } + .payments-icons { + display: flex; + gap: 13px; + + &__img { + width: auto; + height: 20px; + } + } + &__divider { background-color: $color-gray6; display: inline-block; height: 24px; margin: 0 8px; width: 1px; + margin: 0 10px 0 13px; + } + + .vtexpci-icon { + &__img { + width: auto; + height: 33px; + } } } From 322041df9f0eaa22ab28171dd4172c785cc2a358 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 15 Dec 2022 19:38:51 -0300 Subject: [PATCH 14/24] =?UTF-8?q?feat(footer):=20Cria=20o=20html=20dos=20?= =?UTF-8?q?=C3=ADcones=20das=20logos=20e=20aplica=20css=20no=20mesmo.=20E?= =?UTF-8?q?=20altera=20nomes=20vari=C3=A1veis=20no=20js.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 39 ++++++++++++++++--- .../src/arquivos/sass/partials/_footer.scss | 29 +++++++++++--- 2 files changed, 56 insertions(+), 12 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 0740de4..7848c54 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -9,6 +9,7 @@ export default class Footer { await this.selectors(); this.PaymentsIconsHTML(); this.VtexPciIconHTML(); + this.developedByLogoHTML(); // this.onUpdate(); } @@ -16,13 +17,14 @@ export default class Footer { //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.paymentsIcons = await waitElement(".footerCheckout__payments"); - this.vtexpciIcon = await waitElement(".footerCheckout__vtexpci"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); + this.developedBy = await waitElement(".footerCheckout__developedBy"); } PaymentsIconsHTML() { - if (this.paymentsIcons) { - this.paymentsIcons.innerHTML = ` + if (this.payments) { + this.payments.innerHTML = ` Logo Mastercard Logo Visa @@ -37,8 +39,8 @@ export default class Footer { } VtexPciIconHTML() { - if (this.vtexpciIcon) { - this.vtexpciIcon.innerHTML = ` + if (this.vtexPCI) { + this.vtexPCI.innerHTML = ` Ícone Vtex PCI @@ -46,6 +48,30 @@ export default class Footer { } } + developedByLogoHTML() { + if (this.developedBy) { + this.developedBy.innerHTML = ` +
  • + + Powered By + + +
    • + +
  • + + Developed By + + +
    • + `; + } + } + onUpdate() { //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver @@ -60,6 +86,7 @@ export default class Footer { observer.observe(target, config); } + async addCarrossel() { const elemento = await waitElement("#my-element"); $(elemento).slick({ diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 4d21745..35721bf 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -25,11 +25,12 @@ line-height: 14px; text-transform: capitalize; max-width: 40%; + margin-right: auto; - @include mq(md, max) { + /*@include mq(md, max) { margin-bottom: 24px; max-width: 100%; - } + }*/ } &__stamps { @@ -39,10 +40,10 @@ list-style: none; margin: 0; - @include mq(md, max) { + /*@include mq(md, max) { align-self: center; margin-bottom: 12px; - } + }*/ .payments-icons { display: flex; @@ -76,9 +77,10 @@ display: flex; list-style-type: none; margin: 0; + margin-left: auto; li:last-child { - margin-left: 16px; + margin-left: 10px; } a { @@ -93,7 +95,22 @@ text-decoration: none; span { - margin-right: 8px; + margin-right: 10px; + } + } + + .vtex-logo { + &__img { + width: 44px; + height: auto; + } + } + + .m3-logo { + &__img { + width: 12.3809%; + width: 26px; + height: auto; } } } From 6900a420e1dba7035f319454631c141f5befdecb Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 15 Dec 2022 20:13:57 -0300 Subject: [PATCH 15/24] feat(footer): Aplica css footer telas a partir de 2500px --- .../src/arquivos/sass/partials/_footer.scss | 31 ++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 35721bf..dd20d07 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -7,6 +7,10 @@ align-items: center; display: flex; padding: 16px 0; + + @include mq(xg, min) { + padding: 30px 0; + } } .container { @@ -27,6 +31,11 @@ max-width: 40%; margin-right: auto; + @include mq(xg, min) { + font-size: 20px; + line-height: 27px; + } + /*@include mq(md, max) { margin-bottom: 24px; max-width: 100%; @@ -52,6 +61,10 @@ &__img { width: auto; height: 20px; + + @include mq(xg, min) { + height: 39px; + } } } @@ -68,6 +81,10 @@ &__img { width: auto; height: 33px; + + @include mq(xg, min) { + height: 64px; + } } } } @@ -94,6 +111,11 @@ line-height: 12px; text-decoration: none; + @include mq(xg, min) { + font-size: 18px; + line-height: 25px; + } + span { margin-right: 10px; } @@ -103,14 +125,21 @@ &__img { width: 44px; height: auto; + + @include mq(xg, min) { + width: 87px; + } } } .m3-logo { &__img { - width: 12.3809%; width: 26px; height: auto; + + @include mq(xg, min) { + width: 55px; + } } } } From d3c7270fc2749d1472c4a4b4a91df8346dae6be1 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Thu, 15 Dec 2022 21:50:50 -0300 Subject: [PATCH 16/24] feat(footer): Aplica css footer mobiles --- .../src/arquivos/sass/checkout/_checkout.scss | 6 +- .../src/arquivos/sass/partials/_footer.scss | 80 ++++++++++++++----- .../src/arquivos/sass/utils/_variaveis.scss | 3 +- 3 files changed, 65 insertions(+), 24 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 98c2eb7..29500ad 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -13,8 +13,12 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + width: 96.875%; margin: auto auto 0 auto; + + @include mq(xm, min) { + width: 94.9734%; + } } header { diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index dd20d07..b9f39ef 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -6,18 +6,27 @@ &__wrapper { align-items: center; display: flex; - padding: 16px 0; - + padding: 22px 0; + @include mq(xg, min) { padding: 30px 0; } + + @include mq(xm, min) { + padding: 16px 0; + } } .container { - display: flex; - align-items: center; - justify-content: space-between; width: 100%; + display: grid; + grid-template-columns: 1fr; + + @include mq(xm, min) { + display: flex; + align-items: center; + justify-content: space-between; + } } &__address { @@ -28,43 +37,54 @@ font-size: 10px; line-height: 14px; text-transform: capitalize; - max-width: 40%; - margin-right: auto; - + grid-area: 2; + margin: 16px 0 16px 0; + @include mq(xg, min) { font-size: 20px; line-height: 27px; } + + @include mq(xm, min) { + margin-right: auto; - /*@include mq(md, max) { - margin-bottom: 24px; - max-width: 100%; - }*/ + } } &__stamps { align-items: center; display: flex; - justify-self: center; list-style: none; margin: 0; - - /*@include mq(md, max) { - align-self: center; - margin-bottom: 12px; - }*/ + grid-area: 1; + + @include mq(xm, min) { + justify-self: center; + } .payments-icons { display: flex; - gap: 13px; + gap: 4px; + @include mq(xm, min) { + gap: 13px; + } + + @include mq(xppp, max) { + gap: 1px; + } + &__img { width: auto; height: 20px; - + @include mq(xg, min) { height: 39px; } + + @include mq(xppp, max) { + height: 17px; + } } } @@ -74,7 +94,15 @@ height: 24px; margin: 0 8px; width: 1px; - margin: 0 10px 0 13px; + margin: 0 10px 0 4px; + + @include mq(xm, min) { + margin: 0 10px 0 13px; + } + + @include mq(xppp, max) { + margin: 0 4px 0 1px; + } } .vtexpci-icon { @@ -85,6 +113,10 @@ @include mq(xg, min) { height: 64px; } + + @include mq(xppp, max) { + height: 29px; + } } } } @@ -94,7 +126,11 @@ display: flex; list-style-type: none; margin: 0; - margin-left: auto; + grid: 3; + + @include mq(xm, min) { + margin-left: auto; + } li:last-child { margin-left: 10px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 60cb8f9..a2bc5ef 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -19,11 +19,12 @@ $color-gray6: #C4C4C4; $color-blue: #4267b2; -$color-green: #4caf50; +$color-green: #495e49; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, + xppp: 350px, xpp: 376px, cstm: 400px, sm: 576px, From 242fa3ec7f176d3be19c96593b6ff8e979c53302 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 16 Dec 2022 14:13:32 -0300 Subject: [PATCH 17/24] =?UTF-8?q?feat(checkout=20vazio):=20Aplica=20css=20?= =?UTF-8?q?a=20p=C3=A1gina=20de=20chekcout=20vazio=20em=20todos=20tamanhos?= =?UTF-8?q?=20de=20tela?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sass/checkout/_checkout-vazio.scss | 64 +++++++++++++++++-- .../src/arquivos/sass/checkout/_checkout.scss | 37 ++++++++--- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 3 files changed, 86 insertions(+), 16 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..c16a879 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,3 +1,7 @@ +.row-fluid .full-cart, .row-fluid .orderform-template { + margin-bottom: 0; +} + .empty-cart { font-family: $font-family; &-content { @@ -9,26 +13,72 @@ } } + &-message { + display: none; + } + &-title { - font-size: 20px; + font-family: $font-family; + font-weight: 700; + font-size: 18px; + line-height: 25px; + text-align: center; + text-transform: uppercase; + color: $color-black2; + margin-top: 170px; + margin-bottom: 0; + + @include mq(xg, min) { + font-size: 48px; + line-height: 65px; + } + + @include mq(xm, min) { + font-size: 24px; + line-height: 33px; + } + + @include mq(xsp, max) { + font-size: 16px; + } } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + background: transparent; + border: 1px solid $color-black2; + border-radius: 0px; transition: ease-in 0.22s all; outline: none; - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: 500; + font-weight: 400; font-size: 14px; line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-black2; text-transform: uppercase; + padding: 16px 26px; + cursor: pointer; + margin: 22px 0 262px 0; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + padding: 16px 121px; + } + + @include mq(xm, min) { + padding: 16px 65px; + margin: 32px 0 264px 0; + } + + @include mq(xsp, max) { + font-size: 12px; + line-height: 14px; + padding: 16px 20px; + } &:hover { background: lighten($color-black, 5); diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 29500ad..ccfa3ee 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -62,7 +62,15 @@ body { } .container-order-form, .container-cart { - width: 80%; + width: 96.875%; + + @include mq(xm, min) { + width: 80%; + } + + @include mq(xpp, max) { + width: 91.4666%; + } } } @@ -81,18 +89,29 @@ body { #cart-title, #orderform-title { - color: $color-gray2; + color: $color-black; 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 17px; + letter-spacing: 0.05em; text-transform: uppercase; - @include mq(md, max) { - margin-left: 30px; + @include mq(xg, min) { + font-size: 48px; + line-height: 65px; + margin-bottom: 18px; } + + @include mq(xm, min) { + margin: 17px 0 16px; + } +} + +#orderform-title { + color: $color-black2; + margin-bottom: 17px; } .dropdown { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index a2bc5ef..caaa353 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -24,6 +24,7 @@ $color-green: #495e49; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, + xsp: 325px, xppp: 350px, xpp: 376px, cstm: 400px, From a5030d653bfa6fbe7ab27958fc67c9092d5079d2 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Fri, 16 Dec 2022 15:45:07 -0300 Subject: [PATCH 18/24] =?UTF-8?q?feat(checkout=20vazio):=20Muda=20texto=20?= =?UTF-8?q?bot=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 7848c54..66395f5 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,9 +7,10 @@ export default class Footer { async init() { await this.selectors(); - this.PaymentsIconsHTML(); - this.VtexPciIconHTML(); + this.paymentsIconsHTML(); + this.vtexPciIconHTML(); this.developedByLogoHTML(); + this.temptyCartTextBtn(); // this.onUpdate(); } @@ -20,9 +21,10 @@ export default class Footer { this.payments = await waitElement(".footerCheckout__payments"); this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); this.developedBy = await waitElement(".footerCheckout__developedBy"); + this.textBtn = await waitElement("#cart-choose-products"); } - PaymentsIconsHTML() { + paymentsIconsHTML() { if (this.payments) { this.payments.innerHTML = ` @@ -38,7 +40,7 @@ export default class Footer { } } - VtexPciIconHTML() { + vtexPciIconHTML() { if (this.vtexPCI) { this.vtexPCI.innerHTML = ` @@ -72,6 +74,12 @@ export default class Footer { } } + temptyCartTextBtn() { + if (this.textBtn) { + this.textBtn.textContent = "Continuar comprando"; + } + } + onUpdate() { //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver From 658c84d02b2342700bf7a0ad546018875c8fa102 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 17 Dec 2022 01:42:35 -0300 Subject: [PATCH 19/24] feat(checkout com produto): Aplica css desktop --- .../sass/checkout/_checkout-carrinho.scss | 352 ++++++++++++++---- .../src/arquivos/sass/utils/_variaveis.scss | 5 + 2 files changed, 285 insertions(+), 72 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 195f487..e867163 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -13,10 +13,15 @@ display: none; } .cart { - border: 3px solid $color-gray3; + border: 1px solid $color-gray3; box-sizing: border-box; border-radius: 5px; padding: 16px; + margin-bottom: 48px; + + @include mq(xg, min) { + padding: 16px 31px; + } @include mq(md, max) { margin: 0px 0 25px 0; @@ -111,12 +116,19 @@ } th { + font-family: $font-family-secundary; color: $color-black; - padding: 0 0 16px; + padding: 0 0 17px; font-style: normal; - font-weight: bold; + font-weight: normal; font-size: 14px; line-height: 16px; + text-align: left; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } @include mq(md, max) { &.quantity-price, @@ -124,43 +136,82 @@ display: none; } } + .product-price { + font-size: 0; + } + } + + th.shipping-date { + font-size: 0; + + &::after { + content: "Frete"; + font-family: $font-family-secundary; + color: $color-black; + font-weight: normal; + font-style: normal; + font-size: 14px; + line-height: 16px; + padding: 0 0 17px; + vertical-align: bottom; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } + } } .product-image { - height: auto; + height: 60px; padding: 0; width: 60px; - @include mq(sm, max) { - width: 72px; + @include mq(xg, min) { + width: 146px; + height: 146px; } img { height: 60px; - max-width: 100%; - width: auto; + max-width: 60px; + width: 60px; + object-fit: cover; - @include mq(sm, max) { - height: 72px; - width: auto; + @include mq(xg, min) { + width: 146px; + max-width: 146px; + height: 146px; } } } .product-name { - padding-right: 0; + padding: 0; + + @include mq(xg, min) { + width: 600px; + } @include mq(lg, max) { width: 250px; } a { - color: $color-blue; + font-family: $font-family-secundary; + color: $color-black2; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + margin-left: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + margin-left: 31px; + } &:hover { color: darken($color-blue, 10); @@ -179,9 +230,17 @@ } td.shipping-date { - color: $color-gray2; + color: $color-gray7; + font-family: $font-family-secundary; + font-weight: normal; font-size: 12px; line-height: 14px; + text-align: left; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } @include mq(md, max) { display: none; @@ -190,6 +249,8 @@ .product-price { min-width: 100px; + text-align: left; + @include mq(md, max) { min-width: 78px; } @@ -200,10 +261,19 @@ } span.list-price { - color: $color-gray2; + color: $color-gray7; + font-family: $font-family-secundary; font-size: 12px; line-height: 14px; + font-weight: normal; + font-style: normal; text-decoration-line: line-through; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -212,21 +282,52 @@ .old-product-price-label { text-transform: lowercase; } + + .muted { + color: $color-gray7; + } + } + } + + th.product-price { + font-size: 0; + + &::after { + content: "Unidade"; + font-family: $font-family-secundary; + color: $color-black; + font-weight: normal; + font-style: normal; + font-size: 14px; + line-height: 16px; + padding: 0 0 17px; + vertical-align: bottom; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } } } 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; - max-height: 38px; - max-width: 118px; - padding: 0; + margin: 13px 0; + max-height: 34px; + max-width: 99px; + padding: 9px 11px; width: max-content !important; + text-align: left; + + @include mq(xg, min) { + margin: 48px 0px; + padding: 21px 62px; + } @media (max-width: 490px) { margin-left: 84px !important; @@ -234,16 +335,27 @@ input { background-color: $color-white; - border: 1px solid $color-gray3; + border: none; border-radius: 0; border-width: 0 1px; display: block; max-height: 38px; margin: 0 !important; padding: 8px 0; - width: 38px; - color: $color-gray2; + width: 40px; + color: $color-black2; box-shadow: none; + font-family: $font-family-secundary; + font-weight: normal; + font-size: 14px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + max-height: 50px; + width: 52px; + } @include mq(lg, max) { width: 24px !important; @@ -253,24 +365,15 @@ .icon-plus-sign, .icon-minus-sign { &::before { - color: $color-black; display: block; font-weight: 500; - padding: 1px 12px; - } - } + font-size: 17px; + color: $color-blue2; + cursor: pointer; - .icon-minus-sign { - &:before { - content: "-"; - font-size: 16px; - } - } - - .icon-plus-sign { - &:before { - content: "+"; - font-size: 14px; + @include mq(xg, min) { + font-size: 32px; + } } } @@ -292,19 +395,41 @@ .quantity-price, .best-price { + text-align: left; + + @include mq(xg, min) { + width: 200px; + } .icon-question-sign { display: none; } span { + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: $color-black; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } } } .quantity-price { + .total-selling-price { + font-family: $font-family; + font-weight: 700; + line-height: 19px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } + } + @include mq(md, max) { display: none; } @@ -315,9 +440,13 @@ top: 0; } .icon::before { - color: $color-gray4; + color: $color-gray6; font-size: 15px; + @include mq(xg, min) { + font-size: 26px; + } + @include mq(md, max) { font-size: 18px; } @@ -351,12 +480,18 @@ } .srp-main-title { - margin: 32px 0 12px; + margin: 0 0 11px 0; font-style: normal; font-weight: normal; + font-family: $font-family; font-size: 24px; - line-height: 28px; - color: $color-gray2; + line-height: 33px; + color: $color-black2; + + @include mq(xg, min) { + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-top: 0; @@ -365,23 +500,44 @@ .srp-description { color: $color-gray2; - font-size: 12px; + font-style: normal; + font-weight: normal; + font-family: $font-family; + font-size: 14px; line-height: 18px; - margin: 0 0 12px; + margin: 0 0 10px; + max-width: 18rem; + + @include mq(xg, min) { + font-size: 28px; + line-height: 36px; + width: 552px; + max-width: none; + margin-bottom: 11px; + } } button.shp-open-options { - background-color: $color-gray5; + background-color: $color-gray8; border: none; - border-radius: 5px; - color: $color-gray2; - font-size: 16px; + border-radius: 8px; + color: $color-black2; + font-family: $font-family; + font-size: 14px; letter-spacing: 0.05em; line-height: 19px; - font-weight: 500; + font-weight: normal; outline: none; - padding: 12px 40px; + padding: 12px 41px; transition: all 0.2s linear; + margin: 0; + text-transform: uppercase; + cursor: pointer; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } &:hover { background-color: lighten($color-gray5, 5); @@ -593,8 +749,15 @@ &-totalizers { padding: 0; width: 346px; + margin: 0; + + @include mq(xg, min) { + width: 688px; + } .coupon-data { + margin-bottom: 0 0 10px 0; + #cart-link-coupon-add { text-decoration: none; &:hover { @@ -603,13 +766,19 @@ } } span { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; text-decoration: none; + cursor: pointer; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } } } @@ -712,12 +881,18 @@ &.info, &.monetary { + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 14px; line-height: 16px; color: $color-black; - padding: 12px 0; + padding: 10px 0; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } } &.info { @@ -733,11 +908,19 @@ tfoot { td.info, td.monetary { + font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 700; font-size: 18px; - line-height: 21px; + line-height: 25px; color: $color-black; + padding: 14px 0 17px 0; + + @include mq(xg, min) { + font-size: 36px; + line-height: 49px; + width: 250px; + } } } } @@ -747,64 +930,89 @@ .cart-links-bottom { display: flex; flex-direction: column; - width: 343px; + width: 354px; + margin-bottom: 43px !important; + padding: 0; + + @include mq(xg, min) { + margin-bottom: 44px !important; + width: 688px; + } @include mq(md, max) { padding: 0 16px; width: calc(100% - 32px); float: none; - margin-bottom: 50px; - } - - @include mq(md, min) { - margin: 0; - padding-bottom: 50px; } .link-choose-more-products-wrapper { display: block; text-align: center; - margin-bottom: 16px; + margin-bottom: 14px; + + @include mq(xg, min) { + margin-bottom: 13px; + } @include mq(md, max) { margin-bottom: 0px; } a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } } } + .link-choose-more-products{ + margin-right: 0; + } + .btn-place-order-wrapper { a { - background: $color-green; + 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; + padding: 12px 102px; + cursor: pointer; + + @include mq(xg, min) { + padding: 12px 175px; + } &:hover { - background-color: darken($color-green, 5); + background: $color-blue3; } &:after { content: "finalizar compra"; font-family: $font-family; - font-weight: 500; - font-size: 13px; + font-weight: 700; + font-size: 14px; + line-height: 19px; letter-spacing: 0.05em; color: $color-white; text-transform: uppercase; vertical-align: middle; - line-height: 19px; text-shadow: none; + color: $color-black2; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index caaa353..2bcb250 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -16,8 +16,13 @@ $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5; $color-gray6: #C4C4C4; +$color-gray7: #989898; +$color-gray8: #EDEDED; $color-blue: #4267b2; +$color-blue2: #00C8FF; +$color-blue3: #3fd4fd; //hover + $color-green: #495e49; From 332e0d88d6314ae492e1e5f6c3be83ed6c93da62 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 17 Dec 2022 10:11:32 -0300 Subject: [PATCH 20/24] =?UTF-8?q?refactor(checkout=20vazio):=20Aplica=20mu?= =?UTF-8?q?dan=C3=A7a=20na=20forma=20de=20alterar=20o=20texto=20do=20bot?= =?UTF-8?q?=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- checkout/src/arquivos/js/components/Footer.js | 8 ---- .../sass/checkout/_checkout-vazio.scss | 44 ++++++++++++------- 2 files changed, 28 insertions(+), 24 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 66395f5..64a796d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -10,7 +10,6 @@ export default class Footer { this.paymentsIconsHTML(); this.vtexPciIconHTML(); this.developedByLogoHTML(); - this.temptyCartTextBtn(); // this.onUpdate(); } @@ -21,7 +20,6 @@ export default class Footer { this.payments = await waitElement(".footerCheckout__payments"); this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); this.developedBy = await waitElement(".footerCheckout__developedBy"); - this.textBtn = await waitElement("#cart-choose-products"); } paymentsIconsHTML() { @@ -74,12 +72,6 @@ export default class Footer { } } - temptyCartTextBtn() { - if (this.textBtn) { - this.textBtn.textContent = "Continuar comprando"; - } - } - onUpdate() { //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index c16a879..17c72e6 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -48,24 +48,38 @@ background: transparent; border: 1px solid $color-black2; border-radius: 0px; - transition: ease-in 0.22s all; outline: none; - font-family: $font-family-secundary; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 16px; - text-align: center; - letter-spacing: 0.05em; - color: $color-black2; - text-transform: uppercase; + transition: ease-in 0.22s all; + margin: 22px 0 262px 0; padding: 16px 26px; cursor: pointer; - margin: 22px 0 262px 0; + font-size: 0; + + &::after { + content: "Continuar comprando"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + letter-spacing: 0.05em; + color: $color-black2; + text-transform: uppercase; + vertical-align: top; + vertical-align: bottom; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } + + @include mq(xsp, max) { + font-size: 12px; + } + } @include mq(xg, min) { - font-size: 28px; - line-height: 33px; padding: 16px 121px; } @@ -75,12 +89,10 @@ } @include mq(xsp, max) { - font-size: 12px; - line-height: 14px; padding: 16px 20px; } - &:hover { + &:hover { background: lighten($color-black, 5); } } From 04fb01084c7019b6b598eae038814565de4f0675 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 17 Dec 2022 11:57:45 -0300 Subject: [PATCH 21/24] feat(checkout com cupom): Aplica css desktop --- .../sass/checkout/_checkout-carrinho.scss | 100 +++++++++++------- .../src/arquivos/sass/utils/_variaveis.scss | 6 +- 2 files changed, 62 insertions(+), 44 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index e867163..3fd7c3e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -748,11 +748,11 @@ &-totalizers { padding: 0; - width: 346px; margin: 0; + width: 362px; @include mq(xg, min) { - width: 688px; + width: 692px; } .coupon-data { @@ -782,11 +782,6 @@ } } - @include mq(md, max) { - padding: 0 16px; - width: 100%; - } - .coupon-column { .coupon { margin: 0; @@ -800,71 +795,90 @@ .coupon-label label { margin-bottom: 12px; - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; color: $color-gray2; + text-align: left; cursor: none; + + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + } + } .coupon-fields { - margin-bottom: 32px; - - @include mq(sm, max) { - span { - display: flex; - flex-direction: row; - justify-content: space-between; - i { - position: absolute; - right: 91px; - opacity: 1; - } - } - } + margin-bottom: 54px; + display: flex; input { - border: 2px solid $color-gray3; + background-color: $color-white; + border: 2px solid $color-gray5; border-radius: 5px; box-shadow: none; - color: $color-gray4; + color: $color-gray6; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; font-size: 12px; - height: 34px; - padding: 0 12px; - max-width: 160px; + line-height: 14px; + height: 36px; + width: 204px; + padding: 10px 15px; - @include mq(sm, max) { - max-width: 100%; - width: 100%; + @include mq(xg, min) { + font-size: 24px; + line-height: 28px; + padding: 13px 15px; + height: 55px; + width: 398px; + } + + &::placeholder { + padding: 1px 1px; } } button { - background: $color-black; + background: $color-blue2; border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + border-radius: 8px; + color: $color-black2; + font-family: $font-family; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 19px; + width: 133px; height: 36px; - letter-spacing: 1px; - margin-left: 6px; + letter-spacing: 0.05em; + margin-left: 15px; outline: none; transition: all 0.2s linear; - width: 94px; text-transform: uppercase; + text-shadow: none; + padding: 8px 15px; + cursor: pointer; - @include mq(md, max) { - width: 138px; + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + margin-left: 30px; + width: 260px; + height: 55px; + padding: 8px 50px; } &:hover { - background-color: lighten($color-black, 5); + background-color: $color-blue3; } &:active { - background-color: darken($color-black, 5); + background-color: $color-blue4; } } } @@ -996,6 +1010,10 @@ background: $color-blue3; } + &:active { + background-color: $color-blue4; + } + &:after { content: "finalizar compra"; font-family: $font-family; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 2bcb250..68b63c6 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -20,9 +20,9 @@ $color-gray7: #989898; $color-gray8: #EDEDED; $color-blue: #4267b2; -$color-blue2: #00C8FF; -$color-blue3: #3fd4fd; //hover - +$color-blue2: #00C8FF; //button +$color-blue3: #3fd4fd; //buttom hover +$color-blue4: #11bae9; //buttom active $color-green: #495e49; From dd5e07ffabdfc62077bc068cb7b6c9ebd1556d61 Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sat, 17 Dec 2022 15:31:38 -0300 Subject: [PATCH 22/24] feat(entrega retirada-receber): Aplica css desktop --- .../sass/checkout/_checkout-carrinho.scss | 208 ++++++++++++++---- 1 file changed, 164 insertions(+), 44 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 3fd7c3e..79cd5f1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -4,6 +4,10 @@ } } +.onda-v1 .mb6 { + margin-bottom: 0; +} + .cart-template { font-family: $font-family; @include mq(md, max) { @@ -561,55 +565,93 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue2; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; - width: 100%; - + width: 280px; + height: 42px; + 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; + text-transform: uppercase; + padding: 11px 35px; + + @include mq(xg, min) { + width: 543px; + height: 60px; + font-size: 28px; + line-height: 38px; + padding: 11px 63px; + } &:hover { - background-color: lighten($color-black, 5); + background-color: $color-blue3; } &:active { - background-color: darken($color-black, 5); + background-color: $color-blue4; } } } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; &__wrapper { background-color: $color-white; border-radius: 100px; width: 100%; - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 14px; - line-height: 16px; - text-transform: uppercase; + + @include mq(xg, min) { + width: 543px; + height: 57px; + } } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black2; border-radius: 100px; + + @include mq(xg, min) { + width: 271px; + height: 57px; + } } .blue { - color: $color-blue; + color: $color-black2; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + padding: 8px 40px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } } label { width: 50%; + color: $color-gray6; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + padding: 8px 40px; + + @include mq(xg, min) { + font-size: 28px; + line-height: 38px; + } &:active { background-color: #f0f0f0; @@ -618,61 +660,133 @@ } .srp-postal-code { - .ship-postalCode { + display: flex; + flex-direction: row; + + + .ship-postalCode, + .ship-country { label { font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; + line-height: 16px; + color: $color-black2; + margin-bottom: 2px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } + } + + #ship-country { + border: 1px solid $color-gray6; + height: 36px; + width: 172px; color: $color-black; - margin-bottom: 12px; + font-size: 12px; + line-height: 14px; + padding-left: 15px; + outline: none; + + @include mq(xg, min) { + width: 333px; + height: 55px; + font-size: 24px; + line-height: 28px; + } } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray6; + background: $color-white; border-radius: 5px; box-shadow: none; - color: $color-gray3; - font-size: 12px; - height: 36px; - padding: 12px 8px; width: 172px; + height: 36px; + color: $color-black; + font-family: $font-family-secundary; + font-size: 12px; + line-height: 14px; + padding: 11px 16px; + margin-bottom: 4px; + + @include mq(xg, min) { + width: 333px; + height: 55px; + font-size: 24px; + line-height: 28px; + padding: 13px 16px; + margin-bottom: 5px; + } } & ~ button { - background-color: $color-black; - border: none; - border-radius: 5px; - color: $color-white; - font-size: 12px; + background-color: $color-blue2; + width: 100px; height: 36px; - letter-spacing: 1px; + border: none; + border-radius: 8px; + color: $color-white; + font-family: $font-family; + font-weight: 700; + font-style: normal; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; outline: none; position: absolute; - right: -150px; - top: 36px; transition: all 0.2s linear; - width: 96px; text-transform: uppercase; + padding: 8px 11px; + margin-left: 8px; + right: -150px; + top: 82px; + cursor: pointer; + + @include mq(xg, min) { + width: 194px; + height: 55px; + font-size: 28px; + line-height: 38px; + padding: 8px 19px; + margin-left: 18px; + right: -410px; + top: 136px; + } &:hover { - background-color: lighten($color-black, 5); + background-color: $color-blue3; } &:active { - background-color: darken($color-black, 5); + background-color: $color-blue4; } } small a { - font-family: $font-family; - font-style: normal; - font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 0; + + &::after { + content: "Não sei meu código postal"; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 10px; + line-height: 12px; + color: $color-black2; + text-decoration-line: underline; + cursor: pointer; + + @include mq(xg, min) { + font-size: 20px; + line-height: 23px; + white-space: nowrap; + } + } + } span.help.error { @@ -681,7 +795,13 @@ position: absolute; left: 0; width: 100%; - top: 17px; + top: -20px; + + @include mq(xg, min) { + font-size: 20px; + white-space: nowrap; + top: -22px; + } } } } From e4b72887c9243ed60a0d01992bdd4933aba61a6a Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sun, 18 Dec 2022 22:42:51 -0300 Subject: [PATCH 23/24] feat: Aplica css desktop --- checkout/src/arquivos/sass/checkout.scss | 1 + .../sass/checkout/_checkout-autenticacao.scss | 272 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 32 ++- .../src/arquivos/sass/checkout/_checkout.scss | 9 - .../src/arquivos/sass/partials/_footer.scss | 16 +- .../src/arquivos/sass/utils/_variaveis.scss | 3 + 6 files changed, 273 insertions(+), 60 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout.scss b/checkout/src/arquivos/sass/checkout.scss index 771070c..c533b61 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"; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..42af891 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,13 +1,29 @@ + + .checkout-container { .client-pre-email { - border-color: $color-gray4; + border-color: $color-black2; font-family: $font-family; - padding-top: 8px; + padding-top: 14px; + + .client-pre-email-h label { + margin-top: 0; + } .link-cart { a { - color: $color-black; - font-size: 14px; + color: $color-black2; + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 14px; + line-height: 16px; + text-transform: uppercase; + + @include mq(xg, min) { + font-size: 28px; + line-height: 33px; + } &:hover { color: lighen($color-black, 10); @@ -20,68 +36,151 @@ display: flex; align-items: center; justify-content: center; + margin-top: 65px; h3 { margin-bottom: 16px; + width: 825px; - span { - color: #303030; - font-size: 24px; - } + @include mq(xg, min) { + width: 1631px; + } - small { - color: $color-gray4; - } + span, + small { + font-family: $font-family-secundary; + font-style: normal; + font-weight: normal; + font-size: 20px; + line-height: 23px; + text-transform: uppercase; + color: $color-black2; + margin-bottom: 21px; + + @include mq(xg, min) { + font-size: 40px; + line-height: 47px; + margin-bottom: 23px; + } + } } } .client-email { - margin: 0 0 16px; + margin: 0 0 24px 0; + width: 580px; + + @include mq(xg, min) { + width: 990px; + } input { box-shadow: none; - color: $color-black; + color: $color-black2; font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; + padding: 15px 14px; + border: 1px solid $color-black2; box-sizing: border-box; border-radius: 5px; + width: 443px; + height: 50px; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 16px; - @media (max-width: 490px) { - width: auto; - } + @include mq(xg, min) { + width: 765px; + height: 50px; + font-size: 24px; + line-height: 33px; + } } button { - background-color: $color-black; - border-radius: 5px; + background-color: $color-blue2; + border-radius: 0px 8px 8px 0px; border: none; font-family: $font-family; - height: 54px; - right: 0; + color: $color-black2; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + height: 52px; + width: 126px; + right: 8px; top: 0; + outline: none; + padding: 12px 14px; + position: relative; + cursor: pointer; + + @include mq(xg, min) { + font-size: 28px; + line-height: 30px; + width: 219px; + padding: 12px 17px; + } @media (max-width: 490px) { height: 48px; margin: 0; position: absolute; } + + &:hover { + background-color: $color-blue3; + } + + &:active { + background-color: $color-blue4; + } } span.help.error { - color: red; + color: $color-red; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } } } .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid $color-black2; + border-radius: 5px; + width: 400px; + height: 150px; + margin-bottom: 92px; + + @include mq(xg, min) { + width: 776px; + height: 238px; + } h3 { - color: #303030; + color: $color-black2 !important; + font-family: $font-family; margin: 0 0 8px 0; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } } ul { @@ -89,13 +188,27 @@ li { span { - color: $color-black; + color: $color-black2 !important; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + + @include mq(xg, min) { + font-size: 24px; + line-height: 33px; + } } i::before { - color: $color-black; + color: $color-blue2; font-size: 1rem; opacity: 1; + + @include mq(xg, min) { + font-size: 2rem !important; + } } } } @@ -104,6 +217,10 @@ color: $color-black; font-size: 6rem; opacity: 0.5; + + @include mq(xg, min) { + font-size: 11rem !important; + } } } } @@ -113,18 +230,44 @@ .client-profile-data { .accordion-group { border-radius: 0; - border: 1px solid $color-gray4; + border: 1px solid $color-gray3; font-family: $font-family; padding: 16px; + border-radius: 8px; + box-shadow: none; .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + .accordion-toggle { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; + color: $color-black; + padding: 0 + } + .accordion-toggle-active { + + span { + font-size: 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; + margin-top: 24px; + padding: 0; + } + } + } + span { i::before { fill: #303030; + display: none; } } @@ -147,6 +290,7 @@ .client-notice { color: $color-black; + display: none; } p { @@ -163,7 +307,7 @@ } .help.error { - color: red; + color: $color-red; } } @@ -182,18 +326,33 @@ button.submit { border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; + border-radius: 8px; + background: $color-blue2; + margin-top: 44px; outline: none; transition: all 0.2s linear; + width: 100%; + height: 42px; + padding: 12px 74px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + letter-spacing: 0.05em; + text-transform: uppercase; + white-space: nowrap; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; &:hover { - background: lighten($color-black, 5); + background: $color-blue3; } &:active { - background: darken($color-black, 5); + background: $color-blue4; } } @@ -274,7 +433,6 @@ border-color: #303030; color: #303030; } - .vtex-omnishipping-1-x-deliveryChannelsToggle { background-color: #d8c8ac; border: 1px solid #d8c8ac; @@ -282,8 +440,42 @@ .vtex-omnishipping-1-x-deliveryOptionActive { text-shadow: 1.3px 1px lighten($color-black, 50); + color: #000; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; } } } } + .shipping-method-toggle-delivery { + background-color: white !important; + border: 1px solid $color-black !important; + } + + .vtex-omnishipping-1-x-deliveryOptionInactive { + width: 50%; + color: #c4c4c4; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + } + + /*.shipping-data, + .payment-data { + + .accordion-heading { + .accordion-toggle { + &::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/lapisM3Academy.png"); + cursor: pointer; + } + } + } + + }*/ } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 79cd5f1..fb24649 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -43,9 +43,12 @@ h2 { background: $color-white; border: none; - color: #303030; - font-size: 14px; - font-weight: 500; + color: $color-black; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 19px; } .item-unavailable { @@ -94,12 +97,21 @@ } #payment-data-submit { - background: $color-black; + background: $color-green2; border: none; - border-radius: 0; + border-radius: 8px; color: $color-white; outline: none; transition: all 0.2s linear; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + &:hover { background: lighten($color-black, 5); } @@ -140,6 +152,7 @@ display: none; } } + .product-price { font-size: 0; } @@ -192,6 +205,12 @@ .product-name { padding: 0; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $color-black2; @include mq(xg, min) { width: 600px; @@ -258,6 +277,7 @@ @include mq(md, max) { min-width: 78px; } + @media (max-width: 490px) { position: absolute; bottom: 0; @@ -790,7 +810,7 @@ } span.help.error { - color: red; + color: $color-red; font-size: 12px; position: absolute; left: 0; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index ccfa3ee..97cb451 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -12,15 +12,6 @@ html { min-height: 100%; } -footer .footerCheckout__wrapper { - width: 96.875%; - margin: auto auto 0 auto; - - @include mq(xm, min) { - width: 94.9734%; - } -} - header { width: 100%; border-bottom: 1px solid $color-black2; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index b9f39ef..a29bff5 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,9 +1,8 @@ /* _footer.scss */ .footerCheckout { - width: 100%; - border-top: 1px solid $color-black2; - &__wrapper { + width: 100%; + border-top: 1px solid $color-black2; align-items: center; display: flex; padding: 22px 0; @@ -18,12 +17,14 @@ } .container { - width: 100%; + width: 96.875%; display: grid; grid-template-columns: 1fr; - + margin: auto auto 0 auto; + @include mq(xm, min) { display: flex; + width: 94.9734%; align-items: center; justify-content: space-between; } @@ -179,4 +180,9 @@ } } } + + .desativado { + display: none !important; + } } + diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 68b63c6..155876d 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -25,6 +25,9 @@ $color-blue3: #3fd4fd; //buttom hover $color-blue4: #11bae9; //buttom active $color-green: #495e49; +$color-green2: #298541; + +$color-red: #FF0000; //error /* Grid breakpoints */ $grid-breakpoints: ( From 1f6779555195a86d9104209d2c220724a91c75eb Mon Sep 17 00:00:00 2001 From: Sabrina Miranda Date: Sun, 18 Dec 2022 22:46:37 -0300 Subject: [PATCH 24/24] feat(prateleira): Cria e aplica css prateleira --- checkout/src/arquivos/js/components/Footer.js | 142 ++++++++++++++++-- checkout/src/arquivos/sass/lib/_slick.scss | 9 ++ .../arquivos/sass/partials/_prateleira.scss | 142 ++++++++++++++++++ 3 files changed, 279 insertions(+), 14 deletions(-) diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 64a796d..2f38895 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -7,19 +7,32 @@ export default class Footer { async init() { await this.selectors(); + + /*if (window.location.hash === "#/cart") { + this.onUpdate(); + }*/ + + this.requestAPI(); + this.prateleiraItem = await waitElement(".prateleira__ul"); + this.events(); + this.onUpdate(); + //await this.addCarrossel(); this.paymentsIconsHTML(); this.vtexPciIconHTML(); this.developedByLogoHTML(); - // this.onUpdate(); } 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.payments = await waitElement(".footerCheckout__payments"); this.vtexPCI = await waitElement(".footerCheckout__vtexpci"); this.developedBy = await waitElement(".footerCheckout__developedBy"); + this.cartTitle = await waitElement("#cart-title"); + + this.prateleira = await waitElement(".footerCheckout__prateleira", { + timeout: 5000, + interval: 1, + }); } paymentsIconsHTML() { @@ -40,7 +53,7 @@ export default class Footer { vtexPciIconHTML() { if (this.vtexPCI) { - this.vtexPCI.innerHTML = ` + this.vtexPCI.innerHTML = ` Ícone Vtex PCI @@ -72,26 +85,127 @@ export default class Footer { } } + hashCgange(e) { + if (e.newURL !== "https://m3academy.myvtex.com/checkout/#/cart") { + this.prateleira.classList.add("desativado"); + }else { + this.prateleira.classList.remove("desativado"); + } + } + + events() { + window.addEventListener("hashchange", this.hashCgange.bind(this)); + } + onUpdate() { - //Função qeu fará a verificação se o carrinho está vazio para remover a prateleira de produtos: - // vocês devem olhar a doc fornecida no Desafio para aprender a usar a MutationObserver - // sempre que o carrinho estiver vazio o elemento chcekoutVazio fica display: none e isso pode ser usado como atributo para a MutationObserver let target = this.checkoutVazio; let config = { childList: true, attributes: true }; let observer = new MutationObserver((mutations) => { - mutations.forEach(function (mutation) { - console.log(mutation.type); - }); - }); + mutations.map((mutation) => { - observer.observe(target, config); + const status = mutation.target.attributes.style.nodeValue; + + if (status == "display:none;") { + this.requestAPI(); + } else if (status == "display:block;") { + this.removePrateleira(); + } + + }); + + observer.observe(target, config); + }); + } + + requestAPI() { + this.prateleira.innerHTML = ` +

    Você também pode gostar:

    +
      + `; + + const api = + "https://m3academy.myvtex.com/api/catalog_system/pub/products/search/?fq=productClusterIds:319"; + const products = document.querySelector(".prateleira__ul"); + + fetch(api) + .then((response) => { + return response.json(); + }) + + .then((data) => { + data.forEach((item) => { + const imgProduct = item.items[0].images[0].imageUrl; + const nameProduct = item.productName; + const linkProduct = item.link; + + products.innerHTML += ` +
    • +
      + Imagem do Produto +
      + +
      +

      ${nameProduct}

      + +
        + ${item.items.map((name) => `
      • ${name.name}
        • `).join("")} +
      + + + Ver Produto + +
      +
      • + `; + }); + }) + + .then(() => { + this.addCarrossel(); + }); + } + + removePrateleira() { + this.requestAPI.innerHTML = ""; } async addCarrossel() { - const elemento = await waitElement("#my-element"); - $(elemento).slick({ + const prateleiraItem = await waitElement("#prateleira__ul"); + + $(prateleiraItem).slick({ slidesToShow: 4, slidesToScroll: 1, + infinite: false, + arrows: true, + responsive: [ + { + breakpoint: 1170, + settings: { + slidesToShow: 3, + slidesToScroll: 1, + infinite: false, + arrows: true, + } + }, + { + breakpoint: 925, + settings: { + slidesToShow: 2, + slidesToScroll: 1, + infinite: false, + arrows: true, + } + }, + { + breakpoint: 635, + settings: { + slidesToShow: 1, + slidesToScroll: 1, + infinite: false, + arrows: true, + } + } + ] }); } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index 74460fb..d995d4a 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -99,6 +99,12 @@ .slick-arrow { font-size: 0; position: absolute; + border: none; + top: 170px; + + @include mq(xg, min) { + top: 280px; + } } .slick-prev { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") @@ -107,8 +113,11 @@ left: 10px; } .slick-next { + background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-mini-M3Academy.svg") + no-repeat center center; z-index: 4; right: 10px; + transform: rotateY(180deg); } .slick-arrow.slick-hidden { display: none; diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 13f8def..bb61ef7 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -1 +1,143 @@ /* _prateleira.scss */ + +.footerCheckout__prateleira { + width: 79.375%; + + @include mq(xg, min) { + width: 79.76%; + } + + .prateleira { + &__title { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-black2; + text-align: center; + + @include mq(xg, min) { + font-size: 48px; + line-height: 76px; + } + } + + &__ul { + display: flex; + justify-content: center; + margin: 0; + gap: 16px; + + @include mq(xg, min) { + gap: 19px; + } + } + + &__li { + width: 242px; + display: flex; + flex-direction: column; + align-items: center; + + @include mq(xg, min) { + width: 485px; + } + } + + &__image { + width: 242px; + height: auto; + margin-bottom: 20px; + margin-inline-start: 0px; + margin-inline-end: 0px; + + @include mq(xg, min) { + width: 485px; + margin-bottom: 21px; + } + } + + &__text { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + + h2 { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 13px; + line-height: 18px; + color: $color-black2; + text-align: center; + margin: 0; + + @include mq(xg, min) { + font-size: 26px; + line-height: 35px; + } + } + + a { + background-color: $color-blue2; + border-radius: 8px; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + color: $color-white; + letter-spacing: 0.05em; + width: 242px; + height: 42px; + padding: 12px 72px; + text-align: center; + white-space: nowrap; + text-transform: uppercase; + cursor: pointer; + margin-bottom: 56px; + + @include mq(xg, min) { + width: 485px; + height: 59px; + font-size: 26px; + line-height: 35px; + padding: 12px 0 12px 0; + } + } + + ul { + display: flex; + width: fit-content; + gap: 10px; + margin: 20px 0 20px 0; + + li { + background-color: $color-blue2; + border-radius: 8px; + display: flex; + align-items: center; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 13px; + line-height: 18px; + color: $color-white; + letter-spacing: 0.05em; + padding: 5px; + text-align: center; + text-transform: uppercase; + + @include mq(xg, min) { + height: 45px; + font-size: 26px; + line-height: 35px; + padding: 8px 5px; + } + } + } + } + } +}