From c01d2bc2fe570d711b6b1b01f3c9966cfaae1520 Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Sat, 24 Dec 2022 01:45:57 -0300
Subject: [PATCH] feat: cria estilizacao para responsividade do cart

---
 .../sass/checkout/_checkout-autenticacao.scss | 230 ++++++++++++++++--
 .../sass/checkout/_checkout-carrinho.scss     |  85 ++++++-
 .../sass/checkout/_checkout-pagamento.scss    |  12 +
 .../src/arquivos/sass/checkout/_checkout.scss |  63 ++++-
 .../src/arquivos/sass/partials/_footer.scss   |   4 +-
 .../src/arquivos/sass/utils/_variaveis.scss   |   3 +-
 6 files changed, 365 insertions(+), 32 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
index 13375c3..f2c02a8 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-autenticacao.scss
@@ -58,9 +58,9 @@
 
 
 
-			@media (min-width:2500px) {
-				max-width: none;
-			}
+			// @media (min-width:2500px) {
+			// 	max-width: none;
+			// }
 
 			input {
 				box-shadow: none;
@@ -142,12 +142,26 @@
 			h3 {
 				color: #303030;
 				margin: 0 0 8px 0;
+
+				@media (min-width:2500px) {
+					font-weight: 700;
+					font-size: 24px;
+					line-height: 33px;
+				}
 			}
 
 			ul {
+				display: block;
+
+				@media (min-width: 2500px) {
+					display: block;
+
+				}
+
 				margin: 0;
 
 				li {
+
 					span {
 						font-family: $font-family;
 						color: $color-black;
@@ -225,12 +239,16 @@ label.vtex-omnishipping-1-x-leanShippingOptionActive {
 }
 
 #ship-postalCode {
-	// width: 100%;
-	// min-width: 95%;
+	width: 100%;
+	min-width: 95%;
 	border-radius: 8px;
 	border: 1px solid $color-gray6;
 	height: 40px;
 
+	@media (min-width: 2500px) {
+		height: 55px;
+	}
+
 }
 
 .ship-number {
@@ -254,26 +272,32 @@ input#client-last-name,
 input#client-document,
 input#client-phone {
 	width: 100%;
+	height: 32px;
+
+	@media (max-width: 767px) {
+		width: 98.8%;
+	}
 }
 
 input#client-first-name {
 	width: 96%;
+	height: 32px;
 
 	@media (max-width: 1024px) {
 		width: 96%;
 	}
 }
 
-p.client-first-name.input.pull-left.text.required,
-p.client-last-name.input.pull-left.text.required {
-	max-width: 48%;
-}
+// p.client-first-name.input.pull-left.text.required,
+// p.client-last-name.input.pull-left.text.required {
+// 	max-width: 48%;
+// }
 
 p.client-last-name.input.pull-left.text.required {
-	margin-left: 5px;
+
 
 	@media (max-width: 1024px) {
-		max-width: 46.9%;
+		max-width: 47.9%;
 	}
 }
 
@@ -282,6 +306,7 @@ input#client-phone {
 	width: 92%;
 
 
+
 	@media (max-width: 1024px) {
 		width: 96%;
 	}
@@ -296,9 +321,14 @@ input#client-phone {
 .client-document.input.pull-left.text.required.mask,
 p.client-phone.input.pull-left.text.required.mask {
 	width: 48%;
+	height: 42px;
 
 	@media (max-width: 1024px) {
-		width: 46%;
+		width: 48.6%;
+	}
+
+	@media (max-width: 767px) {
+		width: 48%;
 	}
 }
 
@@ -457,6 +487,45 @@ p.submit.btn-submit-wrapper {
 .step.accordion-group.client-profile-data.active {
 	width: 88.5%;
 	height: auto;
+
+	@media (min-width: 2500px) {
+		width: 100%;
+
+	}
+
+	@media (max-width: 1024px) {
+		width: 95.41% !important;
+		margin: 0 16px 18px;
+
+	}
+}
+
+.step.accordion-group.shipping-data {
+
+	@media (max-width: 1024px) {
+		width: 95.313% !important;
+		margin: 0 16px 18px;
+
+	}
+}
+
+.payment-data .step {
+
+	@media (max-width: 1024px) {
+		width: 95.41% !important;
+		margin: 0 16px 18px;
+
+	}
+
+}
+
+.cart-fixed.affix-top.cart-fixed-transition {
+	@media (max-width: 1024px) {
+		width: 96.68%;
+		margin: 0 16px;
+
+	}
+
 }
 
 .cart-template .cart-fixed {
@@ -537,7 +606,15 @@ p.input.ship-postalCode.required.text {
 input#client-email {
 	width: 96%;
 
+	height: 42px;
 
+	@media (max-width:1024px) {
+		width: 98.536%;
+	}
+
+	@media (max-width: 767px) {
+		min-width: 100%;
+	}
 }
 
 .box-client-info {
@@ -552,6 +629,12 @@ input#client-email {
 	height: 100%;
 	padding: 0;
 
+	@media (max-width: 1024px) {
+		width: 96.29% !important;
+		margin: 0 16px 17px;
+
+	}
+
 	.accordion-toggle {
 
 
@@ -597,6 +680,10 @@ input#ship-receiverName {
 p.client-first-name.input.pull-left.text.required,
 p.client-last-name.input.pull-left.text.required {
 	width: 46%;
+
+	@media (max-width: 1025px) {
+		width: 49.167%;
+	}
 }
 
 .client-notice,
@@ -614,6 +701,8 @@ p.client-last-name.input.pull-left.text.required {
 
 
 
+
+
 		i::before {
 			display: none;
 		}
@@ -715,6 +804,11 @@ button#go-to-shipping {
 		}
 
 		span[data-i18n="clientProfileData.identification"]::before {
+			@media (min-width: 2500px) {
+				font-size: 32px !important;
+				line-height: 37px;
+			}
+
 			content: "Identificação";
 			color: $color-black2;
 			font-family: $font-family-secundary;
@@ -762,8 +856,14 @@ a#edit-shipping-data,
 
 .mini-cart .url {
 	img {
+		width: 60px;
+		height: 60px;
+		object-fit: cover;
 
-		width: 116.5px;
+		@media (min-width: 2500px) {
+
+			width: 116.5px;
+		}
 
 	}
 }
@@ -772,9 +872,9 @@ a#edit-shipping-data,
 // 	margin-bottom: 50px;
 // }
 
-span.shipping-date.pull-left {
-	display: none;
-}
+// span.shipping-date.pull-left {
+// 	display: none;
+// }
 
 strong.price.pull-right {
 	@media (min-width: 2500px) {
@@ -820,4 +920,102 @@ strong.price.pull-right {
 	display: none !important;
 
 	@media (min-width: 2500px) {}
+}
+
+.checkout-container .shipping-data .accordion-group .accordion-inner p input {
+
+	min-width: 95.5% !important;
+	height: 35.01px !important;
+	font-family: "Open Sans";
+	font-style: normal;
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 19px;
+	color: $color-gray2;
+	;
+
+	@media (min-width: 2500px) {
+		height: 45px !important;
+		font-size: 28px;
+		line-height: 38px;
+	}
+}
+
+li.hproduct.item.muted {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.summary-cart-template-holder.cart-fixed-transition {
+	height: 60px !important;
+
+	@media (min-width: 2500px) {
+		height: 116.5px !important;
+	}
+
+	@media (max-width: 1024px) {
+		height: 120px !important;
+	}
+}
+
+.box-client-info-pf {
+	@media (max-width: 767px) {
+		width: 100%;
+	}
+}
+
+.mini-cart .summary .summary-totalizers {
+	@media (max-width: 1024px) {
+		margin-right: 0;
+		padding: 0;
+	}
+}
+
+.SecurityEnvironmentIcon {
+	display: block;
+
+	@media (max-width: 767px) {
+		display: none;
+	}
+
+
+	@media (max-width: 1025px) {
+		display: none;
+	}
+}
+
+
+
+.PaymentCardNumber input,
+.PaymentCardHolderName input {
+
+	@media (max-width: 767px) {
+		width: 92% !important;
+		min-width: none;
+	}
+
+	@media (max-width: 1025px) {
+		width: 92% !important;
+		min-width: none;
+	}
+}
+
+p.PaymentCardHolderDocument.input.text.required.mask,
+.BillingAddress.BillingAddress-BRA.clearfix,
+p.ChangeNumberOfPayments.clearfix {
+	display: block;
+
+	@media (max-width: 767px) {
+		display: none;
+	}
+}
+
+.vtex-omnishipping-1-x-option:hover,
+.vtex-omnishipping-1-x-leanShippingOptionActive {
+	background: #F2F2F2 !important;
+}
+
+.FormFieldLabel {
+	color: $color-black !important;
 }
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index e2b7aec..50fadf9 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -20,7 +20,8 @@
         box-sizing: border-box;
         border-radius: 5px;
         padding: 16px;
-        height: 150px;
+        height: 100%;
+        min-height: 120px;
 
         @include mq(md, max) {
             margin: 0px 0 25px 0;
@@ -75,7 +76,8 @@
 
                 .shipping-date,
                 .price {
-                    color: #7d7d7d;
+                    color: $color-gray2;
+                    ;
                 }
             }
         }
@@ -543,32 +545,35 @@
 
                     &~button {
                         background: $color-blue2;
-                        ;
+
+                        margin-left: 8px;
+                        background: #00c8ff;
                         border-radius: 8px;
                         border: none;
-                        color: $color-white;
+                        color: #fff;
                         height: 36px;
                         outline: none;
                         position: absolute;
-                        right: -150px;
-                        top: 39px;
-                        transition: all 0.2s linear;
+                        left: 170px;
+                        top: 38px;
+                        transition: all .2s linear;
                         width: 100px;
                         text-transform: uppercase;
                         font-style: normal;
                         font-weight: 700;
                         font-size: 14px;
                         line-height: 19px;
-                        letter-spacing: 0.05em;
+                        letter-spacing: .05em;
                         cursor: pointer;
 
                         @media (min-width: 2500px) {
-                            width: 194.16px;
+                            width: 100%;
                             height: 55px;
-                            right: -413px;
+                            left: 100%;
                             font-size: 28px;
                             line-height: 38px;
-                            top: 55px;
+                            top: 30%;
+                            margin-left: 18.04px;
                         }
 
                         @media (max-width: 375px) {
@@ -667,11 +672,13 @@
                         }
 
                         &__sla {
-                            color: #7d7d7d;
+                            color: $color-gray2;
+                            ;
                         }
 
                         &__price {
-                            color: #7d7d7d;
+                            color: $color-gray2;
+
                             font-weight: 500;
                         }
 
@@ -1047,7 +1054,15 @@
 .payment-group-list-btn {
     margin: 0;
 
+    width: 100% !important;
+
+    @media (max-width: 1025px) {
+        width: 99.81% !important;
+    }
+
     a {
+
+
         display: none;
         padding: 13px 9px;
         border: 1px solid $color-gray2 ;
@@ -1055,6 +1070,10 @@
         text-align: center;
         margin: 12px 0 0 0;
 
+        @media (max-width: 1025px) {
+            width: 98.187% !important;
+        }
+
         span {
             margin: 0 !important;
             padding: 0 !important;
@@ -1091,4 +1110,44 @@
     a[data-name="Mercado Pago"] {
         display: block;
     }
+}
+
+.vtex-shipping-preview-0-x-pc .ship-postalCode {
+
+    width: 100% !important;
+}
+
+input.success:not([invalid="true"]) {
+
+    color: #7D7D7D;
+    font-weight: 400;
+    font-size: 14px;
+}
+
+fieldset.payment-group {
+    @media (min-width: 2500px) {
+        width: 31.516%;
+    }
+
+    @media (max-width: 1025px) {
+        width: 99.81% !important;
+    }
+}
+
+.payment-group-item {
+    @media (max-width: 1025px) {
+        width: 99.81% !important;
+    }
+}
+
+.steps-view {
+    @media (min-width: 2500px) {
+        width: 60%;
+    }
+
+    @media (max-width: 1025px) {
+        width: 96.77% !important;
+        margin-top: 12px;
+    }
+
 }
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
index 9a52731..e411dc7 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-pagamento.scss
@@ -5,7 +5,19 @@ body .container-main.container-order-form .orderform-template.active {
         margin-right: 0;
         float: right;
     }
+
     .orderform-template-holder {
         width: 66.1132%;
+
+        @media (max-width: 1025px) {
+            width: 100% !important;
+        }
     }
 }
+
+.row-fluid .span6 {
+
+    @media (max-width: 1025px) {
+        width: 100% !important;
+    }
+}
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/checkout/_checkout.scss b/checkout/src/arquivos/sass/checkout/_checkout.scss
index 5b5d583..3fec6ec 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout.scss
@@ -9,7 +9,8 @@ html {
 }
 
 footer .footerCheckout__wrapper {
-    width: 94.9734%;
+    // width: 94.9734%;
+    width: 100%;
     margin: auto auto 0 auto;
 }
 
@@ -87,6 +88,13 @@ body {
     @include mq(md, max) {
         margin-left: 30px;
     }
+
+
+    @media (max-width: 1024px) {
+        margin-left: 20px;
+
+    }
+
 }
 
 .dropdown {
@@ -130,4 +138,57 @@ body {
             transform: rotate(0);
         }
     }
+}
+
+
+body .container-order-form {
+    @media (max-width: 1024px) {
+
+
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+}
+
+// .step.accordion-group.client-profile-data.active {
+//     @media (max-width: 1025px) {
+//         width: 93.34%;
+//     }
+// }
+
+// .step.accordion-group.client-profile-data.active {
+//     @media (max-width: 1025px) {
+//         width: 93.34%;
+//     }
+// }
+
+.row-fluid div#shipping-data {
+    @media (max-width: 1025px) {
+        width: 100%;
+        margin-left: 0;
+    }
+}
+
+body .container-main.container-order-form .orderform-template.active .mini-cart {
+    @media (max-width: 1025px) {
+        width: 100%;
+    }
+}
+
+body .container-main.container-order-form .orderform-template.active .mini-cart {
+    @media (max-width: 1025px) {
+        float: none;
+
+    }
+}
+
+.checkout-container .row-fluid.orderform-template.span12.active {
+    @media (max-width: 1025px) {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
 }
\ No newline at end of file
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 28dc37b..f519e2f 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -2,8 +2,10 @@
 .footerCheckout {
     border-top: none;
     color: $color-gray2;
-    bottom: 0;
+
     width: 100%;
+    margin-top: auto;
+    bottom: 0;
 
 
     &__wrapper {
diff --git a/checkout/src/arquivos/sass/utils/_variaveis.scss b/checkout/src/arquivos/sass/utils/_variaveis.scss
index 099e90f..2fb8a58 100644
--- a/checkout/src/arquivos/sass/utils/_variaveis.scss
+++ b/checkout/src/arquivos/sass/utils/_variaveis.scss
@@ -11,7 +11,8 @@ $color-black2: #000000;
 $color-white: #fff;
 
 $color-gray: #6c6c6c;
-$color-gray2: #7d7d7d;
+$color-gray2: #7D7D7D;
+;
 $color-gray3: #f0f0f0;
 $color-gray4: #8d8d8d;
 $color-gray5: #e5e5e5;
-- 
2.34.1