feat(prateleira): adiciona responsividade da prateleira

checkout/src/arquivos/js/components/Footer.js

@@ -178,18 +178,17 @@ export default class Footer {
                     breakpoint: 1025,
                     settings: {
                         slidesToShow: 3,
-                        slidesToScroll: 3,
+                        slidesToScroll: 1,
                         infinite: true,
                     },
                 },
                 {
-                    breakpoint: 376,
+                    breakpoint: 600,
                     settings: {
                         slidesToShow: 2,
-                        slidesToScroll: 2,
+                        slidesToScroll: 1,
                     },
-                },
+                },]
-            ],
         });
     }
 }

checkout/src/arquivos/sass/lib/_slick.scss

@@ -42,7 +42,19 @@
 }
 
 .slick-list {
-    padding: 0 10px;
+    padding: 0 6px;
+
+    @include mq(xl, min) {
+        padding: 0;
+    }
+
+    @include mq(md, max) {
+        padding: 0;
+    }
+
+    @include mq(sm, max) {
+        padding: 0 8px;
+    }
 }
 
 .slick-track {
@@ -69,11 +81,13 @@
 
 .slick-slide {
     float: left;
-    min-height: 1px;
     outline: none;
+    height: 100%;
     margin-right: 16px;
-    width: 242px !important;
+
-    height: 390px;
+    @include mq_range(lg, xl) {
+        width: 242px !important;
+    }
 
     &:last-of-type {
         margin-right: 0;
@@ -116,7 +130,7 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    z-index: map-get($z-index, level-1);
+    z-index: map-get($z-index, level2);
     padding: 0;
     border: 0;
     outline: 0;
@@ -133,14 +147,19 @@
 }
 
 .slick-prev {
-    z-index: 4;
+    left: 10px;
-    left: 20px;
 
+    @include mq(xs, max) {
+        left: 3px;
+    }
 }
 
 .slick-next {
-    z-index: map-get($z-index , level2);
+    right: 10px;
-    right: 20px;
+
+    @include mq(xs, max) {
+        right: 3px;
+    }
 }
 
 .slick-arrow.slick-hidden {

checkout/src/arquivos/sass/partials/_footer.scss

@@ -2,19 +2,20 @@
 .footerCheckout {
     color: $color-gray2;
 
+
+
     &__wrapper {
         border-top: 1px solid $color-black;
         margin: 0 auto;
         position: relative;
 
+
         @include mq(md, max) {
             margin: 0;
             height: 111px;
-            padding: 16px 0 16px 8px !important;
         }
 
         @include mq(sm, max) {
-            padding: 16px 25px 16px 8px !important;
             height: 127px;
         }
     }
@@ -29,12 +30,17 @@
         width: 95%;
         padding: 16px 0;
 
+        @include mq(xl, min) {
+            height: 80px;
+            padding: 0;
+        }
+
         @include mq(md, max) {
             align-items: flex-start;
             flex-direction: column;
             margin: 0;
-            padding: 0;
             gap: 16px;
+            padding: 16px 0 16px 8px !important;
 
             .footerCheckout__address {
                 order: 2;
@@ -49,6 +55,10 @@
             }
         }
 
+        @include mq(sm, max) {
+            padding: 16px 0 16px 8px !important;
+        }
+
 
 
         ul {
@@ -190,7 +200,3 @@
     }
 
 }
-
-.container-cart {
-    display: none;
-}

checkout/src/arquivos/sass/partials/_prateleira.scss

@@ -1,5 +1,6 @@
 .footerCheckout {
     &__title {
+        font-family: $font-family-secundary;
         font-weight: 400;
         font-size: 24px;
         line-height: 38px;
@@ -7,6 +8,16 @@
         color: $color-black;
         margin: 0;
         margin-bottom: 20px;
+
+        @include mq(xl, min) {
+            font-size: 48px;
+            line-height: 76px;
+        }
+
+        @include mq(sm, max) {
+            font-size: 14px;
+            line-height: 28px;
+        }
     }
 
     &__prateleira-none {
@@ -15,15 +26,25 @@
 
     &__products {
         margin: 0 auto;
-        width: 81%;
         max-width: 1036.8px;
-        height: 390px;
         margin-bottom: 56px;
+
+        @include mq(xl, min) {
+            max-width: 1994px;
+        }
+
+        @include mq_range(sm, md) {
+            width: 98%;
+            max-width: 1005px;
+        }
+
+        @include mq(sm, max) {
+            margin-bottom: 54px;
+        }
     }
 
     &__product {
-        width: 242px !important;
+        width: 100% !important;
-        height: 242px;
     }
 
     &__prateleira-image {
@@ -36,12 +57,29 @@
 
 
         figcaption {
+            font-family: $font-family;
             font-size: 13px;
             line-height: 18px;
             text-align: center;
             color: $color-black;
             margin-bottom: 20px;
 
+            @include mq(xl, min) {
+                font-size: 26px;
+                line-height: 35px;
+            }
+
+            @include mq_range(md, md2) {
+                height: 36px;
+            }
+
+            @include mq_range(sm4, sm6) {
+                height: 36px;
+            }
+
+            @include mq(sm2, max) {
+                height: 36px;
+            }
         }
 
         img {
@@ -57,10 +95,25 @@
         justify-content: center;
         margin: 0;
         list-style: none;
+        flex-wrap: wrap;
+
+        @include mq_range(md, md3) {
+            height: 61px;
+        }
+
+        @include mq_range(sm4, sm6) {
+            width: 100%;
+            height: 61px;
+        }
+
+        @include mq(sm3, max) {
+            height: 61px;
+        }
     }
 
     &__prateleira-sku,
     &__prateleira-button {
+        font-family: $font-family;
         background: $color-blue2;
         border-radius: 8px;
         border: none;
@@ -73,6 +126,13 @@
         letter-spacing: 0.05em;
         text-transform: uppercase;
         color: $color-white;
+        padding: 0 5px;
+
+        @include mq(xl, min) {
+            height: 45px;
+            font-size: 26px;
+            line-height: 35px;
+        }
     }
 
     &__prateleira-button {
@@ -80,5 +140,9 @@
         width: 100%;
         margin-top: 20px;
         padding: 0;
+
+        @include mq(xl, min) {
+            height: 59px;
+        }
     }
 }

checkout/src/arquivos/sass/utils/_variaveis.scss

@@ -25,8 +25,16 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-    sm: 375px,
+    xs: 320px,
-    md: 1024px,
+    sm: 376px,
+    sm2: 456px,
+    sm3: 487px,
+    sm4: 600px,
+    sm5: 684px,
+    sm6: 730px,
+    md: 1025px,
+    md2: 1117px,
+    md3: 1191px,
     lg: 1280px,
     xl: 2500px) !default;