From f91a9c2fca37f07883665cd3106a30811f247f5b Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Mon, 26 Dec 2022 15:27:59 -0300
Subject: [PATCH] fix(checkout): Corrige problemas no layout para telas 4k

---
 .../sass/checkout/_checkout-autenticacao.scss | 294 +++++++++++++++++-
 .../sass/checkout/_checkout-carrinho.scss     |  90 +++++-
 .../sass/checkout/_checkout-vazio.scss        |  10 +
 .../src/arquivos/sass/checkout/_checkout.scss |   5 +
 checkout/src/arquivos/sass/lib/_slick.scss    |   4 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |   1 +
 6 files changed, 389 insertions(+), 15 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 3df7e54..dca1b7a 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -11,6 +11,13 @@ textarea[class*="span"],
     }
 }
 
+//para a lista do #/email
+.row-fluid .orderform-template {
+    @include mq(xxl, min) {
+        margin-bottom: 90px;
+    }
+}
+
 .checkout-container {
     .client-pre-email {
         border-color: $color-gray4;
@@ -31,6 +38,11 @@ textarea[class*="span"],
                     color: lighen($color-black, 10);
                 }
 
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+
                 @include mq(pg, max) {
                     font-size: 10px;
                     line-height: 12px;
@@ -65,6 +77,11 @@ textarea[class*="span"],
                     line-height: 23px;
                     text-transform: uppercase;
 
+                    @include mq(xxl, min) {
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
+
                     @include mq(cstm, max) {
                         font-weight: 400;
                         font-size: 12px;
@@ -79,6 +96,11 @@ textarea[class*="span"],
                     line-height: 23px;
                     text-transform: uppercase;
 
+                    @include mq(xxl, min) {
+                        font-size: 40px;
+                        line-height: 47px;
+                    }
+
                     @include mq(cstm, max) {
                         font-weight: 400;
                         font-size: 12px;
@@ -112,6 +134,11 @@ textarea[class*="span"],
                     color: $color-black2 !important;
                 }
 
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
+
                 @media (max-width: 490px) {
                     width: auto;
                 }
@@ -133,6 +160,12 @@ textarea[class*="span"],
                 top: 0;
                 cursor: pointer;
 
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    // line-height: 38px;
+                    padding: 12.56px 17.89px;
+                }
+
                 @media (max-width: 490px) {
                     // height: 48px;
                     margin: 0;
@@ -145,6 +178,11 @@ textarea[class*="span"],
                 font-weight: 700;
                 font-size: 12px;
                 line-height: 16px;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
             }
         }
 
@@ -161,6 +199,11 @@ textarea[class*="span"],
                 font-size: 12px;
                 line-height: 16px;
                 margin: 0 0 8px 0;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 33px;
+                }
             }
 
             ul {
@@ -173,12 +216,21 @@ textarea[class*="span"],
                         font-weight: 700;
                         font-size: 12px;
                         line-height: 16px;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 33px;
+                        }
                     }
 
                     i::before {
                         color: $color-blue2;
                         font-size: 1rem;
                         opacity: 1;
+
+                        @include mq(xxl, min) {
+                            font-size: 2.063rem;
+                        }
                     }
                 }
             }
@@ -188,6 +240,10 @@ textarea[class*="span"],
                 font-size: 6rem;
                 opacity: 0.5;
 
+                @include mq(xxl, min) {
+                    font-size: 7.159rem;
+                }
+
                 @include mq(cstm, max) {
                     font-size: 0;
                 }
@@ -195,6 +251,15 @@ textarea[class*="span"],
         }
     }
 
+    .accordion-heading {
+        span {
+            @include mq(xxl, min) {
+                font-size: 32px;
+                line-height: 37px;
+            }
+        }
+    }
+
     .client-profile-data {
         .accordion-heading {
             span {
@@ -206,6 +271,11 @@ textarea[class*="span"],
                         font-weight: 400;
                         font-size: 16px;
                         line-height: 19px;
+
+                        @include mq(xxl, min) {
+                            font-size: 32px;
+                            line-height: 37px;
+                        }
                     }
                 }
             }
@@ -281,6 +351,21 @@ textarea[class*="span"],
                     font-size: 0;
                 }
 
