From 9f5f7d753a87b552dc08b3dab7d6d8855eba1489 Mon Sep 17 00:00:00 2001
From: Sabrina Miranda <sabrina.miranda1@bol.com.br>
Date: Fri, 3 Feb 2023 19:14:51 -0300
Subject: [PATCH] feat: estiliza o bloco info-availability

---
 react/components/Html/styles.css              |  8 ++
 styles/css/vtex.store-components.css          | 81 +++++++++++++++++
 .../pages/product/vtex.store-components.scss  | 87 ++++++++++++++++++-
 3 files changed, 175 insertions(+), 1 deletion(-)

diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index d9fd8e6..e11aa1a 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -83,3 +83,11 @@
 [class*="html--shipping-simulator"] svg {
   display: none;
 }
+
+[class*="html--message-availability"] form {
+  margin: 0;
+}
+
+[class*="html--info-availability"] .html--sku-selector-m3 {
+  margin-top: 80px;
+}
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index eb482ed..271cc9f 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -275,4 +276,84 @@
 
 .shippingTableRadioBtn {
   display: none;
+}
+
+.title {
+  font-size: 0;
+  margin: 0;
+}
+.title::before {
+  content: "Produto indisponível";
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+
+.subscribeLabel {
+  font-size: 0;
+}
+.subscribeLabel::before {
+  content: "Deseja saber quando estiver disponível?";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+  margin-bottom: 16px;
+}
+
+.content {
+  margin: 0;
+  position: relative;
+  gap: 8px;
+}
+
+.input,
+.submit {
+  margin: 0;
+}
+
+.submit {
+  position: absolute;
+  top: 58px;
+  width: 100%;
+}
+.submit :global(.vtex-button) {
+  height: 49px;
+  width: 100%;
+  background: #000000;
+}
+.submit :global(.vtex-button__label) {
+  font-size: 0;
+}
+.submit :global(.vtex-button__label)::before {
+  content: "Avise-me";
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  text-transform: uppercase;
+  color: #FFFFFF;
+}
+
+.input {
+  /*
+    &::placeholder {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: #989898;
+    }
+  */
+}
+.input :global(.vtex-input__error) {
+  position: absolute;
+  top: 32px;
+}
+
+.subscriberContainer {
+  width: 60.07%;
 }
\ 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 c0f2ce4..9a41780 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,5 +1,5 @@
 .newsletter{
-    background: red;
+  background: red;
 }
 
 .thumbImg,
@@ -286,3 +286,88 @@
 .shippingTableRadioBtn {
   display: none;
 }
+
+.title {
+  font-size: 0;
+  margin: 0;
+
+  &::before {
+    content: "Produto indisponível";
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    color: #868686;
+  }
+}
+
+.subscribeLabel {
+  font-size: 0;
+
+  &::before {
+    content: "Deseja saber quando estiver disponível?";
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    display: flex;
+    align-items: center;
+    color: #868686;
+    margin-bottom: 16px;
+  }
+}
+
+.content {
+  margin: 0;
+  position: relative;
+  gap: 8px;
+}
+
+.input,
+.submit {
+  margin: 0;
+}
+
+.submit {
+  position: absolute;
+  top: 58px;
+  width: 100%;
+
+  :global(.vtex-button) {
+    height: 49px;
+    width: 100%;
+    background: #000000;
+  }
+
+  :global(.vtex-button__label) {
+    font-size: 0;
+
+    &::before {
+      content: "Avise-me";
+      font-weight: 600;
+      font-size: 18px;
+      line-height: 25px;
+      text-transform: uppercase;
+      color: #FFFFFF;
+    }
+  }
+}
+
+.input {
+/*
+  &::placeholder {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+    color: #989898;
+  }
+*/
+  :global(.vtex-input__error) {
+    position: absolute;
+    top: 32px;
+  }
+}
+
+.subscriberContainer {
+  width: 60.07%;
+}