diff --git a/checkout/src/arquivos/js/components/Cart.js b/checkout/src/arquivos/js/components/Cart.js index 593d5d0..52ead1f 100644 --- a/checkout/src/arquivos/js/components/Cart.js +++ b/checkout/src/arquivos/js/components/Cart.js @@ -29,10 +29,11 @@ export default class Cart { handleMutationObserver(mutations) { mutations.forEach((mutation) => { console.log(mutation); - if (mutation.type === "attributes" && mutation.attributeName === "style") + if (mutation.type === "attributes" && mutation.attributeName === "style") { if (this.cart.style.display === "flex") this.cartTitle.classList.remove("hide-cart-title"); else if (this.cart.style.display === "none") this.removeCartTitle(); + } }); } diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss index 6d104e7..3e4fad7 100644 --- a/checkout/src/arquivos/sass/checkout/_checkout.scss +++ b/checkout/src/arquivos/sass/checkout/_checkout.scss @@ -8,8 +8,8 @@ img { } body { - padding: 0; - margin: 0; + padding: 0 !important; + margin: 0 !important; } .dropdown { diff --git a/checkout/src/arquivos/sass/partials/_menu.scss b/checkout/src/arquivos/sass/partials/_menu.scss index 53c5ea5..87b658f 100644 --- a/checkout/src/arquivos/sass/partials/_menu.scss +++ b/checkout/src/arquivos/sass/partials/_menu.scss @@ -6,6 +6,13 @@ justify-content: center; flex-direction: column; + .empty-cart-content { + padding: 0; + position: absolute; + width: 100%; + left: 0; + } + h2 { all: unset; } @@ -300,6 +307,10 @@ margin: 0; } + .srp-data { + position: relative; + } + .shp-open-options { font-weight: 400; font-size: 14px; @@ -308,22 +319,202 @@ background-color: $gray-200; padding: 12px 41px; } + + .srp-toggle { + margin-bottom: 0; + } + + .ship-country { + display: none; + } + + .vtex-shipping-preview-0-x-pc { + position: absolute; + top: calc(100% + 13px); + } + + .vtex-shipping-preview-0-x-postalCodeForgotten { + margin-top: 0; + } + + span .help .error { + display: none; + } + + .ship-postalCode { + flex: 1; + width: auto; + margin-right: 8px; + + label { + font-weight: 400; + font-size: 12px; + line-height: 16px; + width: auto; + margin-bottom: 2px; + } + + .input-small { + width: 100%; + color: $black-500; + } + + .help.error { + margin: 10px 0 0 5px; + left: 12%; + top: -12%; + } + + small { + a { + font-size: 0; + + &::before { + content: "Não sei meu código postal"; + font-weight: 400; + font-size: 10px; + line-height: 12px; + font-family: $font-family-secundary; + color: $black-500; + text-decoration: underline; + } + } + } + } + + .srp-pc-input { + margin-left: 0; + margin-bottom: 5px; + position: static; + background: $blue-500; + border-radius: 8px; + font-weight: 700; + font-size: 14px; + line-height: 19px; + padding: 8px 0 9px; + + @include mq(mobile, min) { + &:hover { + background-color: $blue-600; + } + + &:active { + background-color: $blue-500; + } + } + } + + .srp-pickup-empty { + position: absolute; + width: 100%; + margin-top: 16px; + + .srp-pickup-my-location__button { + padding: 11px 0 12px; + background-color: $blue-500; + font-weight: 700; + font-size: 14px; + line-height: 19px; + transition: ease-in 0.22s all; + + @include mq(mobile, min) { + &:hover { + background-color: $blue-600; + } + + &:active { + background-color: $blue-500; + } + } + } + } } } .cart-totalizers { margin: 0 128px 0 0; - .coupon-data { - margin-bottom: 20px; - } + .coupon-fieldset { + .coupon-label { + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $gray-600; + font-family: $font-family-secundary; - .link-coupon-add span { - font-family: $font-family-secundary; - font-weight: 400; - font-size: 12px; - line-height: 14px; - color: $black-500; + label { + text-align: left; + margin: 0; + } + } + + .coupon-fields { + display: flex; + justify-content: flex-start; + margin-bottom: 20px; + + span { + display: flex; + flex: 1; + align-items: center; + + .coupon-value { + padding: 11px 16px; + font-weight: 400; + font-size: 12px; + line-height: 14px; + font-family: $font-family-secundary; + color: $gray-400; + height: auto; + border: 1px solid $gray-300; + border-radius: 5px; + flex: 1; + width: auto; + } + + i { + -webkit-animation: none; + animation: none; + &::before { + animation: spin 0.7s infinite linear; + } + + span { + display: none; + flex: none; + } + } + + .btn { + padding: 8px 15px 9px; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $black-500; + background: $blue-500; + border-radius: 8px; + margin-left: 30px; + width: 133px; + } + } + } + + .coupon-data { + display: block !important; + margin-bottom: 20px; + + .link-coupon-add { + text-decoration: none !important; + + span { + font-family: $font-family-secundary; + font-weight: 400; + font-size: 12px; + line-height: 14px; + color: $black-500; + } + } + } } .totalizers-list { @@ -379,6 +570,16 @@ border-radius: 8px; background-color: $blue-500; + @include mq(mobile, min) { + &:hover { + background-color: $blue-600; + } + + &:active { + background-color: $blue-500; + } + } + &::after { font-weight: 700; font-size: 14px; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 313de34..be2e933 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -11,11 +11,13 @@ $black-500: #000; $gray-100: #f0f0f0; $gray-200: #ededed; +$gray-300: #e5e5e5; $gray-400: #c4c4c4; $gray-500: #989898; $gray-600: #7d7d7d; $blue-500: #00c8ff; +$blue-600: #20b2db; $white-500: #fff; diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html index 258a0d6..db7d574 100644 --- a/checkout/src/template-checkout/checkout-header.html +++ b/checkout/src/template-checkout/checkout-header.html @@ -1,20 +1,52 @@ -
-
-
- -
Aqui entra a barra de progresso -
-
- Cadeado - Compra segura -
+
+
+
+ +
Aqui entra a barra de progresso
+
+ Cadeado + Compra segura
-
+
+
+ + + + + +