diff --git a/src/arquivos/js/app/app.js b/src/arquivos/js/app/app.js index 0fef959..a04444f 100644 --- a/src/arquivos/js/app/app.js +++ b/src/arquivos/js/app/app.js @@ -64,7 +64,7 @@ const app = new Container({ ], }); -app.bind(Minicart.name, ".carrinho .mini-cart"); +app.bind(Minicart.name, ".minicart__drawer"); app.bind(Newsletter.name, { elemento: ".news-form", textButtom: "Cadastre-se", diff --git a/src/arquivos/js/app/components/Minicart.js b/src/arquivos/js/app/components/Minicart.js index f45f291..53fe757 100644 --- a/src/arquivos/js/app/components/Minicart.js +++ b/src/arquivos/js/app/components/Minicart.js @@ -290,8 +290,6 @@ export default class Minicart { } this.createMiniCartStructure(element); - this.configureEvents( - "header .carrinho> a, .mobile-bottom-options .portal-totalizers-ref, .popup-add-cart .cart" - ); + this.configureEvents(".minicart__button"); } } diff --git a/src/arquivos/sass/components/_mini-cart.scss b/src/arquivos/sass/components/_mini-cart.scss index ee1757f..f93b3dc 100644 --- a/src/arquivos/sass/components/_mini-cart.scss +++ b/src/arquivos/sass/components/_mini-cart.scss @@ -1,21 +1,66 @@ -.mini-cart { - height: 475px; - max-height: 200px; - opacity: 0; - position: absolute; - right: 0px; - top: 50px; - transition: all 0.3s ease-in-out; - visibility: hidden; - width: 375px; - z-index: 16; +.minicart { + position: relative; - @include mq(md, max) { - bottom: 0; - height: 100%; - left: 0; - position: fixed; - top: 0; + &__button { + position: relative; + padding: 0; + border: 0; + outline: 0; + background: transparent; + cursor: pointer; + + .portal-totalizers-ref { + .title, + .amount-products, + .amount-items strong, + .amount-kits, + .total-cart { + display: none; + } + } + + .cart-info { + margin: 0; + } + + .amount-items-em { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 4px; + right: -4px; + width: 15px; + height: 15px; + border-radius: 50%; + font-style: normal; + font-weight: 700; + font-size: 9px; + line-height: 11px; + color: $white-500; + background: $blue-500; + } + } + + &__drawer { + height: 475px; + max-height: 200px; + opacity: 0; + position: absolute; + right: 0px; + top: 80px; + transition: all 0.3s ease-in-out; + visibility: hidden; + width: 375px; + z-index: 16; + + @include mq(md, max) { + bottom: 0; + height: 100%; + left: 0; + position: fixed; + top: 0; + } } } @@ -380,7 +425,7 @@ } .finish-order { - background-color: #2fab61; + background-color: $black-500; color: #fff; display: block; font-weight: 700; @@ -392,12 +437,18 @@ width: 100%; &:hover { - background-color: lighten(#2fab61, 2.5); + background-color: lighten($black-500, 2.5); } &:active { - background-color: darken(#2fab61, 10); + background-color: darken($black-500, 10); } } } + + &.have-item { + .totals-container { + display: block; + } + } } diff --git a/src/arquivos/sass/partials/_header.scss b/src/arquivos/sass/partials/_header.scss index be1eb65..1a4823e 100644 --- a/src/arquivos/sass/partials/_header.scss +++ b/src/arquivos/sass/partials/_header.scss @@ -67,45 +67,6 @@ } } } - - &__minicart-button { - position: relative; - padding: 0; - border: 0; - outline: 0; - background: transparent; - .portal-totalizers-ref { - .title, - .amount-products, - .amount-items strong, - .amount-kits, - .total-cart { - display: none; - } - } - - .cart-info { - margin: 0; - } - - .amount-items-em { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 4px; - right: -4px; - width: 15px; - height: 15px; - border-radius: 50%; - font-style: normal; - font-weight: 700; - font-size: 9px; - line-height: 11px; - color: $white-500; - background: $blue-500; - } - } } &__search-box { diff --git a/src/template-pagina/sub-templates/filipequintanilha-header.html b/src/template-pagina/sub-templates/filipequintanilha-header.html index 39b1318..26a49eb 100644 --- a/src/template-pagina/sub-templates/filipequintanilha-header.html +++ b/src/template-pagina/sub-templates/filipequintanilha-header.html @@ -24,10 +24,15 @@ - +
+ + +
+
+