From 81511ae260af13e3e7c7989ebeebed4d594a0a72 Mon Sep 17 00:00:00 2001
From: "Jorge hangar.org" <jorge@hangar.org>
Date: Wed, 23 Jun 2021 18:58:15 +0200
Subject: [PATCH] search call with input+button appearing when filled search
 field

---
 src/assets/scss/_settings.scss           |  2 ++
 src/assets/scss/components/_buttons.scss | 12 ++++++++++--
 src/assets/scss/components/_forms.scss   | 11 ++++++++++-
 src/partials/section-hero-omeka.html     | 13 +++++++++----
 4 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/src/assets/scss/_settings.scss b/src/assets/scss/_settings.scss
index fe0f238..076f6ed 100644
--- a/src/assets/scss/_settings.scss
+++ b/src/assets/scss/_settings.scss
@@ -108,6 +108,8 @@ $global-button-cursor: auto;
 $global-color-pick-contrast-tolerance: 0;
 $print-transparent-backgrounds: true;
 $print-hrefs: true;
+$global-duration-archive: 0.3s; //duration of css transitions
+$global-bezier-archive: cubic-bezier(0, 0, 0.43, 1.49);
 
 @include add-foundation-colors;
 
diff --git a/src/assets/scss/components/_buttons.scss b/src/assets/scss/components/_buttons.scss
index 43907f2..109a802 100644
--- a/src/assets/scss/components/_buttons.scss
+++ b/src/assets/scss/components/_buttons.scss
@@ -26,7 +26,7 @@ button,.button {
     color: $button-color-alt;
     font-size: $global-font-size*1.3;
     border-color: $button-color-alt;
-    border-radius: 4rem;
+    border-radius: $global-radius-archive*2;
     &:hover{
       color: $anchor-color;
       border-color: $anchor-color;
@@ -34,7 +34,15 @@ button,.button {
   }
 }
 .search {
-  button,.button {
+  .button {
     border-color: $primary-color;
   }
+  button.appear{
+    min-width: unset;
+    background-color: $primary-color;
+    color: $white;
+    border-radius:$global-radius-archive;
+    // padding:0;
+    border: none;
+  }
 }
diff --git a/src/assets/scss/components/_forms.scss b/src/assets/scss/components/_forms.scss
index 4e485dd..433fc0f 100644
--- a/src/assets/scss/components/_forms.scss
+++ b/src/assets/scss/components/_forms.scss
@@ -1,7 +1,16 @@
-.search {
+.search{
   .button{
     border-color: $primary-color;
   }
+  button.appear{
+    display:none;
+  }
+  input:not(:placeholder-shown) {
+    + button {
+      display: block;
+      z-index: 2;
+    }
+  }
   .hollow {
     border-color: $primary-color;
     color: $primary-color;
diff --git a/src/partials/section-hero-omeka.html b/src/partials/section-hero-omeka.html
index e985427..c21b435 100644
--- a/src/partials/section-hero-omeka.html
+++ b/src/partials/section-hero-omeka.html
@@ -8,9 +8,14 @@
     </section>
   </main>
   <aside>
-    <h2  class="">collections</h2>
-    <nav>
-      <button type="button" class="button hollow">search</button>
-    </nav>
+    <h2>collections</h2>
+
+<!-- https://codepen.io/liamj/pen/vYYLGZj -->
+    <form class="search">
+      <div class="input-group">
+        <input type="text" placeholder="search" class="input-group-field button hollow" />
+        <button class="appear button" type="submit">Go</button>
+      </div>
+    </form>
   </aside>
 </section>