diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index ddbfee7..5d05f7c 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -8,12 +8,14 @@ export default class Footer { async init() { await this.selectors(); // this.onUpdate(); + await this.footerCheckout(); } 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.footerCheckoutstamps = await waitElement(".footerCheckout__stamps"); } onUpdate() { @@ -37,4 +39,42 @@ export default class Footer { slidesToScroll: 1, }); } + + footerCheckout() { + this.footerCheckoutstamps.innerHTML = ` +
  • + + + +
  • + + `; + } + } diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 32641ba..b4aa12c 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -1,14 +1,17 @@ /* _footer.scss */ .footerCheckout { - border-top: none; + border-top: 1px solid #000000; color: $color-gray2; - + bottom: 0; + position: absolute; + width: 100%; &__wrapper { & .container { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; + width: 100%; &::before, &::after { content: none; } @@ -43,6 +46,22 @@ // margin-bottom: 12px; } + & li { + display: flex; + & .footerCheckout__payments { + display: flex; + align-items: center; + justify-content: space-between; + margin-left: 0; + & li { + height: 20px; + } + & .vtexPCIM { + height: 33px; + } + } + } + &__divider { background-color: $color-gray4; display: inline-block;