From 5126731d403144e4e240125731bb06083358d39a Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Sat, 10 Dec 2022 19:04:56 -0300
Subject: [PATCH] feat(_header.scss): add estilo de 2500px no header

---
 .../src/arquivos/sass/partials/_header.scss   | 45 +++++++++++++++++--
 .../src/arquivos/sass/utils/_variaveis.scss   |  4 ++
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 5ef4ad5..2049899 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css2?family=Tenor+Sans&display=swap");
-
 /* _header.scss */
 .headerCheckout {
     border-bottom: 1px solid #000000;
@@ -21,6 +19,9 @@
             img {
                 height: 37.14px;
                 width: auto;
+                @media (min-width: $checkout2500px){
+                    height: 91.2px;
+                }
             }
         }
     }
@@ -29,9 +30,16 @@
         display: flex;
         width: 119px;
         justify-content: space-between;
+        @media (min-width: $checkout2500px){
+            width: 235.28px;
+        }
         img {
             width: 12px;
             height: 15px;
+            @media (min-width: $checkout2500px){
+                width: 29.47px;
+                height: 41.46px;
+            }
         }
         span {
             align-items: center;
@@ -44,6 +52,10 @@
             line-height: 16px;
             font-weight: 400;
             color: $color-gray;
+            @media (min-width: $checkout2500px){
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
         i {
@@ -56,6 +68,9 @@
 .progress-bar {
     font-family: "Tenor Sans", sans-serif;
     width: 439px;
+    @media (min-width: $checkout2500px){
+        width: 1078px;
+    }
     ul {
         list-style-type: none;
         display: flex;
@@ -72,6 +87,11 @@
             line-height: 14px;
             color: #000000;
             width: 39.9103%;
+            @media (min-width: $checkout2500px){
+                font-size: 24px;
+                line-height: 28px;
+                width: 120%;
+            }
             .containerLi {
                 &__first {
                     width: 100%;
@@ -101,16 +121,19 @@
                         justify-content: center;
                         p {
                             margin-bottom: 9px;
+                            @media (min-width: $checkout2500px){
+                                margin-bottom: 15px;
+                            }
                         }
 
                         .progress-bar-text {
                             white-space: nowrap;
                         }
 
-                        .progress-bar-circle-1{
+                        .progress-bar-circle-1 {
                             transform: translateX(-2px);
                         }
-                        .progress-bar-circle-3{
+                        .progress-bar-circle-3 {
                             transform: translateX(-5px);
                         }
 
@@ -122,6 +145,10 @@
                             border: 1px solid #000000;
                             border-radius: 50%;
                             margin-bottom: 0px;
+                            @media (min-width: $checkout2500px){
+                                width: 20px;
+                                height: 20px;
+                            }
                         }
 
                         .active {
@@ -130,14 +157,24 @@
                             border: none;
                             border-radius: 50%;
                             background-color: #000;
+                            @media (min-width: $checkout2500px){
+                                width: 22px;
+                                height: 22px;
+                            }
                         }
 
                         .progress-bar-line-1 {
                             left: 25%;
+                            @media (min-width: $checkout2500px){
+                                left: 18.9%;
+                            }
                         }
 
                         .progress-bar-line-3 {
                             right: 25%;
+                            @media (min-width: $checkout2500px){
+                                right: 18%;
+                            }
                         }
 
                         .progress-bar-line-1,
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index de25a0e..a4020f4 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -36,3 +36,7 @@ $z-index: (
 	level4: 20,
 	level5: 25
 ) !default;
+
+
+/* media querie 2500 */
+$checkout2500px: (2500px);