From 849c7c249f94fce22f6fddf9b3fef66e81a9e494 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Mon, 12 Dec 2022 11:18:44 -0300
Subject: [PATCH] feat: Adiciona css do header criando barra de progresso

---
 .../src/arquivos/sass/partials/_header.scss   | 86 +++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 93650de..533b594 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -3,6 +3,92 @@
     padding-top: 29px;
     .container {
         width: auto !important;
+        #progressBar{
+            width: 446px;
+            ul{
+                list-style-type: none;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                margin: 0 !important;
+            }
+            li .containerLi{
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: flex-start;
+                justify-content: center;
+                position: relative;
+            }
+            li.central .containerLi{
+                align-items: center;
+                margin-left: 7px;
+            }
+            li:last-child .containerLi{
+                align-items: flex-end;
+            }
+            li .containerLi div{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+            }
+            li{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                font-family: "Tenor Sans", sans-serif;
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 28px;
+                color: #000;
+                width: 39.9183%;
+                @media (min-width: 2500px){
+                    font-size: 24px;
+                }
+            }
+                li.central{
+                    width: auto;
+                }
+                li #progress-bar-circle-1,
+                li #progress-bar-circle-2,
+                li #progress-bar-circle-3{
+                    width: 12px;
+                    height: 12px;
+                    border: 1px solid #000000;
+                    border-radius: 50%;
+                    @media (min-width: 2500px){
+                        width: 24px;
+                        height: 24px;
+                    }
+                }
+                li #progress-bar-circle-1.active,
+                li #progress-bar-circle-2.active,
+                li #progress-bar-circle-3.active{
+                    border: none;
+                    background-color: #000000;
+                }
+                li .progress-bar-line-1{
+                    display: flex;
+                    position: absolute;
+                    left: 25%;
+                    transform: translateY(-50%);
+                    bottom: 5px;
+                    width: 100%;
+                    height: 1px;
+                    border-top: 1px solid #000000;
+                }
+                li .progress-bar-line-2{
+                    position: absolute;
+                    right: 21%;
+                    transform: translateY(-50%);
+                    bottom: 5px;
+                    width: 100%;
+                    height: 1px;
+                    border-top: 1px solid #000000;
+                }
+        }
     }
     &__wrapper {
         align-items: center;