From e286dec4b59c99357fbe1eec373f3a035b3aa351 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Wed, 16 Nov 2022 09:19:49 -0300
Subject: [PATCH] =?UTF-8?q?style:=20adicionando=20estilo=20ao=20formul?=
 =?UTF-8?q?=C3=A1rio?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/partials/container.scss |   5 ++
 src/styles/partials/form.scss      | 131 +++++++++++++++++++++--------
 src/styles/utils/variables.scss    |  19 +----
 src/templates/index.html           |   6 +-
 4 files changed, 107 insertions(+), 54 deletions(-)

diff --git a/src/styles/partials/container.scss b/src/styles/partials/container.scss
index e69de29..9483d53 100644
--- a/src/styles/partials/container.scss
+++ b/src/styles/partials/container.scss
@@ -0,0 +1,5 @@
+.container {
+    width: 81.875%;
+    margin: 40px 0 0 130px;
+}
+
diff --git a/src/styles/partials/form.scss b/src/styles/partials/form.scss
index e732854..6b461df 100644
--- a/src/styles/partials/form.scss
+++ b/src/styles/partials/form.scss
@@ -1,54 +1,113 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
+h1 {
+    width: 100%;
+    font-weight: 700;
+    font-size: 32px;
+}
+
 input,
 textarea {
     border-radius: 8px;
 }
 
-.form-container {
-    max-width: 780px;
-    .form-inputs {
-        display: flex;
-        width: 100%;
-        .input-image-container {
-            width: 23.81%;
-            height: 212px;
-            .input-image-content {
-                width: 100%;
-                height: 212px;
-                border: 2px solid $input-image-border-color;
-            }
-        }
-        .form-input-descricao {
-            display: flex;
-            flex-direction: column;
-            .input-titulo {
-                width: 79%;
-                height: 56px;
-            }
-            .input-descricao {
-                width: 417px;
-                height: 136px;
-            }
-            .input-descricao,
-            .input-titulo {
-                padding: 10px 16px;
-            }
-        }
-    }
-}
-
 textarea::placeholder,
 textarea,
 input::placeholder,
 input,
-.input-image-content {
+.input-image-container {
     font-weight: 400;
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.15px;
     font-family: "Roboto", sans-serif;
+    color: $input-text-color;
 }
 
-// width: 328px;
-// height: 56px;
+form {
+    width: 66.157%;
+    height: 284px;
+    margin-top: 40px;
+    .form-container {
+        .form-inputs {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            gap: 20px;
+            .input-image-container {
+                width: 43.974%;
+                height: 212px;
+                border: 2px solid $input-image-border-color;
+                border-radius: 8px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                position: relative;
+                background: rgb(255, 255, 255);
+                overflow: hidden;
+                &::after {
+                    content: "Imagem";
+                    text-align: center;
+                    pointer-events: none;
+                }
+                .input-image-content {
+                    width: 100%;
+                    height: 212px;
+                    z-index: 1;
+                    opacity: 0;
+                }
+                & img {
+                    object-fit: cover;
+                    width: 100%;
+                    height: 100%;
+                    transition: opacity 0.25s ease-in-out;
+                    opacity: 1;
+                    &[src=""] {
+                        opacity: 0;
+                    }
+                }
+            }
+            .form-input-descricao {
+                display: flex;
+                flex-direction: column;
+                width: 53.461%;
+                height: 284px;
+                gap: 20px;
+                .input-titulo {
+                    width: 78%;
+                    height: 56px;
+                    border: 2px solid $input-titulo-border-color;
+                }
+                .description-content {
+                    width: 100%;
+                    height: 208px;
+                    .input-descricao {
+                        width: 100%;
+                        height: 136px;
+                        border: 2px solid $input-descrição-border-color;
+                    }
+                    & button {
+                        background: $button-submit-color;
+                        padding: 16px 20px;
+                        border: 1px solid $button-submit-color;
+                        border-radius: 8px;
+                        margin-top: 16px;
+                        font-weight: 700;
+                        font-size: 16px;
+                        color: $text-button-submit-color;
+                        float: right;
+                    }
+                }
+                .input-descricao,
+                .input-titulo {
+                    padding: 10px 16px;
+                }
+            }
+        }
+    }
+}
+
+.input-image-content,
+.input-image-container img {
+    position: absolute;
+}
diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss
index fdd1aea..5715b26 100644
--- a/src/styles/utils/variables.scss
+++ b/src/styles/utils/variables.scss
@@ -3,11 +3,9 @@
 $background-color: #ffffff;
 $title-form-color: #000000;
 $input-image-border-color: #e5e5e5;
-$input-image-text-color: #858585;
-$input-titulo-color: #d6d6d6;
-$input-titulo-text-color: #858585;
-$input-descrição-color: #d6d6d6;
-$input-descrição-text-color: #858585;
+$input-text-color: #858585;
+$input-titulo-border-color: #d6d6d6;
+$input-descrição-border-color: #d6d6d6;
 $button-submit-color: #ff5a5f;
 $text-button-submit-color: #ffffff;
 $title-list-color: #000000;
@@ -15,14 +13,3 @@ $title-item-list-color: #333333;
 $description-item-list-color: #858585;
 $slider-ellipse-color: #858585;
 $slider-arrow-color: #858585;
-
-// Font-size
-
-$title-form-font-size: 32px;
-$input-image-font-size: 16px;
-$input-titulo-font-size: 16px;
-$input-descrição-font-size: 16px;
-$button-submit-font-size: 16px;
-$title-list-font-size: 32px;
-$title-item-list-font-size: 24px;
-$description-item-list-font-size: 16px;
diff --git a/src/templates/index.html b/src/templates/index.html
index 3a73a06..5072d65 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -26,8 +26,10 @@
                         </div>
                         <div class="form-input-descricao">
                             <input type="text" placeholder="Título" data-test="input-titulo" class="input-titulo" name="item-title">
-                            <textarea placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
-                            <button type="submit" data-test="button-submit">Adicionar</button>
+                            <div class="description-content">
+                                <textarea placeholder="Descrição" class="input-descricao" data-test="input-descricao" name="item-description" rows="10" cols="30"></textarea>
+                                <button type="submit" data-test="button-submit">Adicionar</button>
+                            </div>
                         </div>
                     </div>
                 </div>