From 27bbfda151d6b4319bf510360d31b5d1e5fb9c14 Mon Sep 17 00:00:00 2001
From: Bernardo Waldhelm <ernaniwaldhelm@gmail.com>
Date: Sun, 18 Dec 2022 11:41:50 -0300
Subject: [PATCH] =?UTF-8?q?style(home):=20ajustando=20mobile=20e=20tablet?=
 =?UTF-8?q?=20na=20autentica=C3=A7=C3=A3o,=20finalizacao=20de=20compra?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-autenticacao.scss | 126 ++++++++++++++----
 .../sass/checkout/_checkout-carrinho.scss     | 100 ++++++++++----
 .../sass/checkout/_checkout-pagamento.scss    |  18 +++
 .../src/arquivos/sass/checkout/_checkout.scss |   4 +
 4 files changed, 195 insertions(+), 53 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 032699b..7fb682e 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -60,8 +60,8 @@
                     }
 
                     @media #{$mq-tablet}, #{$mq-mobile} {
-                        font-size: 14px;
-                        line-height: 16px;
+                        font-size: 10px;
+                        line-height: 12px;
                     }
 
 				}
@@ -82,8 +82,8 @@
                     }
 
                     @media #{$mq-tablet}, #{$mq-mobile} {
-                        font-size: 14px;
-                        line-height: 16px;
+                        font-size: 10px;
+                        line-height: 12px;
                     }
 				}
 			}
@@ -91,11 +91,15 @@
 
 		.client-email {
 			margin: 0 0 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
 
 			input {
                 border: 1px solid $color-black-1;
 				padding: 15px;
-                width: 765.37px;
+                width: 40%;
                 height: 50px;
                 border-radius: 5px 0px 0px 5px;
 				box-shadow: none;
@@ -117,13 +121,13 @@
                 }
 
                 @media #{$mq-desktop} {
-                    width: 443px;
+                    width: 45%;
                 }
                 @media #{$mq-tablet} {
-                    width: 865px;
+                    width: 85%;
                 }
                 @media #{$mq-mobile} {
-                    width: 216px;
+                    width: 216px !important;
                 }
 			}
 
@@ -145,16 +149,20 @@
                 text-transform: uppercase;
                 width: 219px;
 				height: 52px;
-                left: 56%;
                 top: 0;
+                position: inherit;
 
 				@media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                     padding: 12px 14px;
-                    width: 126.76px;
+                    width: 126.76px !important;
                     height: 52px;
                     font-size: 14px;
                     line-height: 19px;
                 }
+
+                @media #{$mq-mobile} {
+                    top: -2px;
+                }
 			}
 
 			span.help.error {
@@ -264,6 +272,7 @@
                     background-size: 100%;
                     display: block;
                     border: none;
+                    cursor: pointer;
 
                     @media #{$mq-desktop} {
                         width: 15px;
@@ -332,6 +341,7 @@
                     background-size: 100%;
                     display: block;
                     border: none;
+                    cursor: pointer;
 
                     @media #{$mq-desktop} {
                         width: 15px;
@@ -421,6 +431,7 @@
                         display: block;
                         background-size: 100%;
                         border: none;
+                        cursor: pointer;
 
                         @media #{$mq-desktop} {
                             width: 15px;
@@ -436,16 +447,46 @@
 				}
 			}
 
