SabrinaMiranda/m3-academy-template-checkout-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Aplica estilização prateleira

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-26 22:50:45 -03:00
parent 3e83b3dd7b
commit c5b1bdd852
2 changed files with 97 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
checkout/src/arquivos/js/components/Footer.js
View File

@ -7,19 +7,18 @@ export default class Footer {
async init() { async init() {
await this.selectors(); await this.selectors();
this.paymentsIconsHTML();
this.vtexPciIconHTML();
this.developedByLogoHTML();
/*if (window.location.hash === "#/cart") { /*if (window.location.hash === "#/cart") {
this.onUpdate(); this.onUpdate();
}*/ }*/
this.onUpdate();
this.requestAPI(); this.requestAPI();
this.prateleiraItem = await waitElement(".prateleira__ul"); this.prateleiraItem = await waitElement(".prateleira__ul");
this.events(); this.events();
this.onUpdate();
//await this.addCarrossel();
this.paymentsIconsHTML();
this.vtexPciIconHTML();
this.developedByLogoHTML();
} }
async selectors() { async selectors() {
@ -179,7 +178,7 @@ export default class Footer {
arrows: true, arrows: true,
responsive: [ responsive: [
{ {
breakpoint: 1170, breakpoint: 1024,
settings: { settings: {
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 1, slidesToScroll: 1,
@ -188,7 +187,7 @@ export default class Footer {
} }
}, },
{ {
breakpoint: 925, breakpoint: 800,
settings: { settings: {
slidesToShow: 2, slidesToShow: 2,
slidesToScroll: 1, slidesToScroll: 1,
@ -197,7 +196,7 @@ export default class Footer {
} }
}, },
{ {
breakpoint: 635, breakpoint: 350,
settings: { settings: {
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,

90
checkout/src/arquivos/sass/partials/_prateleira.scss
View File

@ -7,6 +7,10 @@
width: 79.76%; width: 79.76%;
} }
@media (max-width: 1024px) {
width: 96.97%;
}
.prateleira { .prateleira {
&__title { &__title {
font-family: $font-family-secundary; font-family: $font-family-secundary;
@ -52,10 +56,47 @@
margin-inline-start: 0px; margin-inline-start: 0px;
margin-inline-end: 0px; margin-inline-end: 0px;
@media (min-width: 3500px) {
width: 500px !important;
padding: 12px 0;
}
@include mq(xg, min) { @include mq(xg, min) {
width: 485px; width: 485px;
margin-bottom: 21px; margin-bottom: 21px;
} }
@media (max-width: 1279px) {
width: 200px !important;
}
@media (max-width: 1024px) {
width: 320px;
}
@media (max-width: 999px) {
width: 270px;
}
@media (max-width: 847px) {
width: 230px;
}
@media (max-width: 799px) {
width: 320px;
}
@media (min-width: 535px) {
width: 250px;
}
@media (max-width: 534px) {
width: 220px;
}
@media (max-width: 469px) {
width: 164px !important;
}
} }
&__text { &__text {
@ -99,6 +140,11 @@
cursor: pointer; cursor: pointer;
margin-bottom: 56px; margin-bottom: 56px;
@media (min-width: 3500px) {
width: 500px !important;
padding: 12px 0;
}
@include mq(xg, min) { @include mq(xg, min) {
width: 485px; width: 485px;
height: 59px; height: 59px;
@ -106,6 +152,40 @@
line-height: 35px; line-height: 35px;
padding: 12px 0 12px 0; padding: 12px 0 12px 0;
} }
@media (max-width: 1279px) {
width: 200px !important;
padding: 12px 0;
}
@media (max-width: 1024px) {
width: 320px;
}
@media (max-width: 999px) {
width: 270px;
}
@media (max-width: 847px) {
width: 230px;
}
@media (max-width: 799px) {
width: 320px;
}
@media (min-width: 535px) {
width: 250px;
}
@media (max-width: 534px) {
width: 220px;
}
@media (max-width: 469px) {
width: 164px !important;
padding: 12px 0;
}
} }
ul { ul {
@ -114,6 +194,16 @@
gap: 10px; gap: 10px;
margin: 20px 0 20px 0; margin: 20px 0 20px 0;
@media (max-width: 1279px) {
flex-wrap: wrap;
justify-content: center;
}
@media (max-width: 469px) {
flex-wrap: wrap;
justify-content: center;
}
li { li {
background-color: $color-blue2; background-color: $color-blue2;
border-radius: 8px; border-radius: 8px;