From fb7d5e5292ae904fc733e07c36869bdb0c88f5e6 Mon Sep 17 00:00:00 2001
From: Emmanuel Vitor <emmanuelvitor.ti@gmail.com>
Date: Sun, 5 Feb 2023 13:21:29 -0300
Subject: [PATCH] feat: cria estilizacao responsiva  da newsletter.

---
 styles/css/vtex.store-components.css          | 105 ++++++++++++++-
 .../pages/product/vtex.store-components.scss  | 121 +++++++++++++++++-
 2 files changed, 223 insertions(+), 3 deletions(-)

diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..5379403 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -8,5 +8,108 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
-  background: red;
+  background: #000;
+  color: #fff;
+  margin: 64px 0;
+}
+@media (max-width: 1024px) {
+  .newsletter {
+    margin: 32px 0;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-container) {
+  padding: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) {
+  padding: 32px 0 13px;
+  width: 100%;
+  max-width: 774px;
+  position: relative;
+}
+@media (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) {
+    max-width: 100%;
+    padding: 64px 0 32px;
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label {
+  display: flex;
+  flex-direction: column;
+  font-size: 0;
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::before {
+  font-family: "Open Sans", sans-serif;
+  content: "Assine nossa newsletter";
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #FFFFFF;
+  padding-bottom: 4px;
+}
+@media (max-width: 1920px) {
+  .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::before {
+    padding-bottom: 10px;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::after {
+  content: "Receba ofertas e novidades por e-mail";
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #929292;
+}
+@media (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) .label::after {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
+  border-bottom: 1px solid #929292;
+}
+@media (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
+    display: flex;
+  }
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+  border: none;
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) {
+  background: transparent;
+  color: #929292;
+}
+.newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #929292;
+}
+@media (max-width: 1024px) {
+  .newsletter :global(.vtex-store-components-3-x-container) :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+@media (max-width: 1024px) {
+  .newsletter .buttonContainer {
+    width: auto;
+  }
+}
+.newsletter .buttonContainer :global(.vtex-button) {
+  background: none;
+  border: none;
+  border-radius: 0;
+  width: 100%;
+  max-width: 84px;
+  height: 32px;
+  border-bottom: 3px solid #BFBFBF;
 }
\ 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 9810451..d6855f3 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,120 @@
 .newsletter {
-  background: red;
-}
\ No newline at end of file
+  background: #000;
+  color: #fff;
+
+  margin: 64px 0;
+
+  @media (max-width:1024px) {
+    margin: 32px 0;
+  }
+
+  :global(.vtex-store-components-3-x-container) {
+    padding: 0;
+
+    :global(.vtex-store-components-3-x-form) {
+      padding: 32px 0 13px;
+      width: 100%;
+      max-width: 774px;
+      position: relative;
+
+      @media (max-width:1024px) {
+        max-width: 100%;
+        padding: 64px 0 32px;
+        padding-left: 16px;
+        padding-right: 16px;
+      }
+
+      .label {
+        display: flex;
+        flex-direction: column;
+        font-size: 0;
+
+        &::before {
+          font-family: 'Open Sans', sans-serif;
+          content: "Assine nossa newsletter";
+          font-weight: 400;
+          font-size: 24px;
+          line-height: 38px;
+          text-align: center;
+          color: #FFFFFF;
+          padding-bottom: 4px;
+
+          @media (max-width:1920px) {
+            padding-bottom: 10px;
+          }
+        }
+
+        &::after {
+          content: "Receba ofertas e novidades por e-mail";
+          font-family: 'Open Sans', sans-serif;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          text-align: center;
+          color: #929292;
+
+          @media (max-width:1024px) {
+            font-size: 16px;
+            line-height: 22px;
+          }
+
+        }
+      }
+
+      :global(.vtex-store-components-3-x-inputGroup) {
+        border-bottom: 1px solid #929292;
+
+        @media (max-width:1024px) {
+          display: flex;
+        }
+
+        :global(.vtex-input) {
+
+          // tanto faz essa linha de cima
+          :global(.vtex-input-prefix__group) {
+            border: none;
+
+            :global(.vtex-styleguide-9-x-input) {
+              background: transparent;
+              color: #929292;
+
+              &::placeholder {
+                font-family: 'Open Sans', sans-serif;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 25px;
+
+                color: #929292;
+
+                @media (max-width:1024px) {
+                  font-size: 12px;
+                  line-height: 16px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .buttonContainer {
+    @media (max-width:1024px) {
+      width: auto;
+    }
+
+    :global(.vtex-button) {
+      background: none;
+      border: none;
+      border-radius: 0;
+      width: 100%;
+      max-width: 84px;
+      height: 32px;
+      border-bottom: 3px solid #BFBFBF;
+    }
+  }
+}
+
+// FIM NEWSLETTER
\ No newline at end of file