From d8692d739cfb5612a5ba0e9b1ddb47431f5b9863 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cain=C3=A3=20Milech?= <cainamilech15@hotmail.com>
Date: Sun, 18 Dec 2022 23:33:34 -0300
Subject: [PATCH] feat: Adiciona layout 2500

---
 bash.exe.stackdump                            |   2 +-
 checkout/src/arquivos/js/components/Footer.js |   3 -
 .../sass/checkout/_checkout-autenticacao.scss |  81 +++------
 .../sass/checkout/_checkout-carrinho.scss     | 163 ++++++++++++++++--
 .../src/arquivos/sass/checkout/_checkout.scss |   8 +-
 checkout/src/arquivos/sass/lib/_slick.scss    |  32 +++-
 .../src/arquivos/sass/partials/_footer.scss   |  34 ++++
 .../src/arquivos/sass/partials/_header.scss   |   4 +
 .../src/arquivos/sass/utils/_variaveis.scss   |   2 +-
 9 files changed, 243 insertions(+), 86 deletions(-)

diff --git a/bash.exe.stackdump b/bash.exe.stackdump
index 01735e2..512b978 100644
--- a/bash.exe.stackdump
+++ b/bash.exe.stackdump
@@ -2,7 +2,7 @@ Stack trace:
 Frame        Function    Args
 000FFFFCD30  00210062B0E (0021028A770, 00210275E51, 00000000001, 000FFFFB710)
 000FFFFCD30  0021004846A (00210000000, 00200000000, 00000000000, 00000000001)
-000FFFFCD30  002100484A2 (000007B0000, 000007D2501, 00000000001, E2F524F93905)
+000FFFFCD30  002100484A2 (000007D0000, 000007D0101, 00000000001, 5C74DE1CAC3C)
 000FFFFCD30  0021006E416 (00210045323, 00210358970, 00000000000, 0000000000D)
 000FFFFCD30  0021006E429 (00210045170, 0021023D7E0, 002100448F2, 000FFFFC910)
 000FFFFCD30  002100713D4 (00000000013, 00000000001, 000FFFFC910, 00210278640)
diff --git a/checkout/src/arquivos/js/components/Footer.js b/checkout/src/arquivos/js/components/Footer.js
index 6a978bf..db385b4 100644
--- a/checkout/src/arquivos/js/components/Footer.js
+++ b/checkout/src/arquivos/js/components/Footer.js
@@ -10,8 +10,6 @@ export default class Footer {
         await this.carrinho();
         this.renderPrateleira();
         this.onUpdate();
-        //this.prateleira();
-        //this.onUpdate();
     }
 
     async selectors() {
@@ -146,7 +144,6 @@ export default class Footer {
 
     carrinho() {
         this.title.innerHTML = ``;
-        //this.fraseCarrinhoVazio.innerHTML = `seu carrinho está vazio`;
         this.continuarCompra.innerHTML = `continuar comprando`;
         this.frete.innerHTML = `Frete`;
         this.unidade.innerHTML = `Unidade`;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 7947501..52e0607 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -28,10 +28,6 @@ h1#orderform-title {
             left: 0;
         }
 
-        @include mq(md, max) {
-            /*width: unset;*/
-        }
-
         .link-cart {
             a {
                 font-family: $font-family-secundary;
@@ -86,9 +82,6 @@ h1#orderform-title {
                         font-size: 12px;
                         line-height: 14px;
                     }
-
-                    font-size: 12px;
-                    line-height: 14px;
                 }
 
                 small {
@@ -109,7 +102,6 @@ h1#orderform-title {
         }
 
         .client-email {
-            /*left: -61px;*/
             margin: 0 0 24.56px;
 
             @include mq(tablet, max) {
@@ -119,7 +111,6 @@ h1#orderform-title {
             }
 
             input {
-                /*width: 65.8%;*/
                 width: 82%;
                 height: 50px;
                 box-shadow: none;
@@ -141,10 +132,6 @@ h1#orderform-title {
                 &::placeholder {
                     color: $color-black-500;
                 }
-
-                /*@media (max-width: 490px) {
-                    width: auto;
-                }*/
             }
 
             button {
@@ -181,7 +168,6 @@ h1#orderform-title {
                 }
 
                 @media (max-width: 490px) {
-                    /*height: 48px;*/
                     margin: 0;
                     position: absolute;
                 }
@@ -222,11 +208,6 @@ h1#orderform-title {
                 height: auto;
             }
 
-            /*@include mq(md, max) {
-                display: table-cell;
-                width: 100%;
-            }*/
-
             h3 {
                 color: $color-black-500;
                 font-style: normal;
@@ -305,13 +286,18 @@ h1#orderform-title {
                     .client-last-name,
                     .client-document,
                     .client-phone {
+                        float: left !important;
+
                         width: 47.4%;
                         @include mq(tablet, max) {
                             width: 49.4%;
                         }
+                        @include mq(md, max) {
+                            width: 47.5%;
+                        }
 
                         input {
-                            width: 100%;
+                            width: 100% !important;
                         }
                     }
 
@@ -321,6 +307,9 @@ h1#orderform-title {
                         @include mq(tablet, max) {
                             margin-right: 1.2%;
                         }
+                        @include mq(md, max) {
+                            margin-right: 5%;
+                        }
                     }
                 }
 
@@ -357,7 +346,7 @@ h1#orderform-title {
                                 @include mq(tablet, max) {
                                     position: absolute;
                                     bottom: 1%;
-                                    left: 14%;
+                                    left: 140px;
                                 }
                             }
                         }
