ManuelaLuanaSchumackerTavares/m3-academy-template-checkout-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/m3-academy-template-checkout
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(checkout-pagamento): Efetua ajustes necessarios ao layout mobile

Browse Source
This commit is contained in:
Manuela Luana Schumacker Tavares 2022-12-24 15:48:44 -03:00
parent ad8684987e
commit 4303fb3688
4 changed files with 159 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
View File

@ -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 { .checkout-container {
.client-pre-email { .client-pre-email {
border-color: $color-gray4; border-color: $color-gray4;
@ -17,6 +30,12 @@
&:hover { &:hover {
color: lighen($color-black, 10); color: lighen($color-black, 10);
} }
@include mq(pg, max) {
font-size: 10px;
line-height: 12px;
padding: 0 16px;
}
} }
} }
@ -29,12 +48,28 @@
h3 { h3 {
margin-bottom: 16px; margin-bottom: 16px;
@include mq(pg, max) {
margin-top: 95px;
margin-bottom: 38px;
}
@include mq(cstm, max) {
margin-top: 100px;
margin-bottom: 22px;
}
span { span {
font-family: $font-family-secundary; font-family: $font-family-secundary;
color: $color-black2; color: $color-black2;
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
@include mq(cstm, max) {
font-weight: 400;
font-size: 12px;
line-height: 14px;
}
} }
small { small {
@ -43,6 +78,12 @@
font-size: 20px; font-size: 20px;
line-height: 23px; line-height: 23px;
text-transform: uppercase; text-transform: uppercase;
@include mq(cstm, max) {
font-weight: 400;
font-size: 12px;
line-height: 14px;
}
} }
} }
} }
@ -50,6 +91,11 @@
.client-email { .client-email {
margin: 0 0 16px; margin: 0 0 16px;
@include mq(pg, max) {
padding: 0 16px;
width: 100%;
}
input { input {
box-shadow: none; box-shadow: none;
font-weight: 400; font-weight: 400;
@ -76,6 +122,7 @@
border-radius: 0px 8px 8px 0px; border-radius: 0px 8px 8px 0px;
border: none; border: none;
font-family: $font-family; font-family: $font-family;
font-weight: 700;
font-size: 14px; font-size: 14px;
line-height: 19px; line-height: 19px;
text-transform: uppercase; text-transform: uppercase;
@ -87,7 +134,7 @@
cursor: pointer; cursor: pointer;
@media (max-width: 490px) { @media (max-width: 490px) {
height: 48px; // height: 48px;
margin: 0; margin: 0;
position: absolute; position: absolute;
} }
@ -140,6 +187,10 @@
color: $color-black; color: $color-black;
font-size: 6rem; font-size: 6rem;
opacity: 0.5; 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, .shipping-data,
.payment-data, .payment-data,
.client-profile-data { .client-profile-data {
@ -226,10 +294,27 @@
input { input {
border: 1px solid $color-gray8; border: 1px solid $color-gray8;
border-radius: 5px; border-radius: 5px;
// height: 42px;
box-shadow: none; 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-phone,
#client-document { #client-document {
height: 44px; height: 44px;
@ -282,14 +367,16 @@
.ship-postalCode { .ship-postalCode {
input { input {
width: 95% !important; width: 100% !important;
max-width: 95% !important; max-width: 100% !important;
box-sizing: border-box;
margin-right: 16px;
height: 45px; height: 45px;
} }
} }
.ship-postalCode small a { .ship-postalCode small a {
color: $color-black; color: $color-black;
// display: flex; white-space: pre;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
@ -336,13 +423,13 @@
} }
.address-summary { .address-summary {
background: none; // background: none;
border-color: $color-gray8; border-color: $color-gray8;
border-radius: 8px; border-radius: 8px;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
padding: 12px; // padding: 12px;
@include mq(md, max) { @include mq(md, max) {
background-position: 8px 9px; background-position: 8px 9px;
@ -388,7 +475,7 @@
span { span {
text-align: center; text-align: center;
color: $color-gray10 !important; color: $color-gray10;
padding-right: 0; padding-right: 0;
font-family: $font-family; font-family: $font-family;
font-weight: 400; font-weight: 400;
@ -423,6 +510,16 @@
color: #303030; 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 { .vtex-omnishipping-1-x-addressFormPart1 small {
margin: 0; margin: 0;
} }

38
checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
View File

@ -4,12 +4,24 @@
// } // }
// } // }
.orderform-template.active {
@include mq(pg, max) {
padding: 0 16px;
}
}
body .container-order-form, body .container-order-form,
body .container-cart { body .container-cart {
@include mq(pg, max) { @include mq(pg, max) {
width: 100% !important; 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 { .cart-template {
font-family: $font-family; font-family: $font-family;
@ -30,6 +42,7 @@ body .container-cart {
border-left: none; border-left: none;
border-right: none; border-right: none;
border-radius: 0; border-radius: 0;
padding: 0;
} }
} }
.cart-fixed.affix { .cart-fixed.affix {
@ -38,7 +51,13 @@ body .container-cart {
.cart-fixed { .cart-fixed {
font-family: $font-family; font-family: $font-family;
width: 100%; width: 100%;
box-sizing: border-box;
border: 1px solid $color-gray5;
border-radius: 5px;
padding: 17px 24px;
h2 { h2 {
padding-bottom: 16px;
background: $color-white; background: $color-white;
border: none; border: none;
color: #303030; color: #303030;
@ -55,7 +74,7 @@ body .container-cart {
} }
.cart { .cart {
border: 1px solid $color-gray4; // border: 1px solid $color-gray4;
ul li { ul li {
border-top: none; border-top: none;
@ -241,8 +260,12 @@ body .container-cart {
line-height: 33px; line-height: 33px;
} }
// @media (max-width: 300px) {
// margin-left: 10px !important;
// }
@media (max-width: 490px) { @media (max-width: 490px) {
margin-left: 23px; margin-left: 0;
} }
} }
@ -332,12 +355,15 @@ body .container-cart {
@media (max-width: 1024px) { @media (max-width: 1024px) {
margin-left: 84px !important; margin-left: 84px !important;
// width: 24px !important;
position: absolute !important; position: absolute !important;
left: 0 !important; left: 0 !important;
top: 50px !important; top: 50px !important;
} }
@media (max-width: 490px) {
margin-left: 60px !important;
}
input { input {
background-color: $color-white; background-color: $color-white;
border: 1px solid $color-gray3; border: 1px solid $color-gray3;
@ -468,6 +494,10 @@ body .container-cart {
margin: 0; margin: 0;
width: max-content; width: max-content;
@media (max-width: 490px) {
margin-top: 48px;
}
.srp-container { .srp-container {
padding: 0 0 0 10px; padding: 0 0 0 10px;
@ -771,7 +801,7 @@ body .container-cart {
@include mq(pg, max) { @include mq(pg, max) {
width: 100% !important; width: 100% !important;
padding: 0 16px; padding: 0;
} }
.coupon-data { .coupon-data {

16
checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
View File

@ -4,8 +4,24 @@ body .container-main.container-order-form .orderform-template.active {
margin-left: unset; margin-left: unset;
margin-right: 0; margin-right: 0;
float: right; float: right;
@include mq(pg, max) {
width: 100%;
}
} }
.orderform-template-holder { .orderform-template-holder {
width: 66.1132%; width: 66.1132%;
#client-profile-data,
#shipping-data,
#payment-data {
@include mq(pg, max) {
width: 100% !important;
}
}
@include mq(pg, max) {
width: 100%;
}
} }
} }

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

@ -57,6 +57,10 @@ body {
background: $color-black; background: $color-black;
text-shadow: none; text-shadow: none;
@include mq(pg, max) {
right: 15px !important;
}
&:hover { &:hover {
background: lighten($color-black, 15%); background: lighten($color-black, 15%);
} }