From c942b3f5a6812e68019c65c7572d954398bb3b41 Mon Sep 17 00:00:00 2001
From: Rafael Sampaio <rafael.sampa1989@gmail.com>
Date: Tue, 20 Dec 2022 07:33:13 -0300
Subject: [PATCH] feat: adiciona css checkout com produto 1024px

---
 .../sass/checkout/_checkout-autenticacao.scss |  75 +++++++++----
 .../sass/checkout/_checkout-carrinho.scss     | 106 +++++++++++++++++-
 .../src/arquivos/sass/checkout/_checkout.scss |   8 ++
 checkout/src/arquivos/sass/lib/_slick.scss    |  18 +++
 .../src/arquivos/sass/partials/_footer.scss   |  13 ++-
 .../src/arquivos/sass/partials/_header.scss   |   5 +
 6 files changed, 197 insertions(+), 28 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 37af741..08ea459 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -214,12 +214,12 @@
                 p {
                     label {
                         color: $color-gray9;
-                        font-weight: 500;
                         font-family: "Open Sans";
                         font-style: normal;
-                        font-weight: 400;
-                        font-size: 14px;
-                        line-height: 19px;
+                        font-weight: 700;
+                        font-size: 12px;
+                        line-height: 16px;
+                        letter-spacing: 0.05em;
 
                         #opt-in-newsletter {
                             width: 18px;
@@ -262,9 +262,8 @@
 
                 button.submit {
                     border: none;
-                    border-radius: 5px;
+                    border-radius: 8px;
                     background: $color-blue;
-                    margin-top: 8px;
                     outline: none;
                     transition: all 0.2s linear;
                     width: 100%;
@@ -306,6 +305,15 @@
                         font-weight: 500;
                     }
 
+                    .vtex-omnishipping-1-x-shippingSectionTitle {
+                        font-family: "Open Sans";
+                        font-style: normal;
+                        font-weight: 700;
+                        font-size: 14px;
+                        line-height: 19px;
+                        color: $color-gray9;
+                    }
+
                     .shp-lean {
                         border: 1px solid $color-gray11;
                         border-radius: 0;
@@ -325,9 +333,13 @@
                 }
 
                 .delivery-address-title {
-                    color: #303030;
-                    font-size: 14px;
-                    font-weight: 500;
+                    font-family: "Open Sans";
+                    font-style: normal;
+                    font-weight: 700;
+                    font-size: 12px;
+                    line-height: 16px;
+                    letter-spacing: 0.05em;
+                    color: $color-gray9;
                 }
 
                 .shp-summary-group-info {
@@ -341,13 +353,13 @@
                     color: #303030;
                     padding: 12px;
 
-                    &:first-child::before {
-                        content: "";
-                        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
-                        background-size: 21px 20px;
-                        width: 21px;
-                        height: 20px;
-                    }
+                    // &:first-child::before {
+                    //     content: "";
+                    //     background-image: url("https://agenciamagma.vteximg.com.br/arquivos/homeM3Academy.png");
+                    //     background-size: 21px 20px;
+                    //     width: 21px;
+                    //     height: 20px;
+                    // }
 
                     @include mq(md, max) {
                         background-position: 8px 9px;
@@ -358,10 +370,6 @@
                         font-weight: 500;
                         text-decoration: underline;
                     }
-
-                    .ship-street {
-                        display: none !important;
-                    }
                 }
 
                 .shp-summary-group-price,
@@ -424,6 +432,33 @@
                         max-width: 280px;
                     }
                 }
