diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index bb3d0b0..fb05e00 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -56,9 +56,7 @@ export default class Header { `; - } - - if(this.progressBar && window.innerWidth <= 1024) { + } else if(this.progressBar && window.innerWidth <= 1024) { this.progressBar.innerHTML = ""; } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index 2f0e98e..f5deba5 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -1,8 +1,17 @@ /* _header.scss */ .headerCheckout { .container { - width: 79.53125%; - padding: 29px 0; + width: 96.875%; + padding: 16px 0 !important; + + @include mq(xm, min) { + width: 79.53125%; + padding: 29px 0; + } + + @include mq(xp, max) { + width: 91.4666%; + } #progressBar { width: 440px; @@ -131,19 +140,30 @@ } &__wrapper { - display: grid; - grid-template-columns: 2fr 1fr 2fr; - align-items: center; + display: flex; + align-items: center; + justify-content: space-between; + + @include mq(xm, min) { + display: grid; + grid-template-columns: 2fr 1fr 2fr; + align-items: center; + } } &__logo { display: block; - width: 53.741%; + max-width: 155px; + width: 100%; @include mq(xg, min) { width: 382px; } + @include mq(xpp, max) { + min-width: 45.2%; + } + img { width: 100%; height: auto; @@ -155,6 +175,11 @@ align-items: center; justify-content: flex-end; gap: 8px; + min-width: 119px; + + @include mq(xm, min) { + width: 100%; + } span { align-items: center; diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss index 0dfa0b5..5738aa9 100644 --- a/checkout/src/arquivos/sass/utils/_variaveis.scss +++ b/checkout/src/arquivos/sass/utils/_variaveis.scss @@ -23,10 +23,13 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, - cstm: 400, + xpp: 376px, + cstm: 400px, sm: 576px, + xp: 599px, md: 768px, lg: 992px, + xm: 1025px, xl: 1200px, xg : 2500px ) !default;