@@ -399,6 +388,7 @@ h1#orderform-title {
             .cart-fixed.cart-fixed-transition.affix {
                 @include mq(tablet, max) {
                     padding-bottom: 4px;
+                    left: -0.5px;
                 }
                 #payment-data-submit {
                     @include mq(tablet, max) {
@@ -541,7 +531,7 @@ h1#orderform-title {
 
                 button.submit {
                     margin-top: 0;
-                    margin-bottom: 22px; /*tem 15de pad e 7 de p*/
+                    margin-bottom: 22px;
                     width: 100%;
                     height: 42px;
                     text-transform: uppercase;
@@ -680,28 +670,6 @@ h1#orderform-title {
     /*IDENTIFICAÇÃO*/
 
     .client-profile-data {
-        //INDENTIFICACAO INPUTS PORCENTAGEM
-        /*.span6.client-profile-data {
-            width: 100%;
-            box-sizing: border-box;
-
-            .client-first-name,
-            .client-last-name,
-            .client-document,
-            .client-phone {
-                width: 49.4%;
-
-                input {
-                    width: 100%;
-                }
-            }
-
-            .client-first-name,
-            .client-document {
-                margin-right: 1.2%;
-            }
-        }*/
-
         .accordion-group {
             padding: 24px 17px;
 
@@ -1215,15 +1183,9 @@ h1#orderform-title {
 }
 
 //RESUMO DO PEDIDO (MINI CART CARRINHO)
-/*.summary-cart-template-holder {
-    @include mq(tablet, max) {
-        height: unset;
-    }
-} TESTE */
 
 .cart-fixed.cart-fixed-transition {
-    height: auto !important; //TESTAR DEPOIS SE NAO TA QUEBRANDO ALGO
-
+    height: auto !important;
     box-sizing: border-box;
     border: 1px solid $color-gray5;
     margin-top: 10px;
@@ -1286,6 +1248,10 @@ h1#orderform-title {
                     .price {
                         margin-right: 0;
                     }
+
+                    @include mq(fold, max) {
+                        margin-top: 28px;
+                    }
                 }
 
                 span.fn.product-name {
@@ -1299,6 +1265,16 @@ h1#orderform-title {
                     font-size: 12px;
                     line-height: 14px;
                     color: $color-black;
+
+                    @include mq(md, max) {
+                        top: 25%;
+                        margin-left: 70px;
+                    }
+
+                    @include mq(fold, max) {
+                        top: 0;
+                        margin-left: 70px;
+                    }
                 }
 
                 strong {
@@ -1341,9 +1317,6 @@ h1#orderform-title {
             display: flex;
 
             td {
-                /*&.empty {
-                }*/
-
                 &.info,
                 &.monetary {
                     font-family: $font-family;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 0e28511..65a4b2b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -11,6 +11,11 @@
         color: $color-black;
         margin: 17px 0 16px;
 
+        @include mq(xxl, min) {
+            font-size: 48px;
+            line-height: 65px;
+        }
+
         @include mq(tablet, max) {
             margin-left: 16px;
         }
@@ -22,6 +27,10 @@
     .empty-cart-content {
         margin-top: 100px;
 
+        @include mq(md, max) {
+            margin-top: 150px;
+        }
+
         .empty-cart-title {
             font-weight: 700;
             font-size: 24px;
@@ -30,6 +39,11 @@
             text-transform: uppercase;
             margin: 0 0 32px;
 
+            @include mq(xxl, min) {
+                font-size: 48px;
+                line-height: 65px;
+            }
+
             @include mq(tablet, max) {
                 margin-bottom: 22px;
                 font-size: 18px;
@@ -54,6 +68,11 @@
             font-size: 14px;
             line-height: 16px;
 
+            @include mq(xxl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             @include mq(tablet, max) {
                 padding: 16px 26px;
             }
@@ -197,17 +216,6 @@
                 margin: 16px 0;
                 border-top: 1px solid #f0f0f0;
                 border-bottom: 1px solid #f0f0f0;
-
-                /*.product-image {
-                    @include mq(tablet, max) {
-                        margin-left: 16px;
-                    }
-                    .quantity {
-                        @include mq(tablet, max) {
-                            margin-left: 16px;
-                        }
-                    }
-                }*/
             }
         }
     }
@@ -259,6 +267,11 @@
             font-size: 14px;
             line-height: 16px;
 
+            @include mq(xxl, min) {
+                font-size: 28px;
+                line-height: 33px;
+            }
+
             @include mq(tablet, max) {
                 display: none;
             }
@@ -276,6 +289,11 @@
             padding: 0;
             width: 60px;
 
+            @include mq(xxl, min) {
+                height: 146px;
+                width: 146px;
+            }
+
             @include mq(md, max) {
                 /*width: 72px;*/
                 position: inherit !important;
@@ -288,6 +306,12 @@
                 width: 60px;
                 object-fit: cover;
 
+                @include mq(xxl, min) {
+                    height: 146px;
+                    width: 146px;
+                    max-width: 146px;
+                }
+
                 @include mq(sm, max) {
                     /*height: 72px;
                     width: auto;*/
@@ -312,8 +336,13 @@
                 line-height: 14px;
                 transition: ease-in 0.22s all;
 
-                @media (max-width: 490px) {
-                    margin-left: 23px;
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
+                @include mq(md, max) {
+                    margin-left: 15px;
                 }
             }
 
@@ -328,6 +357,15 @@
             font-size: 12px;
             line-height: 14px;
 
+            @include mq(xxl, min) {
+                font-size: 24px;
+                line-height: 28px;
+            }
+
+            @include mq(tablet, min) {
+                min-width: 100px;
+            }
+
             @include mq(tablet, max) {
                 display: none;
             }
@@ -361,6 +399,12 @@
                 font-size: 12px;
                 line-height: 14px;
                 text-decoration-line: line-through;
+
+                @include mq(xxl, min) {
+                    font-size: 24px;
+                    line-height: 28px;
+                }
+
                 @include mq(sm, max) {
                     font-size: 12px;
                     line-height: 14px;
@@ -376,8 +420,20 @@
                 }
             }
 
+            .new-product-price {
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
+            }
+
             .new-product-price-label {
                 text-transform: lowercase;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                }
             }
         }
 
@@ -395,14 +451,23 @@
             padding: 9px 0;
             width: max-content !important;
 
+            @include mq(xxl, min) {
+                height: 50px !important;
+                width: 135px !important;
+                max-height: 50px;
+                max-width: 135px;
+                margin-top: 40px;
+            }
+
             @include mq(tablet, max) {
                 position: absolute;
-                left: 7.7%;
-                top: 20%;
+                left: 75px;
+                margin-left: 0 !important;
+                top: 25%;
             }
 
             @include mq(md, max) {
-                left: 6%;
+                left: 75px;
             }
 
             @media (max-width: 490px) {
@@ -420,6 +485,12 @@
                 color: $color-black-500;
                 box-shadow: none;
 
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 33px;
+                    padding: 0px 10px;
+                }
+
                 @include mq(lg, max) {
                     width: 24px !important;
                 }
@@ -439,6 +510,10 @@
                 &:before {
                     font-size: 16px;
                     padding-right: 0;
+
+                    @include mq(xxl, min) {
+                        font-size: 30px;
+                    }
                 }
             }
 
@@ -446,17 +521,24 @@
                 &:before {
                     font-size: 14px;
                     padding-left: 0;
+
+                    @include mq(xxl, min) {
+                        font-size: 30px;
+                    }
                 }
             }
 
             .item-quantity-change {
                 @media (max-width: 979px) and (min-width: 768px) {
-                    position: inherit;
+                    height: unset;
+                    width: unset;
+                    position: unset;
+                    /*position: inherit;
                     bottom: inherit;
                     left: inherit;
                     height: inherit;
                     width: inherit;
-                    top: inherit;
+                    top: inherit;*/
                 }
 
                 @media (max-width: 490px) {
@@ -469,6 +551,10 @@
             @include mq(tablet, max) {
                 display: none;
             }
+
+            @include mq(xxl, min) {
+                width: 150px;
+            }
         }
 
         .quantity-price,
@@ -495,11 +581,20 @@
                 font-weight: 700;
                 font-size: 14px;
                 line-height: 19px;
+
+                @include mq(xxl, min) {
+                    font-size: 28px;
+                    line-height: 38px;
+                }
             }
         }
 
         .item-remove {
             text-align: end;
+
+            @include mq(xxl, min) {
+                text-align: left;
+            }
             @include mq(md, max) {
                 top: 0;
                 padding: 0;
@@ -515,6 +610,10 @@
                 width: 10px;
                 height: 10px;
 
+                @include mq(xxl, min) {
+                    font-size: 32px;
+                }
+
                 @include mq(md, max) {
                     font-size: 18px;
                 }
@@ -564,6 +663,11 @@
                     line-height: 33px;
                     color: $color-black-500;
 
+                    @include mq(xxl, min) {
+                        font-size: 48px;
+                        line-height: 65px;
+                    }
+
                     @include mq(md, max) {
                         margin-top: 0;
                     }
@@ -577,6 +681,13 @@
                     margin: 0 0 10.65px;
                     width: 276px;
                     max-width: 276px;
+
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        line-height: 36px;
+                        width: 552px;
+                        max-width: 552px;
+                    }
                 }
 
                 button.shp-open-options {
@@ -596,6 +707,12 @@
                     mix-blend-mode: normal;
                     margin-top: 0;
 
+                    @include mq(xxl, min) {
+                        font-size: 28px;
+                        width: 230px;
+                        height: 44px;
+                    }
+
                     &:hover {
                         background-color: lighten($color-gray4, 5);
                     }
@@ -863,6 +980,11 @@
                     line-height: 14px;
                     color: $color-black-500;
                     text-decoration: none;
+
+                    @include mq(xxl, max) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
             }
 
@@ -900,6 +1022,11 @@
                     line-height: 14px;
                     color: $color-gray2;
                     cursor: none;
+
+                    @include mq(xxl, min) {
+                        font-size: 24px;
+                        line-height: 28px;
+                    }
                 }
 
                 .coupon-fields {
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index a653999..3f9a975 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -18,10 +18,6 @@ header {
         width: 79.53125%;
         margin: 0 auto 56px auto;
     }
-
-    @include mq(tablet, max) {
-        /*margin: 0 16px;*/
-    }
 }
 
 body {
@@ -55,12 +51,12 @@ body {
     }
     .container-order-form,
     .container-cart {
-        box-sizing: border-box; /*teste*/
+        box-sizing: border-box;
         width: 80%;
 
         @include mq(tablet, max) {
             width: 100%;
-            padding: 0; /*APLICAR EM OUTROS ELEMENTOS 16px*/
+            padding: 0;
         }
     }
 }
diff --git a/checkout/src/arquivos/sass/lib/_slick.scss b/checkout/src/arquivos/sass/lib/_slick.scss
index 9ace038..3776b83 100644
--- a/checkout/src/arquivos/sass/lib/_slick.scss
+++ b/checkout/src/arquivos/sass/lib/_slick.scss
@@ -13,6 +13,11 @@
             text-align: center;
             color: $color-black-500;
             margin-bottom: 20px;
+
+            @include mq(xxl, min) {
+                font-size: 48px;
+                line-height: 76px;
+            }
         }
     }
 }
