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 {
.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;
}

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-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 {

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-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%;
}
}
}

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

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