feat: Cria footer mobile
This commit is contained in:
parent
4da9906cb9
commit
4252a76865
@ -22,6 +22,35 @@ export default class Footer {
|
||||
}
|
||||
|
||||
buildIconList() {
|
||||
this.footerIconList.innerHTML = `
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}visaM3Academy.png" alt="Logo Cartão VISA"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}amexM3Academy.png" alt="Logo Cartão American Express"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}eloM3Academy.png" alt="Logo Cartão Elo"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}hiperCardM3Academy.png" alt="Logo Cartão Hipercard"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}payPalM3Academy.png" alt="Logo Paypal"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-icon">
|
||||
<img src="${this.imgLinks}boletoM3Academy.png" alt="Logo Boleto"/>
|
||||
</li>
|
||||
<li>
|
||||
<span class="footerCheckout__stamps__divider"></span>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-vtex-icon">
|
||||
<img src="${this.imgLinks}vtexPCIM3Academy.png" alt="Certificado VTEX PCI"/>
|
||||
</li>
|
||||
`;
|
||||
Object.values(this.footerIconList.children).forEach((li, index) => {
|
||||
const child = li.children[0].classList.contains("footerCheckout__payments")
|
||||
? li.children[0]
|
||||
@ -31,32 +60,12 @@ export default class Footer {
|
||||
if (index === 0)
|
||||
child.innerHTML = `
|
||||
<ul class="footerCheckout__payments-list">
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}masterCardM3Academy.png" alt="Logo Cartão Mastercard"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}visaM3Academy.png" alt="Logo Cartão VISA"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}amexM3Academy.png" alt="Logo Cartão American Express"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}eloM3Academy.png" alt="Logo Cartão Elo"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}hiperCardM3Academy.png" alt="Logo Cartão Hipercard"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}payPalM3Academy.png" alt="Logo Paypal"/>
|
||||
</li>
|
||||
<li class="footerCheckout__payments-item">
|
||||
<img class="footerCheckout__payments-icon" src="${this.imgLinks}boletoM3Academy.png" alt="Logo Boleto"/>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
`;
|
||||
else
|
||||
child.innerHTML = `
|
||||
<img class="footerCheckout__payments-vtex-icon" src="${this.imgLinks}vtexPCIM3Academy.png" alt="Certificado VTEX PCI"/>
|
||||
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
@ -3,12 +3,21 @@
|
||||
border-top: 1px solid $black-500;
|
||||
padding: 16px 32px;
|
||||
|
||||
@include mq(mobile, max) {
|
||||
padding: 22px 8px 16px;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
@include mq(mobile, max) {
|
||||
grid-auto-flow: row;
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
@ -20,33 +29,22 @@
|
||||
color: $black-400;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
line-height: 14px;
|
||||
text-transform: capitalize;
|
||||
|
||||
@include mq(mobile, max) {
|
||||
grid-area: 2;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
font-size: 20px;
|
||||
line-height: 27px;
|
||||
}
|
||||
}
|
||||
|
||||
&__payments-list {
|
||||
list-style-type: none;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: max-content;
|
||||
}
|
||||
|
||||
&__payments-icon {
|
||||
width: 35px;
|
||||
margin-right: 13px;
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 39px;
|
||||
}
|
||||
}
|
||||
|
||||
&__stamps {
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
@ -54,17 +52,13 @@
|
||||
justify-self: center;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
&:not(:first-of-type),
|
||||
&:not(:last-of-type) {
|
||||
height: 24px;
|
||||
@include mq(mobile, max) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
height: 43px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
@ -80,9 +74,31 @@
|
||||
}
|
||||
}
|
||||
|
||||
&__payments-icon {
|
||||
width: 35px;
|
||||
margin-right: 10px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
@include mq(mobile, max) {
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 67px;
|
||||
margin-right: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
&__payments-vtex-icon {
|
||||
width: 53px;
|
||||
|
||||
@include mq(sm, max) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
@include mq(4k, min) {
|
||||
width: 103px;
|
||||
}
|
||||
|
@ -17,7 +17,7 @@ $white-500: #fff;
|
||||
$grid-breakpoints: (
|
||||
xs: 0,
|
||||
cstm: 400,
|
||||
sm: 576px,
|
||||
sm: 375px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
mobile: 1024px,
|
||||
|
20
package-lock.json
generated
20
package-lock.json
generated
@ -45,6 +45,7 @@
|
||||
"jquery": "^3.6.0",
|
||||
"m3-utils": "^0.1.0",
|
||||
"sass": "^1.38.1",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"terser-webpack-plugin": "^5.1.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -3484,6 +3485,8 @@
|
||||
},
|
||||
"checkout/node_modules/core-util-is": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"checkout/node_modules/cosmiconfig": {
|
||||
@ -4844,6 +4847,8 @@
|
||||
},
|
||||
"checkout/node_modules/get-intrinsic": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
|
||||
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"function-bind": "^1.1.1",
|
||||
@ -6294,6 +6299,8 @@
|
||||
},
|
||||
"checkout/node_modules/micromatch": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
|
||||
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"braces": "^3.0.2",
|
||||
@ -6305,6 +6312,8 @@
|
||||
},
|
||||
"checkout/node_modules/micromatch/node_modules/braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fill-range": "^7.0.1"
|
||||
@ -19345,6 +19354,7 @@
|
||||
"m3-utils": "^0.1.0",
|
||||
"prettier": "^2.3.2",
|
||||
"sass": "^1.38.1",
|
||||
"slick-carousel": "^1.8.1",
|
||||
"terser-webpack-plugin": "^5.1.4",
|
||||
"webpack": "^5.51.1",
|
||||
"webpack-merge": "^5.8.0"
|
||||
@ -21672,7 +21682,9 @@
|
||||
}
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.3"
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
|
||||
"integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="
|
||||
},
|
||||
"cosmiconfig": {
|
||||
"version": "7.1.0",
|
||||
@ -22645,6 +22657,8 @@
|
||||
},
|
||||
"get-intrinsic": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz",
|
||||
"integrity": "sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==",
|
||||
"requires": {
|
||||
"function-bind": "^1.1.1",
|
||||
"has": "^1.0.3",
|
||||
@ -23679,6 +23693,8 @@
|
||||
},
|
||||
"micromatch": {
|
||||
"version": "4.0.5",
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
|
||||
"integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
|
||||
"requires": {
|
||||
"braces": "^3.0.2",
|
||||
"picomatch": "^2.3.1"
|
||||
@ -23686,6 +23702,8 @@
|
||||
"dependencies": {
|
||||
"braces": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
|
||||
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
|
||||
"requires": {
|
||||
"fill-range": "^7.0.1"
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user