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

feat(footer): scss do footer em tamanhos mobiles e maiores que 2500

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-12-13 14:14:11 -03:00
parent a6e4ea4a5a
commit 334bea8cba
3 changed files with 78 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,7 @@ html {
} }
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
//width: 94.9734%; width: 100%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
} }
footer .footerCheckout__prateleira, footer .footerCheckout__prateleira,

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

@ -2,29 +2,28 @@
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 7px 8px; padding: 7px 0;
align-items: center;
margin: 0; margin: 0;
gap: 15px; width: 100%;
@media (min-width: 1025px) { @include mq(dt, min) {
flex-direction: row; flex-direction: row;
align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 15px 32px; padding: 15px 0 15px 0;
gap: 0; gap: 0;
} }
@include mq(tv, min) {
padding: 26px 0 26px 0;
}
} }
&__wrapper { &__wrapper {
border-top: 1px solid $black; border-top: 1px solid $black;
@media (max-width: 490px) {
padding: 0 8px;
}
} }
&__address { &__address {
width: 48.7%;
color: $gray-500; color: $gray-500;
font-family: $font-family; font-family: $font-family;
font-weight: 400; font-weight: 400;
@ -32,22 +31,41 @@
font-size: 10px; font-size: 10px;
text-transform: capitalize; text-transform: capitalize;
// @include mq(md, max) { @include mq(dt, max) {
// margin-bottom: 24px; display: flex;
// max-width: 100%; width: 100%;
// } order: 2;
margin-top: 17px;
span {
margin-left: 8px;
}
}
@include mq(dt, min) {
min-width: 269px;
margin-left: 32px;
}
@include mq(tv, min) {
font-size: 20px;
line-height: 27px;
min-width: 537px;
margin-left: 0;
}
} }
&__stamps { &__stamps {
margin: 0;
align-items: center;
display: flex; display: flex;
align-items: center;
justify-self: center; justify-self: center;
margin: 0;
list-style: none; list-style: none;
@include mq(md, max) { @include mq(dt, max) {
display: flex;
order: 1;
align-self: center; align-self: center;
margin-bottom: 12px;
} }
.payments-icons-wrapper { .payments-icons-wrapper {
@ -61,7 +79,7 @@
align-items: center; align-items: center;
list-style: none; list-style: none;
@media (min-width: 1025px) { @include mq(dt, min) {
justify-content: center; justify-content: center;
} }
} }
@ -70,10 +88,13 @@
min-width: 35.65px; min-width: 35.65px;
margin-right: 4px; margin-right: 4px;
@media (min-width: 1025px) { @include mq(dt, min) {
width: 5.22%; width: 5.22%;
margin-right: 13px; margin-right: 13px;
} }
@include mq(tv, min) {
width: 6.12%;
}
} }
#vtexIcon { #vtexIcon {
@ -107,22 +128,28 @@
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
margin-right: 16.5px;
li:last-child { @include mq(dt, max) {
display: flex;
width: 100%;
order: 3;
margin-top: 17px;
}
@include mq(dt, min) {
min-width: 217px;
}
li {
margin-left: 16px; margin-left: 16px;
} }
.vtex-icon { .vtex-icon {
width: 44.92px; width: 44.92px;
@media (min-width: 1025px) {
width: 36.69%;
}
} }
.m3-icon { .m3-icon {
width: 28.66px; width: 28.66px;
@media (min-width: 1025px) {
width: 31.8%;
}
} }
a { a {
@ -140,5 +167,26 @@
margin-right: 8px; margin-right: 8px;
} }
} }
@include mq(tv, min) {
min-width: 388.98px;
margin-right: 0;
a {
font-size: 18px;
line-height: 25px;
}
li {
margin-left: 10px;
}
.vtex-icon {
width: 87.73px;
}
.m3-icon {
width: 55.98px;
}
}
} }
} }

2
checkout/src/arquivos/sass/utils/_variaveis.scss
View File

@ -29,7 +29,9 @@ $grid-breakpoints: (
sm: 576px, sm: 576px,
md: 768px, md: 768px,
lg: 992px, lg: 992px,
dt: 1025px,
xl: 1200px, xl: 1200px,
tv: 2500px,
) !default; ) !default;
$z-index: ( $z-index: (