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

feat(footer): Aplica css footer mobiles

Browse Source
This commit is contained in:
Sabrina Miranda 2022-12-15 21:50:50 -03:00
parent 6900a420e1
commit d3c7270fc2
3 changed files with 65 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,8 +13,12 @@ html {
} }
footer .footerCheckout__wrapper { footer .footerCheckout__wrapper {
width: 94.9734%; width: 96.875%;
margin: auto auto 0 auto; margin: auto auto 0 auto;
@include mq(xm, min) {
width: 94.9734%;
}
} }
header { header {

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

@ -6,18 +6,27 @@
&__wrapper { &__wrapper {
align-items: center; align-items: center;
display: flex; display: flex;
padding: 16px 0; padding: 22px 0;
@include mq(xg, min) { @include mq(xg, min) {
padding: 30px 0; padding: 30px 0;
} }
@include mq(xm, min) {
padding: 16px 0;
}
} }
.container { .container {
width: 100%;
display: grid;
grid-template-columns: 1fr;
@include mq(xm, min) {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
width: 100%; }
} }
&__address { &__address {
@ -28,35 +37,42 @@
font-size: 10px; font-size: 10px;
line-height: 14px; line-height: 14px;
text-transform: capitalize; text-transform: capitalize;
max-width: 40%; grid-area: 2;
margin-right: auto; margin: 16px 0 16px 0;
@include mq(xg, min) { @include mq(xg, min) {
font-size: 20px; font-size: 20px;
line-height: 27px; line-height: 27px;
} }
/*@include mq(md, max) { @include mq(xm, min) {
margin-bottom: 24px; margin-right: auto;
max-width: 100%;
}*/ }
} }
&__stamps { &__stamps {
align-items: center; align-items: center;
display: flex; display: flex;
justify-self: center;
list-style: none; list-style: none;
margin: 0; margin: 0;
grid-area: 1;
/*@include mq(md, max) { @include mq(xm, min) {
align-self: center; justify-self: center;
margin-bottom: 12px; }
}*/
.payments-icons { .payments-icons {
display: flex; display: flex;
gap: 4px;
@include mq(xm, min) {
gap: 13px; gap: 13px;
}
@include mq(xppp, max) {
gap: 1px;
}
&__img { &__img {
width: auto; width: auto;
@ -65,6 +81,10 @@
@include mq(xg, min) { @include mq(xg, min) {
height: 39px; height: 39px;
} }
@include mq(xppp, max) {
height: 17px;
}
} }
} }
@ -74,9 +94,17 @@
height: 24px; height: 24px;
margin: 0 8px; margin: 0 8px;
width: 1px; width: 1px;
margin: 0 10px 0 4px;
@include mq(xm, min) {
margin: 0 10px 0 13px; margin: 0 10px 0 13px;
} }
@include mq(xppp, max) {
margin: 0 4px 0 1px;
}
}
.vtexpci-icon { .vtexpci-icon {
&__img { &__img {
width: auto; width: auto;
@ -85,6 +113,10 @@
@include mq(xg, min) { @include mq(xg, min) {
height: 64px; height: 64px;
} }
@include mq(xppp, max) {
height: 29px;
}
} }
} }
} }
@ -94,7 +126,11 @@
display: flex; display: flex;
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
grid: 3;
@include mq(xm, min) {
margin-left: auto; margin-left: auto;
}
li:last-child { li:last-child {
margin-left: 10px; margin-left: 10px;

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

@ -19,11 +19,12 @@ $color-gray6: #C4C4C4;
$color-blue: #4267b2; $color-blue: #4267b2;
$color-green: #4caf50; $color-green: #495e49;
/* Grid breakpoints */ /* Grid breakpoints */
$grid-breakpoints: ( $grid-breakpoints: (
xs: 0, xs: 0,
xppp: 350px,
xpp: 376px, xpp: 376px,
cstm: 400px, cstm: 400px,
sm: 576px, sm: 576px,