+            .box-client-info-pf {
+                @media #{$mq-mobile} {
+                    width: 100%;
+                }
+            }
+
 			.accordion-inner {
 				padding: 0;
 
-				/* General configurations */
-
 				.client-notice {
 					display: none;
 				}
 
+                .client-first-name, .client-last-name, .client-document, .client-phone  {
+                    @media #{$mq-tablet}{
+                        width: 49%;
+                        float: left !important;
+                    }
+
+                    @media #{$mq-mobile}  {
+                        width: 47%;
+                        float: left !important;
+                    }
+                }
+
+                .client-first-name, .client-document {
+                    @media #{$mq-tablet}  {
+                        margin-right: 15px;
+                    }
+
+                    @media #{$mq-mobile} {
+                        margin-right: 10px;
+                    }
+                }
+
 				p {
+                    @media #{$mq-tablet}, #{$mq-mobile} {
+                        width: 100%;
+                    }
+
 					label {
 						font-family: $font-family;
                         font-style: normal;
@@ -484,7 +525,7 @@
 
                     #client-first-name, #client-last-name, #client-document, #client-phone{
                         width: 259px;
-                        height: 41px;
+                        height: 51px;
                         border: 1px solid #E0E0E0;
                         border-radius: 5px;
                         font-size: 26px;
@@ -498,9 +539,11 @@
 
                         @media #{$mq-desktop} {
                             width: 127px;
+                            height: 32px;
                         }
                         @media #{$mq-tablet}, #{$mq-mobile} {
-                            width: 50%;
+                            width: 100%;
+                            height: 32px;
                         }
                     }
 
@@ -630,7 +673,7 @@
                     }
 
                     @media #{$mq-tablet}, #{$mq-mobile} {
-                        width: 100%;
+                        width: 95%;
                         height: auto;
                     }
 
@@ -672,6 +715,7 @@
                                 background: url('https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-M3Academy.png') no-repeat center center;
                                 width: 35px;
                                 height: 35px;
+                                cursor: pointer;
 
                                 @media #{$mq-desktop}, #{$mq-mobile}{
                                     width: 18px;
@@ -692,6 +736,7 @@
                                 background: url('https://agenciamagma.vteximg.com.br/arquivos/icon-radios-input-Active-M3Academy.png') no-repeat center center;
                                 width: 35px;
                                 height: 35px;
+                                cursor: pointer;
 
                                 @media #{$mq-desktop}, #{$mq-mobile}{
                                     width: 18px;
@@ -718,7 +763,7 @@
                         line-height: 33px;
                         color: $color-gray2;
 
-                        @media #{$mq-desktop} {
+                        @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                             font-size: 12px;
                             line-height: 16px;
 
@@ -780,6 +825,7 @@
                         -webkit-transform: translate(0, -50%);
                         -ms-transform: translate(0, -50%);
                         transform: translate(0, -50%);
+                        cursor: pointer;
 
                         @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                             width: 22px;
@@ -836,15 +882,21 @@
 
 
                     @media #{$mq-desktop} {
-                        width: 296px;
-                        height: 45px;
+                        width: 260px;
+                        height: 19px;
                         font-size: 16px;
                         line-height: 20px;
                     }
 
                     @media #{$mq-tablet}, #{$mq-mobile} {
-                        width: 100%;
-                        height: 45px;
+                        width: 96%;
+                        height: 19px;
+                        font-size: 16px;
+                        line-height: 20px;
+                    }
+
+                    @media #{$mq-mobile} {
+                        width: 90%;
                     }
 
                 }
@@ -863,7 +915,7 @@
                     }
                 }
 
-                #ship-number, #ship-complement, #ship-reference, #ship-receiverName  {
+                #ship-number, #ship-street, #ship-complement, #ship-reference, #ship-receiverName  {
                     width: 573px;
                     height: 41px;
                     border: 1px solid #E0E0E0;
@@ -887,7 +939,8 @@
                     }
 
                     @media #{$mq-tablet}, #{$mq-mobile} {
-                        width: 100%;
+                        width: 96%;
+                        height: 21px;
                     }
                 }
 
@@ -942,6 +995,18 @@
                     display: none;
                 }
 
+                .payment-group {
+                    @media #{$mq-tablet}, #{$mq-mobile} {
+                        width: 100%;
+                    }
+
+                    &-list-btn {
+                        @media #{$mq-tablet}, #{$mq-mobile} {
+                            width: 100%;
+                        }
+                    }
+                }
+
                 #payment-group-creditCardPaymentGroup, #payment-group-bankInvoicePaymentGroup {
                     display: block;
                     border: 1px solid $color-black-1;