@@ -96,6 +101,7 @@
         text-align: center;
 
         img {
+            width: 100%;
             display: block;
             margin-bottom: 20px;
         }
@@ -107,6 +113,11 @@
             line-height: 18px;
             color: $color-black-500;
 
+            @include mq(xxl, min) {
+                font-size: 26px;
+                line-height: 35px;
+            }
+
             @media (min-width: 1025px) and (max-width: 1110px) {
                 height: 36px;
             }
@@ -119,8 +130,8 @@
             align-items: center;
             margin-bottom: 15px;
 
-            @include mq(md, max) {
-                height: 56px;
+            @include mq(xl, max) {
+                height: 66px;
             }
 
             &__variation {
@@ -139,7 +150,11 @@
                 letter-spacing: 0.05em;
                 text-transform: uppercase;
                 color: $color-white;
-                /*white-space: nowrap;*/
+
+                @include mq(xxl, min) {
+                    font-size: 26px;
+                    line-height: 35px;
+                }
             }
         }
 
@@ -159,6 +174,11 @@
             letter-spacing: 0.05em;
             text-transform: uppercase;
             color: $color-white;
+
+            @include mq(xxl, min) {
+                font-size: 26px;
+                line-height: 35px;
+            }
         }
     }
 
@@ -195,6 +215,12 @@
     z-index: 4;
     top: 45%;
 
