From 78a933a392908efd03c9cf3c6d00ab0f22760643 Mon Sep 17 00:00:00 2001
From: Gabriel Ferraz <gabrielferraznog@gmail.com>
Date: Mon, 12 Dec 2022 12:17:13 -0300
Subject: [PATCH] feat(header): header tamanhos maiores que 2500px

---
 checkout/src/arquivos/js/components/Header.js | 29 +++----
 .../src/arquivos/sass/partials/_header.scss   | 82 +++++++++++++++----
 .../src/arquivos/sass/utils/_variaveis.scss   |  1 +
 3 files changed, 83 insertions(+), 29 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js
index f19f6a9..06569f2 100644
--- a/checkout/src/arquivos/js/components/Header.js
+++ b/checkout/src/arquivos/js/components/Header.js
@@ -193,22 +193,23 @@ export default class Header {
                                     "progress-bar-circle-1"
                                 ].classList.remove("active");
                             }
+                        }
 
-                            if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                        if (li.children[0].children[0].children["progress-bar-circle-2"]) {
+                            console.log("teste 1");
+                            li.children[0].children[0].children[
+                                "progress-bar-circle-2"
+                            ].classList.add("active");
+                        }
+                        if (li.children[0].children[0].children["progress-bar-circle-3"]) {
+                            if (
                                 li.children[0].children[0].children[
-                                    "progress-bar-circle-2"
-                                ].classList.add("active");
-                            }
-                            if (li.children[0].children[0].children["progress-bar-circle-3"]) {
-                                if (
-                                    li.children[0].children[0].children[
-                                        "progress-bar-circle-3"
-                                    ].classList.contains("active")
-                                ) {
-                                    li.children[0].children[0].children[
-                                        "progress-bar-circle-3"
-                                    ].classList.remove("active");
-                                }
+                                    "progress-bar-circle-3"
+                                ].classList.contains("active")
+                            ) {
+                                li.children[0].children[0].children[
+                                    "progress-bar-circle-3"
+                                ].classList.remove("active");
                             }
                         }
                     } else if (window.location.hash == "#/payment") {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index d7de79c..4459302 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -4,20 +4,29 @@
     }
     &__wrapper {
         display: flex;
-        position: relative;
         align-items: center;
         justify-content: space-between;
         padding: 16px;
         border-bottom: 1px solid $black;
+
         @media (min-width: 1025px) {
             padding: 33.5px 130px;
         }
+
+        @media (min-width: 2500px) {
+            padding: 33.5px 256px;
+        }
     }
     .progress-bar {
-        position: absolute;
+        display: flex;
+        flex-direction: column;
         right: 31.5%;
         top: 33%;
 
+        @media (min-width: 2500px) {
+            right: 41%;
+        }
+
         .containerLi {
             display: flex;
             position: relative;
@@ -35,40 +44,60 @@
         }
 
         &-text {
-            font-family: "Tenor Sans";
+            font-family: $font-family-secundary;
             font-weight: 400;
             font-size: 12px;
             line-height: 14px;
+
+            @media (min-width: 2500px) {
+                font-size: 24px;
+                line-height: 28px;
+            }
         }
 
         &-line-1,
         &-line-2 {
             position: absolute;
-            width: 181px;
-            top: 199%;
-            left: 50%;
+            width: 169px;
+            top: 82%;
+            left: 55%;
             border: 1px solid $black;
+
+            @media (min-width: 2500px) {
+                width: 240px;
+                top: 79%;
+                left: 55%;
+            }
         }
 
         &-line-2 {
-            left: -240%;
+            width: 166px;
+            left: -223%;
+
+            @media (min-width: 2500px) {
+                width: 230px;
+                left: -143%;
+            }
         }
 
         &-circle-1,
         &-circle-2,
         &-circle-3 {
             display: flex;
-            position: absolute;
             height: 10px;
             width: 10px;
             align-self: center;
-            background-color: $white;
+            background: $white;
             border: 1px solid $black;
             border-radius: 50%;
             margin-left: 40%;
             margin-top: 9px;
             padding: 0;
-            z-index: map-get($z-index, level2);
+
+            @media (min-width: 2500px) {
+                height: 22px;
+                width: 22px;
+            }
         }
 
         .active {
@@ -78,18 +107,26 @@
 
     &__logo {
         width: 15.66%;
+
         @media (min-width: 1025px) {
             width: 15.28%;
+
+            img {
+                width: 100%;
+            }
+        }
+        @media (min-width: 2500px) {
+            width: 17.059%;
         }
     }
 
     &__safeBuy {
         display: flex;
+        position: relative;
 
         span {
-            display: flex;
-            width: 100%;
-            align-items: center;
+            min-width: fit-content;
+            height: 50%;
             text-transform: uppercase;
             font-family: $font-family;
             font-style: normal;
@@ -98,11 +135,26 @@
             line-height: 16px;
             color: $color-gray;
             margin-left: 8px;
+
+            @media (min-width: 2500px) {
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
         img {
-            width: 9.19%;
-            height: 13.3px;
+            position: absolute;
+            width: 11.25%;
+            top: -11%;
+            left: -11px;
+
+            @media (min-width: 2500px) {
+                width: 14.34%;
+                top: -15%;
+                left: -27px;
+            }
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 9d51f4c..8719d46 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -1,6 +1,7 @@
 /* fonts */
 @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;