From 4110fa84d0668f1d3b4d73eec2c7b8284adf1cd2 Mon Sep 17 00:00:00 2001 From: DaviHKlein Date: Sun, 18 Dec 2022 23:45:25 -0300 Subject: [PATCH] feat(sass):Adiciona responsividade em todas as telas --- .../icon-radios-input-Active-M3Academy.png | Bin 338 -> 0 bytes .../imgs/icon-radios-input-M3Academy.png | Bin 267 -> 0 bytes checkout/src/arquivos/js/components/Footer.js | 4 +- .../sass/checkout/_checkout-autenticacao.scss | 167 ++++++++++++++++-- .../sass/checkout/_checkout-carrinho.scss | 5 + .../sass/checkout/_checkout-pagamento.scss | 80 ++++++++- checkout/src/arquivos/sass/utils/_mixin.scss | 2 +- 7 files changed, 242 insertions(+), 16 deletions(-) delete mode 100644 checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png delete mode 100644 checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png diff --git a/checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png b/checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png deleted file mode 100644 index 0eed197d5139a9a4beff988f9305d906838c3cfe..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 338 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|&H|6fVg?3oVGw3ym^DWND9BhG z#U+v5$dwFZ0GTs%7H0E@un51_EA1?N}T$2CE zMxS%0_KE8IM*?Q-H#k-?tNirwX#(=xm5uLiF(g`VQ080|Ubw^KtTMBEa_V*$$!+YK ziXVRbS#L7!fzH0yJdRDe$4(`Q@7q_OJ4fZr)*lo9EvUHg<96<$JO6A~8H6=mHpuuZ zbKsSCIdta1oSe4r>mdKI;Vst09)dOr~m)} diff --git a/checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png b/checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png deleted file mode 100644 index a640064fc2dd326ea72ece82c52c55369c9b8638..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 267 zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+1|-AI^@Rf|&H|6fVg?3oVGw3ym^DWND9BhG zeshSt|2w5vPOz|{Yf2E)U7ICS z%uCMcw#*6gT71pwio>xP#rMA(CrUfNmw4Pdfmh1uhC)jPqa$k_kF@L`P4*Ip->ppc zawcuk4ZVF Powered By diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index d7b3130..abd64f1 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -421,6 +421,9 @@ @media (max-width: 1024px) { margin-left: 1.6%; } + @include mq(l, max) { + margin-bottom: 17px; + } } .shipping-data, @@ -505,6 +508,15 @@ span[data-i18n="clientProfileData.identification"]::before { content: "Identificação"; color: $color-black; + @media (min-width: 2500px) { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 37px; + + color: #292929; + } } .link-box-edit { background: $color-white; @@ -558,6 +570,15 @@ } } .form-step { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + + color: #7d7d7d; + } .client-profile-email { margin-bottom: 6px; } @@ -834,16 +855,35 @@ /* Shipping configurations */ .ship-postalCode small a { + font-family: "Open Sans"; color: #303030; font-weight: 500; text-decoration: underline; + + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #292929; + } } .vtex-omnishipping-1-x-deliveryGroup { p { - color: #303030; + font-family: "Open Sans"; + color: #7d7d7d; + font-style: normal; + font-weight: 700; font-size: 14px; - font-weight: 500; + line-height: 19px; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 28px; + line-height: 38px; + } } .shp-lean { @@ -852,6 +892,64 @@ .vtex-omnishipping-1-x-leanShippingOptionActive { background: #f2f2f2; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + .shp-option-text-label { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + } + .vtex-omnishipping-1-x-leanShippingIcon { + svg { + width: 18px; + height: 18px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png) !important; + path { + fill: transparent; + } + } + } + } + .vtex-omnishipping-1-x-leanShippingOption { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + .shp-option-text-label { + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + color: #7d7d7d; + } + } + .vtex-omnishipping-1-x-leanShippingIcon { + svg { + width: 18px; + height: 18px; + background: url(https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png); + path { + fill: transparent; + } + } + } } label { @@ -872,9 +970,19 @@ } .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + letter-spacing: 0.05em; + + color: #7d7d7d; + + @media (min-width: 2500px) { + font-size: 24px; + line-height: 33px; + } } .shp-summary-group-info { @@ -890,29 +998,64 @@ } .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #7d7d7d; + + @media (min-width: 2500px) { + padding: 15px 28px 15px 81px; + paddin-left: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + background-size: 40px; + } @include mq(md, max) { background-position: 8px 9px; } a { - color: #303030; - font-weight: 500; - text-decoration: underline; + color: #00c8ff; } } .shp-summary-group-price, .shp-summary-package { color: $color-gray4; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + + color: #7d7d7d; + } } .shp-summary-group-price { padding-right: 16px; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 33px; + display: flex; + align-items: center; + letter-spacing: 0.05em; + + color: #7d7d7d; + } } .shp-summary-package { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 01efed1..2ae5d48 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -75,6 +75,11 @@ .price { color: #7d7d7d; } + .shipping-date { + @media (min-width: 2500px) { + display: none; + } + } .url { .photo { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss index a7007ed..23981ab 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss @@ -109,12 +109,26 @@ body .container-main.container-order-form .orderform-template.active { line-height: 25px; color: #292929; float: left; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } td[data-bind="text: totalLabel"] { font-weight: 700; font-size: 18px; line-height: 25px; color: #292929; + @media (min-width: 2500px) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 36px; + line-height: 49px; + } } .info, .monetary { @@ -171,6 +185,15 @@ body .container-main.container-order-form .orderform-template.active { .steps-view { width: 56.456%; + + @include mq(c, max) { + margin-left: 0 !important; + } + + @include mq(l, max) { + margin: 12px 18px 36.75px 16px; + width: 93%; + } .payment-method { } } @@ -178,6 +201,10 @@ body .container-main.container-order-form .orderform-template.active { .payment-group { margin: 0; width: 32.505%; + + @include mq(l, max) { + width: 100%; + } .payment-group-list-btn { display: flex; flex-direction: column; @@ -206,59 +233,107 @@ body .container-main.container-order-form .orderform-template.active { #payment-group-custom201PaymentGroupPaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { font-size: 0 !important; - &:after { + &::after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Boleto Faturado"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } #payment-group-custom204PaymentGroupPaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { font-size: 0 !important; &:after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Cartão de Débito"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } #payment-group-creditCardPaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { background-image: none !important; font-size: 0 !important; text-decoration: none; &:after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Cartão de Crédito"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } #payment-group-bankInvoicePaymentGroup { display: block; + @include mq(l, max) { + width: 98%; + } span { background-image: none !important; font-size: 0 !important; &:after { + font-family: "Open Sans"; font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: -0.01em; content: "Boleto à Vista"; + @media (min-width: 2500px) { + font-style: normal; + font-weight: 400; + font-size: 28px; + line-height: 24px; + + color: #58595b; + } } } } @@ -270,6 +345,9 @@ body .container-main.container-order-form .orderform-template.active { border-radius: 6px; span { color: $color-orange; + &:after { + color: $color-orange !important; + } } } } diff --git a/checkout/src/arquivos/sass/utils/_mixin.scss b/checkout/src/arquivos/sass/utils/_mixin.scss index 13beee6..8d969d6 100644 --- a/checkout/src/arquivos/sass/utils/_mixin.scss +++ b/checkout/src/arquivos/sass/utils/_mixin.scss @@ -1,7 +1,7 @@ /** * @reference (https://github.com/engageinteractive/core/blob/master/src/scss/utility/_mixins.scss) */ - @mixin push--auto { +@mixin push--auto { margin: { left: auto; right: auto;