diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 5d05f7c..8dc871f 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -15,7 +15,7 @@ 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.footerCheckoutstamps = await waitElement(".footerCheckout__stamps");
+ this.footerCheckoutstamps = await waitElement(".footerCheckout__wrapper");
}
onUpdate() {
@@ -42,37 +42,57 @@ export default class Footer {
footerCheckout() {
this.footerCheckoutstamps.innerHTML = `
-
+
`;
}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index b4aa12c..2faf78c 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -3,7 +3,7 @@
border-top: 1px solid #000000;
color: $color-gray2;
bottom: 0;
- position: absolute;
+ position: absolute;
width: 100%;
&__wrapper {
& .container {
@@ -12,88 +12,94 @@
align-items: center;
padding: 16px 0;
width: 100%;
- &::before, &::after {
+ &::before,
+ &::after {
content: none;
}
- }
- }
+ & .footerCheckout__address {
+ color: $color-gray2;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 10px;
+ line-height: 14px;
+ text-transform: capitalize;
+ color: #292929;
+ max-width: 40%;
- &__address {
- color: $color-gray2;
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 10px;
- line-height: 14px;
- text-transform: capitalize;
- color: #292929;
- max-width: 40%;
-
- @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;
- }
-
- & li {
- display: flex;
- & .footerCheckout__payments {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-left: 0;
- & li {
- height: 20px;
- }
- & .vtexPCIM {
- height: 33px;
+ @include mq(md, max) {
+ margin-bottom: 24px;
+ max-width: 100%;
}
}
- }
- &__divider {
- background-color: $color-gray4;
- display: inline-block;
- height: 24px;
- margin: 0 8px;
- width: 1px;
- }
- }
+ & div {
+ align-items: center;
+ display: flex;
+ justify-self: center;
+ & ul {
+ align-items: center;
+ display: flex;
+ justify-self: center;
+ list-style: none;
+ margin: 0;
+ @include mq(md, max) {
+ align-self: center;
+ // margin-bottom: 12px;
+ }
- &__developedBy {
- align-items: center;
- display: flex;
- list-style-type: none;
- margin: 0;
+ & li {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-left: 0;
+ & img {
+ height: 20px;
+ margin: 0 6.675px;
+ }
+ }
+ & .vtexPCIM {
+ & img {
+ height: 33px;
+ }
+ }
+ }
+ & .footerCheckout__stamps__divider {
+ background-color: $color-gray4;
+ display: inline-block;
+ height: 24px;
+ margin: 0 8px;
+ width: 1px;
+ }
+ }
+ & .footerCheckout__developedBy {
+ align-items: center;
+ display: flex;
+ list-style-type: none;
+ margin: 0;
- li:last-child {
- margin-left: 16px;
- }
+ li:last-child {
+ margin-left: 16px;
+ }
- a {
- align-items: center;
- color: $color-gray2;
- display: flex;
- font-family: $font-family;
- font-style: normal;
- font-weight: normal;
- font-size: 9px;
- line-height: 12px;
- text-decoration: none;
+ a {
+ align-items: center;
+ color: $color-gray2;
+ display: flex;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 9px;
+ line-height: 12px;
+ text-decoration: none;
- span {
- margin-right: 8px;
+ span {
+ margin-right: 8px;
+ }
+ & img {
+ height: 16px;
+ }
+ }
}
}
}