From e3744698188631052361f39f45045e450a6a93ab Mon Sep 17 00:00:00 2001
From: Piotr Janosz <janosz128@gmail.com>
Date: Fri, 12 Jul 2019 15:02:57 +0200
Subject: [PATCH] [WIP] restyling search input in the header

---
 .../components/docs/search/autocomplete.tsx   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/website/ts/components/docs/search/autocomplete.tsx b/packages/website/ts/components/docs/search/autocomplete.tsx
index 51beeeca84..5fae334696 100644
--- a/packages/website/ts/components/docs/search/autocomplete.tsx
+++ b/packages/website/ts/components/docs/search/autocomplete.tsx
@@ -149,6 +149,12 @@ const Wrapper = styled.div<Props>`
             background-color: ${colors.white};
             border-color: #dbdfdd;
         }
+
+        ${({ isHome }) =>
+            !isHome &&
+            `
+            border: 1px solid green;
+        `};
     }
 
     .react-autosuggest__section-container {
@@ -160,14 +166,19 @@ const Wrapper = styled.div<Props>`
         right: 0;
         background-color: ${colors.white};
         z-index: 10;
-        min-width: 420px;
-        width: 100%;
+        width: 890px;
         flex-grow: 1;
 
         &--open {
             border: 1px solid #dbdfdd;
             border-top: none;
         }
+
+        ${({ isHome }) =>
+            !isHome &&
+            `
+            top: 50px;
+        `};
     }
 
     .react-autosuggest__suggestions-list {
@@ -192,6 +203,15 @@ const Wrapper = styled.div<Props>`
             padding: 13px 21px 15px 52px;
             background-position: left 21px center;
             font-size: 1rem;
+
+            &--focused,
+            &--open {
+                background-color: white;
+                width: 890px;
+                position: absolute;
+                right: 0;
+                top: 0;
+            }
         `};
 
         &--open {