From 6e1a17416d2e8a88b84002ad2ebf0f1e258bb857 Mon Sep 17 00:00:00 2001
From: Leonardo <rochaleo879@gmail.com>
Date: Sun, 18 Dec 2022 22:53:05 -0300
Subject: [PATCH] fix:ajusta o posicionamento de alguns itens

---
 .../sass/checkout/_checkout-autenticacao.scss | 84 ++++++++++++++++---
 .../sass/checkout/_checkout-carrinho.scss     | 80 ++++++++++++++++--
 .../sass/checkout/_checkout-pagamento.scss    |  7 +-
 .../src/arquivos/sass/checkout/_checkout.scss |  7 ++
 checkout/src/arquivos/sass/lib/_slick.scss    | 10 +++
 .../src/arquivos/sass/partials/_footer.scss   | 54 +++++++++++-
 .../src/arquivos/sass/partials/_header.scss   |  9 ++
 7 files changed, 231 insertions(+), 20 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index f83b3ce..a7b373e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -38,6 +38,11 @@
                     font-size: 20px;
                     line-height: 23px;
                     font-family: $font-family-secundary;
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
                 }
 
                 small {
@@ -47,6 +52,11 @@
                     font-size: 20px;
                     line-height: 23px;
                     font-family: $font-family-secundary;
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
                 }
             }
         }
@@ -65,7 +75,10 @@
                 border: 1px solid $color-black2;
                 box-sizing: border-box;
                 border-radius: 5px 0 0 5px;
-                width: 443px;
+                width: 65.737%;
+                @media (min-width: 2500px) {
+                    width: 85%;
+                }
 
                 @media (max-width: 1024px) {
                     width: 84.498% !important;
@@ -89,22 +102,26 @@
                 font-size: 14px;
                 line-height: 19px;
                 text-transform: uppercase;
-                width: 126.76px;
+                width: 17.326%;
                 font-family: $font-family;
                 height: 54px;
                 right: 0;
                 top: 0;
+                @media (min-width: 2500px) {
+                    width: 219px;
+                }
 
                 @media (max-width: 1024px) {
-                    margin-right: 16px;
+                    margin-right: 30px;
                     position: absolute;
                 }
 
                 @media (max-width: 490px) {
-                    height: 52px;
-                    margin-right: 16px;
-                    position: absolute;
-                    top: -5px;
+                    margin-right: 30px;
+                    margin-bottom: 49px;
+                    /* position: absolute; */
+                    top: -8px;
+                    width: 33.8%;
                 }
             }
 
@@ -118,6 +135,9 @@
 
         .emailInfo {
             padding: 16px;
+            @media (max-width: 1024px) {
+                margin-top: 49px;
+            }
             background-color: $color-white;
             border: 1px solid $color-gray4;
             border-radius: 0;
@@ -128,6 +148,11 @@
                 font-weight: 700;
                 font-size: 12px;
                 line-height: 16px;
+                @media (min-width: 2500px) {
+                    font-weight: 700;
+                    font-size: 24px;
+                    line-height: 33px;
+                }
             }
 
             ul {
@@ -139,6 +164,11 @@
                         font-weight: 700;
                         font-size: 12px;
                         line-height: 16px;
+                        @media (min-width: 2500px) {
+                            font-weight: 700;
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
 
                     i::before {
@@ -360,15 +390,27 @@
 
                 .vtex-omnishipping-1-x-addressFormPart1 {
                     p.input.ship-postalCode.required.text {
+                        @media (min-width: 2500px) {
+                            font-weight: 400;
+                            font-size: 20px;
+                            line-height: 23px;
+                        }
                         display: flex;
                         flex-direction: column;
+                        label {
+                            @media (min-width: 2500px) {
+                                font-weight: 400;
+                                font-size: 24px;
+                                line-height: 33px;
+                            }
+                        }
 
                         #ship-postalCode {
                             padding-right: 67.612%;
                         }
                     }
 
-                    .input.ship-country.text {
+                    p.input.ship-country.text {
                         display: none;
                     }
                 }
@@ -376,6 +418,11 @@
                 .input .ship-complement .text {
                     display: inline-block;
                     width: 95.331%;
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 20px;
+                        line-height: 23px;
+                    }
                 }
 
                 .vtex-omnishipping-1-x-address {
@@ -399,8 +446,6 @@
                     }
                 }
 
-
-
                 .vtex-omnishipping-1-x-addressSummary .vtex-omnishipping-1-x-summaryChange {
                     border-color: #303030;
                     color: #303030;
@@ -417,4 +462,23 @@
             }
         }
     }