+                .shp-summary-package-time {
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
+                }
+
+                .client-profile-summary,
+                .client-profile-email span {
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
+                }
+
                 p {
                     label {
                         font-family: $font-family;
@@ -288,40 +373,86 @@ textarea[class*="span"],
                         font-weight: 400;
                         font-size: 14px;
                         line-height: 19px;
+
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 38px;
+                        }
                     }
 
                     select,
                     input {
                         border: 1px solid $color-gray8;
                         border-radius: 5px;
+                        box-sizing: border-box;
                         box-shadow: none;
                     }
 
+                    #client-email {
+                        width: 100%;
+                    }
+
+                    #client-first-name,
+                    #client-last-name,
+                    #client-document,
+                    #client-phone {
+                        // height: 44px;
+                        @include mq(xxl, min) {
+                            width: 273.77px;
+                        }
+                    }
+
+                    #opt-in-newsletter {
+                        border-radius: 3px;
+                        border: 1px solid $color-gray11;
+
+                        @include mq(xxl, min) {
+                            width: 34.95px;
+                            height: 34.95px;
+                            margin-right: 8.05px;
+                        }
+                    }
+
                     #ship-number {
                         @include mq(sm, max) {
                             width: 70px !important;
                         }
                     }
 
+                    select,
                     input:not([type="checkbox"]) {
+                        height: 44px;
                         .input-xlarge {
                             @media (max-width: 767) {
                                 max-width: none !important;
                             }
                         }
+
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 38px;
+                            height: 61px;
+                        }
+
                         @include mq(pg, max) {
                             width: 100%;
                             margin-right: 14.5px;
                         }
                     }
 
-                    #client-phone,
-                    #client-document {
-                        height: 44px;
-                    }
+                    // #client-phone,
+                    // #client-document {
+
+                    // }
 
                     .help.error {
                         color: red;
+
+                        @include mq(xxl, min) {
+                            font-size: 24px;
+                            line-height: 33px;
+                            white-space: nowrap;
+                        }
                     }
                 }
 
@@ -354,6 +485,11 @@ textarea[class*="span"],
                     transition: all 0.2s linear;
                     cursor: pointer;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+
                     &:hover {
                         background: lighten($color-black, 5);
                     }
@@ -381,6 +517,11 @@ textarea[class*="span"],
                     font-size: 12px;
                     line-height: 16px;
                     text-decoration-line: underline;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
 
                 .vtex-omnishipping-1-x-deliveryGroup {
@@ -390,6 +531,11 @@ textarea[class*="span"],
                         font-weight: 700;
                         font-size: 14px;
                         line-height: 19px;
+
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 38px;
+                        }
                     }
 
                     .shp-lean {
@@ -402,6 +548,11 @@ textarea[class*="span"],
                             color: #303030;
                             padding: 8px 12px;
 
+                            @include mq(xxl, min) {
+                                font-size: 24px;
+                                line-height: 33px;
+                            }
+
                             svg path {
                                 // fill: #d8c8ac;
                                 background: #00c8ff;
@@ -416,6 +567,11 @@ textarea[class*="span"],
                     font-size: 12px;
                     line-height: 16px;
                     color: $color-gray2;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
 
                 .shp-summary-group-info {
@@ -423,13 +579,17 @@ textarea[class*="span"],
                 }
 
                 .address-summary {
-                    // background: none;
+                    background: none;
                     border-color: $color-gray8;
                     border-radius: 8px;
                     font-weight: 400;
                     font-size: 12px;
                     line-height: 16px;
-                    // padding: 12px;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
 
                     @include mq(md, max) {
                         background-position: 8px 9px;
@@ -445,6 +605,11 @@ textarea[class*="span"],
                             line-height: 16px;
                             color: $color-blue2;
                             text-decoration: none;
+
+                            @include mq(xxl, min) {
+                                font-size: 24px;
+                                line-height: 33px;
+                            }
                         }
                     }
                 }
@@ -473,6 +638,10 @@ textarea[class*="span"],
                     -o-transition: all 0.2s ease-in-out;
                     transition: all 0.2s ease-in-out;
 
+                    @include mq(xxl, min) {
+                        width: 406.48px;
+                    }
+
                     span {
                         text-align: center;
                         color: $color-gray10;
@@ -482,6 +651,12 @@ textarea[class*="span"],
                         font-size: 14px;
                         line-height: 24px;
 
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 24px;
+                            white-space: nowrap;
+                        }
+
                         &::selection {
                             color: $color-red2 !important;
                         }
@@ -492,6 +667,83 @@ textarea[class*="span"],
                     }
                 }
 