+    @include mq(xxl, min) {
+        width: 26px;
+        height: 58px;
+        top: 50%;
+    }
+
     @include mq(md, max) {
         top: 50%;
     }
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index e7ebbef..61f1cac 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -44,6 +44,11 @@
         text-transform: capitalize;
         max-width: 40%;
 
+        @include mq(xxl, min) {
+            font-size: 20px;
+            line-height: 27px;
+        }
+
         @include mq(tablet, max) {
             margin-bottom: 16px;
             margin-left: 8px;
@@ -83,6 +88,11 @@
                     width: 35px;
                     height: 20px;
 
+                    @include mq(xxl, min) {
+                        width: 69px;
+                        height: 39px;
+                    }
+
                     img {
                         width: 100%;
                         vertical-align: unset;
@@ -98,6 +108,11 @@
                     width: 53px;
                     height: 33px;
 
+                    @include mq(xxl, min) {
+                        width: 103px;
+                        height: 64px;
+                    }
+
                     img {
                         width: 100%;
                         vertical-align: unset;
@@ -117,6 +132,10 @@
             height: 24px;
             margin: 0 10px 0 13px;
             width: 1px;
+
+            @include mq(xxl, min) {
+                height: 43px;
+            }
         }
     }
 
@@ -137,6 +156,11 @@
             figure {
                 width: 28.66px;
                 height: 15.65px;
+
+                @include mq(xxl, min) {
+                    width: 55px;
+                    height: 30px;
+                }
             }
         }
 
@@ -158,6 +182,11 @@
                 font-size: 9px;
                 line-height: 12px;
                 color: $color-black;
+
+                @include mq(xxl, min) {
+                    font-size: 18px;
+                    line-height: 25px;
+                }
             }
 
             figure {
@@ -165,6 +194,11 @@
                 width: 44.92px;
                 height: 16px;
 
+                @include mq(xxl, min) {
+                    width: 87px;
+                    height: 31px;
+                }
+
                 img {
                     width: 100%;
                     vertical-align: unset;
diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss
index 9dbd61e..d4874d7 100644
--- a/checkout/src/arquivos/sass/partials/_header.scss
+++ b/checkout/src/arquivos/sass/partials/_header.scss
@@ -9,6 +9,10 @@
         @include mq(tablet, max) {
             width: 96.875% !important;
         }
+
+        @include mq(md, max) {
+            width: 91.46% !important;
+        }
     }
     &__wrapper {
         align-items: center;
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index f053610..296bc65 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -38,7 +38,7 @@ $color-green2: #298541;
 /* Grid breakpoints */
 $grid-breakpoints: (
     xs: 0,
-    fold: 330,
+    fold: 350,
     cstm: 400,
     sm: 576px,
     md: 768px,