+
+    p.input.ship-country.text {
+        display: none;
+    }
+
+    p.input.postalCode.text {
+        @media (min-width: 2500px) {
+            font-weight: 400;
+            font-size: 24px;
+            line-height: 33px;
+        }
+    }
+}
+p.input.ship-postalCode.required.text {
+    @media (min-width: 2500px) {
+        font-weight: 400;
+        font-size: 20px;
+        line-height: 23px;
+    }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 91d555b..31b47f1 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -131,8 +131,9 @@
             padding: 0;
             width: 60px;
 
-            @include mq(sm, max) {
-                width: 72px;
+            @media (min-width: 2500px) {
+                height: 146px;
+                width: 146px;
             }
 
             img {
@@ -140,9 +141,10 @@
                 max-width: 100%;
                 width: 60px;
 
-                @include mq(sm, max) {
-                    height: 72px;
-                    width: auto;
+                @media (min-width: 2500px) {
+                    height: 146px;
+                    max-width: 100%;
+                    width: 146px;
                 }
             }
         }
@@ -183,12 +185,22 @@
         th.quantity,
         th.product,
         th.product-price {
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 28px;
+                line-height: 33px;
+            }
             @media (max-width: 1024px) {
                 display: none;
             }
         }
 
         th.quantity-price {
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 28px;
+                line-height: 33px;
+            }
             @media (max-width: 1024px) {
                 display: none;
             }
@@ -198,6 +210,11 @@
             color: $color-gray2;
             font-size: 12px;
             line-height: 14px;
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 28px;
+            }
 
             @media (max-width: 1024px) {
                 display: none;
@@ -205,6 +222,11 @@
         }
 
         td.quantity-price {
+            @media (min-width: 2500px) {
+                font-weight: 700;
+                font-size: 28px;
+                line-height: 38px;
+            }
             @media (max-width: 1024px) {
                 display: none;
             }
@@ -375,9 +397,15 @@
     }
 
     .summary {
+        /* @media (min-width: 2500px) {
+            display: flex;
+        }*/
         .cart-more-options {
             margin: 0;
             width: max-content;
+            /*@media (min-width: 2500px) {
+                width: max-content;
+            }*/
 
             .srp-container {
                 padding: 0 0 0 10px;
@@ -387,6 +415,11 @@
                 }
 
                 .srp-main-title {
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 48px;
+                        line-height: 65px;
+                    }
                     margin: 32px 0 12px;
                     font-style: normal;
                     font-weight: normal;
@@ -400,6 +433,12 @@
                 }
 
                 .srp-description {
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 36px;
+                        width: 552px;
+                    }
                     color: $color-gray2;
                     font-size: 12px;
                     line-height: 18px;
@@ -453,6 +492,11 @@
                     font-size: 14px;
                     line-height: 19px;
                     letter-spacing: 0.05em;
+                    @media (min-width: 2500px) {
+                        font-weight: 700;
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
 
                     &:hover {
                         background-color: lighten($color-black, 5);
@@ -477,6 +521,9 @@
                     font-size: 14px;
                     line-height: 16px;
                     text-transform: uppercase;
+                    @media (min-width: 2500px) {
+                        width: 543.67px;
+                    }
                 }
 
                 &__current {
@@ -489,7 +536,11 @@
                 }
 
                 label {
-                    width: 50%;
+                    @media (min-width: 2500px) {
+                        font-weight: 400;
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
 
                     &:active {
                         background-color: #f0f0f0;
@@ -770,6 +821,12 @@
                             line-height: 16px;
                             color: $color-black;
                             padding: 12px 0;
+                            @media (min-width: 2500px) {
+                                font-weight: 400;
+                                font-size: 28px;
+                                line-height: 33px;
+                                width: 153px;
+                            }
                         }
 
                         &.info {
@@ -790,6 +847,12 @@
                         font-size: 18px;
                         line-height: 25px;
                         color: $color-black;
+                        @media (min-width: 2500px) {
+                            font-weight: 700;
+                            font-size: 36px;
+                            line-height: 49px;
+                            width: 153px;
+                        }
                     }
                 }
             }
@@ -858,6 +921,11 @@
                     vertical-align: middle;
                     text-shadow: none;
                     color: $color-black2;
+                    @media (min-width: 2500px) {
+                        font-weight: 700;
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index f4ebfdd..76d3c10 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -82,12 +82,12 @@ body .container-main.container-order-form .orderform-template.active {
             margin-right: 25px;
             @media (max-width: 1024px) {
                 width: 45.603% !important;
-                margin-left: 16px;
+                margin-right: 16px;
             }
 
             @media (min-width: 2500px) {
                 width: 42.573%;
-                margin-left: 30px;
+                margin-right: 60px;
             }
             #client-first-name {
                 width: 100% !important;
@@ -101,11 +101,12 @@ body .container-main.container-order-form .orderform-template.active {
             width: 42.933%;
             @media (max-width: 1024px) {
                 width: 45.603%;
-                margin-left: 14.5px;
+                margin-right: 14.5px;
             }
 
             @media (min-width: 2500px) {
                 width: 42.573%;
+                margin-right: 60px;
             }
             #client-last-name {
                 width: 100%;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 7d2b0ad..602e211 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -60,6 +60,13 @@ body {
 .btn-success {
     background: $color-black;
     text-shadow: none;
+    span {
+        @media (min-width: 2500px) {
+            font-weight: 700;
+            font-size: 28px;
+            line-height: 38px;
+        }
+    }
 
     &:hover {
         background: lighten($color-black, 15%);
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 0e26a78..1f50c65 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -107,6 +107,11 @@
         no-repeat center center;
     z-index: 4;
     left: 10px;
+    @media (min-width: 2500px) {
+        width: 26px;
+        height: 56px;
+        top: 251px;
+    }
 }
 .slick-next {
     border: none;
@@ -115,6 +120,11 @@
         no-repeat center center;
     z-index: 4;
     right: 10px;
+    @media (min-width: 2500px) {
+        width: 26px;
+        height: 56px;
+        top: 251px;
+    }
 }
 .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 9166388..8e32e34 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -14,9 +14,16 @@
             color: $color-black2;
             font-family: font-family-secundary;
             text-align: center;
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 48px;
+                line-height: 76px;
+            }
         }
 
         .product-name {
+            overflow: auto;
+            height: 18px;
             font-family: $font-family;
             font-style: normal;
             margin-bottom: 20px;
@@ -25,7 +32,15 @@
             line-height: 18px;
             text-align: center;
             color: $color-black2;
+            display: flex;
             margin-top: 20px;
+            @media (min-width: 2500px) {
+                width: 485.07px;
+                height: 34.99px;
+                font-weight: 400;
+                font-size: 26px;
+                line-height: 35px;
+            }
         }
 
         figure {
@@ -41,12 +56,16 @@
             list-style-type: none;
             justify-content: center;
             gap: 5px;
-            display: flex;
+            width: 92%;
+            flex-wrap: wrap;
             text-transform: uppercase;
+            display: flex;
             margin: 0;
+            margin-bottom: 20px;
         }
 
         .size-cards {
+            display: flex;
             margin-bottom: 20px;
             background-color: $color-blue2;
             border-radius: 8px;
@@ -55,6 +74,15 @@
             font-weight: 700;
             font-size: 13px;
             line-height: 18px;
+            @media (min-width: 2500px) {
+                font-weight: 700;
+                font-size: 26px;
+                line-height: 35px;
+                display: flex;
+                align-items: center;
+                text-align: center;
+                letter-spacing: 0.05em;
+            }
             /* identical to box height */
 
             display: flex;
@@ -74,6 +102,15 @@
             width: 97%;
             color: white;
             display: flex;
+            @media (min-width: 2500px) {
+                font-weight: 700;
+                font-size: 26px;
+                line-height: 35px;
+                display: flex;
+                align-items: center;
+                text-align: center;
+                letter-spacing: 0.05em;
+            }
         }
     }
 
@@ -173,17 +210,32 @@
         display: flex;
         list-style-type: none;
         margin: 0;
+        span {
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 25px;
+            }
+        }
 
         .logo-m3 {
             margin: 0;
             width: 28.66px;
             height: 15.65px;
+            @media (min-width: 2500px) {
+                width: 55.98px;
+                height: 30.55px;
+            }
         }
 
         .logo-vtex {
             margin: 0;
             width: 44.92px;
             height: 16px;
+            @media (min-width: 2500px) {
+                width: 87.73px;
+                height: 31.24px;
+            }
         }
 
         li:last-child {
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 59fa4ce..12467e5 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -155,11 +155,20 @@
             line-height: 16px;
             text-transform: uppercase;
             color: $color-gray;
+            @media (min-width: 2500px) {
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
         img {
             width: 12px;
             height: auto;
+            @media (min-width: 2500px) {
+                width: 29.47px;
+                height: 41.46px;
+            }
         }
 
         i {