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 {
//width: 94.9734%;
width: 100%;
margin: auto auto 0 auto;
}
footer .footerCheckout__prateleira,

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

@ -2,29 +2,28 @@
.container {
display: flex;
flex-direction: column;
padding: 7px 8px;
padding: 7px 0;
align-items: center;
margin: 0;
gap: 15px;
width: 100%;
@media (min-width: 1025px) {
@include mq(dt, min) {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 15px 32px;
padding: 15px 0 15px 0;
gap: 0;
}
@include mq(tv, min) {
padding: 26px 0 26px 0;
}
}
&__wrapper {
border-top: 1px solid $black;
@media (max-width: 490px) {
padding: 0 8px;
}
}
&__address {
width: 48.7%;
color: $gray-500;
font-family: $font-family;
font-weight: 400;
@ -32,22 +31,41 @@
font-size: 10px;
text-transform: capitalize;
// @include mq(md, max) {
// margin-bottom: 24px;
// max-width: 100%;
// }
@include mq(dt, max) {
display: flex;
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 {
margin: 0;
align-items: center;
display: flex;
align-items: center;
justify-self: center;
margin: 0;
list-style: none;
@include mq(md, max) {
@include mq(dt, max) {
display: flex;
order: 1;
align-self: center;
margin-bottom: 12px;
}
.payments-icons-wrapper {
@ -61,7 +79,7 @@
align-items: center;
list-style: none;
@media (min-width: 1025px) {
@include mq(dt, min) {
justify-content: center;
}
}
@ -70,10 +88,13 @@
min-width: 35.65px;
margin-right: 4px;
@media (min-width: 1025px) {
@include mq(dt, min) {
width: 5.22%;
margin-right: 13px;
}
@include mq(tv, min) {
width: 6.12%;
}
}
#vtexIcon {
@ -107,22 +128,28 @@
display: flex;
list-style-type: none;
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;
}
.vtex-icon {
width: 44.92px;
@media (min-width: 1025px) {
width: 36.69%;
}
}
.m3-icon {
width: 28.66px;
@media (min-width: 1025px) {
width: 31.8%;
}
}
a {
@ -140,5 +167,26 @@
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,
md: 768px,
lg: 992px,
dt: 1025px,
xl: 1200px,
tv: 2500px,
) !default;
$z-index: (