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;
+ }
}