anacarolinaduartecavalcante/m3-academy-template-checkout-ana-carolina-duarte-cavalcante
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style(Slick): adaptando para as telas 1280px ,2500px, 1024px e 375px

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-12-16 20:13:08 -03:00
parent d3e3f4b387
commit 7cef3e535b
4 changed files with 87 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,6 +73,23 @@ export default class Footer {
$(elemento).slick({
slidesToShow: 4,
slidesToScroll: 1,
arrows: true,
responsive: [
{
breakpoint: 1025,
settings: {
slidesToShow: 3,
slidesToShow: 3
}
},
{
breakpoint: 377,
settings: {
slidesToShow: 2,
slidesToShow: 2
}
}
]
});
}

6
checkout/src/arquivos/sass/checkout/_checkout.scss
View File

@ -16,6 +16,12 @@ footer .footerCheckout__prateleira,
header {
width: 79.53125%;
margin: 0 auto;
@media (max-width: $checkout1024px) {
width: 96.77734%;
}
@media (max-width: $checkout375px) {
width: 91.73333%;
}
}
body {

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

@ -17,6 +17,10 @@
text-align: center;
color: $color-black2;
margin-bottom: 20px;
@media (min-width: $checkout2500px) {
font-size: 48px;
line-height: 76px;
}
}
& .footerCheckout__plateleira__list {
margin: 0 0 56px 0;
@ -30,11 +34,32 @@
display: flex !important;
flex-direction: column;
justify-content: space-between;
width: 242px !important;
height: 390px;
row-gap: 20px;
@media (min-width: $checkout2500px) {
width: 485.07px !important;
height: 685px;
}
@media (max-width: $checkout1024px) {
width: 320px !important;
height: 468px;
}
@media (max-width: $checkout375px) {
width: 164px !important;
height: 363px;
}
&__product__img {
height: 242px;
@media (min-width: $checkout2500px) {
height: 485.07px;
}
@media (max-width: $checkout1024px) {
height: 320px;
}
@media (max-width: $checkout375px) {
width: 164px;
height: 164px;
}
}
&__product__name {
@ -46,6 +71,10 @@
color: $color-black2;
margin: 0;
width: auto;
@media (min-width: $checkout2500px) {
font-size: 26px;
line-height: 35px;
}
}
&__product__sizes {
@ -56,6 +85,9 @@
height: 28px;
column-gap: 5px;
margin: 0;
@media (max-width: $checkout375px) {
flex-wrap: wrap;
}
& li {
list-style: none;
background: $color-blue2;
@ -72,6 +104,10 @@
text-transform: uppercase;
color: $color-white;
white-space: nowrap;
@media (min-width: $checkout2500px) {
font-size: 26px;
line-height: 35px;
}
}
}
@ -87,6 +123,11 @@
letter-spacing: 0.05em;
text-transform: uppercase;
color: $color-white;
@media (min-width: $checkout2500px) {
height: 59px;
font-size: 26px;
line-height: 35px;
}
}
}
}
@ -107,6 +148,11 @@
background-size: 13px 29.47px !important;
width: 13px;
height: 29.47px;
@media (min-width: $checkout2500px) {
background-size: 26px 58px !important;
width: 26px;
height: 58px;
}
}
.slick-next {
@ -115,6 +161,11 @@
background-size: 13px 29.47px !important;
width: 13px;
height: 29.47px;
@media (min-width: $checkout2500px) {
background-size: 26px 58px !important;
width: 26px;
height: 58px;
}
}
.slick-track {
@ -132,7 +183,7 @@
border-top: 1px solid $color-black2;
padding: 16px 0;
width: 100%;
@media (max-width: $checkout1024px){
@media (max-width: $checkout1024px) {
padding: 22px 0 16px;
}
& .container {
@ -140,10 +191,10 @@
justify-content: space-between;
align-items: center;
width: 94.9734%;
@media (max-width: $checkout1024px){
@media (max-width: $checkout1024px) {
width: 98.42%;
}
@media (max-width: $checkout375px),(max-width: $checkout1024px) {
@media (max-width: $checkout375px), (max-width: $checkout1024px) {
flex-direction: column;
align-items: flex-start;
}
@ -162,7 +213,7 @@
text-transform: capitalize;
color: #292929;
max-width: 40%;
@media (max-width: $checkout375px),(max-width: $checkout1024px) {
@media (max-width: $checkout375px), (max-width: $checkout1024px) {
order: 2;
margin-top: 16px;
margin-left: 16px;
@ -185,7 +236,7 @@
display: flex;
justify-self: center;
margin: 0;
@media (max-width: $checkout375px),(max-width: $checkout1024px) {
@media (max-width: $checkout375px), (max-width: $checkout1024px) {
order: 1;
margin-left: 8px;
}
@ -304,7 +355,7 @@
justify-content: flex-end;
// width: 33%;
gap: 10.73px;
@media (max-width: $checkout375px),(max-width: $checkout1024px) {
@media (max-width: $checkout375px), (max-width: $checkout1024px) {
order: 3;
margin-top: 16px;
}
@ -391,3 +442,5 @@
}
}
}
// slick

4
checkout/src/arquivos/sass/partials/_header.scss
View File

@ -12,6 +12,9 @@
@media (max-width: $checkout1024px){
margin: 0 16px;
}
@media (min-width: $checkout2500px){
margin: 0 256px;
}
}
&__wrapper {
align-items: center;
@ -241,3 +244,4 @@
}
}
}