Merge pull request 'development' (#2) from development into main

Reviewed-on: #2

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

@@ -7,41 +7,38 @@ 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">
-                    <div class="progress-bar__stage-wrapper">
                     <li class="progress-bar__stage">
                             <p class="progress-bar__stage--text">Meu carrinho</p>
                             <div class="progress-bar__stage--circle" id="progress-bar__cart"></div>
                     </li>
-                    </div>
 
-                    <div class="progress-bar__stage-wrapper">
                     <li class="progress-bar__stage">
                             <p class="progress-bar__stage--text">Dados Pessoais</p>
                             <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>
-
                 </ul>
             `
         }
@@ -55,6 +52,8 @@ 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,7 +16,8 @@ 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,15 +1,17 @@
 /* _header.scss */
 .headerCheckout {
+    // position: relative;
     margin: 0;
-    padding: 29px 131px;
+    padding: 30px 131px;
+    width: 100%;
     border-bottom: 1px solid $black-500;
 
     @include mq(xl, min) {
-        padding: 29px 256px;
+        padding: 30px 256px;
     }
 
     @include mq(lg, max) {
-        padding: 16px;
+        padding: 16px 16px;
     }
 
     .container {
@@ -17,14 +19,15 @@
     }
 
     &__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.22% 1fr;
+            grid-template-columns: 1fr 54.27% 1fr;
         }
 
         @include mq(lg, max) {
@@ -35,101 +38,41 @@
 
     &__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: 33px;
-            }
-
-            @include mq(xs, max) {
-                width: 114px;
-                height: auto;
+                height: 32.12px;
             }
         }
     }
 
     .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-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 {
+            position: relative;
             display: flex;
             flex-direction: column;
             align-items: center;
@@ -146,7 +89,6 @@
                 color: $black-500;
 
                 @include mq(xl, min) {
-                    margin-bottom: 15px;
                     line-height: 28px;
                     font-size: 24px;
                 }
@@ -167,6 +109,29 @@
                     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: 375px,
+	xs: 0,
 	cstm: 400,
 	sm: 576px,
 	md: 768px,