+
+                .vtex-omnishipping-1-x-address {
+                    .ship-street,
+                    .ship-neighborhood,
+                    .ship-city,
+                    .ship-state {
+                        display: none;
+                    }
+
+                    .ship-number {
+                        input {
+                            width: 155%;
+                            height: 25px;
+                            border-radius: 8px;
+                            margin-bottom: 20px;
+                        }
+                    }
+
+                    .ship-receiverName {
+                        input {
+                            width: 95%;
+                            border-radius: 8px;
+                            height: 25px;
+                            margin: 0;
+                        }
+                    }
+                }
             }
         }
     }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 2114b41..9a9f90a 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -17,12 +17,16 @@
         display: none;
     }
     .cart {
-        // border: 1px solid $color-gray3;
+        border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px 16px;
         margin-bottom: 0 !important;
 
+        @media (max-width: 1024px) {
+            padding: 7px 16px;
+        }
+
         @include mq(md, max) {
             margin: 0px 0 25px 0;
             border-left: none;
@@ -150,6 +154,11 @@
     }
 
     .cart-items {
+        @media (max-width: 1024px) {
+            thead {
+                display: none;
+            }
+        }
         .shipping-date {
             font-size: 0;
 
@@ -164,6 +173,10 @@
         .product-item {
             padding: 16px 0;
 
+            @media (max-width: 1024px) {
+                position: relative;
+            }
+
             .shipping-estimate-date {
                 color: $color-gray6;
 
@@ -218,6 +231,11 @@
             padding-right: 0;
             white-space: normal;
 
+            @media (max-width: 1024px) {
+                position: absolute;
+                top: 0;
+            }
+
             @include mq(lg, max) {
                 width: 250px;
             }
@@ -231,6 +249,10 @@
                 transition: ease-in 0.22s all;
                 margin-left: 11px;
 
+                @media (max-width: 1024px) {
+                    margin-left: 16px;
+                }
+
                 &:hover {
                     color: darken($color-blue, 10);
                     text-decoration: none;
@@ -263,6 +285,10 @@
                 width: 7%;
             }
 
+            @media (max-width: 1024px) {
+                display: none;
+            }
+
             &::before {
                 content: "";
             }
@@ -285,6 +311,13 @@
         .product-price {
             font-size: 0;
 
+            @media (max-width: 1024px) {
+                min-width: 130px;
+                position: absolute;
+                left: 87.5%;
+                top: 25%;
+            }
+
             &::before {
                 content: "Unidade";
                 font-size: 14px;
@@ -293,9 +326,9 @@
                 margin-left: 35px;
             }
             min-width: 100px;
-            @include mq(md, max) {
-                min-width: 78px;
-            }
+            // @include mq(md, max) {
+            //     min-width: 78px;
+            // }
             @media (max-width: 490px) {
                 position: absolute;
                 bottom: 0;
@@ -310,6 +343,11 @@
                 position: absolute;
                 margin: 8px 0 0 35px;
                 left: 2.5%;
+
+                @media (max-width: 1024px) {
+                    margin: 8px 0 0 47px;
+                }
+
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -339,6 +377,10 @@
             width: 64.91% !important;
             position: relative;
 
+            @media (max-width: 1024px) {
+                margin: 28px 0 0 16px;
+            }
+
             @media (max-width: 490px) {
                 margin-left: 84px !important;
             }
@@ -404,6 +446,10 @@
         .quantity-price {
             text-align: left;
 
+            @media (max-width: 1024px) {
+                display: none;
+            }
+
             .icon-question-sign {
                 display: none;
             }
@@ -466,6 +512,11 @@
                 color: $color-gray8;
                 font-size: 15px;
 
+                @media (max-width: 1024px) {
+                    position: absolute;
+                    top: 0;
+                }
+
                 @include mq(md, max) {
                     font-size: 18px;
                 }
@@ -492,7 +543,7 @@
             width: max-content;
 
             .srp-container {
-                padding: 0 0 0 10px;
+                padding: 0 0 0 16px;
 
                 @include mq(md, max) {
                     padding: 0 16px;
@@ -544,6 +595,10 @@
             .srp-data {
                 width: 280px;
 
+                @media (max-width: 1024px) {
+                    margin-bottom: 48px;
+                }
+
                 .ship-country {
                     display: none;
                 }
@@ -570,6 +625,10 @@
                     line-height: 16px;
                     letter-spacing: 0.05em;
 
+                    @media (max-width: 1024px) {
+                        width: 122.5%;
+                    }
+
                     &:hover {
                         background-color: lighten($color-black, 5);
                     }
@@ -583,6 +642,10 @@
             .srp-toggle {
                 margin: 0 0 20px;
 
+                @media (max-width: 1024px) {
+                    width: 122.5%;
+                }
+
                 &__wrapper {
                     background-color: $color-white;
                     border-radius: 100px;
@@ -634,6 +697,10 @@
                         height: 36px;
                         padding: 12px 8px;
                         width: 132.31%;
+
+                        @media (max-width: 1024px) {
+                            width: 165.39%;
+                        }
                     }
 
                     & ~ button {
@@ -653,6 +720,11 @@
                         width: 76.93%;
                         text-transform: uppercase;
 
+                        @media (max-width: 1024px) {
+                            width: 92.31%;
+                            right: -213px;
+                        }
+
                         // &:hover {
                         //     background-color: lighten($color-black, 5);
                         // }
@@ -753,6 +825,11 @@
             margin-top: 49px;
             width: 353px;
 
+            @media (max-width: 1024px) {
+                width: 100%;
+                margin: 0;
+                padding: 0 16px;
+            }
             .coupon-data {
                 #cart-link-coupon-add {
                     text-decoration: none;
@@ -825,6 +902,10 @@
                         padding: 0 12px;
                         width: 50.52%;
 
+                        @media (max-width: 1024px) {
+                            width: 83.1%;
+                        }
+
                         @include mq(sm, max) {
                             max-width: 100%;
                             width: 100%;
@@ -843,6 +924,11 @@
                         width: 37.824%;
                         margin-left: 12px;
 
+                        @media (max-width: 1024px) {
+                            width: 13.46%;
+                            margin-left: 5px;
+                        }
+
                         @include mq(md, max) {
                             width: 138px;
                         }
@@ -899,6 +985,11 @@
                 }
             }
         }
+
+        @media (max-width: 1024px) {
+            display: flex;
+            flex-direction: column;
+        }
     }
 
     .cart-links-bottom {
@@ -906,6 +997,11 @@
         flex-direction: column;
         width: 354px;
 
+        @media (max-width: 1024px) {
+            width: 97%;
+            padding: 0 16px;
+        }
+
         @include mq(md, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index f2920f1..20c3763 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -16,6 +16,10 @@ footer .footerCheckout__prateleira,
 header {
     width: 79.53125%;
     margin: 0 auto;
+
+    @media (max-width: 1024px) {
+        width: 100%;
+    }
 }
 
 body {
@@ -51,6 +55,10 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
+
+        @media (max-width: 1024px) {
+            width: 100%;
+        }
     }
 }
 
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 7dcf708..a1ffcd7 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -78,6 +78,16 @@
         margin: 0 2px 0 8px;
     }
 
+    @media (max-width: 1024px) {
+        &:first-child {
+            margin: 0 8px 0 16px;
+        }
+
+        &:last-child {
+            margin: 0 16px 0 8px;
+        }
+    }
+
     [dir="rtl"] & {
         float: right;
     }
@@ -119,6 +129,10 @@
     width: 14px;
     height: 30px;
     color: $color-gray6;
+
+    @media (max-width: 1024px) {
+        left: 2.5%;
+    }
 }
 .slick-next {
     // z-index: 4;
@@ -130,6 +144,10 @@
     width: 14px;
     height: 30px;
     color: $color-gray6;
+
+    @media (max-width: 1024px) {
+        left: 96.5%;
+    }
 }
 .slick-arrow.slick-hidden {
     display: none;
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 4d6ef7f..88fdf04 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -150,8 +150,8 @@
             height: 65px;
 
             @media (max-width: 1024px) {
-                flex-direction: column;
-                align-items: flex-start;
+                display: grid;
+                padding-top: 16px;
             }
 
             &::before,
@@ -169,10 +169,11 @@
         font-size: 10px;
         line-height: 14px;
         text-transform: capitalize;
-        max-width: 40%;
+        max-width: auto;
 
         @media (max-width: 1024px) {
             margin: 15px 0;
+            order: 2;
         }
 
         @include mq(md, max) {
@@ -189,6 +190,11 @@
         width: 33.224%;
         max-width: 404px;
 
+        @media (max-width: 1024px) {
+            width: auto;
+            order: 1;
+        }
+
         span {
             display: flex;
             justify-content: space-between;
@@ -228,6 +234,7 @@
 
         @media (max-width: 1024px) {
             margin-top: 10px !important;
+            order: 3;
         }
 
         li:first-child {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index a147cd9..620728d 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -5,6 +5,11 @@
     width: 100%;
     height: 95px;
     border-bottom: 1px solid $color-black;
+
+    @media (max-width: 1024px) {
+        height: 70px;
+    }
+
     .container {
         display: flex;
         justify-content: center;