From 13eacc2411cdc67c21b4a03bf4a66de0fc69c35b Mon Sep 17 00:00:00 2001
From: Eleonora Otz <nora_otz@hotmail.com>
Date: Sat, 17 Dec 2022 15:16:57 -0300
Subject: [PATCH] feat: Estiliza footer mobile e telas 4k

---
 checkout/src/arquivos/js/components/Footer.js |  1 -
 .../src/arquivos/sass/checkout/_checkout.scss |  9 +-
 .../src/arquivos/sass/partials/_footer.scss   | 91 +++++++++++++++----
 3 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 8bdad03..6740e1d 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -131,5 +131,4 @@ export default class Footer {
     </li>
       `;
   }
-
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 825f722..cc033dd 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -14,8 +14,13 @@ html {
 
 footer .footerCheckout__wrapper {
 
-    width: 94.9734%;
+    // width: 94.9734%;
+    width: 100%;
     margin: auto auto 0 auto;
+
+    @media (max-width: 1023px) {
+        // width: 91.2%;
+    }
 }
 
 footer .footerCheckout__wrapper .container {
@@ -36,7 +41,7 @@ footer .footerCheckout__prateleira,
 
     @media (max-width: 1024px) {
         width: 91.47%;
-        
+
     }
 }
 
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 8fcaf0b..e4156a8 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -6,8 +6,21 @@
     .container {
         width: 100%;
         border-top: 1px solid $black-500;
+
+        @media (max-width: 1024px) {
+            // display: grid;
+            flex-direction: column;
+            align-items: flex-start !important;
+            // gap: 16px;
+        }
     }
 
+    // @media (max-width: 1024px) {
+    //     .container :nth-child(1) { order: 2; }
+    //     .container :nth-child(2) { order: 1; }
+    //     .container :nth-child(3) { order: 3; }
+    // }
+
     &__prateleira {
         width: 1016px;
         margin: 0 132px 56px !important;
@@ -102,9 +115,15 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
+        position: relative;
 
         @media (max-width: 1024px) {
-            display: none;
+            // display: none;
+        }
+
+        .container {
+            border-top: 1px solid #000;
+            position: absolute;
         }
     }
 
@@ -119,9 +138,19 @@
         max-width: 40%;
 
         @include mq(md, max) {
-            margin-bottom: 24px;
+            // margin-bottom: 24px;
             max-width: 100%;
         }
+
+        @media (min-width: 2500px) {
+            font-size: 20px;
+            line-height: 27px;
+        }
+
+        @media (max-width: 1024px) {
+            order: 2;
+            margin: 0 0 16px 16px;
+        }
     }
 
     &__stamps {
@@ -131,24 +160,31 @@
         display: flex;
         justify-self: center;
         list-style: none;
+        gap: 13px;
+
+        @media (min-width: 2500px) {
+            width: 27.6%;
+            margin-top: 13px;
+        }
+
+        @media (max-width: 1024px) {
+            width: 33.44%;
+            margin: 22px 0 40px 16px;
+        }
+
+        @media (max-width: 345px) {
+            order: 1;
+            width: 100%;
+            gap: 4px;
+            margin: 23px 0;
+            width: 91.2%;
+        }
 
-        // li .vtex-pci {
-        //     &::before {
-        //         display: block;
-        //         content: "";
-        //         height: 24px;
-        //         width: 1px;
-        //         color: $gray-400;
-        //     }
 
-        //     width: 81.62%
-        //     img {
-        //     }
-        // }
 
         @include mq(md, max) {
             align-self: center;
-            margin-bottom: 12px;
+            // margin-bottom: 12px;
         }
 
         &__divider {
@@ -156,8 +192,12 @@
             background-color: $gray-400;
             display: inline-block;
             height: 24px;
-            margin: 0 8px;
+            // margin: 0 8px;
             width: 1px;
+
+            @media (min-width: 2500px) {
+                height: 42px;
+            }
         }
     }
 
@@ -168,16 +208,30 @@
         color: $black-400;
         margin: 27px 0 22px;
 
+        @media (max-width: 1024px) {
+            order: 3;
+            margin: 0;
+            margin: 0 0 19px 16px;
+        }
+
         div {
             display: flex;
         }
 
         .vtex-logo {
             width: 44.92px;
+
+            @media (min-width: 2500px) {
+                width: 87.73px;
+            }
         }
 
         .m3-logo {
             width: 28.66px;
+
+            @media (min-width: 2500px) {
+                width: 55.98px;
+            }
         }
 
         li .by-vtex {
@@ -207,6 +261,11 @@
                 font-size: 10px;
                 line-height: 14px;
                 // margin-right: 8px;
+
+                @media (min-width: 2500px) {
+                    font-size: 18px;
+                    line-height: 25px;
+                }
             }
         }
     }