From 4303fb3688ae7aaa4cc1c818c685ad6811284f43 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Sat, 24 Dec 2022 15:48:44 -0300 Subject: [PATCH] fix(checkout-pagamento): Efetua ajustes necessarios ao layout mobile --- .../sass/checkout/_checkout-autenticacao.scss | 113 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 38 +++++- .../sass/checkout/_checkout-pagamento.scss | 16 +++ .../src/arquivos/sass/checkout/_checkout.scss | 4 + 4 files changed, 159 insertions(+), 12 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 093744a..3df7e54 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -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; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index a90b339..cfc32df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -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 { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..3d10aca 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -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%; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index d223da8..b43496c 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -57,6 +57,10 @@ body { background: $color-black; text-shadow: none; + @include mq(pg, max) { + right: 15px !important; + } + &:hover { background: lighten($color-black, 15%); }