forked from M3-Academy/m3-academy-template-checkout
fix(checkout-pagamento): Efetua ajustes necessarios ao layout mobile #16
@ -1,3 +1,16 @@
|
||||
.input-large,
|
||||
.input-xlarge,
|
||||
.input-xxlarge,
|
||||
input[class*="span"],
|
||||
select[class*="span"],
|
||||
textarea[class*="span"],
|
||||
.uneditable-input {
|
||||
@include mq(md, max) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.checkout-container {
|
||||
.client-pre-email {
|
||||
border-color: $color-gray4;
|
||||
@ -17,6 +30,12 @@
|
||||
&:hover {
|
||||
color: lighen($color-black, 10);
|
||||
}
|
||||
|
||||
@include mq(pg, max) {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -29,12 +48,28 @@
|
||||
h3 {
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include mq(pg, max) {
|
||||
margin-top: 95px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
|
||||
@include mq(cstm, max) {
|
||||
margin-top: 100px;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-family-secundary;
|
||||
color: $color-black2;
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(cstm, max) {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
small {
|
||||
@ -43,6 +78,12 @@
|
||||
font-size: 20px;
|
||||
line-height: 23px;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include mq(cstm, max) {
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -50,6 +91,11 @@
|
||||
.client-email {
|
||||
margin: 0 0 16px;
|
||||
|
||||
@include mq(pg, max) {
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
box-shadow: none;
|
||||
font-weight: 400;
|
||||
@ -76,6 +122,7 @@
|
||||
border-radius: 0px 8px 8px 0px;
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
font-weight: 700;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
@ -87,7 +134,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
height: 48px;
|
||||
// height: 48px;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
}
|
||||
@ -140,6 +187,10 @@
|
||||
color: $color-black;
|
||||
font-size: 6rem;
|
||||
opacity: 0.5;
|
||||
|
||||
@include mq(cstm, max) {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -161,6 +212,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-inner {
|
||||
fieldset {
|
||||
// p.client-first-name
|
||||
gap: 14.5px;
|
||||
p.client-email {
|
||||
@include mq(pg, max) {
|
||||
display: grid;
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
@include mq(pg, max) {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-data,
|
||||
.payment-data,
|
||||
.client-profile-data {
|
||||
@ -226,10 +294,27 @@
|
||||
input {
|
||||
border: 1px solid $color-gray8;
|
||||
border-radius: 5px;
|
||||
// height: 42px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#ship-number {
|
||||
@include mq(sm, max) {
|
||||
width: 70px !important;
|
||||
}
|
||||
}
|
||||
|
||||
input:not([type="checkbox"]) {
|
||||
.input-xlarge {
|
||||
@media (max-width: 767) {
|
||||
max-width: none !important;
|
||||
}
|
||||
}
|
||||
@include mq(pg, max) {
|
||||
width: 100%;
|
||||
margin-right: 14.5px;
|
||||
}
|
||||
}
|
||||
|
||||
#client-phone,
|
||||
#client-document {
|
||||
height: 44px;
|
||||
@ -282,14 +367,16 @@
|
||||
|
||||
.ship-postalCode {
|
||||
input {
|
||||
width: 95% !important;
|
||||
max-width: 95% !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
box-sizing: border-box;
|
||||
margin-right: 16px;
|
||||
height: 45px;
|
||||
}
|
||||
}
|
||||
.ship-postalCode small a {
|
||||
color: $color-black;
|
||||
// display: flex;
|
||||
white-space: pre;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
@ -336,13 +423,13 @@
|
||||
}
|
||||
|
||||
.address-summary {
|
||||
background: none;
|
||||
// background: none;
|
||||
border-color: $color-gray8;
|
||||
border-radius: 8px;
|
||||
font-weight: 400;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
padding: 12px;
|
||||
// padding: 12px;
|
||||
|
||||
@include mq(md, max) {
|
||||
background-position: 8px 9px;
|
||||
@ -388,7 +475,7 @@
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
color: $color-gray10 !important;
|
||||
color: $color-gray10;
|
||||
padding-right: 0;
|
||||
font-family: $font-family;
|
||||
font-weight: 400;
|
||||
@ -423,6 +510,16 @@
|
||||
color: #303030;
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-address {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
margin-right: 16px;
|
||||
|
||||
.ship-complement {
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
|
||||
.vtex-omnishipping-1-x-addressFormPart1 small {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@ -4,12 +4,24 @@
|
||||
// }
|
||||
// }
|
||||
|
||||
.orderform-template.active {
|
||||
@include mq(pg, max) {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
body .container-order-form,
|
||||
body .container-cart {
|
||||
@include mq(pg, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
.orderform-template-holder .client-profile-data .client-document,
|
||||
.orderform-template-holder .client-profile-data .client-phone {
|
||||
@include mq(sm, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-template {
|
||||
font-family: $font-family;
|
||||
@ -30,6 +42,7 @@ body .container-cart {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.cart-fixed.affix {
|
||||
@ -38,7 +51,13 @@ body .container-cart {
|
||||
.cart-fixed {
|
||||
font-family: $font-family;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $color-gray5;
|
||||
border-radius: 5px;
|
||||
padding: 17px 24px;
|
||||
|
||||
h2 {
|
||||
padding-bottom: 16px;
|
||||
background: $color-white;
|
||||
border: none;
|
||||
color: #303030;
|
||||
@ -55,7 +74,7 @@ body .container-cart {
|
||||
}
|
||||
|
||||
.cart {
|
||||
border: 1px solid $color-gray4;
|
||||
// border: 1px solid $color-gray4;
|
||||
|
||||
ul li {
|
||||
border-top: none;
|
||||
@ -241,8 +260,12 @@ body .container-cart {
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
// @media (max-width: 300px) {
|
||||
// margin-left: 10px !important;
|
||||
// }
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 23px;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -332,12 +355,15 @@ body .container-cart {
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
margin-left: 84px !important;
|
||||
// width: 24px !important;
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
top: 50px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-left: 60px !important;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: $color-white;
|
||||
border: 1px solid $color-gray3;
|
||||
@ -468,6 +494,10 @@ body .container-cart {
|
||||
margin: 0;
|
||||
width: max-content;
|
||||
|
||||
@media (max-width: 490px) {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.srp-container {
|
||||
padding: 0 0 0 10px;
|
||||
|
||||
@ -771,7 +801,7 @@ body .container-cart {
|
||||
|
||||
@include mq(pg, max) {
|
||||
width: 100% !important;
|
||||
padding: 0 16px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.coupon-data {
|
||||
|
||||
@ -4,8 +4,24 @@ body .container-main.container-order-form .orderform-template.active {
|
||||
margin-left: unset;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
|
||||
@include mq(pg, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.orderform-template-holder {
|
||||
width: 66.1132%;
|
||||
|
||||
#client-profile-data,
|
||||
#shipping-data,
|
||||
#payment-data {
|
||||
@include mq(pg, max) {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include mq(pg, max) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -57,6 +57,10 @@ body {
|
||||
background: $color-black;
|
||||
text-shadow: none;
|
||||
|
||||
@include mq(pg, max) {
|
||||
right: 15px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: lighten($color-black, 15%);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user