From 18a7eeab73c103d79a060e1a3744c40d05075f9d Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sat, 24 Dec 2022 19:48:28 -0300 Subject: [PATCH] feat: cria responsividade para versoes mobile --- .../sass/checkout/_checkout-autenticacao.scss | 34 +++++--- .../sass/checkout/_checkout-carrinho.scss | 84 ++++++++----------- .../sass/checkout/_checkout-pagamento.scss | 43 ++++++++++ .../sass/checkout/_checkout-vazio.scss | 37 ++++++-- .../src/arquivos/sass/utils/_variaveis.scss | 1 + 5 files changed, 132 insertions(+), 67 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index f2c02a8..c8cb484 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -42,7 +42,7 @@ small { color: $color-black; - + font-size: 24px; } } @@ -972,9 +972,20 @@ li.hproduct.item.muted { } } -.SecurityEnvironmentIcon { - display: block; +// span.SecurityEnvironmentIcon { + +// @media (max-width: 767px) { +// display: none; +// } + + +// @media (max-width: 1025px) { +// display: none; +// } +// } +.ChangeNumberOfPayments, +.AddressToggle { @media (max-width: 767px) { display: none; } @@ -986,7 +997,6 @@ li.hproduct.item.muted { } - .PaymentCardNumber input, .PaymentCardHolderName input { @@ -1001,15 +1011,13 @@ li.hproduct.item.muted { } } -p.PaymentCardHolderDocument.input.text.required.mask, -.BillingAddress.BillingAddress-BRA.clearfix, -p.ChangeNumberOfPayments.clearfix { - display: block; - - @media (max-width: 767px) { - display: none; - } -} +// p.PaymentCardHolderDocument.input.text.required.mask, +// p.BillingAddress.BillingAddress-BRA.clearfix, +// p.ChangeNumberOfPayments.clearfix { +// @media (max-width: 767px) { +// display: none; +// } +// } .vtex-omnishipping-1-x-option:hover, .vtex-omnishipping-1-x-leanShippingOptionActive { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 50fadf9..077b657 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -980,7 +980,7 @@ font-weight: normal; font-size: 12px; line-height: 14px; - color: $color-blue; + color: $color-black2 ; } } @@ -1047,10 +1047,16 @@ } .icon-lock { - display: none; + display: block; + + @media (max-width:1024px) { + + display: none; + } } + .payment-group-list-btn { margin: 0; @@ -1062,18 +1068,28 @@ a { - - display: none; + display: block; padding: 13px 9px; border: 1px solid $color-gray2 ; border-radius: 6px; text-align: center; margin: 12px 0 0 0; + background: $color-gray3; + text-decoration: none; + color: $color-black3; + + &:hover, + &:active, + &:focus { + color: $color-orange !important; + border: 1px solid $color-orange ; + } @media (max-width: 1025px) { width: 98.187% !important; } + span { margin: 0 !important; padding: 0 !important; @@ -1083,33 +1099,19 @@ font-weight: 400; font-size: 14px; line-height: 24px; - color: $color-gray6 - } - span:hover { - color: $color-orange; + + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 24px; + } + + } } - a:hover { - border: 1px solid $color-orange; - } - - a[data-name="American Express"] { - display: block; - } - - a[data-name="Boleto Bancário"] { - display: block; - } - - a[data-name="Depósito"] { - display: block; - } - - a[data-name="Mercado Pago"] { - display: block; - } } .vtex-shipping-preview-0-x-pc .ship-postalCode { @@ -1119,35 +1121,21 @@ input.success:not([invalid="true"]) { - color: #7D7D7D; + color: $color-gray2; font-weight: 400; font-size: 14px; } -fieldset.payment-group { +fieldset.payment-group, +.payment-group { + width: 30% !important; + margin: 0; + @media (min-width: 2500px) { - width: 31.516%; + width: 31.516%important; } @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 e411dc7..87de0a1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -20,4 +20,47 @@ body .container-main.container-order-form .orderform-template.active { @media (max-width: 1025px) { width: 100% !important; } +} + +.payment-group-item { + @media (max-width: 1025px) { + width: 99.81% !important; + } +} + +.steps-view { + width: 60%; + + @media (min-width: 2500px) { + width: 60%; + } + + @media (max-width: 1025px) { + width: 96.77% !important; + margin-top: 12px; + } + +} + +form.form-step.box-new.row-fluid { + // top: 0; + // position: relative; + // width: 98%; + + // @media (max-width: 1024px) { + // top: 0; + // } + + &::before { + min-height: 48px; + content: "Solicitamos apenas informações necessárias para realização da sua compra, sem compromenter seus dados."; + font-size: 14px; + line-height: 24px; + width: 95%; + color: $color-gray2; + } +} + +p.link.link-gift-card { + display: none !important; } \ No newline at end of file diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 08f74e9..8b0194d 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -1,5 +1,6 @@ .empty-cart { font-family: $font-family; + &-content { color: $color-black; text-align: center; @@ -10,29 +11,53 @@ } &-title { - font-size: 20px; + + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + + text-transform: uppercase; + + @media (min-width:2500px) { + font-size: 48px; + line-height: 65px + } } &-links { .link-choose-products { - background: $color-black; - border: none; - border-radius: 5px; + background: none; + border: 1px solid; + border-radius: 0; transition: ease-in 0.22s all; outline: none; - font-family: $font-family; + font-family: $font-family-secundary ; font-style: normal; font-weight: 500; font-size: 14px; line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $color-white; + color: $color-black2; text-transform: uppercase; + padding: 16px 64px; + + @media (min-width:2500px) { + font-size: 48px; + line-height: 65px; + padding: 16px 32px; + } &:hover { background: lighten($color-black, 5); + color: $color-white; } } } } + +.empty-cart-message { + display: none; +} \ No newline at end of file diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 2fb8a58..ebfafd5 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -7,6 +7,7 @@ $font-family-secundary: "Tenor Sans", sans-serif; /* Colors */ $color-black: #292929; $color-black2: #000000; +$color-black3: #58595B; $color-white: #fff;