diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 4d6f650..fb12389 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,6 +8,7 @@ export default class Footer { async init() { await this.selectors(); this.createPaymentsIcons(); + this.createVtexpciIcon(); this.createDevIcons(); // this.onUpdate(); } @@ -16,14 +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.payments = await waitElement(".footerCheckout__stamps"); + this.payments = await waitElement(".footerCheckout__payments"); + this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.devIncons = await waitElement(".footerCheckout__developedBy"); } createPaymentsIcons() { this.payments.innerHTML = ` -
-
`; } + createVtexpciIcon() { + this.vtexpci.innerHTML = ` + + `; + } + createDevIcons() { this.devIncons.innerHTML = `
  • diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index c2340f8..9747886 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,16 +2,15 @@ .container { display: flex; flex-direction: column; - padding: 7px 0; - align-items: center; - margin: 0; width: 100%; + padding: 7px 0; + margin: 0; @include mq(dt, min) { flex-direction: row; + align-items: center; justify-content: space-between; padding: 15px 0 15px 0; - gap: 0; } @include mq(tv, min) { @@ -38,7 +37,7 @@ margin-top: 17px; span { - margin-left: 8px; + margin-left: 16px; } } @@ -58,68 +57,67 @@ &__stamps { display: flex; align-items: center; - justify-self: center; - margin: 0; list-style: none; + margin: 0 0 0 5px; - @include mq(dt, max) { - display: flex; - order: 1; - align-self: center; + @include mq(dt, min) { + justify-content: center; + min-width: 404px; + margin: 0; + } + + @include mq(tv, min) { + min-width: 690.52px; } .payments-icons-wrapper { - img { - width: 100%; - } + display: flex; + align-items: center; + justify-content: center; + list-style: none; + margin: 0; - ul { - margin: 0; - display: flex; - align-items: center; - list-style: none; - - @include mq(dt, min) { - justify-content: center; - } - } li { - width: 3.77%; - min-width: 35.65px; - margin-right: 4px; - - @include mq(dt, min) { - width: 5.22%; - margin-right: 13px; - } - @include mq(tv, min) { - width: 6.12%; - } + width: 35.65px; } - #vtexIcon { - width: 53px; - margin-left: 10px; - position: relative; - } - - #vtexIcon::before { - content: ""; - position: absolute; - display: inline-block; - height: 24px; - top: 5px; - left: -10px; - border-left: 1px solid $gray; + @include mq(tv, min) { + li { + width: 69.63px; + } } } - &__divider { - background-color: $gray-200; - display: inline-block; - height: 24px; - margin: 0 8px; - width: 1px; + .footerCheckout__stamps__divider { + position: relative; + border-left: 1px solid $gray; + margin-left: 4px; + + // &::before { + // content: ""; + // color: $gray; + // position: absolute; + // } + + @include mq(dt, min) { + margin-left: 11.35px; + } + } + + .footerCheckout__vtexpci { + margin-left: 10px; + + .vtex-icon { + width: 53px; + height: 33px; + } + + @include mq(tv, min) { + .vtex-icon { + width: 103.52px; + height: 64.46px; + } + } } } @@ -128,7 +126,7 @@ display: flex; list-style-type: none; margin: 0; - margin-right: 16.5px; + // margin-right: 16.5px; @include mq(dt, max) { display: flex; @@ -139,6 +137,7 @@ @include mq(dt, min) { min-width: 217px; + margin-right: 22.5px; } li { @@ -189,4 +188,16 @@ } } } + + .footerCheckout::after, + ::before { + display: none; + content: none; + } + + .footerCheckout::before, + ::after { + display: none; + content: none; + } }