forked from M3-Academy/m3-academy-template-checkout
develop #1
@ -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 {
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
|
Loading…
Reference in New Issue
Block a user