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

@@ -8,14 +8,58 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        this.progressBarDesktop();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        this.progressBar = await waitElement("#progressBar");
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+        // this.item = await waitElement("#my-element", {
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        //     //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
-        });
+        //     timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+        //     interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        // });
+    }
+
+    progressBarDesktop() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+        <ul>
+            <li>
+                <div class="containerList">
+                    <div class="containerList__div">
+                        <p class="containerList__text">Meu carrinho</p>
+                        <p class="containerList__circle"></p>
+                        <p class="containerList__line"></p>
+                    </div>
+                </div>
+            </li>
+
+            <li class="liMeio">
+            <div class="containerList">
+                  <div class="containerList__div">
+                    <p class="containerList__text">Dados Pessoais</p>
+                    <p class="containerList__circle"></p>
+
+                 </div>
+            </div>
+            </li>
+
+            <li>
+            <div class="containerList" >
+                 <div class="containerList__div">
+                    <p class="containerList__text">Pagamento </p>
+                    <p class="containerList__circle"> </p>
+                    <p class="containerList__line2"> </p>
+                  <div/>
+            </div>
+            </li>
+
+        </ul>
+        `;
+        }
+        if (this.progressBar && window.innerWidth < 1024) {
+            this.progressBar.innerHTML = ``;
+        }
     }
 }

checkout/src/arquivos/sass/checkout.scss

@@ -3,3 +3,4 @@
 @import "./partials/header";
 @import "./partials/footer";
 @import "./checkout/checkout.scss";
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Tenor+Sans&display=swap");

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

@@ -1,22 +1,30 @@
 /* _header.scss */
 .headerCheckout {
+    max-width: 100%;
+    width: 100%;
+    border-bottom: 1px solid $color-black;
     .container {
-        width: auto !important;
+        width: 80% !important;
+        padding: 29px 0;
     }
     &__wrapper {
-        align-items: center;
         display: flex;
+        align-items: center;
         justify-content: space-between;
     }
 
     &__logo {
         img {
-            height: 52px;
+            height: 37px;
             width: auto;
         }
     }
 
     &__safeBuy {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
         span {
             align-items: center;
             display: flex;
@@ -25,12 +33,94 @@
             font-style: normal;
             font-weight: normal;
             font-size: 12px;
-            line-height: 14px;
+            line-height: 16px;
             color: $color-gray;
         }
 
-        i {
+        img {
+            width: 12px;
+            height: 15px;
             margin-right: 8px;
         }
     }
+    #progressBar {
+        width: 43%;
+
+        ul {
+            display: flex;
+            margin: 0;
+            list-style: none;
+            justify-content: space-between;
+        }
+
+        li {
+            display: flex;
+            justify-content: center;
+            flex-direction: column;
+            align-items: center;
+            font-family: "Tenor Sans", sans-serif;
+            font-weight: 400;
+            font-size: 12px;
+            line-height: 14px;
+            width: 35%;
+
+            .containerList {
+                display: flex;
+                position: relative;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                width: 100%;
+
+                &__div {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                }
+
+                &__circle {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    border-radius: 50%;
+                    height: 12px;
+                    width: 12px;
+                    background-color: $color-white;
+                    border: 1px solid $color-black;
+                    z-index: map-get($z-index, level1);
+
+                    &.active {
+                        background-color: $color-black;
+                    }
+                }
+
+                &__line {
+                    position: absolute;
+                    left: 27%;
+                    width: calc(100% + 25px);
+                    bottom: 5px;
+                    transform: translateY(-50%);
+                    height: 1px;
+                    border-top: 1px solid $color-black;
+                }
+
+                &__line2 {
+                    position: absolute;
+                    right: 21%;
+                    width: calc(100% + 30px);
+                    bottom: 5px;
+                    transform: translateY(-50%);
+                    height: 1px;
+                    border-top: 1px solid $color-black;
+                }
+            }
+        }
+        li:last-child .containerList {
+            align-items: flex-end;
+        }
+        .liMeio {
+            width: 90px;
+        }
+    }
 }

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

@@ -2,10 +2,11 @@
 @import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");
 $font-family: "Open Sans", sans-serif;
-$font-family-secundary:"Tenor Sans", sans-serif;
+$font-family-secundary: "Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-black-500: #000;
 
 $color-white: #fff;
 
@@ -21,18 +22,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+    xs: 0,
-	cstm: 400,
+    cstm: 400,
-	sm: 576px,
+    sm: 576px,
-	md: 768px,
+    md: 768px,
-	lg: 992px,
+    lg: 992px,
-	xl: 1200px
+    xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+    level1: 5,
-	level2: 10,
+    level2: 10,
-	level3: 15,
+    level3: 15,
-	level4: 20,
+    level4: 20,
-	level5: 25
+    level5: 25,
 ) !default;