@@ -1001,9 +1066,14 @@
                 #payment-group-creditCardPaymentGroup {
                     margin-top: 100px;
 
-                    @media #{$mq-desktop} {
+                    @media #{$mq-desktop}, #{$mq-tablet} {
                         margin-top: 25px;
                     }
+
+                    @media  #{$mq-mobile} {
+                        margin-top: 50px;
+                    }
+
                     &::after {
                         content: 'Cartão de Débito';
                         border: 1px solid $color-black-1;
@@ -1018,7 +1088,7 @@
                         width: 406px;
                         padding: 13px 0;
 
-                        @media #{$mq-desktop} {
+                        @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                             top: -60px;
                             width: 209px;
                             font-size: 14px;
@@ -1037,8 +1107,12 @@
                     }
                 }
                 #payment-group-bankInvoicePaymentGroup {
+                    @media #{$mq-tablet}, #{$mq-mobile} {
+                        margin-bottom: 65px;
+                    }
+
                     &::after {
-                        content: 'Cartão de Débito';
+                        content: 'Boleto Faturado';
                         border: 1px solid $color-black-1;
                         border-radius: 6px;
                         display: flex;
@@ -1051,7 +1125,7 @@
                         width: 406px;
                         padding: 13px 0;
 
-                        @media #{$mq-desktop} {
+                        @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                             bottom: -60px;
                             width: 209px;
                             font-size: 14px;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 36f86bc..352acba 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -18,12 +18,20 @@
         border-radius: 5px;
         padding: 16px 31px;
 
+        @media #{$mq-tablet}, #{$mq-mobile} {
+            padding: 0;
+        }
+
         @include mq(md, max) {
             margin: 0px 0 25px 0;
             border-left: none;
             border-right: none;
             border-radius: 0;
         }
+
+        &-items {
+            margin-bottom: 20px;
+        }
     }
     .cart-fixed.affix {
         position: relative !important;
@@ -34,7 +42,7 @@
         font-family: $font-family;
         padding: 24px 17px;
         overflow: initial;
-        width: 100%;
+        width: auto;
         h2 {
             font-family: 'Tenor Sans';
             font-style: normal;
@@ -67,7 +75,6 @@
         .cart {
             border:  none;
 
-
             ul li {
                 display: flex;
                 align-items: center;
@@ -145,24 +152,26 @@
             background: $color-white;
         }
 
-        #go-to-cart-button a {
-            font-family: $font-family;
-            font-style: normal;
-            font-weight: 400;
-            font-size: 24px;
-            line-height: 33px;
-            text-align: right;
-            text-decoration-line: underline;
-            color: $color-black;
-            margin-right: 20px;
+        #go-to-cart-button {
+            margin-top: 30px;
+            a {
+                font-family: $font-family;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 24px;
+                line-height: 33px;
+                text-align: right;
+                text-decoration-line: underline;
+                color: $color-black;
+                margin-right: 20px;
 
-            @media #{$mq-desktop}, #{$mq-mobile}, #{$mq-tablet} {
-                font-size: 12px;
-                line-height: 16px;
+                @media #{$mq-desktop}, #{$mq-mobile}, #{$mq-tablet} {
+                    font-size: 12px;
+                    line-height: 16px;
 
+                }
             }
         }
-
         .summary-totalizers {
             td.info {
                 width: 100%;
@@ -188,18 +197,16 @@
             outline: none;
             transition: all 0.2s linear;
 
-            width: 642px;
+            width: 100%;
             height: 61px;
 
             @media #{$mq-desktop} {
-                width: 331px;
                 height: 42px;
                 font-size: 14px;
                 line-height: 19px;
             }
 
             @media #{$mq-mobile}, #{$mq-tablet} {
-                width: 100%;
                 font-size: 14px;
                 line-height: 19px;
             }
@@ -222,6 +229,7 @@
     .cart-items {
         .product-item {
             padding: 16px 0;
+            position: relative;
         }
 
         th {
@@ -241,6 +249,7 @@
                 &.product,
                 &.product-price,
                 &.quantity,
+                &.quantity-price,
                 &.shipping-date {
                     display: none;
                 }
@@ -264,6 +273,10 @@
                 width: 72px;
             }
 
+            @media #{$mq-mobile} {
+                position: inherit !important;
+            }
+
             img {
                 height: 146px;
                 width: 146px;
@@ -298,6 +311,18 @@
                     font-size: 12px;
                     line-height: 14px;
                     margin-left: 16px;
+                    white-space: normal;
+                }
+
+                @media #{$mq-tablet}{
+                    position: absolute;
+                    left: 60px;
+                }
+
+                @media #{$mq-mobile} {
+                    position: absolute;
+                    left: 43px;
+                    top: 20px;
                 }
 
                 &:hover {
@@ -339,12 +364,14 @@
             @include mq(md, max) {
                 min-width: 78px;
             }
-            @media (max-width: 490px) {
+            @media #{$mq-tablet}, #{$mq-mobile} {
                 position: absolute;
-                bottom: 0;
                 right: 0;
+                top: 30px;
             }
 
+
+
             span.list-price {
                 font-family: $font-family-secundary;
                 font-style: normal;
@@ -378,13 +405,23 @@
             border: 1px solid $color-gray3;
 
             @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
-                max-width: 100px;
+                max-width: 76px;
                 height: 14px;
                 margin: 14px auto 0;
             }
 
-            @media (max-width: 490px) {
-                margin-left: 84px !important;
+            @media #{$mq-tablet}  {
+                position: absolute;
+                left: 80px;
+                top: 10px;
+
+            }
+
+            @media #{$mq-mobile} {
+                position: absolute;
+                margin: 0;
+                bottom: 40px;
+                left: 20px;
             }
 
             input {
@@ -517,10 +554,13 @@
                 line-height: 38px;
                 color: $color-black;
 
-                @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile}{
+                @media #{$mq-desktop} {
                     font-size: 14px;
                     line-height: 19px;
+                }
 
