From ad8684987eacba3daf0418e62ab8a3a2fa3225b1 Mon Sep 17 00:00:00 2001
From: ManuelaLuanaSchumackerTavares <manuelaluana.dev@gmail.com>
Date: Tue, 20 Dec 2022 15:58:00 -0300
Subject: [PATCH] =?UTF-8?q?fix(carrinho):=20Concerta=20bot=C3=A3o=20de=20q?=
 =?UTF-8?q?uantidade=20de=20itens=20e=20reformula=20layout=20para=20ficar?=
 =?UTF-8?q?=20compativel=20com=20o=20figma?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sass/checkout/_checkout-carrinho.scss     | 81 +++++++++++++------
 .../src/arquivos/sass/checkout/_checkout.scss | 11 +--
 2 files changed, 63 insertions(+), 29 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 6f1bb40..a90b339 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1,6 +1,13 @@
-.container {
-    @include mq(md, max) {
-        width: 100%;
+// .container {
+//     @include mq(pg, max) {
+//         width: 100%;
+//     }
+// }
+
+body .container-order-form,
+body .container-cart {
+    @include mq(pg, max) {
+        width: 100% !important;
     }
 }
 
@@ -18,7 +25,7 @@
         border-radius: 5px;
         padding: 16px;
 
-        @include mq(md, max) {
+        @include mq(pg, max) {
             margin: 0px 0 25px 0;
             border-left: none;
             border-right: none;
@@ -132,6 +139,10 @@
             font-size: 14px;
             line-height: 16px;
 
+            @include mq(pg, max) {
+                display: none;
+            }
+
             @include mq(xxl, min) {
                 font-size: 28px;
                 line-height: 33px;
@@ -191,7 +202,7 @@
                 max-width: 100%;
                 width: auto;
 
-                @include mq(sm, max) {
+                @include mq(pg, max) {
                     height: 72px;
                     width: auto;
                 }
@@ -201,8 +212,8 @@
         .product-name {
             padding-right: 0;
 
-            @include mq(lg, max) {
-                width: 250px;
+            @include mq(pg, max) {
+                padding: 0 0 10px !important;
             }
 
             a {
@@ -219,6 +230,12 @@
                     text-decoration: none;
                 }
 
+                @include mq(pg, max) {
+                    position: absolute;
+                    top: 25px;
+                    padding: 0 16px;
+                }
+
                 @include mq(xxl, min) {
                     font-size: 28px;
                     line-height: 33px;
@@ -245,7 +262,7 @@
                 line-height: 33px;
             }
 
-            @include mq(md, max) {
+            @include mq(pg, max) {
                 display: none;
             }
         }
@@ -257,6 +274,13 @@
             @include mq(md, max) {
                 min-width: 78px;
             }
+
+            @include mq(pg, max) {
+                position: absolute;
+                top: 50px;
+                right: 0;
+            }
+
             @media (max-width: 490px) {
                 position: absolute;
                 bottom: 0;
@@ -306,8 +330,12 @@
             padding: 0;
             width: max-content !important;
 
-            @media (max-width: 490px) {
+            @media (max-width: 1024px) {
                 margin-left: 84px !important;
+                // width: 24px !important;
+                position: absolute !important;
+                left: 0 !important;
+                top: 50px !important;
             }
 
             input {
@@ -322,10 +350,6 @@
                 width: 38px;
                 color: $color-gray2;
                 box-shadow: none;
-
-                @include mq(lg, max) {
-                    width: 24px !important;
-                }
             }
 
             .icon-plus-sign,
@@ -358,12 +382,12 @@
 
             .item-quantity-change {
                 @media (max-width: 979px) and (min-width: 768px) {
-                    position: inherit;
-                    bottom: inherit;
-                    left: inherit;
-                    height: inherit;
-                    width: inherit;
-                    top: inherit;
+                    position: relative;
+                    bottom: 0;
+                    left: 0;
+                    height: auto;
+                    width: auto;
+                    top: 0;
                 }
 
                 @media (max-width: 490px) {
@@ -402,14 +426,18 @@
                 font-size: 28px;
                 line-height: 38px;
             }
-            @include mq(md, max) {
+            @include mq(pg, max) {
                 display: none;
             }
         }
 
         .item-remove {
-            @media (max-width: 490px) {
-                top: 0;
+            @media (max-width: 1024px) {
+                position: absolute;
+                top: 2px;
+                right: 0;
+                width: 24px;
+                padding: 4px 0;
             }
             .icon::before {
                 color: $color-gray4;
@@ -443,7 +471,7 @@
             .srp-container {
                 padding: 0 0 0 10px;
 
-                @include mq(md, max) {
+                @include mq(pg, max) {
                     padding: 0 16px;
                 }
 
@@ -741,6 +769,11 @@
             padding: 0;
             width: 346px;
 
+            @include mq(pg, max) {
+                width: 100% !important;
+                padding: 0 16px;
+            }
+
             .coupon-data {
                 #cart-link-coupon-add {
                     text-decoration: none;
@@ -899,7 +932,7 @@
         flex-direction: column;
         width: 343px;
 
-        @include mq(md, max) {
+        @include mq(pg, max) {
             padding: 0 16px;
             width: calc(100% - 32px);
             float: none;
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 00466a1..d223da8 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -68,13 +68,14 @@ body {
 
 #cart-title,
 #orderform-title {
-    color: $color-gray2;
+    padding: 0 16px;
+    color: $color-black;
     font-family: $font-family;
-    font-weight: 500;
-    font-size: 36px;
-    line-height: 42px;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
     margin: 40px 0 30px;
-    letter-spacing: 0.1em;
+    letter-spacing: 0.05em;
     text-transform: uppercase;
 
     @include mq(md, max) {
-- 
2.34.1