From c718163907c86993a80f895b0d6e15360692e49d Mon Sep 17 00:00:00 2001
From: ueberjames <ueberjames@gmail.com>
Date: Mon, 12 Dec 2022 12:28:28 -0300
Subject: [PATCH] =?UTF-8?q?cria=C3=A7ao=20da=20css=20da=20barra=20de=20pro?=
 =?UTF-8?q?gresso?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/arquivos/js/components/CheckoutUI.js  |   2 +
 .../sass/checkout/_checkout-vazio.scss        |   3 +
 .../src/arquivos/sass/checkout/_checkout.scss |   1 +
 .../src/arquivos/sass/partials/_header.scss   | 106 ++++++++++++++++++
 .../src/arquivos/sass/utils/_variaveis.scss   |   1 +
 package-lock.json                             |   2 +
 6 files changed, 115 insertions(+)

diff --git a/checkout/src/arquivos/js/components/CheckoutUI.js b/checkout/src/arquivos/js/components/CheckoutUI.js
index f68f3b2..53e754c 100644
--- a/checkout/src/arquivos/js/components/CheckoutUI.js
+++ b/checkout/src/arquivos/js/components/CheckoutUI.js
@@ -32,6 +32,7 @@ export default class CheckoutUI {
     toggleFooterDropdown(event) {
         event.target.classList.toggle("closed");
 
+        // eslint-disable-next-line prettier/prettier
         event.target.nextElementSibling.classList.toggle(
             "dropdown__content--closed"
         );
@@ -56,6 +57,7 @@ export default class CheckoutUI {
     resizeImages() {
         $(".product-image img").each((i, el) => {
             const $el = $(el);
+            // eslint-disable-next-line prettier/prettier
             $el.attr(
                 "src",
                 alterarTamanhoImagemSrcVtex(
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 08f74e9..eca57bb 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -36,3 +36,6 @@
 		}
 	}
 }
+
+
+
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5fb011f..a03d2fa 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -124,3 +124,4 @@ body {
         }
     }
 }
+
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 8b44777..36ff011 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -2,6 +2,112 @@
 .headerCheckout {
     .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: $color-liPonto;
+                @media (min-width: 2500) {
+                    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 solide $color-liPonto;
+                border-radius: 50%;
+                @media (min-width: 2500) {
+                    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: $color-liPonto;
+            }
+
+            li .progress-bar-line-1{
+                position: absolute;
+                left: 25%;
+                transform: translateY(-50%);
+                bottom: 5px;
+                width: 100%;
+                height: 1px;
+                border-top: 1px solid $color-liPonto;
+            }
+
+            li .progress-bar-line-2{
+                position: absolute;
+                left: 21%;
+                transform: translateY(-50%);
+                bottom: 5px;
+                width: 100%;
+                height: 1px;
+                border-top: 1px solid $color-liPonto;
+            }
+
+
+        }
+
+
+
+
+
+
     }
     &__wrapper {
         align-items: center;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index f000abe..b7b821c 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -6,6 +6,7 @@ $font-family-secundary:"Tenor Sans", sans-serif;
 
 /* Colors */
 $color-black: #292929;
+$color-liPonto: #000000;
 
 $color-white: #fff;
 
diff --git a/package-lock.json b/package-lock.json
index 3be68c7..4024f93 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,7 @@
                 "jquery": "^3.6.0",
                 "m3-utils": "^0.1.0",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4"
             },
             "devDependencies": {
@@ -19345,6 +19346,7 @@
                 "m3-utils": "^0.1.0",
                 "prettier": "^2.3.2",
                 "sass": "^1.38.1",
+                "slick-carousel": "^1.8.1",
                 "terser-webpack-plugin": "^5.1.4",
                 "webpack": "^5.51.1",
                 "webpack-merge": "^5.8.0"