From e8526d9a1165031186703c994981a6a961d41313 Mon Sep 17 00:00:00 2001 From: Samuel Date: Sun, 18 Dec 2022 22:06:15 -0300 Subject: [PATCH] feat: Adiciona responsividade TV --- .../sass/checkout/_checkout-autenticacao.scss | 120 +++++++++++++++++- .../sass/checkout/_checkout-carrinho.scss | 71 +++++++++++ .../sass/checkout/_checkout-vazio.scss | 25 ++++ .../src/arquivos/sass/checkout/_checkout.scss | 41 ++++++ .../src/arquivos/sass/partials/_footer.scss | 33 ++++- .../src/arquivos/sass/partials/_header.scss | 22 ++++ 6 files changed, 306 insertions(+), 6 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 7f66e87..d82aec3 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -8,6 +8,13 @@ text-align: center; text-transform: uppercase; color: #000000; + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 47px; + } } small{ font-family: 'Tenor Sans'; @@ -95,6 +102,18 @@ text-transform: uppercase; padding: 12.56px 14.4px 12px 14.41px; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 28px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + } @media (max-width: 490px) { height: 48px; @@ -105,6 +124,13 @@ span.help.error { color: red; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + } } } @@ -113,10 +139,24 @@ background-color: $color-white; border: 1px solid #000000; border-radius: 5px; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + } h3 { color: #303030; margin: 0 0 8px 0; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + } } ul { @@ -131,6 +171,7 @@ color: #00C8FF; font-size: 1rem; opacity: 1; + font-size: 30px; } } } @@ -151,6 +192,13 @@ } } #client-profile-data{ + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 37px; + } @media (max-width: 1024px){ width: 100%; } @@ -204,6 +252,13 @@ span[data-i18n="clientProfileData.identification"]::before { content: "Identificação"; color: #000000; + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 37px; + } } } @@ -323,6 +378,11 @@ display: none; } } + } + .payment-group-list-btn{ + span{ + background-image: none !important; + } } /* General configurations */ @@ -435,12 +495,10 @@ .shp-summary-group-info { border-color: $color-gray4; } - .address-summary { - display: none; - background: none; - border-color: $color-gray4; - border-radius: 0; + background: none; + border-color: #E0E0E0; + border-radius: 5; color: #303030; padding: 12px; @@ -453,6 +511,7 @@ font-weight: 500; text-decoration: underline; } + } .ship-complement{ input{ @@ -561,6 +620,13 @@ font-size: 14px; line-height: 19px; color: #7D7D7D; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + } } .input-small{ height: 42px; @@ -569,6 +635,13 @@ width: 40%; #client-first-name{ width: 100%; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } @media (max-width: 1024px){ width: 45%; @@ -578,6 +651,13 @@ width: 40%; #client-last-name{ width: 100%; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } @media (max-width: 1024px){ width: 45%; @@ -588,6 +668,13 @@ width: 40%; #client-document{ width: 100%; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } @media (max-width: 1024px){ width: 45%; @@ -600,6 +687,13 @@ width: 40%; #client-phone{ width: 100%; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } @media (max-width: 1024px){ width: 45%; @@ -607,8 +701,24 @@ } } + } + span[data-i18n="global.optinNewsLetter"]{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; } .client-email{ + #client-email{ + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + } + } label{ font-family: 'Open Sans'; font-style: normal; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 9d6e259..2bd05b2 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -153,6 +153,13 @@ font-weight: bold; font-size: 14px; line-height: 16px; + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } @include mq(md, max) { &.quantity-price, @@ -167,6 +174,7 @@ padding: 0; width: 60px; + @include mq(sm, max) { width: 72px; } @@ -180,6 +188,7 @@ height: 72px; width: auto; } + } } @@ -195,6 +204,14 @@ padding-top: 20px; + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 28px; + } + @include mq(lg, max) { width: 250px; } @@ -416,6 +433,17 @@ @include mq(md, max) { margin-top: 0; } + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 48px; + line-height: 65px; + display: flex; + align-items: center; + text-align: center; + + } } .srp-description { @@ -423,6 +451,13 @@ font-size: 12px; line-height: 18px; margin: 0 0 12px; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 36px; + } } .ship-country{ display: none; @@ -499,6 +534,16 @@ font-size: 14px; line-height: 16px; text-transform: uppercase; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + display: flex; + align-items: center; + text-transform: uppercase; + } } &__current { @@ -650,6 +695,18 @@ #cart-shipping-calculate{ background-color: #00C8FF; border-radius: 8px; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 38px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + } } &-totalizers { @@ -798,6 +855,13 @@ tfoot { td.info{ padding-left: 17px; + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } } td.info, td.monetary { @@ -808,6 +872,13 @@ font-size: 18px; line-height: 21px; color: $color-black; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index f175fb1..8fa411a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -20,6 +20,15 @@ line-height: 33px; text-align: center; text-transform: uppercase; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 65px; + text-align: center; + text-transform: uppercase; + } } &-links { @@ -33,6 +42,13 @@ text-align: center; text-transform: uppercase; letter-spacing: 0.05em; + + } + @media (min-width: 2500px){ + #cart-choose-products{ + width: 20%; + line-height: 30px; + } } a::after { @@ -41,6 +57,15 @@ position: absolute; left: 0; right: 0; + @media (min-width: 2500px){ + font-family: 'Tenor Sans'; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + } @media (max-width: 406px) { white-space: pre; bottom: 10px; diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index f55aaaf..26c996e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -54,6 +54,14 @@ footer .footerCheckout__wrapper { line-height: 18px; color: #000000; width: 100%; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 26px; + line-height: 35px; + text-align: center; + } } .itemSku{ display: flex; @@ -81,6 +89,18 @@ footer .footerCheckout__wrapper { margin: 0; letter-spacing: 0.05em; text-transform: uppercase; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 35px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + } } } .productLink{ @@ -101,6 +121,18 @@ footer .footerCheckout__wrapper { letter-spacing: 0.05em; padding: 0 5px; text-transform: uppercase; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 26px; + line-height: 35px; + display: flex; + align-items: center; + text-align: center; + letter-spacing: 0.05em; + text-transform: uppercase; + } &:hover{ text-decoration: none; } @@ -195,6 +227,15 @@ body { margin: 40px 0 30px; letter-spacing: 0.05em; text-transform: uppercase; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 48px; + line-height: 65px; + letter-spacing: 0.05em; + text-transform: uppercase; + } @include mq(md, max) { margin-left: 30px; diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss index 0aa3a0d..50dfe57 100644 --- a/checkout/src/arquivos/sass/partials/_footer.scss +++ b/checkout/src/arquivos/sass/partials/_footer.scss @@ -40,6 +40,10 @@ height: 33px; border-left: 1px solid #c4c4c4; padding-left: 10px; + @media (min-width: 2500px){ + width: 103.52px; + height: 64.46px; + } } &__wrapper { align-items: center; @@ -57,7 +61,13 @@ line-height: 12px; text-transform: capitalize; max-width: 40%; - + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 27px; + } @include mq(dt, max) { display: flex; order: 2; @@ -83,6 +93,9 @@ align-items: left; justify-content: left; } + @media (min-width: 2500px){ + height: 39.06px; + } &__divider { background-color: $color-gray4; @@ -111,11 +124,29 @@ flex-direction: row; align-items: center; justify-content: space-between; + .footer_description_1{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + .footer_description_2{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } } .images_footer_developed{ width: 38.71px; height: 16px; padding: 10px 10px; + @media (min-width: 2500px){ + width: 70.91px; + height: 31.25px; + } } li:last-child { diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 6e5e561..7a986a3 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -9,9 +9,20 @@ width: 100%; padding-top: 29px; padding-bottom: 29px; + .headerCheckout__logo{ + @media (min-width: 2500px){ + img{ + height: auto; + width: auto; + } + } + } } #progressBar{ width: 446px; + @media (min-width: 2500px){ + width: 888px; + } ul{ list-style-type: none; display: flex; @@ -129,6 +140,10 @@ padding-right: 131px; img{ width: 12px; + @media (min-width: 2500px){ + width: 29.47px; + height: 41.46px; + } } span { display: flex; @@ -139,6 +154,13 @@ font-size: 12px; line-height: 14px; color: $color-gray; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } i {