From cffddb1ead50abc32af9450984e1f135072bbea0 Mon Sep 17 00:00:00 2001
From: Carlos Lins <carloslinsdev@gmail.com>
Date: Tue, 13 Dec 2022 19:16:25 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Vers=C3=A3o=20tablet/Mobile=201024=20fe?=
 =?UTF-8?q?ito=20para=20cart=20vazio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-vazio.scss        | 25 +++++++-
 .../src/arquivos/sass/checkout/_checkout.scss |  6 ++
 .../src/arquivos/sass/partials/_footer.scss   | 28 +++++++--
 .../src/arquivos/sass/partials/_header.scss   | 58 +++++++++++--------
 4 files changed, 85 insertions(+), 32 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 966f5c0..7f9c978 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -15,7 +15,7 @@
         margin: 0;
         line-height: 0;
         &::before {
-            content: "Seu carrinho está vazio";
+            content: "Seu carrinho está vazio.";
             font-family: "Open Sans";
             font-style: normal;
             font-weight: 700;
@@ -23,6 +23,13 @@
             line-height: 33px;
             text-transform: uppercase;
         }
+
+        @media (max-width: 1024px) {
+            &::before {
+                font-size: 18px;
+                line-height: 25px;
+            }
+        }
     }
 
     &-links {
@@ -33,10 +40,9 @@
             transition: ease-in 0.22s all;
             border-radius: 0;
             box-sizing: border-box;
-            width: 34.4936%;
             height: 48px;
             margin: 32px 0 0 0;
-            padding-top: 15px;
+            padding: 16px 64px;
             &::before {
                 content: "Continuar comprando";
                 font-family: "Tenor Sans";
@@ -52,6 +58,12 @@
             &:hover {
                 background: $color-white;
             }
+
+            @media (max-width: 1024px) {
+                width: max-content;
+                padding: 16px 26px;
+                margin-top: 22px;
+            }
         }
     }
 }
@@ -68,3 +80,10 @@
 .elementInvisible {
     display: none !important;
 }
+
+@media screen and (max-width: 1024px) {
+    .link-choose-products .link-choose-products {
+        padding: 16px 26px;
+        width: max-content;
+    }
+}
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 709b846..60d9f96 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -3,6 +3,12 @@
 @import "./checkout-pagamento";
 @import "./checkout-autenticacao";
 
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
 html {
     height: 100%;
     min-height: 100%;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index db214b1..148b854 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -20,6 +20,16 @@
             &::after {
                 display: none;
             }
+
+            @media (max-width: 1024px) {
+                display: grid;
+                grid-template-areas:
+                    "stamps"
+                    "address"
+                    "develop";
+                width: 100%;
+                gap: 16px;
+            }
         }
     }
 
@@ -33,9 +43,9 @@
         text-transform: capitalize;
         max-width: 40%;
 
-        @include mq(md, max) {
-            margin-bottom: 24px;
+        @media (max-width: 1024px) {
             max-width: 100%;
+            margin-left: 16px;
         }
     }
 
@@ -45,9 +55,9 @@
         justify-self: center;
         list-style: none;
 
-        @include mq(md, max) {
-            align-self: center;
-            margin-bottom: 12px;
+        @media (max-width: 1024px) {
+            grid-area: stamps;
+            margin: 0 0 0 8px;
         }
 
         &__divider {
@@ -108,6 +118,14 @@
             width: 28.66px;
             height: 15.65px;
         }
+
+        @media (max-width: 1024px) {
+            margin-left: 16px;
+
+            li:last-child {
+                margin-left: 11px;
+            }
+        }
     }
 
     &__prateleira {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index b2907e4..a336dce 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -37,30 +37,6 @@
                 // @media (min-width: 1140px) {
                 //     width: 82%;
                 // }
-
-                // @media (min-width: 1270px) {
-                //     width: 84%;
-                // }
-
-                // @media (min-width: 1440px) {
-                //     width: 87%;
-                // }
-
-                // @media (min-width: 1810px) {
-                //     width: 89%;
-                // }
-
-                // @media (min-width: 2160px) {
-                //     width: 91%;
-                // }
-
-                // @media (min-width: 2880px) {
-                //     width: 93%;
-                // }
-
-                // @media (min-width: 3510px) {
-                //     width: 95%;
-                // }
             }
             .ProgressBar-step {
                 list-style: none;
@@ -140,3 +116,37 @@
         }
     }
 }
+
+@media screen and (max-width: 1024px) {
+    .headerCheckout {
+        box-sizing: border-box;
+        .container {
+            width: 100%;
+            padding: 0 16px !important;
+            box-sizing: border-box;
+        }
+
+        .headerCheckout__safeBuy {
+            white-space: nowrap;
+            img {
+                width: 12px;
+                height: 13.33px;
+            }
+        }
+
+        &__wrapper {
+            padding: 16px 0;
+
+            #progressBar {
+                display: none;
+            }
+        }
+
+        &__logo {
+            width: 155.58px;
+            img {
+                width: 100%;
+            }
+        }
+    }
+}