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

feat: Estiliza footer mobile e telas 4k

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-12-17 15:16:57 -03:00
parent ba54b0b87c
commit 13eacc2411
3 changed files with 82 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,5 +131,4 @@ export default class Footer {
</li> </li>
`; `;
} }
} }

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

@ -14,8 +14,13 @@ html {
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; // width: 94.9734%;
width: 100%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
@media (max-width: 1023px) {
// width: 91.2%;
}
} }
footer .footerCheckout__wrapper .container { footer .footerCheckout__wrapper .container {
@ -36,7 +41,7 @@ footer .footerCheckout__prateleira,
@media (max-width: 1024px) { @media (max-width: 1024px) {
width: 91.47%; width: 91.47%;
} }
} }

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

@ -6,8 +6,21 @@
.container { .container {
width: 100%; width: 100%;
border-top: 1px solid $black-500; border-top: 1px solid $black-500;
@media (max-width: 1024px) {
// display: grid;
flex-direction: column;
align-items: flex-start !important;
// gap: 16px;
}
} }
// @media (max-width: 1024px) {
// .container :nth-child(1) { order: 2; }
// .container :nth-child(2) { order: 1; }
// .container :nth-child(3) { order: 3; }
// }
&__prateleira { &__prateleira {
width: 1016px; width: 1016px;
margin: 0 132px 56px !important; margin: 0 132px 56px !important;
@ -102,9 +115,15 @@
align-items: center; align-items: center;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
position: relative;
@media (max-width: 1024px) { @media (max-width: 1024px) {
display: none; // display: none;
}
.container {
border-top: 1px solid #000;
position: absolute;
} }
} }
@ -119,9 +138,19 @@
max-width: 40%; max-width: 40%;
@include mq(md, max) { @include mq(md, max) {
margin-bottom: 24px; // margin-bottom: 24px;
max-width: 100%; max-width: 100%;
} }
@media (min-width: 2500px) {
font-size: 20px;
line-height: 27px;
}
@media (max-width: 1024px) {
order: 2;
margin: 0 0 16px 16px;
}
} }
&__stamps { &__stamps {
@ -131,24 +160,31 @@
display: flex; display: flex;
justify-self: center; justify-self: center;
list-style: none; list-style: none;
gap: 13px;
@media (min-width: 2500px) {
width: 27.6%;
margin-top: 13px;
}
@media (max-width: 1024px) {
width: 33.44%;
margin: 22px 0 40px 16px;
}
@media (max-width: 345px) {
order: 1;
width: 100%;
gap: 4px;
margin: 23px 0;
width: 91.2%;
}
// li .vtex-pci {
// &::before {
// display: block;
// content: "";
// height: 24px;
// width: 1px;
// color: $gray-400;
// }
// width: 81.62%
// img {
// }
// }
@include mq(md, max) { @include mq(md, max) {
align-self: center; align-self: center;
margin-bottom: 12px; // margin-bottom: 12px;
} }
&__divider { &__divider {
@ -156,8 +192,12 @@
background-color: $gray-400; background-color: $gray-400;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
margin: 0 8px; // margin: 0 8px;
width: 1px; width: 1px;
@media (min-width: 2500px) {
height: 42px;
}
} }
} }
@ -168,16 +208,30 @@
color: $black-400; color: $black-400;
margin: 27px 0 22px; margin: 27px 0 22px;
@media (max-width: 1024px) {
order: 3;
margin: 0;
margin: 0 0 19px 16px;
}
div { div {
display: flex; display: flex;
} }
.vtex-logo { .vtex-logo {
width: 44.92px; width: 44.92px;
@media (min-width: 2500px) {
width: 87.73px;
}
} }
.m3-logo { .m3-logo {
width: 28.66px; width: 28.66px;
@media (min-width: 2500px) {
width: 55.98px;
}
} }
li .by-vtex { li .by-vtex {
@ -207,6 +261,11 @@
font-size: 10px; font-size: 10px;
line-height: 14px; line-height: 14px;
// margin-right: 8px; // margin-right: 8px;
@media (min-width: 2500px) {
font-size: 18px;
line-height: 25px;
}
} }
} }
} }