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

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

@ -7,6 +7,10 @@
width: 79.76%;
}
@media (max-width: 1024px) {
width: 96.97%;
}
.prateleira {
&__title {
font-family: $font-family-secundary;
@ -52,10 +56,47 @@
margin-inline-start: 0px;
margin-inline-end: 0px;
@media (min-width: 3500px) {
width: 500px !important;
padding: 12px 0;
}
@include mq(xg, min) {
width: 485px;
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 {
@ -99,6 +140,11 @@
cursor: pointer;
margin-bottom: 56px;
@media (min-width: 3500px) {
width: 500px !important;
padding: 12px 0;
}
@include mq(xg, min) {
width: 485px;
height: 59px;
@ -106,6 +152,40 @@
line-height: 35px;
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 {
@ -114,6 +194,16 @@
gap: 10px;
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 {
background-color: $color-blue2;
border-radius: 8px;