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 {
width: 94.9734%;
width: 96.875%;
margin: auto auto 0 auto;
@include mq(xm, min) {
width: 94.9734%;
}
}
header {

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

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

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

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