From b6461af1adb23f2db431d2b3bdd9c19d74f8d4c6 Mon Sep 17 00:00:00 2001 From: Samuel Date: Sat, 17 Dec 2022 14:32:39 -0300 Subject: [PATCH] feat: Adiciona CSS responsivo mobile --- .../sass/checkout/_checkout-autenticacao.scss | 162 +++++++++++++++++- .../sass/checkout/_checkout-vazio.scss | 25 ++- .../src/arquivos/sass/checkout/_checkout.scss | 24 +++ checkout/src/arquivos/sass/lib/_slick.scss | 3 + 4 files changed, 206 insertions(+), 8 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 60ddbcf..94d0674 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -65,7 +65,7 @@ color: $color-black; font-family: $font-family; padding: 0 16px; - border: 2px solid $color-gray3; + border: 1px solid #000000; box-sizing: border-box; border-radius: 5px; @@ -75,13 +75,26 @@ } button { - background-color: $color-black; - border-radius: 5px; + background: #00C8FF; + color: #000000; + border-radius: 8px; border: none; font-family: $font-family; height: 54px; right: 0; top: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + padding: 12.56px 14.4px 12px 14.41px; + @media (max-width: 490px) { height: 48px; @@ -98,8 +111,8 @@ .emailInfo { padding: 16px; background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + border: 1px solid #000000; + border-radius: 5px; h3 { color: #303030; @@ -115,13 +128,16 @@ } i::before { - color: $color-black; + color: #00C8FF; font-size: 1rem; opacity: 1; } } } + .icon-lock{ + display: none; + } i::before { color: $color-black; font-size: 6rem; @@ -135,6 +151,20 @@ width: 100%; } } + } + #client-profile-data{ + .active{ + @media (max-width: 415px){ + width: fit-content; + } + } + } + #shipping-data{ + .active{ + @media (max-width: 375px){ + width: fit-content; + } + } } .shipping-data, .payment-data, @@ -162,6 +192,14 @@ .icon-home{ display: none; } + span[data-i18n="clientProfileData.identification"] { + color: #fff; + } + span[data-i18n="clientProfileData.identification"]::before { + content: "Identificação"; + color: #000000; + } + } a { @@ -191,9 +229,86 @@ } } .accordion-inner { - padding: 0; + .steps-view{ + width: fit-content; + height: fit-content; + } + .payment-group-item{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 24px; + color: #58595B; + background: #F0F0F0; + border: 1px solid hsl(0, 0%, 0%); + border-radius: 6px; + margin-bottom: 12px; + &:focus{ + color: #F15A31 !important; + border: 1px solid #F15A31; + text-decoration: none; + } + &:hover{ + color: #F15A31 !important; + border: 1px solid #F15A31; + } + } + a[data-i18n="paymentData.paymentGroup.giftCard.useGiftCard"]{ + display: none; + } + a[data-name="Bancolombia Transfer"]{ + display: none; + } + #payment-group-SPEIPaymentGroup{ + display: none; + } + #payment-group-MercadoPagoPaymentGroup{ + display: none; + } + #payment-group-custom201PaymentGroupPaymentGroup{ + display: none; + } + #payment-group-customPrivate_502PaymentGroup{ + display: none; + } + #payment-group-Bancolombia{ + display: none; + } + #payment-group-PSEPaymentGroup{ + display: none; + } + #payment-group-custom203PaymentGroupPaymentGroup{ + display: none; + } + #payment-group-instantPaymentPaymentGroup{ + display: none; + } + #payment-group-promissoryPaymentGroup{ + display: none; + } + #payment-group-creditDirectSalePaymentGroup{ + display: none; + } + #payment-group-creditControlPaymentGroup{ + display: none; + } + .pg-transferencia-bancaria{ + display: none; + } + .pg-deposito{ + display: none; + } + padding: 0; .link-change-shipping{ display: none; + } + .link-gift-card{ + .box-step{ + .box-step-content{ + display: none; + } + } } /* General configurations */ @@ -266,6 +381,9 @@ } .vtex-omnishipping-1-x-deliveryGroup { + .vtex-omnishipping-1-x-leanShippingGroupList{ + width: fit-content; + } p { color: #7d7d7d; font-size: 14px; @@ -393,6 +511,9 @@ } .vtex-omnishipping-1-x-address{ .ship-street{ + display: none !important; + } + .ship-neighborhood{ display: none; } div{ @@ -413,6 +534,9 @@ padding-right: 17px; } .box-client-info-pf{ + @media (max-width: 815px){ + margin-right: 15px; + } label{ font-family: 'Open Sans'; font-style: normal; @@ -427,9 +551,33 @@ } .client-last-name{ padding-left: 42px; + @media (max-width: 870px){ + padding-left: 30px; + } + @media (max-width: 835px){ + padding-left: 25px; + } + @media (max-width: 820px){ + padding-left: 20px; + } + @media (max-width: 815px){ + padding-left: 0px; + } } .client-phone{ padding-left: 42px; + @media (max-width: 870px){ + padding-left: 30px; + } + @media (max-width: 835px){ + padding-left: 25px; + } + @media (max-width: 820px){ + padding-left: 20px; + } + @media (max-width: 815px){ + padding-left: 0px; + } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 2971841..f175fb1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -23,12 +23,35 @@ } &-links { + a { + color: transparent; + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.05em; + } + + a::after { + content: "Continuar \a" "comprando"; + color: #000000; + position: absolute; + left: 0; + right: 0; + @media (max-width: 406px) { + white-space: pre; + bottom: 10px; + } + } .link-choose-products { border: 1px solid #000000; border-radius: 0; width: 327px; background-color: white; - color: black; + color: transparent; font-family: 'Tenor Sans'; font-style: normal; font-weight: 400; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index d0d8516..f55aaaf 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -63,6 +63,10 @@ footer .footerCheckout__wrapper { gap: 5px; padding-bottom: 20px; width: 100%; + @media (max-width: 801px){ + flex-direction: column; + height: 193px; + } p{ font-family: 'Open Sans'; font-style: normal; @@ -105,11 +109,31 @@ footer .footerCheckout__wrapper { border: 0; color: #858585; top: 30%; + @media(max-width: 801px){ + top: 20%; + left: 10px; + } + @media(max-width: 600px){ + top: 15%; + } + @media(max-width: 450px){ + top: 10%; + } } .slick-next{ border: 0; color: #858585; bottom: 65%; + @media(max-width: 801px){ + bottom: 75%; + right: 10px; + } + @media(max-width: 600px){ + bottom: 80%; + } + @media(max-width: 450px){ + bottom: 85%; + } } } diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss index d875935..f780540 100644 --- a/checkout/src/arquivos/sass/lib/_slick.scss +++ b/checkout/src/arquivos/sass/lib/_slick.scss @@ -109,6 +109,9 @@ border: 0; color: #858585; top: 30%; + @media (max-width: 550px){ + left: 15px; + } } .slick-next { background: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-mini-M3Academy.svg")