+                @media #{$mq-tablet}, #{$mq-mobile} {
+                    display: none;
                 }
             }
         }
@@ -547,6 +587,11 @@
                     height: 10px;
                 }
 
+                @media #{$mq-tablet}, #{$mq-mobile} {
+                    position: absolute;
+                    top: -10px;
+                }
+
                 @include mq(md, max) {
                     font-size: 18px;
                 }
@@ -885,7 +930,7 @@
                         text-decoration-line: underline;
                         white-space: nowrap;
 
-                        @media #{$mq-desktop} {
+                        @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
                             font-size: 10px;
                             line-height: 12px;
                         }
@@ -1276,6 +1321,7 @@
         }
 
         .btn-place-order-wrapper {
+            width: 100%;
             a {
                 display: flex;
                 align-items: center;
@@ -1297,7 +1343,7 @@
                 }
 
                 @media #{$mq-tablet}, #{$mq-mobile} {
-                    width: 100%;
+                    width: 95%;
                     height: 42px;
                 }
 
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..fb2505f 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -4,8 +4,26 @@ body .container-main.container-order-form .orderform-template.active {
         margin-left: unset;
         margin-right: 0;
         float: right;
+
+        @media #{$mq-mobile}, #{$mq-tablet} {
+            width: 100%;
+        }
     }
     .orderform-template-holder {
         width: 66.1132%;
+
+        @media #{$mq-tablet}, #{$mq-mobile} {
+            width: 100%;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .client-profile-data, .shipping-data, .payment-data {
+            @media #{$mq-tablet}, #{$mq-mobile} {
+                width: 97%;
+                margin-left: 0;
+                float: left;
+            }
+        }
     }
 }
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 16e6a3f..a6e524b 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -63,6 +63,10 @@ body {
     .container-order-form,
     .container-cart {
         width: 80%;
+
+        @media #{$mq-mobile} {
+            width: 90%;
+        }
     }
 }