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 0eed197..0000000 Binary files a/checkout/src/arquivos/assets/imgs/icon-radios-input-Active-M3Academy.png and /dev/null differ 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 a640064..0000000 Binary files a/checkout/src/arquivos/assets/imgs/icon-radios-input-M3Academy.png and /dev/null differ diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 3c3f115..a518996 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -60,7 +60,7 @@ export default class Footer { this.checkoutVazio = await waitElement(".empty-cart-content"); this.payments = await waitElement(".footerCheckout__payments"); this.vtexpci = await waitElement(".footerCheckout__vtexpci"); - this.devIncons = await waitElement(".footerCheckout__developedBy"); + this.iconsFooter = await waitElement(".footerCheckout__developedBy"); this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); this.cartTitle = await waitElement("#cart-title"); } @@ -259,7 +259,7 @@ export default class Footer { } createDevIcons() { - this.devIncons.innerHTML = ` + this.iconsFooter.innerHTML = `
  • 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;