diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 6257c92..b2363a0 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -34,9 +34,24 @@ export default class Footer { let config = { childList: true, attributes: true }; let observer = new MutationObserver(mCallback); + if (window.location.href != "https://m3academy.myvtex.com/checkout/#/cart") { + pratileira.classList.add("elementInvisible"); + } + + window.addEventListener("hashchange", () => { + if (window.location.hash == "#/cart") { + this.pratileira.classList.remove("elementInvisible"); + } else { + pratileira.classList.add("elementInvisible"); + } + }); + function mCallback(mutations) { mutations.forEach((mutation) => { - if (target.style.display === "block") { + if ( + target.style.display === "block" || + window.location.href != "https://m3academy.myvtex.com/checkout/#/cart" + ) { titleCart.classList.add("elementInvisible"); pratileira.classList.add("elementInvisible"); sliderVisible = false; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss index 92f0375..079c554 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss @@ -1,289 +1,350 @@ .checkout-container { - .client-pre-email { - border-color: $color-gray4; - font-family: $font-family; - padding-top: 8px; + .client-pre-email { + border-color: $color-black-neutra; + font-family: $font-family; + padding-top: 8px; - .link-cart { - a { - color: $color-black; - font-size: 14px; + small { + font-family: $color-black-neutra; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + } - &:hover { - color: lighen($color-black, 10); - } - } - } + .link-cart { + a { + color: $color-black; + font-size: 14px; - .pre-email { - flex-direction: column; - display: flex; - align-items: center; - justify-content: center; + &:hover { + color: lighen($color-black, 10); + } + } + } - h3 { - margin-bottom: 16px; + .pre-email { + flex-direction: column; + display: flex; + align-items: center; + justify-content: center; - span { - color: #303030; - font-size: 24px; - } + h3 { + margin-bottom: 21px; - small { - color: $color-gray4; - } - } - } + span { + font-size: 0; + &::before { + content: "Para finalizar a compra, informe seu e-mail. RÁPIDO. FÁCIL. SEGURO."; + font-family: $font-family-secundary; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 23px; + text-align: center; + text-transform: uppercase; + color: $color-black-neutra; + } + } - .client-email { - margin: 0 0 16px; + small { + display: none; + } + } + } - input { - box-shadow: none; - color: $color-black; - font-family: $font-family; - padding: 0 16px; - border: 2px solid $color-gray3; - box-sizing: border-box; - border-radius: 5px; + .client-email { + margin: 0 auto; + border: 0; + display: flex; + justify-content: center; - @media (max-width: 490px) { - width: auto; - } - } + width: 59.2827%; + margin-bottom: 25px; + input { + box-shadow: none; + color: $color-black; + font-family: $font-family; + padding: 0 14px; + box-sizing: border-box; + border: 1px solid $color-black-neutra; + border-radius: 5px 0px 0px 5px; + width: 90%; + margin: 0; + font-size: 12px; - button { - background-color: $color-black; - border-radius: 5px; - border: none; - font-family: $font-family; - height: 54px; - right: 0; - top: 0; + &::placeholder { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-black-neutra; + } - @media (max-width: 490px) { - height: 48px; - margin: 0; - position: absolute; - } - } + @media (max-width: 490px) { + width: auto; + } + } - span.help.error { - color: red; - } - } + button { + background-color: $color-blue-light; + border-radius: 0px 8px 8px 0px; + border: none; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + padding: 0 14px; + height: 54px; + right: 0; + top: 0; + color: $color-black-neutra; - .emailInfo { - padding: 16px; - background-color: $color-white; - border: 1px solid $color-gray4; - border-radius: 0; + @media (max-width: 490px) { + height: 48px; + margin: 0; + position: absolute; + } + } - h3 { - color: #303030; - margin: 0 0 8px 0; - } + span.help.error { + color: red; + } + } - ul { - margin: 0; + .emailInfo { + padding: 16px 0px 28px 16px; + background-color: $color-white; + border: 1px solid $color-gray4; + border-radius: 0; - li { - span { - color: $color-black; - } + width: 37.306%; + margin-bottom: 94px; - i::before { - color: $color-black; - font-size: 1rem; - opacity: 1; - } - } - } + h3 { + color: $color-black-neutra; + margin: 0 0 9px 0; + font-family: $font-family; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } - i::before { - color: $color-black; - font-size: 6rem; - opacity: 0.5; - } - } - } + ul { + margin: 0; - .shipping-data, - .payment-data, - .client-profile-data { - .accordion-group { - border-radius: 0; - border: 1px solid $color-gray4; - font-family: $font-family; - padding: 16px; + li { + span { + color: $color-black-neutra; + font-family: $color-black-neutra; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 16px; + } - .accordion-heading { - span { - color: #303030; - margin-bottom: 8px; - padding: 0; + i::before { + color: $color-blue-light; + font-size: 1rem; + opacity: 1; + } + } + } - i::before { - fill: #303030; - } - } + i::before { + color: $color-black; + font-size: 6rem; + opacity: 0.5; + } + } + } - a { - align-items: center; - background-color: #303030; - border-radius: 8px; - border: none; - color: $color-white; - display: flex; - justify-content: center; - padding: 6px 5px 6px 8px; - } - } + .shipping-data, + .payment-data, + .client-profile-data { + .accordion-group { + border-radius: 0; + border: 1px solid $color-gray4; + font-family: $font-family; + padding: 16px; - .accordion-inner { - padding: 0; + .accordion-heading { + span { + color: #303030; + margin-bottom: 8px; + padding: 0; - /* General configurations */ + i::before { + fill: #303030; + } + } - .client-notice { - color: $color-black; - } + a { + align-items: center; + background-color: #303030; + border-radius: 8px; + border: none; + color: $color-white; + display: flex; + justify-content: center; + padding: 6px 5px 6px 8px; + } + } - p { - label { - color: $color-black; - font-weight: 500; - } + .accordion-inner { + padding: 0; - select, - input { - border-radius: 0; - border: 1px solid $color-gray4; - box-shadow: none; - } + /* General configurations */ - .help.error { - color: red; - } - } + .client-notice { + color: $color-black; + } - .box-client-info-pj { - .link a#is-corporate-client, - .link a#not-corporate-client { - color: $color-black; - font-weight: 500; - text-decoration: underline; - } - } + p { + label { + color: $color-black; + font-weight: 500; + } - .state-inscription-box span { - font-weight: 500; - } + select, + input { + border-radius: 0; + border: 1px solid $color-gray4; + box-shadow: none; + } - button.submit { - border: none; - border-radius: 5px; - background: $color-black; - margin-top: 8px; - outline: none; - transition: all 0.2s linear; + .help.error { + color: red; + } + } - &:hover { - background: lighten($color-black, 5); - } + .box-client-info-pj { + .link a#is-corporate-client, + .link a#not-corporate-client { + color: $color-black; + font-weight: 500; + text-decoration: underline; + } + } - &:active { - background: darken($color-black, 5); - } - } + .state-inscription-box span { + font-weight: 500; + } - /* Shipping configurations */ + button.submit { + border: none; + border-radius: 5px; + background: $color-black; + margin-top: 8px; + outline: none; + transition: all 0.2s linear; - .ship-postalCode small a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } + &:hover { + background: lighten($color-black, 5); + } - .vtex-omnishipping-1-x-deliveryGroup { - p { - color: #303030; - font-size: 14px; - font-weight: 500; - } + &:active { + background: darken($color-black, 5); + } + } - .shp-lean { - border: 1px solid $color-gray4; - border-radius: 0; + /* Shipping configurations */ - label { - background-color: $color-white; - box-shadow: none; - color: #303030; - padding: 8px 12px; + .ship-postalCode small a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } - svg path { - fill: #d8c8ac; - } - } - } - } + .vtex-omnishipping-1-x-deliveryGroup { + p { + color: #303030; + font-size: 14px; + font-weight: 500; + } - .delivery-address-title { - color: #303030; - font-size: 14px; - font-weight: 500; - } + .shp-lean { + border: 1px solid $color-gray4; + border-radius: 0; - .shp-summary-group-info { - border-color: $color-gray4; - } + label { + background-color: $color-white; + box-shadow: none; + color: #303030; + padding: 8px 12px; - .address-summary { - background: none; - border-color: $color-gray4; - border-radius: 0; - color: #303030; - padding: 12px; + svg path { + fill: #d8c8ac; + } + } + } + } - @include mq(md, max) { - background-position: 8px 9px; - } + .delivery-address-title { + color: #303030; + font-size: 14px; + font-weight: 500; + } - a { - color: #303030; - font-weight: 500; - text-decoration: underline; - } - } + .shp-summary-group-info { + border-color: $color-gray4; + } - .shp-summary-group-price, - .shp-summary-package { - color: $color-gray4; - } + .address-summary { + background: none; + border-color: $color-gray4; + border-radius: 0; + color: #303030; + padding: 12px; - .shp-summary-group-price { - padding-right: 16px; - } + @include mq(md, max) { + background-position: 8px 9px; + } - .shp-summary-package { - padding-left: 16px; - } + a { + color: #303030; + font-weight: 500; + text-decoration: underline; + } + } - .vtex-omnishipping-1-x-summaryChange { - border-color: #303030; - color: #303030; - } + .shp-summary-group-price, + .shp-summary-package { + color: $color-gray4; + } - .vtex-omnishipping-1-x-deliveryChannelsToggle { - background-color: #d8c8ac; - border: 1px solid #d8c8ac; - } + .shp-summary-group-price { + padding-right: 16px; + } - .vtex-omnishipping-1-x-deliveryOptionActive { - text-shadow: 1.3px 1px lighten($color-black, 50); - } - } - } - } + .shp-summary-package { + padding-left: 16px; + } + + .vtex-omnishipping-1-x-summaryChange { + border-color: #303030; + color: #303030; + } + + .vtex-omnishipping-1-x-deliveryChannelsToggle { + background-color: #d8c8ac; + border: 1px solid #d8c8ac; + } + + .vtex-omnishipping-1-x-deliveryOptionActive { + text-shadow: 1.3px 1px lighten($color-black, 50); + } + } + } + } +} + +.row-fluid .orderform-template { + margin-bottom: 94px; } diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index 68d6108..4cedb01 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -452,18 +452,20 @@ } .srp-pickup-my-location__button { - background-color: $color-black; + background-color: $color-blue-light; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; outline: none; width: 100%; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; + text-transform: uppercase; + padding: 12px 0; &:hover { background-color: lighten($color-black, 5); @@ -476,7 +478,7 @@ } .srp-toggle { - margin: 0 0 34px; + margin: 0 0 20px; &__wrapper { background-color: $color-white; @@ -486,17 +488,21 @@ font-style: normal; font-weight: normal; font-size: 14px; - line-height: 16px; + line-height: 19px !important; text-transform: uppercase; + + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); + color: $color-gray7; } &__current { - border: 1px solid $color-blue; + border: 1px solid $color-black-neutra; border-radius: 100px; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); } .blue { - color: $color-blue; + color: $color-black-neutra; } label { @@ -509,22 +515,25 @@ } .srp-postal-code { + .ship-country { + display: none; + } .ship-postalCode { label { font-family: $font-family; font-style: normal; font-weight: normal; font-size: 12px; - line-height: 14px; - color: $color-black; + line-height: 16px; + color: $color-black-neutra; margin-bottom: 12px; } input { - border: 1px solid $color-gray3; + border: 1px solid $color-gray7; border-radius: 5px; box-shadow: none; - color: $color-gray3; + color: $color-black-neutra; font-size: 12px; height: 36px; padding: 12px 8px; @@ -532,38 +541,32 @@ } & ~ button { - background-color: $color-black; + background-color: $color-blue-light; border: none; - border-radius: 5px; + border-radius: 8px; color: $color-white; - font-size: 12px; + font-size: 14px; height: 36px; - letter-spacing: 1px; + letter-spacing: 0.05em; + text-transform: uppercase; outline: none; position: absolute; - right: -150px; - top: 36px; + right: -147px; + top: 38px; transition: all 0.2s linear; - width: 96px; - text-transform: uppercase; - - &:hover { - background-color: lighten($color-black, 5); - } - - &:active { - background-color: darken($color-black, 5); - } + padding: 0 11px; + margin: 0; + vertical-align: middle; } small a { font-family: $font-family; font-style: normal; font-weight: normal; - font-size: 10px; - line-height: 12px; - color: $color-blue; - margin-top: 7px; + font-size: 12px; + line-height: 16px; + color: $color-black-neutra; + margin-top: 4px; } span.help.error { diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 5b1ac74..1981122 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -62,7 +62,7 @@ body { } .emailInfo h3 { - color: $color-black !important; + color: $color-black; } #cart-title,