From 1848558559d3a422c26b6907181530c1ff61ab86 Mon Sep 17 00:00:00 2001
From: iman <i.salmani@iran.ir>
Date: Sun, 21 Apr 2019 00:14:28 +0430
Subject: [PATCH 1/2] Automatically show and hide search options

---
 style/base.css | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/style/base.css b/style/base.css
index f206f4d..d789388 100644
--- a/style/base.css
+++ b/style/base.css
@@ -2,6 +2,26 @@ body {
     font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
+form:focus-within .form-search, form .form-search:hover {
+    display: block;
+}
+
+.form-search {
+    padding: 10px;
+    display: none;
+    transition: 300ms;
+    border: 1px solid #ddd;
+    border-top: none;
+    margin-bottom: 10px;
+    position: absolute;
+    background: #fff;
+    z-index: 100;
+}
+
+.form-search .form-group label {
+	font-weight: normal;
+}
+
 .form-search .form-group {
     margin-bottom: 0.2em;
     margin-right: 40px;
@@ -16,16 +36,21 @@ body {
 @supports (display: flex) {
     @media screen and (min-width: 768px) {
         .form-search {
-            display: flex;
             justify-content: space-between;
             flex-flow: wrap;
         }
+        form:focus-within .form-search, form .form-search:hover {
+            display: flex;
+        }
         .form-search .form-group {
             margin-right: 1em;
             margin-left: 1em;
             flex-shrink: 0;
             display: block;
         }
+        .form-search .form-group label {
+            width: 100%;
+        }
     }
 }
 

From eed2f5ded410b33c2e8fbed7c214fe50228cec78 Mon Sep 17 00:00:00 2001
From: iman <i.salmani@iran.ir>
Date: Sun, 21 Apr 2019 01:17:41 +0430
Subject: [PATCH 2/2] fixed bug for different size of screen

fixed bug for 768 to 1200 screen size
---
 style/base.css | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/style/base.css b/style/base.css
index d789388..3142b20 100644
--- a/style/base.css
+++ b/style/base.css
@@ -9,13 +9,12 @@ form:focus-within .form-search, form .form-search:hover {
 .form-search {
     padding: 10px;
     display: none;
-    transition: 300ms;
-    border: 1px solid #ddd;
-    border-top: none;
-    margin-bottom: 10px;
+    border-bottom: 1px solid #ddd;
     position: absolute;
     background: #fff;
     z-index: 100;
+    left: 0;
+    width: 100%;
 }
 
 .form-search .form-group label {
@@ -24,7 +23,14 @@ form:focus-within .form-search, form .form-search:hover {
 
 .form-search .form-group {
     margin-bottom: 0.2em;
-    margin-right: 40px;
+}
+
+.form-search .form-group > label:first-child {
+    border-bottom: 1px solid #eee;
+    padding-bottom: 5px;
+    margin-bottom: 10px;
+    margin-top: 15px;
+    width: 100%;
 }
 
 @media screen and (max-width: 768px) {
@@ -43,8 +49,7 @@ form:focus-within .form-search, form .form-search:hover {
             display: flex;
         }
         .form-search .form-group {
-            margin-right: 1em;
-            margin-left: 1em;
+            width: 25%;
             flex-shrink: 0;
             display: block;
         }