Merge branch 'feature/header' into development

checkout/src/arquivos/js/components/Header.js

@@ -7,38 +7,41 @@ export default class Header {
     }
 
     async init() {
-        console.log("entrou no init do header")
         await this.selectors();
         await this.progressBarStructure();
         await this.progressBarMove();
     }
 
     async selectors() {
-        // this.header = await waitElement(".headerCheckout");
         this.progressBar = await waitElement("#progressBar");
-        console.log("progressBar await element")
     }
 
     async progressBarStructure() {
         if (this.progressBar && window.innerWidth > 1024) {
-            console.log("entrou no if do progressBarStructure")
 
             this.progressBar.innerHTML = `
                 <ul class="progress-bar__container">
-                    <li class="progress-bar__stage">
+                    <div class="progress-bar__stage-wrapper">
-                            <p class="progress-bar__stage--text">Meu carrinho</p>
+                        <li class="progress-bar__stage">
-                            <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
+                                <p class="progress-bar__stage--text">Meu carrinho</p>
-                    </li>
+                                <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
+                        </li>
+                    </div>
 
-                    <li class="progress-bar__stage">
+                    <div class="progress-bar__stage-wrapper">
-                            <p class="progress-bar__stage--text">Dados Pessoais</p>
+                        <li class="progress-bar__stage">
-                            <div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
+                                <p class="progress-bar__stage--text">Dados Pessoais</p>
-                    </li>
+                                <div class="progress-bar__stage--circle" id="progress-bar__personal-data"></div>
+                        </li>
+                    </div>
+
+                    <div class="progress-bar__stage-wrapper">
+                        <li class="progress-bar__stage">
+                                <p class="progress-bar__stage--text">Pagamento</p>
+                                <div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
+                        </li>
+                </div>
 
-                    <li class="progress-bar__stage">
-                            <p class="progress-bar__stage--text">Pagamento</p>
-                            <div class="progress-bar__stage--circle" id="progress-bar__payment"></div>
-                    </li>
                 </ul>
             `
         }
@@ -52,8 +55,6 @@ export default class Header {
 
         if (this.progressBar && window.innerWidth > 1024) {
 
-            console.log("entrou no if do progressBarMove")
-
             const progressBarStages = document.querySelectorAll(".progress-bar__stage");
 
             progressBarStages.forEach((stage) => {

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -16,8 +16,7 @@ footer .footerCheckout__wrapper {
     width: 100%;
     // margin: auto auto 0 auto;
 }
-footer .footerCheckout__prateleira,
+footer .footerCheckout__prateleira {
-header {
     width: 79.53125%;
     margin: 0 auto;
 }

checkout/src/arquivos/sass/partials/_header.scss

@@ -1,17 +1,15 @@
 /* _header.scss */
 .headerCheckout {
-    // position: relative;
     margin: 0;
-    padding: 30px 131px;
+    padding: 29px 131px;
-    width: 100%;
     border-bottom: 1px solid $black-500;
 
     @include mq(xl, min) {
-        padding: 30px 256px;
+        padding: 29px 256px;
     }
 
     @include mq(lg, max) {
-        padding: 16px 16px;
+        padding: 16px;
     }
 
     .container {
@@ -19,15 +17,14 @@
     }
 
     &__wrapper {
+        width: 100%;
         display: grid;
         grid-template-columns: 1fr 43.22% 1fr;
-        //repeat(3, 1fr);
-        // display: flex;
-        // justify-content: space-between;
         align-items: center;
+        justify-content: center;
 
         @include mq(xl, min) {
-            grid-template-columns: 1fr 54.27% 1fr;
+            grid-template-columns: 1fr 54.22% 1fr;
         }
 
         @include mq(lg, max) {
@@ -38,42 +35,102 @@
 
     &__logo {
         img {
+            width: 155.58px;
             height: 37.14px;
-            width: auto;
 
             @include mq(xl, min) {
+                width: 382.07px;
                 height: 91.2px;
             }
 
             @include mq(lg, max) {
-                height: 32.12px;
+                height: 33px;
+            }
+
+            @include mq(xs, max) {
+                width: 114px;
+                height: auto;
             }
         }
     }
 
     .progress-bar {
-        // position: absolute;
-        // top: 50%;
-        // left: 50%;
-        // transform: translate(-50%, -50%);
-        // width: 43.22%; //440px;
 
         &__container {
-            // position:relative;
-
             margin: 0;
             width: 100%;
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            // display: flex;
-            // align-items: center;
-            // justify-content: space-between;
             list-style: none;
         }
 
-        &__stage {
+        &__stage-wrapper {
             position: relative;
             display: flex;
+
+            &::before,
+            &::after {
+                content: "";
+                position: absolute;
+                bottom: 6.5px;
+                height: 1px;
+                background: $black-500;
+
+                @include mq(xl, min) {
+                    bottom: 12.5px;
+                }
+            }
+
+            &:nth-child(1) {
+                justify-content: flex-start;
+
+                &::after{
+                    width: calc(100% - 45.23px);//68.81%;
+                    right: 0;
+
+                    @include mq(xl, min) {
+                        width: calc(100% - 89.965px);//77.63%;
+                    }
+                }
+            };
+
+            &:nth-child(2) {
+                justify-content: center;
+
+                &::before,
+                &::after {
+                    width: calc(50% - 7px);
+
+                    @include mq(xl, min) {
+                        width: calc(50% - 13px);
+                    }
+                }
+
+                &::before {
+                    left: 0;
+                }
+
+                &::after{
+                    right: 0;
+                }
+            };
+
+            &:nth-child(3) {
+                justify-content: flex-end;
+
+                &::before{
+                    width: calc(100% - 38.315px);//73.54%;
+                    left: 0;
+
+                    @include mq(xl, min) {
+                        width: calc(100% - 76.125px); //81.05%;
+                    }
+                }
+            };
+        };
+
+        &__stage {
+            display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
@@ -89,6 +146,7 @@
                 color: $black-500;
 
                 @include mq(xl, min) {
+                    margin-bottom: 15px;
                     line-height: 28px;
                     font-size: 24px;
                 }
@@ -109,29 +167,6 @@
                     height: 24px;
                 }
             }
-
-            &::before,
-            &::after {
-                content: '';
-                position: absolute;
-                bottom: 6.5px;
-                width: calc(50% - 7px);
-                height: 1px;
-                background: $black-500;
-            }
-
-            &::before {
-                left: 0;
-            }
-
-            &::after{
-                left: calc(50% + 7px);
-            }
-
-            &:first-child::before,
-            &:last-child::after {
-                display: none;
-            }
         }
     }
 

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -30,7 +30,7 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+	xs: 375px,
 	cstm: 400,
 	sm: 576px,
 	md: 768px,