+                .steps-view {
+                    @include mq(xxl, min) {
+                        width: 800.25px;
+                    }
+
+                    h3 {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 48px;
+                        }
+                    }
+                }
+
+                .payment-description {
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 48px;
+                    }
+                }
+
+                .installments {
+                    p {
+                        span {
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                                line-height: 48px;
+                            }
+                        }
+                    }
+                }
+
+                .payment-pix-step-number {
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 48px;
+                    }
+                }
+
+                .payment-pix-step-text {
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 38px;
+                    }
+                }
+
+                .sight {
+                    span {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 48px;
+                        }
+                    }
+                }
+
+                .span12 {
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 48px;
+                    }
+
+                    p {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 48px;
+                        }
+                    }
+                }
+
+                .span4 {
+                    p {
+                        @include mq(xxl, min) {
+                            font-size: 28px;
+                            line-height: 48px;
+                        }
+                    }
+                }
+
                 .shp-summary-group-price,
                 .shp-summary-package {
                     color: $color-gray4;
@@ -499,11 +751,16 @@ textarea[class*="span"],
 
                 .shp-summary-group-price {
                     padding-right: 16px;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
 
-                .shp-summary-package {
-                    padding-left: 16px;
-                }
+                // .shp-summary-package {
+                //     padding-left: 16px;
+                // }
 
                 .vtex-omnishipping-1-x-summaryChange {
                     border-color: #303030;
@@ -529,9 +786,26 @@ textarea[class*="span"],
                     border: 1px solid $color-black;
                 }
 
+                .vtex-omnishipping-1-x-leanShippingTextLabel {
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
+                }
+
+                .vtex-omnishipping-1-x-deliveryOptionInactive {
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+                }
+
                 .vtex-omnishipping-1-x-deliveryOptionActive {
                     color: $color-black;
-                    // text-shadow: 1.3px 1px lighten($color-black, 50);
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index cfc32df..b284f8d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -35,6 +35,7 @@ body .container-cart {
         border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
+        margin-bottom: 48px;
         padding: 16px;
 
         @include mq(pg, max) {
@@ -57,12 +58,18 @@ body .container-cart {
         padding: 17px 24px;
 
         h2 {
+            display: flex;
             padding-bottom: 16px;
             background: $color-white;
             border: none;
             color: #303030;
             font-size: 14px;
             font-weight: 500;
+
+            @include mq(xxl, min) {
+                font-size: 32px;
+                line-height: 37px;
+            }
         }
 
         .item-unavailable {
@@ -90,6 +97,11 @@ body .container-cart {
                 .shipping-date,
                 .price {
                     color: #7d7d7d;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 33px;
+                    }
                 }
             }
         }
@@ -102,6 +114,11 @@ body .container-cart {
         #go-to-cart-button a {
             color: #303030;
             text-decoration: underline;
+
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 33px;
+            }
         }
 
         .summary-totalizers {
@@ -124,6 +141,11 @@ body .container-cart {
             &:active {
                 background: darken($color-black, 5);
             }
+
+            @include mq(xxl, min) {
+                font-size: 28px;
+                line-height: 38px;
+            }
         }
     }
 
@@ -231,6 +253,11 @@ body .container-cart {
         .product-name {
             padding-right: 0;
 
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
             @include mq(pg, max) {
                 padding: 0 0 10px !important;
             }
@@ -376,6 +403,11 @@ body .container-cart {
                 width: 38px;
                 color: $color-gray2;
                 box-shadow: none;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
 
             .icon-plus-sign,
@@ -387,7 +419,7 @@ body .container-cart {
                     padding: 1px 12px;
 
                     @include mq(xxl, min) {
-                        width: 32px;
+                        font-size: 32px;
                     }
                 }
             }
@@ -437,6 +469,7 @@ body .container-cart {
                 @include mq(xxl, min) {
                     font-size: 28px;
                     line-height: 33px;
+                    white-space: nowrap;
                 }
             }
 
@@ -501,6 +534,10 @@ body .container-cart {
             .srp-container {
                 padding: 0 0 0 10px;
 
+                @include mq(xxl, min) {
+                    max-width: 552px;
+                }
+
                 @include mq(pg, max) {
                     padding: 0 16px;
                 }
@@ -535,6 +572,7 @@ body .container-cart {
                     @include mq(xxl, min) {
                         font-size: 28px;
                         line-height: 36px;
+                        max-width: 552px;
                     }
                 }
 
@@ -551,6 +589,12 @@ body .container-cart {
                     padding: 12px 40px;
                     transition: all 0.2s linear;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                        max-width: 552px;
+                    }
+
                     &:hover {
                         background-color: lighten($color-gray5, 5);
                     }
@@ -591,8 +635,8 @@ body .container-cart {
                     text-transform: uppercase;
 
                     @include mq(xxl, min) {
-                        font-size: 28px !important;
-                        line-height: 36px !important;
+                        font-size: 28px;
+                        line-height: 36px;
                     }
 
                     &:hover {
@@ -632,6 +676,11 @@ body .container-cart {
                 label {
                     width: 50%;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
+
                     &:active {
                         background-color: #f0f0f0;
                     }
@@ -799,6 +848,10 @@ body .container-cart {
             padding: 0;
             width: 346px;
 
+            @include mq(xxl, min) {
+                width: 34.4175%;
+            }
+
             @include mq(pg, max) {
                 width: 100% !important;
                 padding: 0;
@@ -820,6 +873,11 @@ body .container-cart {
                     line-height: 14px;
                     color: $color-black2;
                     text-decoration: none;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
 
@@ -931,6 +989,12 @@ body .container-cart {
                             line-height: 16px;
                             color: $color-black;
                             padding: 12px 0;
+
+                            @include mq(xxl, min) {
+                                font-size: 28px;
+                                line-height: 33px;
+                                white-space: nowrap;
+                            }
                         }
 
                         &.info {
@@ -951,6 +1015,12 @@ body .container-cart {
                         font-size: 18px;
                         line-height: 21px;
                         color: $color-black;
+
+                        @include mq(xxl, min) {
+                            font-weight: 700;
+                            font-size: 36px;
+                            line-height: 49px;
+                        }
                     }
                 }
             }
@@ -962,6 +1032,10 @@ body .container-cart {
         flex-direction: column;
         width: 343px;
 
+        @include mq(xxl, min) {
+            width: 688.35px;
+        }
+
         @include mq(pg, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
@@ -990,6 +1064,11 @@ body .container-cart {
                 font-size: 12px;
                 line-height: 14px;
                 color: $color-black2;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
             }
         }
 
@@ -1018,6 +1097,11 @@ body .container-cart {
                     vertical-align: middle;
                     line-height: 19px;
                     text-shadow: none;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 38px;
+                    }
                 }
             }
         }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 7d1e57f..0974a83 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -19,6 +19,11 @@
             text-align: center;
             text-transform: uppercase;
             color: $color-black2;
+
+            @include mq(xxl, min) {
+                font-size: 48px;
+                line-height: 65px;
+            }
         }
     }
 
@@ -45,6 +50,11 @@
                 letter-spacing: 0.05em;
                 text-transform: uppercase;
                 transition: ease-in 0.22s all;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
 
             &:hover {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index b43496c..b2097e7 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -85,6 +85,11 @@ body {
     @include mq(md, max) {
         margin-left: 30px;
     }
+
+    @include mq(xxl, min) {
+        font-size: 48px;
+        line-height: 65px;
+    }
 }
 
 .dropdown {
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index c7642e7..d388267 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -120,7 +120,7 @@
         bottom: 50%;
         left: -949px;
         z-index: 5;
-        width: 100%;
+        width: inherit;
     }
 }
 .slick-next {
@@ -136,7 +136,7 @@
             no-repeat center;
         z-index: 5;
         right: -910px;
-        width: 100%;
+        width: inherit;
     }
 }
 .slick-arrow.slick-hidden {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 065826c..072a684 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -23,6 +23,7 @@ $color-gray7: #c4c4c4;
 $color-gray8: #e0e0e0;
 $color-gray9: #808080;
 $color-gray10: #58595b;
+$color-gray11: #828282;
 
 $color-blue: #4267b2;
 $color-blue2: #00c8ff;