diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index ddbfee7..e5d16cb 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -7,12 +7,15 @@ export default class Footer {
async init() {
await this.selectors();
+ this.footerIcons();
// 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.CredicardIcon = await waitElement(".footerCheckout__payments");
+ this.vtexPciIcon = await waitElement(".footerCheckout__vtexpci");
this.checkoutVazio = await waitElement(".empty-cart-content");
}
@@ -30,6 +33,7 @@ export default class Footer {
observer.observe(target, config);
}
+
async addCarrossel() {
const elemento = await waitElement("#my-element");
$(elemento).slick({
@@ -37,4 +41,42 @@ export default class Footer {
slidesToScroll: 1,
});
}
+
+ footerIcons() {
+ if (this.CredicardIcon) {
+ this.CredicardIcon.innerHTML = `
+
+
+
+
+
+
+
+ `;
+ }
+
+ if (this.vtexPciIcon) {
+ this.vtexPciIcon.innerHTML = `
+
+ `;
+ }
+
+ const footerDevelopedBy = document.getElementsByClassName("footerCheckout__developedBy");
+
+ if (footerDevelopedBy) {
+ const vtexIcon = footerDevelopedBy[0].children[0].children[0];
+ const m3Icon = footerDevelopedBy[0].children[1].children[0];
+
+ vtexIcon.innerHTML = `
+ Powered By
+
+ `;
+
+ m3Icon.innerHTML = `
+ Developed By
+
+ `;
+ console.log(m3Icon);
+ }
+ }
}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 093b6c0..00466a1 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -9,7 +9,7 @@ html {
}
footer .footerCheckout__wrapper {
- width: 94.9734%;
+ width: 100%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index c7c65c2..66b34f5 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -3,13 +3,82 @@
border-top: none;
color: $color-gray2;
+ .container {
+ width: 94.9734%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 27px 0 24px;
+ margin: 0;
+
+ @include mq(pg, max) {
+ align-items: flex-start;
+ flex-direction: column;
+ padding: 16px 8px !important;
+ }
+
+ @include mq(csun, max) {
+ padding: 16px 0 8px 8px !important;
+ }
+ }
+
&__wrapper {
align-items: center;
display: flex;
+ flex-direction: column;
justify-content: space-between;
+ border-top: 1px solid $color-black2;
+
+ @include mq(pg, max) {
+ align-items: flex-start;
+ }
+ }
+
+ &__payments {
+ display: flex;
+
+ img {
+ height: 20px;
+ margin: 0;
+ margin-right: 13.35px;
+ max-width: fit-content;
+
+ @include mq(sm, max) {
+ margin-right: 5.22px;
+ }
+
+ @include mq(csun, max) {
+ margin-right: 0;
+ }
+
+ @include mq(xxl, min) {
+ height: 39.06px;
+ }
+ }
+
+ figure {
+ margin: 0;
+ }
+ }
+
+ &__vtexpci {
+ img {
+ height: 33px;
+ margin: 0;
+ max-width: fit-content;
+ }
+
+ ul {
+ padding: 189px;
+ }
+
+ figure {
+ margin: 0;
+ }
}
&__address {
+ width: 33.33%;
color: $color-gray2;
font-family: $font-family;
font-style: normal;
@@ -19,37 +88,76 @@
text-transform: capitalize;
max-width: 40%;
- @include mq(md, max) {
- margin-bottom: 24px;
- max-width: 100%;
+ @include mq(pg, max) {
+ order: 2;
+ margin: 8px 0 8px;
+ line-height: 14px;
+ white-space: nowrap;
+ color: $color-black;
+ }
+
+ // @include mq(md, max) {
+ // margin-bottom: 24px;
+ // max-width: 100%;
+ // }
+
+ @include mq(xxl, min) {
+ font-size: 20px;
+ line-height: 27px;
+ text-transform: capitalize;
+ color: $color-black;
}
}
&__stamps {
+ width: 33.33%;
align-items: center;
display: flex;
- justify-self: center;
+ justify-content: center;
list-style: none;
+ margin: 0;
- @include mq(md, max) {
- align-self: center;
- margin-bottom: 12px;
+ @include mq(csyn, max) {
+ flex-wrap: wrap;
}
+ @include mq(pg, max) {
+ order: 1;
+ margin-bottom: 8px;
+ justify-content: flex-start;
+ }
+
+ // @include mq(md, max) {
+ // align-self: center;
+ // margin-bottom: 12px;
+ // }
+
&__divider {
background-color: $color-gray4;
display: inline-block;
height: 24px;
margin: 0 8px;
width: 1px;
+
+ @include mq(cstm, max) {
+ margin: 0 10px 0 0;
+ }
}
}
&__developedBy {
+ width: 33.33%;
align-items: center;
display: flex;
list-style-type: none;
margin: 0;
+ justify-content: flex-end;
+
+ @include mq(pg, max) {
+ order: 3;
+ justify-content: flex-start;
+ margin-top: 8px;
+ }
li:last-child {
margin-left: 16px;
@@ -57,17 +165,45 @@
a {
align-items: center;
- color: $color-gray2;
display: flex;
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 10px;
- line-height: 12px;
- text-decoration: none;
span {
- margin-right: 8px;
+ color: $color-gray2;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: normal;
+ font-size: 10px;
+ line-height: 12px;
+ margin-right: 10.12px;
+
+ @include mq(pg, max) {
+ font-size: 9px;
+ line-height: 12px;
+ white-space: nowrap;
+ color: $color-black;
+ }
+
+ @include mq(xxl, min) {
+ font-size: 18px;
+ line-height: 25px;
+ color: $color-black;
+ }
+ }
+
+ figure {
+ margin: 0;
+
+ @include mq(pg, max) {
+ width: max-content;
+ }
+ }
+
+ img {
+ height: 16px;
+
+ @include mq(xxl, min) {
+ height: 31.25px;
+ }
}
}
}
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index e73608d..ef06ada 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,14 +1,17 @@
/* _header.scss */
.headerCheckout {
- .container {
- width: auto !important;
- }
+ width: 100%;
+ border-bottom: 1px solid #000;
+
+ // .container {
+ // width: auto !important;
+ // }
&__wrapper {
align-items: center;
display: flex;
justify-content: space-between;
- padding: 29px 131px;
- border-bottom: 1px solid $color-black2;
+ padding: 29px 0;
+ // border-bottom: 1px solid $color-black2;
@include mq(pg, max) {
padding: 16px;
@@ -115,7 +118,7 @@
&__logo {
img {
- height: 52px;
+ height: 37.14px;
width: auto;
cursor: pointer;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index f03a179..056652e 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -23,6 +23,8 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
+ csun: 285,
+ csyn: 355,
cstm: 400,
sm: 576px,
md: 768px,