From 79b7bc13fa3f56f1f37003c174451178cffd1203 Mon Sep 17 00:00:00 2001
From: guiprj <guilhermecamargo90@hotmail.com>
Date: Sun, 18 Dec 2022 22:48:30 -0300
Subject: [PATCH] feat: estilizacao versao mobile na parte de pagamento
 profile, envio e pagamento

---
 .../sass/checkout/_checkout-carrinho.scss     | 166 +++++++++++++++++-
 .../src/arquivos/sass/partials/_footer.scss   |  38 +++-
 2 files changed, 198 insertions(+), 6 deletions(-)

diff --git a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
index 88129eb..76a4891 100644
--- a/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
+++ b/checkout/src/arquivos/sass/checkout/_checkout-carrinho.scss
@@ -1139,7 +1139,6 @@ div#payments-title::after {
         grid-template-columns: 1fr 6fr 1fr 1fr;
         grid-template-rows: 1fr;
 
-
         td.product-image {
             grid-column: 1 / 2;
             grid-row: 1 / 3;
@@ -1194,11 +1193,8 @@ div#payments-title::after {
             justify-content: flex-end;
             align-items: flex-start;
         }
-
     }
 
-
-
     .row-fluid.summary {
         display: flex !important;
         flex-direction: column;
@@ -1216,7 +1212,167 @@ div#payments-title::after {
     }
 }
 
-
 ul.slick-dots {
     display: none !important;
 }
+
+@media (max-width: 1024px) {
+    .row-fluid.orderform-template.span12.active {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .orderform-template-holder.span8 {
+        width: 100%;
+    }
+
+    .orderform-template-holder.span8 .row-fluid {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+    }
+
+    div#client-profile-data {
+        width: 100%;
+    }
+
+    div#shipping-data {
+        width: 100%;
+    }
+
+    fieldset.payment-group {
+        width: 100%;
+        justify-content: center;
+        display: flex;
+        align-items: center;
+    }
+
+    .required.payment-group-list-btn {
+        width: 100%;
+    }
+
+    .steps-view {
+        width: 100% !important;
+        padding: 0 2px;
+    }
+
+    iframe.span12 {
+        width: 100%;
+    }
+
+    .cart-template.mini-cart.span4 {
+        width: 100% !important;
+    }
+
+    .cart-fixed.cart-fixed-transition {
+        width: 100%;
+    }
+
+    h2[data-i18n="totalizers.summary"] {
+        width: 100%;
+    }
+
+    td.monetary {
+        width: 100%;
+    }
+
+    .orderform-template-holder.span8 {
+        width: 100% !important;
+    }
+
+    .required.payment-group-list-btn a {
+        padding: unset !important;
+    }
+
+    div#payment-data {
+        width: 100%;
+    }
+
+    fieldset.box-client-info-pf {
+        width: 100%;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-template-rows: 1fr 1fr 1fr;
+
+        p.client-email.input.text.required {
+            grid-column: 1 / 3;
+            grid-row: 1 / 2;
+        }
+
+        p.client-first-name.input.pull-left.text.required {
+            grid-column: 1 / 2;
+            grid-row: 2/ 3;
+        }
+
+        p.client-last-name.input.pull-left.text.required {
+            grid-column: 2 / 3;
+            grid-row: 2 / 3;
+        }
+
+        p.client-document.input.pull-left.text.required.mask {
+            grid-column: 1 / 2;
+            grid-row: 3/ 4;
+        }
+
+        div {
+            grid-column: 2/ 3;
+            grid-row: 3/ 4;
+
+            width: 100%;
+        }
+    }
+
+    input#client-email {
+        all: unset;
+        width: 100% !important;
+        border: 1px solid $color-gray5;
+        height: 42px;
+        border-radius: 0.5rem;
+        padding-left: 10px;
+    }
+
+    p.client-email.input.text.required {
+        width: 100% !important;
+    }
+
+    p.client-first-name.input.pull-left.text.required {
+        width: 98%;
+    }
+
+    input#client-first-name {
+        width: 100%;
+    }
+
+    p.client-last-name.input.pull-left.text.required {
+        width: 98%;
+        margin-left: 10px;
+    }
+
+    input#client-last-name {
+        width: 100%;
+    }
+
+    p.client-document.input.pull-left.text.required.mask {
+        width: 98%;
+    }
+
+    p.client-phone.input.pull-left.text.required.mask {
+        width: 98%;
+        margin-left: 10px;
+    }
+
+    input#client-phone {
+        width: 100%;
+    }
+
+    input#client-document {
+        width: 100%;
+    }
+
+    label.checkbox.newsletter-label {
+        justify-content: flex-start;
+        gap: 10px;
+    }
+}
diff --git a/checkout/src/arquivos/sass/partials/_footer.scss b/checkout/src/arquivos/sass/partials/_footer.scss
index 6a16fd5..65deefc 100644
--- a/checkout/src/arquivos/sass/partials/_footer.scss
+++ b/checkout/src/arquivos/sass/partials/_footer.scss
@@ -45,7 +45,6 @@
                 width: 100%;
             }
         }
-
     }
 
     &__stamps {
@@ -109,3 +108,40 @@
         }
     }
 }
+
+@media (max-width: 1024px) {
+    .footerCheckout__wrapper {
+        .container {
+            display: grid;
+            grid-template-columns: fr 1fr 1fr;
+            grid-template-rows: 1fr 1fr 1fr;
+
+            .footerCheckout__address {
+                grid-column: 1 / 2;
+                grid-row: 2/ 3;
+                max-width: unset;
+            }
+
+            ul.footerCheckout__stamps {
+                grid-column: 1 / 2;
+                grid-row: 1 / 2;
+            }
+
+            ul.footerCheckout__developedBy {
+                grid-column: 1 / 2;
+                grid-row: 3 / 4;
+
+                display: flex;
+                justify-content: flex-start;
+            }
+        }
+    }
+}
+
+@media (max-width: 375px) {
+    .footerCheckout__wrapper {
+        .container {
+            grid-template-columns: 1fr;
+        }
+    }
+}