diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js index 8fbb147..11d461d 100644 --- a/checkout/src/arquivos/js/components/Footer.js +++ b/checkout/src/arquivos/js/components/Footer.js @@ -31,20 +31,28 @@ export default class Footer { async selectors() { this.checkoutVazio = await waitElement(".empty-cart-content"); + this.checkoutAtivo = await waitElement(".checkout-container"); this.payments = await waitElement(".footerCheckout__payments"); this.vtexpci = await waitElement(".footerCheckout__vtexpci"); this.devIncons = await waitElement(".footerCheckout__developedBy"); this.listaPrateleira = await waitElement(".footerCheckout__prateleira"); this.titulo = await waitElement(".transactions-container"); + this.cartTitulo = await waitElement("#cart-title"); + this.titleSlick = await waitElement(".transactions-container"); } onUpdate() { let target = this.checkoutVazio; let list = this.listaPrateleira; + let cartTitle = this.cartTitulo; + let slickTitle = this.titleSlick; + if (target.style.display == "none" && window.location.hash == "#/cart") { list.style.display = "flex"; + list.style.display = "block"; this.fetchApi(); } else { + this.cartTitulo.style.display = "none"; list.style.display = "none"; } let config = { childList: true, attributes: true }; @@ -55,11 +63,18 @@ export default class Footer { mutations.forEach(function (mutation) { if (target.style.display != "none") { list.style.display = "none"; - } else list.style.display = "flex"; + cartTitle.style.display = "none"; + if (list.style.display == "none") { + slickTitle.style.display = "none"; + } + } else { + cartTitle.style.display = "block"; + list.style.display = "flex"; + } }); }); - observer.observe(target, config); + observer.observe(target, config, cartTitle, slickTitle); } async addCarrossel() { diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss index b685e4e..dec35d9 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss @@ -10,9 +10,15 @@ @include mq(md, max) { padding: 0 0; } + + .cart-template-holder { + margin-bottom: 48px; + } + .item-unit-label { display: none; } + .cart { border: 1px solid $gray-100; box-sizing: border-box; @@ -75,6 +81,10 @@ .summary-template-holder { border-top: none; background: $white; + + .row-fluid summary { + margin-top: 48px; + } } #go-to-cart-button a { @@ -95,13 +105,6 @@ color: $white; outline: none; transition: all 0.2s linear; - &:hover { - background: lighten($black, 5); - } - - &:active { - background: darken($black, 5); - } } } @@ -168,7 +171,6 @@ transition: ease-in 0.22s all; &:hover { - color: darken($black, 10); text-decoration: none; } @@ -390,14 +392,10 @@ outline: none; padding: 12px 40px; transition: all 0.2s linear; + } - &:hover { - background-color: lighten($gray-50, 5); - } - - &:active { - background-color: darken($gray-50, 5); - } + .ship-country { + display: none; } } @@ -413,26 +411,19 @@ } .srp-pickup-my-location__button { - background-color: $black; + background-color: $blue; border: none; border-radius: 5px; color: $white; outline: none; width: 100%; - + font-family: $font-family; font-style: normal; - font-weight: 500; + font-weight: 700; font-size: 14px; - line-height: 16px; + line-height: 19px; letter-spacing: 0.05em; - - &:hover { - background-color: lighten($black, 5); - } - - &:active { - background-color: darken($black, 5); - } + padding: 11px 0; } } @@ -442,6 +433,7 @@ &__wrapper { background-color: $white; border-radius: 100px; + border: 1px solid $gray-125; width: 100%; font-family: $font-family; font-style: normal; @@ -449,15 +441,19 @@ font-size: 14px; line-height: 16px; text-transform: uppercase; + box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + color: $gray-125; } &__current { - border: 1px solid $color-blue; + border: 1px solid $black; border-radius: 100px; + box-shadow: none; } .blue { - color: $color-blue; + color: $black; + box-shadow: none; } label { @@ -471,6 +467,10 @@ .srp-postal-code { .ship-postalCode { + .ship-country { + display: none; + } + label { font-family: $font-family; font-style: normal; @@ -482,7 +482,7 @@ } input { - border: 1px solid $color-gray3; + border: 1px solid $gray-125; border-radius: 5px; box-shadow: none; color: $color-gray3; @@ -493,9 +493,9 @@ } & ~ button { - background-color: $black; + background-color: $blue; border: none; - border-radius: 5px; + border-radius: 8px; color: $white; font-size: 12px; height: 36px; @@ -507,14 +507,6 @@ transition: all 0.2s linear; width: 96px; text-transform: uppercase; - - &:hover { - background-color: lighten($black, 5); - } - - &:active { - background-color: darken($black, 5); - } } small a { @@ -523,11 +515,16 @@ font-weight: normal; font-size: 10px; line-height: 12px; - color: $color-blue; + color: $black; margin-top: 7px; } + small:hover { + text-decoration: underline; + } + span.help.error { + display: none; color: red; font-size: 12px; position: absolute; @@ -552,7 +549,7 @@ font-weight: 500; &:hover { - text-decoration: underline; + text-decoration: none; } } @@ -606,7 +603,6 @@ #cart-link-coupon-add { text-decoration: none; &:hover { - text-decoration: underline; cursor: pointer; } } @@ -638,14 +634,16 @@ } .coupon-label label { + text-align: left; + font-family: $font-family-secundary !important; + cursor: default; margin-bottom: 12px; font-family: $font-family; font-style: normal; - font-weight: normal; + font-weight: 400; font-size: 12px; line-height: 14px; - color: $gray-150; - cursor: none; + color: $gray-600; } .coupon-fields { @@ -668,11 +666,15 @@ border: 2px solid $color-gray3; border-radius: 5px; box-shadow: none; - color: $gray-200; + font-family: $font-family-secundary !important; + font-style: normal; + font-weight: 400; font-size: 12px; + line-height: 14px; + color: $gray-200; height: 34px; - padding: 0 12px; - max-width: 160px; + padding: 0 16px; + width: 51%; @include mq(sm, max) { max-width: 100%; @@ -681,30 +683,28 @@ } button { - background: $black; + text-align: center; + background: $blue; border: none; border-radius: 5px; - color: $white; - font-size: 12px; + color: $black; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; height: 36px; letter-spacing: 1px; - margin-left: 6px; outline: none; transition: all 0.2s linear; - width: 94px; + width: 35%; text-transform: uppercase; + text-shadow: none; + margin-left: 5px; @include mq(md, max) { width: 138px; } - - &:hover { - background-color: lighten($black, 5); - } - - &:active { - background-color: darken($black, 5); - } } } } @@ -800,10 +800,6 @@ padding: 12px 19px; cursor: pointer; - &:hover { - background-color: darken($blue, 5); - } - &:after { content: "finalizar compra"; font-family: $font-family; diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss index 1ebdb88..c6c6f3f 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss @@ -11,29 +11,62 @@ } } + &-message { + display: none; + } + &-title { + font-family: $font-family; font-size: 20px; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + text-transform: uppercase; + margin-top: 170px; } &-links { .link-choose-products { - background: $black; - border: none; - border-radius: 5px; - transition: ease-in 0.22s all; + background: $white; + border: 1px solid $black; + border-radius: 0; outline: none; - font-family: $font-family; + font-family: $font-family-secundary; font-style: normal; - font-weight: 500; + font-weight: 400; font-size: 14px; line-height: 16px; text-align: center; letter-spacing: 0.05em; - color: $white; + padding: 15px 65px; + color: $black; text-transform: uppercase; + a { + font-family: "Tenor Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 16px; + text-align: center; + text-transform: uppercase; + letter-spacing: 0.05em; + color: transparent; + } + + a::after { + content: "Continuar comprando"; + color: $black; + position: absolute; + left: 0; + right: 0; + } + &:hover { - background: lighten($black, 5); + background: $white; + text-decoration: none; } } } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index e34adc9..0b1ba3a 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -84,13 +84,14 @@ body { #cart-title, #orderform-title { - color: $gray-500; font-family: $font-family; - font-weight: 500; - font-size: 36px; - line-height: 42px; + color: $gray-500; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; margin: 40px 0 30px; - letter-spacing: 0.1em; + letter-spacing: 0.05em; text-transform: uppercase; @include mq(md, max) { diff --git a/checkout/src/arquivos/sass/partials/_prateleira.scss b/checkout/src/arquivos/sass/partials/_prateleira.scss index 8cc2acf..2d414ca 100644 --- a/checkout/src/arquivos/sass/partials/_prateleira.scss +++ b/checkout/src/arquivos/sass/partials/_prateleira.scss @@ -23,6 +23,7 @@ footer .footerCheckout__prateleira { .img-container { margin: 0; + background: #ededed; } .itemtName { diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 2924a5e..2df6b91 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -15,6 +15,7 @@ $gray-125: #c4c4c4; $gray-150: #989898; $gray-200: #8d8d8d; $gray-500: #292929; +$gray-600: #7d7d7d; $blue: #00c8ff;