From c01d2bc2fe570d711b6b1b01f3c9966cfaae1520 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sat, 24 Dec 2022 01:45:57 -0300 Subject: [PATCH] feat: cria estilizacao para responsividade do cart --- .../sass/checkout/_checkout-autenticacao.scss | 230 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 85 ++++++- .../sass/checkout/_checkout-pagamento.scss | 12 + .../src/arquivos/sass/checkout/_checkout.scss | 63 ++++- .../src/arquivos/sass/partials/_footer.scss | 4 +- .../src/arquivos/sass/utils/_variaveis.scss | 3 +- 6 files changed, 365 insertions(+), 32 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 13375c3..f2c02a8 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -58,9 +58,9 @@ - @media (min-width:2500px) { - max-width: none; - } + // @media (min-width:2500px) { + // max-width: none; + // } input { box-shadow: none; @@ -142,12 +142,26 @@ h3 { color: #303030; margin: 0 0 8px 0; + + @media (min-width:2500px) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + } } ul { + display: block; + + @media (min-width: 2500px) { + display: block; + + } + margin: 0; li { + span { font-family: $font-family; color: $color-black; @@ -225,12 +239,16 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive { } #ship-postalCode { - // width: 100%; - // min-width: 95%; + width: 100%; + min-width: 95%; border-radius: 8px; border: 1px solid $color-gray6; height: 40px; + @media (min-width: 2500px) { + height: 55px; + } + } .ship-number { @@ -254,26 +272,32 @@ input#client-last-name, input#client-document, input#client-phone { width: 100%; + height: 32px; + + @media (max-width: 767px) { + width: 98.8%; + } } input#client-first-name { width: 96%; + height: 32px; @media (max-width: 1024px) { width: 96%; } } -p.client-first-name.input.pull-left.text.required, -p.client-last-name.input.pull-left.text.required { - max-width: 48%; -} +// p.client-first-name.input.pull-left.text.required, +// p.client-last-name.input.pull-left.text.required { +// max-width: 48%; +// } p.client-last-name.input.pull-left.text.required { - margin-left: 5px; + @media (max-width: 1024px) { - max-width: 46.9%; + max-width: 47.9%; } } @@ -282,6 +306,7 @@ input#client-phone { width: 92%; + @media (max-width: 1024px) { width: 96%; } @@ -296,9 +321,14 @@ input#client-phone { .client-document.input.pull-left.text.required.mask, p.client-phone.input.pull-left.text.required.mask { width: 48%; + height: 42px; @media (max-width: 1024px) { - width: 46%; + width: 48.6%; + } + + @media (max-width: 767px) { + width: 48%; } } @@ -457,6 +487,45 @@ p.submit.btn-submit-wrapper { .step.accordion-group.client-profile-data.active { width: 88.5%; height: auto; + + @media (min-width: 2500px) { + width: 100%; + + } + + @media (max-width: 1024px) { + width: 95.41% !important; + margin: 0 16px 18px; + + } +} + +.step.accordion-group.shipping-data { + + @media (max-width: 1024px) { + width: 95.313% !important; + margin: 0 16px 18px; + + } +} + +.payment-data .step { + + @media (max-width: 1024px) { + width: 95.41% !important; + margin: 0 16px 18px; + + } + +} + +.cart-fixed.affix-top.cart-fixed-transition { + @media (max-width: 1024px) { + width: 96.68%; + margin: 0 16px; + + } + } .cart-template .cart-fixed { @@ -537,7 +606,15 @@ p.input.ship-postalCode.required.text { input#client-email { width: 96%; + height: 42px; + @media (max-width:1024px) { + width: 98.536%; + } + + @media (max-width: 767px) { + min-width: 100%; + } } .box-client-info { @@ -552,6 +629,12 @@ input#client-email { height: 100%; padding: 0; + @media (max-width: 1024px) { + width: 96.29% !important; + margin: 0 16px 17px; + + } + .accordion-toggle { @@ -597,6 +680,10 @@ input#ship-receiverName { p.client-first-name.input.pull-left.text.required, p.client-last-name.input.pull-left.text.required { width: 46%; + + @media (max-width: 1025px) { + width: 49.167%; + } } .client-notice, @@ -614,6 +701,8 @@ p.client-last-name.input.pull-left.text.required { + + i::before { display: none; } @@ -715,6 +804,11 @@ button#go-to-shipping { } span[data-i18n="clientProfileData.identification"]::before { + @media (min-width: 2500px) { + font-size: 32px !important; + line-height: 37px; + } + content: "Identificação"; color: $color-black2; font-family: $font-family-secundary; @@ -762,8 +856,14 @@ a#edit-shipping-data, .mini-cart .url { img { + width: 60px; + height: 60px; + object-fit: cover; - width: 116.5px; + @media (min-width: 2500px) { + + width: 116.5px; + } } } @@ -772,9 +872,9 @@ a#edit-shipping-data, // margin-bottom: 50px; // } -span.shipping-date.pull-left { - display: none; -} +// span.shipping-date.pull-left { +// display: none; +// } strong.price.pull-right { @media (min-width: 2500px) { @@ -820,4 +920,102 @@ strong.price.pull-right { display: none !important; @media (min-width: 2500px) {} +} + +.checkout-container .shipping-data .accordion-group .accordion-inner p input { + + min-width: 95.5% !important; + height: 35.01px !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray2; + ; + + @media (min-width: 2500px) { + height: 45px !important; + font-size: 28px; + line-height: 38px; + } +} + +li.hproduct.item.muted { + display: flex; + align-items: center; + justify-content: space-between; +} + +.summary-cart-template-holder.cart-fixed-transition { + height: 60px !important; + + @media (min-width: 2500px) { + height: 116.5px !important; + } + + @media (max-width: 1024px) { + height: 120px !important; + } +} + +.box-client-info-pf { + @media (max-width: 767px) { + width: 100%; + } +} + +.mini-cart .summary .summary-totalizers { + @media (max-width: 1024px) { + margin-right: 0; + padding: 0; + } +} + +.SecurityEnvironmentIcon { + display: block; + + @media (max-width: 767px) { + display: none; + } + + + @media (max-width: 1025px) { + display: none; + } +} + + + +.PaymentCardNumber input, +.PaymentCardHolderName input { + + @media (max-width: 767px) { + width: 92% !important; + min-width: none; + } + + @media (max-width: 1025px) { + width: 92% !important; + min-width: none; + } +} + +p.PaymentCardHolderDocument.input.text.required.mask, +.BillingAddress.BillingAddress-BRA.clearfix, +p.ChangeNumberOfPayments.clearfix { + display: block; + + @media (max-width: 767px) { + display: none; + } +} + +.vtex-omnishipping-1-x-option:hover, +.vtex-omnishipping-1-x-leanShippingOptionActive { + background: #F2F2F2 !important; +} + +.FormFieldLabel { + color: $color-black !important; } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index e2b7aec..50fadf9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -20,7 +20,8 @@ box-sizing: border-box; border-radius: 5px; padding: 16px; - height: 150px; + height: 100%; + min-height: 120px; @include mq(md, max) { margin: 0px 0 25px 0; @@ -75,7 +76,8 @@ .shipping-date, .price { - color: #7d7d7d; + color: $color-gray2; + ; } } } @@ -543,32 +545,35 @@ &~button { background: $color-blue2; - ; + + margin-left: 8px; + background: #00c8ff; border-radius: 8px; border: none; - color: $color-white; + color: #fff; height: 36px; outline: none; position: absolute; - right: -150px; - top: 39px; - transition: all 0.2s linear; + left: 170px; + top: 38px; + transition: all .2s linear; width: 100px; text-transform: uppercase; font-style: normal; font-weight: 700; font-size: 14px; line-height: 19px; - letter-spacing: 0.05em; + letter-spacing: .05em; cursor: pointer; @media (min-width: 2500px) { - width: 194.16px; + width: 100%; height: 55px; - right: -413px; + left: 100%; font-size: 28px; line-height: 38px; - top: 55px; + top: 30%; + margin-left: 18.04px; } @media (max-width: 375px) { @@ -667,11 +672,13 @@ } &__sla { - color: #7d7d7d; + color: $color-gray2; + ; } &__price { - color: #7d7d7d; + color: $color-gray2; + font-weight: 500; } @@ -1047,7 +1054,15 @@ .payment-group-list-btn { margin: 0; + width: 100% !important; + + @media (max-width: 1025px) { + width: 99.81% !important; + } + a { + + display: none; padding: 13px 9px; border: 1px solid $color-gray2 ; @@ -1055,6 +1070,10 @@ text-align: center; margin: 12px 0 0 0; + @media (max-width: 1025px) { + width: 98.187% !important; + } + span { margin: 0 !important; padding: 0 !important; @@ -1091,4 +1110,44 @@ a[data-name="Mercado Pago"] { display: block; } +} + +.vtex-shipping-preview-0-x-pc .ship-postalCode { + + width: 100% !important; +} + +input.success:not([invalid="true"]) { + + color: #7D7D7D; + font-weight: 400; + font-size: 14px; +} + +fieldset.payment-group { + @media (min-width: 2500px) { + width: 31.516%; + } + + @media (max-width: 1025px) { + width: 99.81% !important; + } +} + +.payment-group-item { + @media (max-width: 1025px) { + width: 99.81% !important; + } +} + +.steps-view { + @media (min-width: 2500px) { + width: 60%; + } + + @media (max-width: 1025px) { + width: 96.77% !important; + margin-top: 12px; + } + } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index 9a52731..e411dc7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -5,7 +5,19 @@ body .container-main.container-order-form .orderform-template.active { margin-right: 0; float: right; } + .orderform-template-holder { width: 66.1132%; + + @media (max-width: 1025px) { + width: 100% !important; + } } } + +.row-fluid .span6 { + + @media (max-width: 1025px) { + width: 100% !important; + } +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5b5d583..3fec6ec 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -9,7 +9,8 @@ html { } footer .footerCheckout__wrapper { - width: 94.9734%; + // width: 94.9734%; + width: 100%; margin: auto auto 0 auto; } @@ -87,6 +88,13 @@ body { @include mq(md, max) { margin-left: 30px; } + + + @media (max-width: 1024px) { + margin-left: 20px; + + } + } .dropdown { @@ -130,4 +138,57 @@ body { transform: rotate(0); } } +} + + +body .container-order-form { + @media (max-width: 1024px) { + + + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; + } + +} + +// .step.accordion-group.client-profile-data.active { +// @media (max-width: 1025px) { +// width: 93.34%; +// } +// } + +// .step.accordion-group.client-profile-data.active { +// @media (max-width: 1025px) { +// width: 93.34%; +// } +// } + +.row-fluid div#shipping-data { + @media (max-width: 1025px) { + width: 100%; + margin-left: 0; + } +} + +body .container-main.container-order-form .orderform-template.active .mini-cart { + @media (max-width: 1025px) { + width: 100%; + } +} + +body .container-main.container-order-form .orderform-template.active .mini-cart { + @media (max-width: 1025px) { + float: none; + + } +} + +.checkout-container .row-fluid.orderform-template.span12.active { + @media (max-width: 1025px) { + display: flex; + flex-direction: column; + justify-content: center; + } } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 28dc37b..f519e2f 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -2,8 +2,10 @@ .footerCheckout { border-top: none; color: $color-gray2; - bottom: 0; + width: 100%; + margin-top: auto; + bottom: 0; &__wrapper { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 099e90f..2fb8a58 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -11,7 +11,8 @@ $color-black2: #000000; $color-white: #fff; $color-gray: #6c6c6c; -$color-gray2: #7d7d7d; +$color-gray2: #7D7D7D; +; $color-gray3: #f0f0f0; $color-gray4: #8d8d8d; $color-gray5: #e5e5e5;