From fea89f26d4029651f72ae66671faae066d239027 Mon Sep 17 00:00:00 2001 From: Emmanuel Vitor Date: Sun, 25 Dec 2022 01:26:30 -0300 Subject: [PATCH] fix: corrige fonts em telas acima de 2500px --- .../sass/checkout/_checkout-autenticacao.scss | 193 +++++++++++++++--- .../sass/checkout/_checkout-carrinho.scss | 165 ++++++++++++++- 2 files changed, 328 insertions(+), 30 deletions(-) diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index c8cb484..afb15df 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -38,11 +38,26 @@ text-transform: uppercase; font-family: $font-family-secundary; color: $color-black; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 47px; + } + } small { color: $color-black; font-size: 24px; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 40px; + line-height: 47px; + } } } @@ -72,6 +87,14 @@ border-radius: 5px; font-size: 16px; + @media (min-width: 2500px) { + height: 50px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } + &::placeholder { font-family: $font-family; font-style: normal; @@ -81,6 +104,13 @@ display: flex; align-items: center; padding: 0 16px 12px; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + } } @media (max-width: 490px) { @@ -98,6 +128,14 @@ right: 0; top: 0; + @media (min-width: 2500px) { + height: 50px; + font-style: normal; + font-weight: 700; + font-size: 28px; + line-height: 38px; + } + @media (max-width: 490px) { height: 48px; margin: 0; @@ -216,6 +254,12 @@ label.vtex-omnishipping-1-x-leanShippingOption { width: 18px; height: 18px; + @media (min-width: 2500px) { + width: 32px; + height: 32px; + + } + svg path { display: none; } @@ -228,6 +272,12 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive { width: 18px; height: 18px; + @media (min-width: 2500px) { + width: 32px; + height: 32px; + + } + svg path { display: none; } @@ -258,14 +308,14 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive { -p.notification { - font-family: $font-family; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: $color-gray7; -} +// p.notification { +// font-family: $font-family; +// font-style: normal; +// font-weight: 400; +// font-size: 14px; +// line-height: 19px; +// color: $color-gray7; +// } input#client-last-name, .input#client-first-name, @@ -313,6 +363,10 @@ input#client-phone { } input#client-phone { + @media (min-width: 2500px) { + width: 95%; + } + @media (max-width: 1024px) { width: 100%; } @@ -355,7 +409,8 @@ span.quantity.badge { @media (min-width: 2500px) { width: 100%; - max-width: 60%; + // max-width: 60%; + max-width: 50%; font-size: 24px; line-height: 28px; margin-left: 13.5px @@ -467,6 +522,7 @@ td.info { position: relative; } +p.notification, .shipping-summary-info { font-family: $font-family; font-style: normal; @@ -474,6 +530,13 @@ td.info { font-size: 14px; line-height: 19px; color: $color-gray2; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + + + } } p.submit.btn-submit-wrapper { @@ -555,6 +618,12 @@ button#shipping-option-delivery { color: #41115d; width: 148px !important; height: 36px !important; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + height: auto !important; + } } button#shipping-option-pickup-in-point { @@ -566,6 +635,11 @@ button#shipping-option-pickup-in-point { line-height: 19px; text-transform: uppercase; color: #c4c4c4; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } } @@ -582,6 +656,11 @@ p.input.ship-postalCode.required.text { font-size: 12px; line-height: 16px; color: $color-gray2; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } } @@ -623,6 +702,12 @@ input#client-email { #opt-in-newsletter { height: auto; + + @media (min-width: 2500px) { + width: 34.95px; + height: 34.95px; + margin-top: -5px; + } } .step.accordion-group.client-profile-data.filled { @@ -681,6 +766,10 @@ p.client-first-name.input.pull-left.text.required, p.client-last-name.input.pull-left.text.required { width: 46%; + @media (min-width: 2500px) { + width: 47%; + } + @media (max-width: 1025px) { width: 49.167%; } @@ -851,6 +940,7 @@ a#edit-shipping-data, @media (min-width: 2500px) { font-size: 24px; line-height: 33px; + margin-left: 14px; } } @@ -861,21 +951,13 @@ a#edit-shipping-data, object-fit: cover; @media (min-width: 2500px) { - width: 116.5px; + height: 116.5px; } } } -// ul.cart-items.unstyled.clearfix { -// margin-bottom: 50px; -// } - -// span.shipping-date.pull-left { -// display: none; -// } - strong.price.pull-right { @media (min-width: 2500px) { font-size: 24px; @@ -1011,19 +1093,80 @@ li.hproduct.item.muted { } } -// 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 { background: #F2F2F2 !important; } + +span.newsletter-text { + @media (min-width: 2500px) { + + margin-left: 8.05px; + } +} + +.input-small+span.error { + @media (min-width: 2500px) { + font-size: 26px; + line-height: 33px; + } +} + +.vtex-omnishipping-1-x-addressFormPart1 small { + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } +} + +button#find-pickups-manualy-button-denied { + width: 100%; + background-color: $color-blue2; + font-weight: 700; + + @media (min-width: 2500px) { + font-size: 28px; + line-height: 38px; + } +} + +.vtex-omnishipping-1-x-subtitle { + @media (min-width: 2500px) { + font-size: 24px !important; + line-height: 38px; + } +} + +.vtex-omnishipping-1-x-geolocationTitle { + @media (min-width: 2500px) { + font-size: 32px !important; + line-height: 38px; + } +} + +.vtex-omnishipping-1-x-shippingSectionTitle { + @media (min-width: 2500px) { + font-weight: 700; + font-size: 28px; + line-height: 38px; + } +} + +.vtex-omnishipping-1-x-leanShippingOption, +.vtex-omnishipping-1-x-leanShippingTextLabel, +.FormFieldLabel { + @media (min-width: 2500px) { + font-size: 24px !important; + line-height: 33px !important; + } +} + .FormFieldLabel { color: $color-black !important; +} + +span.shipping-date.pull-left { + display: none; } \ 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 077b657..cf3ba4e 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -147,6 +147,14 @@ font-size: 14px; line-height: 16px; + @media (min-width: 2500px) { + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 33px; + } + @include mq(md, max) { &.quantity-price, @@ -161,6 +169,8 @@ padding: 0; width: 60px; + + @include mq(sm, max) { width: 72px; } @@ -168,7 +178,13 @@ img { height: 60px; max-width: 100%; - width: auto; + width: 100%; + + @media (min-width: 2500px) { + object-fit: cover; + min-width: 146px; + height: 100%; + } @include mq(sm, max) { height: 72px; @@ -185,13 +201,22 @@ } a { - color: $color-blue; + color: $color-black2; + font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; transition: ease-in 0.22s all; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 24px; + line-height: 28px; + margin-left: 31px; + + } + &:hover { color: darken($color-blue, 10); text-decoration: none; @@ -213,6 +238,11 @@ font-size: 12px; line-height: 14px; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + @include mq(md, max) { display: none; } @@ -237,6 +267,12 @@ line-height: 14px; text-decoration-line: line-through; + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } + + @include mq(sm, max) { font-size: 12px; line-height: 14px; @@ -261,6 +297,12 @@ padding: 0; width: max-content !important; + @media (min-width: 2500px) { + margin: 75px auto 0; + width: 135px; + height: 50px + } + @media (max-width: 490px) { margin-left: 84px !important; } @@ -278,7 +320,12 @@ color: $color-gray2; box-shadow: none; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + } @include mq(lg, max) { width: 24px !important; @@ -301,6 +348,10 @@ margin: 0 11px; border-radius: 100%; + @media (min-width: 2500px) { + width: 32px; + height: 32px; + } } } @@ -308,6 +359,11 @@ &:before { content: "-"; font-size: 14px; + + @media (min-width: 2500px) { + font-size: 24px; + + } } } @@ -315,6 +371,11 @@ &:before { content: "+"; font-size: 15px; + + @media (min-width: 2500px) { + font-size: 28px; + + } } } @@ -349,7 +410,14 @@ font-size: 14px; line-height: 16px; color: $color-black; + font-family: $font-family-secundary; + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + + } } &:nth-child(2n), @@ -357,6 +425,13 @@ font-weight: 700; font-size: 14px; line-height: 19px; + + @media (min-width: 2500px) { + font-weight: 7000; + font-size: 28px; + line-height: 33px; + width: 7%; + } } } @@ -403,6 +478,10 @@ .srp-container { padding: 0 0 0 10px; + @media (min-width: 2500px) { + max-width: none; + } + @include mq(md, max) { padding: 0 16px; } @@ -413,7 +492,12 @@ font-weight: normal; font-size: 24px; line-height: 28px; - color: $color-gray2; + color: $color-black2; + + @media (min-width: 2500px) { + font-size: 48px; + line-height: 65px; + } @include mq(md, max) { margin-top: 0; @@ -425,6 +509,14 @@ font-size: 12px; line-height: 18px; margin: 0 0 12px; + + @media (min-width: 2500px) { + width: 100%; + font-weight: 400; + font-size: 28px; + line-height: 36px; + max-width: 562px; + } } button.shp-open-options { @@ -440,6 +532,12 @@ padding: 12px 40px; transition: all 0.2s linear; + @media (min-width: 2500px) { + + font-size: 28px; + line-height: 38px; + } + &:hover { background-color: lighten($color-gray5, 5); } @@ -975,12 +1073,17 @@ } a { - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; font-weight: normal; font-size: 12px; line-height: 14px; color: $color-black2 ; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 28px; + } } } @@ -1026,7 +1129,7 @@ text-align: center; letter-spacing: 0.05em; text-transform: uppercase; - font-family: "Open Sans"; + font-family: $font-family; font-style: normal; color: $color-black2; @@ -1138,4 +1241,56 @@ fieldset.payment-group, @media (max-width: 1025px) { width: 99.81% !important; } +} + + +.best-price span { + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 33px; + + &::before { + content: "por "; + } + } +} + +.new-product-price-label { + color: red !important; + display: none; +} + +i.icon.icon-remove.item-remove-ico { + &::before { + + font-size: 20px !important; + color: $color-gray6 !important; + } +} + +.clearfix.pull-right.cart-links.cart-links-bottom.hide { + @media (min-width: 2500px) { + width: 34%; + } +} + +.step .text label, +.step .select label { + + @media (min-width: 2500px) { + font-weight: 400; + font-size: 28px; + line-height: 38px; + + } + + +} + +.step .text input { + @media (min-width: 2500px) { + height: 61px; + font-size: 28px; + } } \ No newline at end of file -- 2.34.1