forked from M3-Academy/m3-academy-template-checkout
feat(footer): Aplica css footer mobiles
This commit is contained in:
parent
6900a420e1
commit
d3c7270fc2
@ -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 {
|
||||||
|
@ -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 {
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
@include mq(xm, min) {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__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: 13px;
|
gap: 4px;
|
||||||
|
|
||||||
|
@include mq(xm, min) {
|
||||||
|
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,7 +94,15 @@
|
|||||||
height: 24px;
|
height: 24px;
|
||||||
margin: 0 8px;
|
margin: 0 8px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
margin: 0 10px 0 13px;
|
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 {
|
.vtexpci-icon {
|
||||||
@ -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;
|
||||||
margin-left: auto;
|
grid: 3;
|
||||||
|
|
||||||
|
@include mq(xm, min) {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
li:last-child {
|
li:last-child {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
@ -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,
|
||||||
|
Loading…
Reference in New Issue
Block a user