forked from M3-Academy/m3-academy-template-checkout
Merge pull request 'fix(checkout-pagamento): Efetua ajustes necessarios ao layout mobile' (#16) from hotfix/pagina-pagamento into main
Reviewed-on: #16
This commit is contained in:
commit
61eec51606
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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%);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user