From 17dd48ebb2d8a3cf9143e9b88e5785b051579f89 Mon Sep 17 00:00:00 2001
From: HenriqueSSan <hsstudentwork@gmail.com>
Date: Tue, 13 Dec 2022 20:24:12 -0300
Subject: [PATCH] feat(header): created initial styles for large,medium,small
 devices

---
 checkout/gulpfile.js                          |  3 +-
 .../src/arquivos/sass/checkout/_checkout.scss | 15 ---
 .../src/arquivos/sass/partials/_header.scss   | 97 ++++++++++++++++---
 .../template-checkout/checkout-header.html    | 60 +++++++++---
 package-lock.json                             |  2 +
 5 files changed, 131 insertions(+), 46 deletions(-)

diff --git a/checkout/gulpfile.js b/checkout/gulpfile.js
index ccb4ca1..25df93e 100644
--- a/checkout/gulpfile.js
+++ b/checkout/gulpfile.js
@@ -62,7 +62,8 @@ function styles() {
         )
         .pipe(
             autoprefixer({
-                cascade: false,
+                cascade: true,
+                add: true,
             })
         )
         .pipe(
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 1e35643..4539b76 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,21 +3,6 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
-html {
-    height: 100%;
-    min-height: 100%;
-}
-
-footer .footerCheckout__wrapper {
-    width: 94.9734%;
-    margin: auto auto 0 auto;
-}
-footer .footerCheckout__prateleira,
-header {
-    width: 79.53125%;
-    margin: 0 auto;
-}
-
 body {
     display: flex;
     flex-direction: column;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index b103a42..5bfb7b0 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -1,36 +1,103 @@
 /* _header.scss */
+@function fluid($width, $design-width) {
+    $width: calc($width / $design-width * 100);
+
+    $width: quote($width + "%");
+
+    @return unquote($width);
+}
+
 .headerCheckout {
+    padding: 16px;
+
     .container {
-        width: auto !important;
+        width: 100%;
+        height: auto;
     }
-    &__wrapper {
-        align-items: center;
+
+    &__wrapper,
+    &__safeBuy {
         display: flex;
+        align-items: center;
+    }
+
+    &__wrapper {
+        width: 100%;
         justify-content: space-between;
     }
 
-    &__logo {
+    &__safeBuy {
+        width: fluid(119px, 343px);
+        max-width: 119px;
+        gap: 8px;
+
         img {
-            height: 52px;
-            width: auto;
+            width: 12px;
+            height: 13px;
         }
     }
 
-    &__safeBuy {
+    &__logo {
+        width: fluid(155.58px, 343px);
+        max-width: 155.58px;
+        height: auto;
+
         span {
-            align-items: center;
             display: flex;
+            align-items: center;
+            font: normal normal 12px / 14px $font-family-100;
             text-transform: uppercase;
-            font-family: $font-family-100;
-            font-style: normal;
-            font-weight: normal;
-            font-size: 12px;
-            line-height: 14px;
             color: $clr-gray-500;
         }
 
-        i {
-            margin-right: 8px;
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    .progress-bar {
+        display: none;
+    }
+}
+
+.headerCheckout {
+    @media screen and (min-width: 1025px) {
+        padding: 29px 0;
+
+        &__wrapper {
+            width: fluid(992px, 1024px);
+            margin: 0 auto;
+        }
+
+        .progress-bar {
+            display: flex;
+        }
+    }
+
+    @media screen and (min-width: 1280px) {
+        &__wrapper {
+            width: fluid(1018px, 1280px);
+        }
+    }
+
+    @media screen and (min-width: 2500px) {
+        &__wrapper {
+            width: fluid(1988.28px, 2500px);
+        }
+
+        &__logo {
+            width: fluid(382.07px, 1988.28px);
+            max-width: none;
+            height: auto;
+
+            span {
+                display: flex;
+                align-items: center;
+                font: normal normal 24px / auto $font-family-100;
+                text-transform: uppercase;
+                color: $clr-gray-500;
+            }
         }
     }
 }
diff --git a/checkout/src/template-checkout/checkout-header.html b/checkout/src/template-checkout/checkout-header.html
index 258a0d6..581e55a 100644
--- a/checkout/src/template-checkout/checkout-header.html
+++ b/checkout/src/template-checkout/checkout-header.html
@@ -1,20 +1,50 @@
 <!-- Esse arquivo é só um demonstrativo de como está o html do header do checkout atualmente,
     MODIFICA-LO NÃO CAUSARÁ EFEITO ALGUM, todo html que for modificado no header, deverá ser feito através de javaScript. -->
 
-    <header class="headerCheckout">
-        <div class="container">
-            <div class="headerCheckout__wrapper">
-                <div class="headerCheckout__logo">
-                    <a href="/">
-                        <img src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png" alt="M3 Academy"/>
-                    </a>
-                </div>
-                <div id="progressBar" class="progress-bar">	Aqui entra a barra de progresso
-                </div>
-                <div class="headerCheckout__safeBuy">
-                      <img src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png" alt="Cadeado"/>
-                    <span>Compra segura</span>
-                </div>
+<header class="headerCheckout w-100 h-auto">
+    <div class="container w-100 h-auto">
+        <div class="headerCheckout__wrapper d-flex align-items-center jus-between">
+            <div class="headerCheckout__logo w-PERCENT">
+                <a class="w-100 h-100" href="/">
+                    <img
+                        class="w-100 h-100"
+                        src="https://agenciamagma.vteximg.com.br/arquivos/LogoM3Academy.png"
+                        alt="M3 Academy"
+                    />
+                </a>
+            </div>
+
+            <div id="progressBar  w-DEFINE-FIXED" class="progress-bar">
+                <ul class="progress-list w-100 pos-relative d-flex jus-between">
+                    <div class="bar pos-absolute">
+                        <div class="bar-fill"></div>
+                    </div>
+
+                    <li class="progress-item">
+                        <p class="progress-title"></p>
+                        <span class="progress-bullet pos-relative"></span>
+                    </li>
+
+                    <li class="progress-item">
+                        <p class="progress-title"></p>
+                        <span class="progress-bullet pos-relative"></span>
+                    </li>
+
+                    <li class="progress-item">
+                        <p class="progress-title"></p>
+                        <span class="progress-bullet pos-relative"></span>
+                    </li>
+                </ul>
+            </div>
+
+            <div class="headerCheckout__safeBuy w-PERCENT">
+                <img
+                    class="w-100 h-100"
+                    src="https://agenciamagma.vteximg.com.br/arquivos/cadeadoCompraSegM3Academy.png"
+                    alt="Cadeado"
+                />
+                <span class="fz-12">Compra segura</span>
             </div>
         </div>
-    </header>
+    </div>
+</header>
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"