From b3e93c56188d95c57060789cfeebfb052e2d6a72 Mon Sep 17 00:00:00 2001
From: carloswinter <caduwinteer@gmail.com>
Date: Sun, 18 Dec 2022 23:05:40 -0300
Subject: [PATCH] feat(checkout): adiciona css em scss para mobile 1024px e
 375px

---
 .../sass/checkout/_checkout-autenticacao.scss |  14 +--
 .../sass/checkout/_checkout-carrinho.scss     | 106 +++++++++---------
 .../sass/checkout/_checkout-pagamento.scss    |  14 ++-
 .../sass/checkout/_checkout-vazio.scss        |   2 +-
 .../src/arquivos/sass/checkout/_checkout.scss |   6 +-
 5 files changed, 74 insertions(+), 68 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index d3d780b..2074c73 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -432,10 +432,10 @@
         }
 
         .accordion-group {
-            border-radius: 8px;
-            border: 1px solid $color-gray3;
             font-family: $font-family;
             padding: 24px 17px 36px;
+            border-radius: 8px;
+            border: 1px solid $color-gray3;
 
             .accordion-heading {
                 .accordion-toggle {
@@ -482,15 +482,15 @@
                 }
 
                 span {
-                    font-family: $font-family-secundary;
-                    font-style: normal;
-                    font-weight: 400;
                     font-size: 16px;
                     line-height: 19px;
                     color: $color-black2;
                     margin-top: 6px;
                     margin-bottom: 36px;
                     padding: 0;
+                    font-family: $font-family-secundary;
+                    font-style: normal;
+                    font-weight: 400;
 
                     @media (min-width: 2500px) {
                         font-size: 32px;
@@ -506,11 +506,11 @@
                         content: "Identificação";
                         color: $color-black;
                         @media (min-width: 2500px) {
-                            font-family: "Tenor Sans";
-                            font-style: normal;
                             font-weight: 400;
                             font-size: 32px;
                             line-height: 37px;
+                            font-family: "Tenor Sans";
+                            font-style: normal;
 
                             color: #292929;
                         }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index a24889f..e1d4562 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -25,21 +25,21 @@
         display: none;
     }
     .cart {
+        padding: 16px;
+        margin-bottom: 48px;
         border: 1px solid $color-gray3;
         box-sizing: border-box;
         border-radius: 5px;
-        padding: 16px;
-        margin-bottom: 48px;
 
         @include mq(l, max) {
             padding: 0;
         }
 
         @include mq(md, max) {
-            margin: 0px 0 25px 0;
-            border-left: none;
             border-right: none;
             border-radius: 0;
+            margin: 0px 0 25px 0;
+            border-left: none;
         }
     }
     .cart-fixed.affix {
@@ -49,11 +49,11 @@
         font-family: $font-family;
         width: 100%;
         h2 {
-            background: $color-white;
-            border: none;
             color: #303030;
             font-size: 14px;
             font-weight: 500;
+            background: $color-white;
+            border: none;
         }
 
         .item-unavailable {
@@ -68,9 +68,10 @@
             border: 1px solid $color-gray4;
 
             ul li {
+                padding-top: 0;
                 border-top: none;
                 margin-top: 0;
-                padding-top: 0;
+
                 .description {
                     .pull-left {
                         display: none;
@@ -87,8 +88,8 @@
                 .price {
                     color: #7d7d7d;
                 }
-                .shipping-date {
-                }
+                // .shipping-date {
+                // }
 
                 .url {
                     .photo {
@@ -107,21 +108,22 @@
         }
 
         #go-to-cart-button a {
-            color: $color-black;
-            font-family: "Open Sans";
-            font-style: normal;
-            font-weight: 400;
             font-size: 12px;
             line-height: 16px;
             text-align: right;
+            color: $color-black;
+            font-style: normal;
+            font-weight: 400;
+            font-family: "Open Sans";
+
             text-decoration-line: underline;
             @media (max-width: 1024px) {
                 float: right;
             }
             @include mq(xxl, min) {
-                font-weight: 400;
                 font-size: 24px;
                 line-height: 33px;
+                font-weight: 400;
             }
         }
 
@@ -132,17 +134,18 @@
         }
 
         #payment-data-submit {
-            background: #298541;
             border-radius: 8px;
             color: $color-white;
+            background: #298541;
+
             outline: none;
             transition: all 0.2s linear;
             span {
+                font-size: 14px;
+                line-height: 19px;
                 font-family: "Open Sans";
                 font-style: normal;
                 font-weight: 700;
-                font-size: 14px;
-                line-height: 19px;
             }
             i {
                 display: none;
@@ -176,21 +179,21 @@
             }
 
             @include mq(m, max) {
-                position: relative;
                 padding: 0 0 0 16px;
                 margin: 16px 16px 15px 16px;
+                position: relative;
             }
         }
 
         th {
-            text-align: start;
-            font-family: $font-family-secundary;
-            color: $color-black2;
-            padding: 0 0 17px;
             font-style: normal;
             font-weight: 400;
             font-size: 14px;
             line-height: 16px;
+            text-align: start;
+            font-family: $font-family-secundary;
+            color: $color-black2;
+            padding: 0 0 17px;
 
             @include mq(l, max) {
                 display: none;
@@ -233,9 +236,9 @@
         }
 
         .product-name {
-            width: 32.425%;
             padding-right: 0;
             padding-left: 0;
+            width: 32.425%;
 
             @include mq(l, max) {
                 position: absolute;
@@ -302,14 +305,14 @@
         }
 
         td.shipping-date {
+            padding-left: 0;
+            font-weight: 400;
+            font-family: $font-family-secundary;
             text-align: start;
             color: $color-gray12;
             font-size: 12px;
             line-height: 14px;
             width: 14.85%;
-            padding-left: 0;
-            font-weight: 400;
-            font-family: $font-family-secundary;
 
             @include mq(l, max) {
                 display: none;
@@ -403,6 +406,10 @@
         }
 
         td.quantity {
+            padding: 0;
+            width: max-content !important;
+            border: 1px solid $color-gray3;
+            border-radius: 8px;
             align-items: center;
             border-radius: 0;
             box-sizing: border-box;
@@ -413,10 +420,6 @@
             max-width: 99px;
             min-height: 34px;
             min-width: 99px;
-            padding: 0;
-            width: max-content !important;
-            border: 1px solid $color-gray3;
-            border-radius: 8px;
 
             @include mq(f, max) {
                 max-width: 70px;
@@ -679,6 +682,11 @@
                 }
 
                 button.shp-open-options {
+                    letter-spacing: 0.05em;
+                    color: $color-black;
+                    outline: none;
+                    padding: 12px 40px;
+                    transition: all 0.2s linear;
                     width: 100%;
                     background-color: $color-gray11;
                     border: none;
@@ -686,11 +694,6 @@
                     font-weight: 400;
                     font-size: 14px;
                     line-height: 19px;
-                    letter-spacing: 0.05em;
-                    color: $color-black;
-                    outline: none;
-                    padding: 12px 40px;
-                    transition: all 0.2s linear;
 
                     @include mq(l, max) {
                         width: 157px;
@@ -742,6 +745,11 @@
                 }
 
                 .srp-pickup-my-location__button {
+                    font-style: normal;
+                    font-weight: 500;
+                    font-size: 14px;
+                    line-height: 16px;
+                    letter-spacing: 0.05em;
                     background-color: $color-blue2;
                     border: none;
                     border-radius: 8px;
@@ -751,11 +759,6 @@
                     margin-top: 7px;
                     padding: 13px 0;
 
-                    font-style: normal;
-                    font-weight: 500;
-                    font-size: 14px;
-                    line-height: 16px;
-                    letter-spacing: 0.05em;
                     @include mq(xxl, min) {
                         height: 60.98px;
                     }
@@ -771,11 +774,12 @@
                     }
 
                     span {
+                        letter-spacing: 0.05em;
+                        color: $color-white;
                         font-weight: 700;
                         font-size: 14px;
                         line-height: 19px;
-                        letter-spacing: 0.05em;
-                        color: $color-white;
+
                         @include mq(xxl, min) {
                             font-weight: 700;
                             font-size: 28px;
@@ -798,15 +802,15 @@
                 }
 
                 &__wrapper {
+                    font-weight: normal;
+                    font-size: 14px;
+                    line-height: 16px;
+                    text-transform: uppercase;
                     background-color: $color-white;
                     border-radius: 100px;
                     width: 100%;
                     font-family: $font-family;
                     font-style: normal;
-                    font-weight: normal;
-                    font-size: 14px;
-                    line-height: 16px;
-                    text-transform: uppercase;
 
                     @include mq(l, max) {
                         width: 343px;
@@ -827,12 +831,12 @@
                 }
 
                 label {
-                    width: 50%;
-                    font-weight: 400;
-                    font-size: 14px;
                     line-height: 19px;
                     background-color: $color-white;
                     border-radius: 100px;
+                    width: 50%;
+                    font-weight: 400;
+                    font-size: 14px;
 
                     @include mq(xxl, min) {
                         font-weight: 400;
@@ -840,8 +844,8 @@
                         line-height: 38px;
                     }
 
-                    &:active {
-                    }
+                    // &:active {
+                    // }
                 }
             }
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 39e0c9f..7926d88 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -80,6 +80,7 @@ body .container-main.container-order-form .orderform-template.active {
             }
             .summary-cart-template-holder {
                 height: auto !important;
+
                 .summary-totalizers {
                     margin: 0;
                 }
@@ -190,8 +191,8 @@ body .container-main.container-order-form .orderform-template.active {
                     margin-top: 12px;
                     width: 100%;
                 }
-                .payment-method {
-                }
+                // .payment-method {
+                // }
             }
 
             .payment-group {
@@ -206,6 +207,8 @@ body .container-main.container-order-form .orderform-template.active {
                     gap: 12px;
                     width: 100%;
                     a {
+                        width: 91.39%;
+                        margin: 0;
                         display: none;
                         border: 1px solid rgb(0, 0, 0, 0.3);
                         border-radius: 6px;
@@ -213,16 +216,14 @@ body .container-main.container-order-form .orderform-template.active {
                         align-items: center;
                         text-align: center;
                         padding: 0 8px;
-                        width: 91.39%;
-                        margin: 0;
                         @media (max-width: 1024px) {
                             width: 100%;
                         }
                         span {
+                            font-size: 14px;
                             width: 100%;
                             padding: 11px 0;
                             font-weight: 400;
-                            font-size: 14px;
                             line-height: 24px;
                             letter-spacing: -0.01em;
                             color: #58595b;
@@ -234,11 +235,12 @@ body .container-main.container-order-form .orderform-template.active {
                         span {
                             font-size: 0 !important;
                             &::after {
+                                letter-spacing: -0.01em;
                                 font-family: "Open Sans";
                                 font-weight: 400;
                                 font-size: 14px;
                                 line-height: 24px;
-                                letter-spacing: -0.01em;
+
                                 content: "Boleto Faturado";
                                 @media (min-width: 2500px) {
                                     font-style: normal;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
index 42a2bc0..5fddb3a 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-vazio.scss
@@ -41,6 +41,7 @@
 
     &-links {
         .link-choose-products {
+            font-size: 0px;
             background: $white;
             transition: ease-in 0.22s all;
             outline: none;
@@ -50,7 +51,6 @@
             text-align: center;
             letter-spacing: 0.05em;
             color: $black;
-            font-size: 0px;
             text-transform: uppercase;
             border: 1px solid #000000;
             border-radius: 0%;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 31cb12e..8bb7b2d 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -119,13 +119,13 @@ body {
 
         &::before,
         &::after {
+            height: 2px;
+            width: 8px;
+            margin-top: 8px;
             content: "";
             background: $color-gray2;
             display: block;
             float: right;
-            height: 2px;
-            width: 8px;
-            margin-top: 8px;
         }
 
         &::before {