From 0e938f19607dd2c11efd78bdd639ebfa84c10631 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Fri, 16 Dec 2022 20:13:08 -0300
Subject: [PATCH] style(Slick): adaptando para as telas 1280px,2500px, 1024px e
 375px

---
 checkout/src/arquivos/js/components/Footer.js | 17 +++++
 .../src/arquivos/sass/checkout/_checkout.scss |  6 ++
 .../src/arquivos/sass/partials/_footer.scss   | 67 +++++++++++++++++--
 .../src/arquivos/sass/partials/_header.scss   |  4 ++
 4 files changed, 87 insertions(+), 7 deletions(-)

diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 8f22688..abdfa69 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -73,6 +73,23 @@ export default class Footer {
         $(elemento).slick({
             slidesToShow: 4,
             slidesToScroll: 1,
+            arrows: true,
+            responsive: [
+                {
+                  breakpoint: 1025,
+                  settings: {
+                    slidesToShow: 3,
+                    slidesToShow: 3
+                  }
+                },
+                {
+                  breakpoint: 377,
+                  settings: {
+                    slidesToShow: 2,
+                    slidesToShow: 2
+                  }
+                }
+              ]
         });
     }
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 2be48fc..d9d8136 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -16,6 +16,12 @@ footer .footerCheckout__prateleira,
 header {
     width: 79.53125%;
     margin: 0 auto;
+    @media (max-width: $checkout1024px) {
+        width: 96.77734%;
+    }
+    @media (max-width: $checkout375px) {
+        width: 91.73333%;
+    }
 }
 
 body {
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 0d3060f..7a31209 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -17,6 +17,10 @@
             text-align: center;
             color: $color-black2;
             margin-bottom: 20px;
+            @media (min-width: $checkout2500px) {
+                font-size: 48px;
+                line-height: 76px;
+            }
         }
         & .footerCheckout__plateleira__list {
             margin: 0 0 56px 0;
@@ -30,11 +34,32 @@
                     display: flex !important;
                     flex-direction: column;
                     justify-content: space-between;
-                    width: 242px !important;
                     height: 390px;
                     row-gap: 20px;
+                    @media (min-width: $checkout2500px) {
+                        width: 485.07px !important;
+                        height: 685px;
+                    }
+                    @media (max-width: $checkout1024px) {
+                        width: 320px !important;
+                        height: 468px;
+                    }
+                    @media (max-width: $checkout375px) {
+                        width: 164px !important;
+                        height: 363px;
+                    }
                     &__product__img {
                         height: 242px;
+                        @media (min-width: $checkout2500px) {
+                            height: 485.07px;
+                        }
+                        @media (max-width: $checkout1024px) {
+                            height: 320px;
+                        }
+                        @media (max-width: $checkout375px) {
+                            width: 164px;
+                            height: 164px;
+                        }
                     }
 
                     &__product__name {
@@ -46,6 +71,10 @@
                         color: $color-black2;
                         margin: 0;
                         width: auto;
+                        @media (min-width: $checkout2500px) {
+                            font-size: 26px;
+                            line-height: 35px;
+                        }
                     }
 
                     &__product__sizes {
@@ -56,6 +85,9 @@
                         height: 28px;
                         column-gap: 5px;
                         margin: 0;
+                        @media (max-width: $checkout375px) {
+                            flex-wrap: wrap;
+                        }
                         & li {
                             list-style: none;
                             background: $color-blue2;
@@ -72,6 +104,10 @@
                             text-transform: uppercase;
                             color: $color-white;
                             white-space: nowrap;
+                            @media (min-width: $checkout2500px) {
+                                font-size: 26px;
+                                line-height: 35px;
+                            }
                         }
                     }
 
@@ -87,6 +123,11 @@
                         letter-spacing: 0.05em;
                         text-transform: uppercase;
                         color: $color-white;
+                        @media (min-width: $checkout2500px) {
+                            height: 59px;
+                            font-size: 26px;
+                            line-height: 35px;
+                        }
                     }
                 }
             }
@@ -107,6 +148,11 @@
         background-size: 13px 29.47px !important;
         width: 13px;
         height: 29.47px;
+        @media (min-width: $checkout2500px) {
+            background-size: 26px 58px !important;
+            width: 26px;
+            height: 58px;
+        }
     }
 
     .slick-next {
@@ -115,6 +161,11 @@
         background-size: 13px 29.47px !important;
         width: 13px;
         height: 29.47px;
+        @media (min-width: $checkout2500px) {
+            background-size: 26px 58px !important;
+            width: 26px;
+            height: 58px;
+        }
     }
 
     .slick-track {
@@ -132,7 +183,7 @@
         border-top: 1px solid $color-black2;
         padding: 16px 0;
         width: 100%;
-        @media (max-width: $checkout1024px){
+        @media (max-width: $checkout1024px) {
             padding: 22px 0 16px;
         }
         & .container {
@@ -140,10 +191,10 @@
             justify-content: space-between;
             align-items: center;
             width: 94.9734%;
-            @media (max-width: $checkout1024px){
+            @media (max-width: $checkout1024px) {
                 width: 98.42%;
             }
-            @media (max-width: $checkout375px),(max-width: $checkout1024px) {
+            @media (max-width: $checkout375px), (max-width: $checkout1024px) {
                 flex-direction: column;
                 align-items: flex-start;
             }
@@ -162,7 +213,7 @@
                 text-transform: capitalize;
                 color: #292929;
                 max-width: 40%;
-                @media (max-width: $checkout375px),(max-width: $checkout1024px) {
+                @media (max-width: $checkout375px), (max-width: $checkout1024px) {
                     order: 2;
                     margin-top: 16px;
                     margin-left: 16px;
@@ -185,7 +236,7 @@
                 display: flex;
                 justify-self: center;
                 margin: 0;
-                @media (max-width: $checkout375px),(max-width: $checkout1024px) {
+                @media (max-width: $checkout375px), (max-width: $checkout1024px) {
                     order: 1;
                     margin-left: 8px;
                 }
@@ -304,7 +355,7 @@
                 justify-content: flex-end;
                 // width: 33%;
                 gap: 10.73px;
-                @media (max-width: $checkout375px),(max-width: $checkout1024px) {
+                @media (max-width: $checkout375px), (max-width: $checkout1024px) {
                     order: 3;
                     margin-top: 16px;
                 }
@@ -391,3 +442,5 @@
         }
     }
 }
+
+// slick
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 7279535..8caa89f 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -12,6 +12,9 @@
         @media (max-width: $checkout1024px){
             margin: 0 16px;
         }
+        @media (min-width: $checkout2500px){
+            margin: 0 256px;
+        }
     }
     &__wrapper {
         align-items: center;
@@ -241,3 +244,4 @@
         }
     }
 }
+