matheus_mariosa/m3-academy-template-checkout-matheus-mariosa
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: slick responsivo

Browse Source
This commit is contained in:
Matheus Mariosa 2022-12-23 15:49:03 -03:00
parent 574dd3915f
commit 0bb7296ad5
4 changed files with 22868 additions and 10234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32966
checkout/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

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

@ -161,7 +161,26 @@ export default class Footer {
slidesToScroll: 1, slidesToScroll: 1,
arrows: true, arrows: true,
Infinity: false, Infinity: false,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToScroll: 1,
infinite: false,
arrows: true,
}
},
{
breakpoint: 376,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
infinite: false,
arrows: true,
}
},
],
}); });
} }
} }

22
checkout/src/arquivos/sass/lib/_slick.scss
View File

@ -60,6 +60,8 @@
.slick-loading & { .slick-loading & {
visibility: hidden; visibility: hidden;
} }
} }
.slick-slide { .slick-slide {
float: left; float: left;
@ -76,6 +78,7 @@
display: none; display: none;
} }
display: none; display: none;
&.dragging img { &.dragging img {
@ -84,6 +87,7 @@
.slick-initialized & { .slick-initialized & {
display: block; display: block;
} }
.slick-loading & { .slick-loading & {
@ -96,6 +100,7 @@
border: 1px solid transparent; border: 1px solid transparent;
} }
} }
.slick-arrow { .slick-arrow {
font-size: 0; font-size: 0;
position: absolute; position: absolute;
@ -105,11 +110,28 @@
no-repeat center center; no-repeat center center;
z-index: 4; z-index: 4;
left: 10px; left: 10px;
@media only screen and (max-width: 375px){
left: 2px;
}
@media only screen and (min-width: 2500px){
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-M3Academy.svg");
width: 26px !important;
height: 56px !important;
}
} }
.slick-next { .slick-next {
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg"); background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg");
z-index: 4; z-index: 4;
right: 10px; right: 10px;
@media only screen and (min-width: 2500px){
background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-M3Academy.svg");
width: 26px !important;
height: 56px !important;
}
} }
.slick-arrow.slick-hidden { .slick-arrow.slick-hidden {
display: none; display: none;

93
checkout/src/arquivos/sass/partials/_footer.scss
View File

@ -11,6 +11,15 @@
flex-direction: column; flex-direction: column;
margin-bottom: 56px; margin-bottom: 56px;
@media only screen and (max-width: 1024px){
padding: 0 16px 54px;
margin: 0;
width: 96.875%;
}
@media only screen and (max-width: 375px){
padding: 0 15.5px 54px;
}
.prateleira-title{ .prateleira-title{
display: flex; display: flex;
@ -21,6 +30,17 @@
line-height: 38px; line-height: 38px;
color: black; color: black;
justify-content: center; justify-content: center;
font-weight: 400;
@media only screen and (max-width: 375px){
font-size: 14px;
line-height: 28px;
}
@media only screen and (min-width: 2500px){
font-size: 48px;
line-height: 76px;
}
} }
.displayNone{ .displayNone{
display: none !important; display: none !important;
@ -33,6 +53,11 @@
border: 0; border: 0;
width: 13.64px; width: 13.64px;
height: 29.47px; height: 29.47px;
@media only screen and (max-width: 375px){
top: 47%;
right: 5%;
}
} }
.conteiner-slick{ .conteiner-slick{
@ -42,12 +67,39 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@media only screen and (max-width: 1024px){
max-width: max-content;
height: auto;
}
@media only screen and (max-width: 375px){
width: 164px !important;
}
@media only screen and (min-width: 2500px){
max-width: max-content;
height: auto;
}
figure{ figure{
margin: 0; margin: 0;
.slick-img{ .slick-img{
width: 242px; width: 242px;
height: 242px; height: 242px;
@media only screen and (max-width: 1024px){
width: 320px;
height: 320px;
}
@media only screen and (max-width: 375px){
width: 164px;
height: 164px;
}
@media only screen and (min-width: 2500px){
height: 485.07px;
width: 485.07px;
}
} }
} }
.slick-name{ .slick-name{
@ -58,6 +110,16 @@
line-height: 18px; line-height: 18px;
color: black; color: black;
margin-top: 20px; margin-top: 20px;
@media only screen and (max-width: 375px){
text-align: center;
}
@media only screen and (min-width: 2500px){
font-size: 26px;
line-height: 35px;
margin-top: 21.93px;
}
} }
.slick-skus-conteiner{ .slick-skus-conteiner{
@ -66,6 +128,13 @@
justify-content: center; justify-content: center;
margin: 20px 0; margin: 20px 0;
@media only screen and (max-width: 375px){
margin: 20px 0 10px;
height: 61px;
flex-wrap: wrap;
align-content: center;
}
.slick-skus-itens{ .slick-skus-itens{
padding: 5px; padding: 5px;
background-color: #00C8FF; background-color: #00C8FF;
@ -75,7 +144,19 @@
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
margin: 0 2.5px; margin: 0 2.5px;
}; text-transform: uppercase;
font-weight: 700;
@media only screen and (max-width: 375px){
margin-bottom: 5px;
height: 18px;
};
@media only screen and (min-width: 2500px){
font-size: 26px;
line-height: 35px;
}
}
} }
.slick-buttom{ .slick-buttom{
@ -85,13 +166,23 @@
padding: 12px 0; padding: 12px 0;
border: 0; border: 0;
@media only screen and (max-width: 375px){
width: 164px;
}
a { a {
color: white; color: white;
font-family: 'Open Sans'; font-family: 'Open Sans';
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
@media only screen and (min-width: 2500px){
font-size: 26px;
line-height: 35px;
}
}; };
}; };
}; };