styled buttons and areas for search forms

inc/template-functions.php

@@ -122,15 +122,17 @@ if ( ! function_exists( 'ofisuport_display_faq_search' ) ) :
     // search form for category
     // https://developer.wordpress.org/reference/functions/get_search_form/#comment-369
     // https://wordpress.stackexchange.com/questions/313037/restrict-a-search-to-a-custom-post-type
- 
-    echo '<aside id="search-form-faqs" class="search-faqs">';
-    echo'  <form class="search-form" role="search" method="get" action="/">';
-    echo'    <label class="screen-reader-text" for="search">Search in ajuts</label>';
-    echo'    <input type="search" id="search" class="search-field" placeholder="cerca faqs..." value="' . the_search_query() . '" name="s" />';
-    echo'    <input type="submit" id="searchsubmit" class="search-submit button button-search" value="Enviar">';
-    echo'    <input type="hidden" value="posts" name="post_type" id="post_type" />';
-    echo'    <input type="hidden" value="faq" name="category_name" id="category_name" />';
-    echo'  </form>';
-    echo'</aside>';
+?> 
+    <aside id="search-form-faqs" class="ofisuport-search-faqs">
+      <form class="ofisuport-search-form" role="search" method="get" action="/">
+        <label class="screen-reader-text" for="search">Search in ajuts</label>
+        <input type="search" id="search" class="search-field" placeholder="cerca faqs..." value="<?php the_search_query();?>" name="s" />
+        <input type="submit" id="searchsubmit" class="search-submit button button-search" value="cerca">
+        <span class="ofisuport-search-submit ofisuport-icon-search"></span>
+        <input type="hidden" value="posts" name="post_type" id="post_type" />
+        <input type="hidden" value="faq" name="category_name" id="category_name" />
+      </form>
+    </aside>
+<?php
   }
 endif; //end ofisuport_display_each_faq_categories

sass/base/elements/_buttons.scss

@@ -97,3 +97,30 @@ input[type="submit"],
 		}
 	}
 }
+
+	.ofisuport-search-form {
+    display: flex;
+		margin: 0.5rem 0;
+    .search-field {
+      padding: 0.5em;
+    }
+    .search-submit{
+      border: none;
+      margin: 0rem;
+      font-size: 0px;
+      width: 2.5rem;
+      height: 2.5rem;
+			background: none;
+			z-index: 10;
+    }
+    .ofisuport-icon-search:before {
+			z-index: 0;
+			min-width: 2.5rem;
+      min-height: 2.5rem;
+      font: normal 2rem/1 dashicons !important;
+      content: "\f179";
+      padding: 0;
+      margin: 0.1rem 0 0 -1.5rem;
+      position: absolute;
+    }
+	}