feat(checkout): Ajusta telas menores que 1024 e adiciona frase do before do slick

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

@@ -137,7 +137,7 @@ export default class Footer {
             slidesToScroll: 1,
             responsive: [
                 {
-                    breakpoint: 1024,
+                    breakpoint: 1025,
                     settings: {
                         slidesToShow: 3,
                         slidesToScroll: 1,

checkout/src/arquivos/sass/checkout.scss

@@ -3,4 +3,5 @@
 @import "./partials/header";
 @import "./partials/footer";
 @import "./partials/prateleira";
+@import "./partials/tablet";
 @import "./checkout/checkout.scss";

checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss

@@ -3,10 +3,6 @@
         padding-bottom: 167px;
     }
 
-    @include mq(sm, max) {
-        padding-bottom: 250px;
-    }
-
     .client-pre-email {
         border-color: $color-gray4;
         font-family: $font-family;
@@ -960,7 +956,7 @@
 
 .accordion-inner {
     @include mq(sm, max) {
-        padding: 0 16px !important;
+        padding: 0;
     }
 }
 
@@ -1587,10 +1583,6 @@ p.client-profile-summary {
 }
 
 .summary-totalizers {
-    @include mq(sm, max) {
-        padding: 0 !important;
-    }
-
     @include mq(xl, min) {
         padding-top: 17px !important;
     }
@@ -1650,9 +1642,20 @@ p.client-profile-summary {
         font-size: 20px;
     }
 }
+
+#ship-number {
+    width: 99.5%;
+}
+
+#ship-complement {
+    width: 96%;
+}
+
+#ship-receiverName {
+    width: 96%;
+}
 //Pagamento
 
-label.FormFieldLabel,
+.card-flags {
-#holder-document-0 {
+    display: block;
-    display: none;
 }

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

@@ -1,11 +1,38 @@
 /* _prateleira.scss */
 .footerCheckout__prateleira {
     padding: 0 132px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &::before {
+        content: "Você tambem pode gostar:";
+        font-family: $font-family-secundary;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        align-self: center;
+        color: #000000;
+
+        @include mq(sm, max) {
+            font-size: 14px;
+            line-height: 28px;
+        }
+
+        @include mq(xl, min) {
+            font-size: 48px;
+            line-height: 76px;
+        }
+    }
 
     @include mq(sm, max) {
         padding: 0 16px;
     }
 
+    @include mq(md, max) {
+        padding: 0 16px;
+    }
+
     @include mq(xl, min) {
         padding: 0 250px;
     }
@@ -34,6 +61,10 @@
         @include mq(sm, max) {
             left: 15px;
         }
+
+        @include mq(md, max) {
+            left: 26px;
+        }
     }
 
     .slick-next {
@@ -55,6 +86,10 @@
         @include mq(sm, max) {
             right: 16px;
         }
+
+        @include mq(md, max) {
+            right: 36px;
+        }
     }
 
     .prateleira {
@@ -65,6 +100,10 @@
             @include mq(xl, min) {
                 width: 97% !important;
             }
+
+            @include mq(md, max) {
+                width: 96.7% !important;
+            }
         }
 
         &__product-name {

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

@@ -0,0 +1,166 @@
+@media screen and (min-width: 376px) and (max-width: 1024px) {
+    .checkout-container {
+        padding-bottom: 109px;
+    }
+
+    .orderform-template-holder {
+        width: 100% !important;
+    }
+
+    .form-page {
+        margin: -16px;
+    }
+
+    .row-fluid {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+
+        .summary {
+            width: 99.8% !important;
+        }
+    }
+
+    #client-profile-data {
+        width: 100%;
+        padding: 0 16px;
+    }
+
+    #client-email {
+        width: 98.8%;
+        height: 32px;
+    }
+
+    .client-first-name,
+    .client-last-name,
+    .client-document,
+    .client-phone {
+        width: 50%;
+        margin-right: 0 !important;
+    }
+
+    #client-first-name,
+    #client-document {
+        width: 95.7%;
+        height: 34px;
+    }
+
+    #client-last-name,
+    #client-phone {
+        width: 97%;
+        height: 34px;
+    }
+
+    .newsletter-label {
+        margin-top: -23px;
+    }
+
+    .box-step {
+        width: 100.2%;
+    }
+
+    #shipping-data {
+        width: 93.4%;
+        margin-left: 16px;
+    }
+
+    .shipping-data {
+        width: 100%;
+        .active {
+            width: 100%;
+            padding: 24px 17px 44px !important;
+        }
+    }
+
+    #postalCode-finished-loading {
+        width: 32.31%;
+    }
+
+    #ship-postalCode {
+        width: 98.51%;
+        max-width: 100%;
+        height: 35px;
+    }
+
+    small {
+        padding-top: 10px;
+    }
+
+    #delivery-packages-options {
+        width: 100%;
+    }
+
+    #force-shipping-fields {
+        float: right;
+    }
+
+    #ship-number {
+        width: 99.6%;
+        height: 25px;
+    }
+
+    #ship-complement,
+    #ship-receiverName {
+        width: 98.51% !important;
+        height: 25px;
+    }
+
+    .postalCode {
+        left: 149px !important;
+    }
+
+    #payment-data {
+        width: 93.4%;
+        margin-left: 16px;
+    }
+
+    .store-country-BRA {
+        width: 100%;
+        margin-bottom: 17px !important;
+    }
+
+    .payment-group-list-btn {
+        width: 97.4%;
+    }
+
+    .steps-view {
+        width: 96.85% !important;
+    }
+
+    .SecurityEnvironmentIcon {
+        display: none;
+    }
+
+    #creditCardpayment-card-0Number {
+        width: 98%;
+    }
+
+    .card-flags {
+        display: flex !important;
+        justify-content: center !important;
+    }
+
+    #creditCardpayment-card-0Brand {
+        width: 90%;
+    }
+
+    #go-to-cart-button {
+        width: 99.8%;
+        border: 1px solid #e5e5e5;
+        border-top: none;
+        border-bottom: none;
+
+        a {
+            float: right;
+        }
+    }
+
+    .mini-cart {
+        width: 100% !important;
+        padding: 0 16px !important;
+    }
+
+    #payment-data-submit {
+        margin-top: 5px !important;
+    }
+}