From 495781af10960e28e4a9464a9deb71d21920fd5b Mon Sep 17 00:00:00 2001
From: Rallenson <Rallenson900@gmail.com>
Date: Sat, 7 Jan 2023 05:50:34 -0300
Subject: [PATCH] feat(mobile):searchbox mobile responsiva

---
 .../src/components/modules/header.module.scss | 43 ++++++++++++++++++-
 desafio-5/src/components/scripts/header.tsx   |  1 +
 2 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/desafio-5/src/components/modules/header.module.scss b/desafio-5/src/components/modules/header.module.scss
index a8321b5..5c89b5a 100644
--- a/desafio-5/src/components/modules/header.module.scss
+++ b/desafio-5/src/components/modules/header.module.scss
@@ -231,12 +231,10 @@
             padding: 25px 16px;
             gap: 10px;
             height: 16.297vh;
-            // background: pink;
             &-menu{
                 border: none;
                 min-height: 22.5px;
                 height: 4.083vh;
-                width: 8.17%;
                 .hamburguer{
                     width: 100%;
                     height: 100%;
@@ -260,6 +258,47 @@
             }
         }
     }
+    //bottom-header-mobile
+    &-mobilebottom{
+        display: flex;
+        align-items: center;
+        padding: 0 16px 25px 16px ;
+        &-Searchbox{
+            width: 100%;
+            height: 6.669vh;
+            position: relative;
+            display: flex;
+            align-items: flex-start;
+            input{
+                width: 100%;
+                height: 100%;
+                padding: 7px 10% 7px 16px;
+                background: $-white;
+                border: 2px solid $-gray-200;
+                border-radius: 5px;
+            }
+            input[placeholder] {
+                //digitação
+                color: $-gray-400 !important;
+                font-family: 'Roboto';
+                font-style: normal;
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 16px;
+            }
+            button{
+                position: absolute;
+                top: 0;
+                right: 0;
+                margin: 7px 16px;
+                width: 18px;
+                height: 18px;
+                img{
+                    width: 100%;
+                }
+            }
+        }
+    }
 
         // Top-header-desktop
         &-top {
diff --git a/desafio-5/src/components/scripts/header.tsx b/desafio-5/src/components/scripts/header.tsx
index c384012..067f9bb 100644
--- a/desafio-5/src/components/scripts/header.tsx
+++ b/desafio-5/src/components/scripts/header.tsx
@@ -49,6 +49,7 @@ const Header = () =>{
             </div>
 
             <div className={HeaderStyles["Header_wrapper-mobilebottom"]}>
+
                 <div className={HeaderStyles["Header_wrapper-mobilebottom-Searchbox"]}>
                         <input name="search" type="text" placeholder="Buscar">
                         </input>