From fa96c824f4230ab2842d1ea7f0e90b48fec199be Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Thu, 9 Feb 2023 22:26:22 -0300
Subject: [PATCH] feat(cep):cep fechado responsivo finalizado

---
 styles/css/vtex.store-components.css          | 64 ++++++++++++++++++-
 .../pages/product/vtex.store-components.scss  | 52 ++++++++++++++-
 2 files changed, 110 insertions(+), 6 deletions(-)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index fdf9ae3..b9a9ba5 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -246,6 +246,13 @@
 .form {
   width: max-content;
 }
+@media screen and (max-width: 1024px) {
+  .form {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+}
 .form .content {
   width: 65.532%;
   height: 108px;
@@ -255,6 +262,11 @@
   grid-template-rows: 1fr 1fr;
   gap: 8px;
 }
+@media screen and (max-width: 1024px) {
+  .form .content {
+    width: 100%;
+  }
+}
 .form .content .inputName, .form .content .inputEmail {
   width: 100%;
   height: 40px;
@@ -262,6 +274,11 @@
   margin-right: 0;
   margin-bottom: 7px;
 }
+@media screen and (max-width: 1024px) {
+  .form .content .inputName, .form .content .inputEmail {
+    min-width: 0;
+  }
+}
 .form .submit {
   width: 100%;
   justify-content: center;
@@ -269,6 +286,7 @@
   grid-row: 2;
 }
 .form .submit :global(.vtex-button) {
+  display: block;
   width: 100%;
   background: #000000;
   width: 308px;
@@ -298,21 +316,41 @@
 
 .shippingContainer {
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
   position: relative;
   align-items: end;
+  width: max-content;
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer {
+    max-width: 100%;
+    min-width: 93.665%;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr 1fr;
+    height: 100px;
+  }
 }
 .shippingContainer :global(.vtex-address-form__postalCode) {
   display: grid;
   grid-column: 1/2;
   padding: 0;
+  min-width: 230px;
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    min-width: 100%;
+    max-width: 100%;
+    width: 100%;
+    grid-row: 1;
+  }
 }
 .shippingContainer :global(.vtex-button) {
   display: block;
   grid-column: 2/3;
   background: #000000;
-  width: max-content;
+  width: 100%;
   height: max-content;
+  border: 0;
+  border-radius: 0;
 }
 .shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
   font-size: 0;
@@ -336,7 +374,9 @@
 }
 .shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) {
   border: 1px solid #CCCCCC;
-  height: max-content;
+  height: 49px;
+  max-width: 100%;
+  border-radius: 0;
 }
 .shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
   color: #AFAFAF;
@@ -349,6 +389,7 @@
 }
 .shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
   font-size: 0;
+  width: max-content;
 }
 .shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
   content: "CALCULAR FRETE:";
@@ -360,10 +401,27 @@
   color: #929292;
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  width: max-content;
   position: absolute;
   grid-column: 3/4;
   right: 0;
   bottom: 25%;
   left: 0;
   margin-left: 32px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+}
+@media screen and (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    margin-left: 0;
+    grid-column: 1/4;
+    left: auto;
+    bottom: 0;
+  }
 }
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 0673bfe..270a411 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -218,6 +218,11 @@
 
 .form{
   width: max-content;
+  @media screen and (max-width: 1024px){
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
   .content{
     width: 65.532%;
     height: 108px;
@@ -226,12 +231,18 @@
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: 1fr 1fr;
     gap: 8px;
+    @media screen and (max-width: 1024px){
+      width: 100%;
+    }
     .inputName,.inputEmail{
       width: 100%;
       height: 40px;
       min-width: 150px;
       margin-right: 0;
       margin-bottom: 7px;
+      @media screen and (max-width: 1024px){
+        min-width: 0;
+      }
     }
   }
   .submit{
@@ -240,6 +251,7 @@
     grid-column: span 2;
     grid-row: 2;
     :global(.vtex-button){
+      display: block;
       width: 100%;
       background: #000000;
       width: 308px;
@@ -270,20 +282,36 @@
 }
 .shippingContainer{
   display: grid;
-  grid-template-columns: 1fr auto 1fr;
   position: relative;
   align-items: end;
+  width: max-content;
+  @media screen and (max-width: 1024px){
+    max-width: 100%;
+    min-width: 93.665%;
+    grid-template-columns: 1fr auto;
+    grid-template-rows: 1fr 1fr;
+    height: 100px;
+  }
   :global(.vtex-address-form__postalCode ){
     display: grid;
     grid-column: 1 / 2;
     padding: 0;
+    min-width: 230px;
+    @media screen and (max-width: 1024px){
+      min-width: 100%;
+      max-width: 100%;
+      width: 100%;
+      grid-row: 1;
+    }
   }
   :global(.vtex-button){
     display: block;
     grid-column: 2 / 3;
     background: #000000;
-    width: max-content;
+    width: 100%;
     height: max-content;
+    border: 0;
+    border-radius: 0;
     :global(.vtex-button__label){
       font-size: 0;
       padding: 0;
@@ -306,7 +334,9 @@
     grid-column: 1 / 2;
     :global(.vtex-input-prefix__group){
       border: 1px solid #CCCCCC;
-      height: max-content;
+      height: 49px;
+      max-width: 100%;
+      border-radius: 0;
       :global(.vtex-address-form-4-x-input){
         color: #AFAFAF;
         font-family: 'Open Sans',sans-serif;
@@ -319,6 +349,7 @@
     }
     :global(.vtex-input__label){
       font-size: 0;
+      width:max-content;
       &::after{
         content: "CALCULAR FRETE:";
         font-family: 'Open Sans',sans-serif;
@@ -331,12 +362,27 @@
     }
   }
   :global(.vtex-address-form__postalCode-forgottenURL){
+    width: max-content;
     position: absolute;
     grid-column: 3 / 4;
     right: 0;
     bottom: 25%;
     left: 0;
     margin-left: 32px;
+    font-family: 'Open Sans',sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    text-decoration-line:underline;
+    @media screen and (max-width: 1024px){
+      margin-left: 0;
+      grid-column:1 / 4;
+      left: auto;
+      bottom: 0;
+    }
   }
 }