added image search button, added image loader to webpack

build/webpack.config.dev.js

@@ -29,6 +29,16 @@ module.exports = merge(baseConfig, {
           'css-loader',
           'sass-loader'
         ]
+      }, {
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 5000
+            }
+          }
+        ]
       }
     ]
   },

build/webpack.config.prod.js

@@ -48,6 +48,16 @@ module.exports = merge(baseConfig, {
           'css-loader',
           'sass-loader'
         ]
+      }, {
+        test: /\.(png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 5000
+            }
+          }
+        ]
       }
     ]
   },

web/modules/custom/materio_sapi/src/Form/MaterioSapiSearchForm.php

@@ -45,14 +45,24 @@ class MaterioSapiSearchForm extends FormBase {
         "v-model" => "autocomplete"
       ],
     ];
-    $form['submit'] = [
-      '#type' => 'submit',
-      '#value' => $this->t('Search'),
-      '#attributes' => [
-        '@click.prevent' => "submit",
-      ]
-    ];
-
+    // $form['submit'] = [
+    //   '#type' => 'submit',
+    //   '#value' => $this->t('Search'),
+    //   '#attributes' => [
+    //     '@click.prevent' => "submit",
+    //   ]
+    // ];
+    $form['submit'] = array(
+        '#type'   => 'button',
+        // '#src'    => '',//drupal_get_path('module', 'materio_search_api') . '/images/search.png',
+        '#value'  => t('Search'),
+        // '#prefix' => '<div class="search-btn-wrapper">',
+        // '#suffix'=> '</div>',
+        '#attributes' => [
+          'title' => t('Search'),
+          '@click.prevent' => "submit",
+        ]
+      );
     return $form;
   }
 

web/themes/custom/materiotheme/assets/styles/base/_grid.scss

@@ -11,8 +11,13 @@ $large-bp:1900px;
   // font-size: 0;
   // white-space: nowrap;
   position: relative;
-  >*{
-    font-size: 16px;
+  // >*{
+  //   font-size: 16px;
+  // }
+  &:after{
+    content:"";
+    clear:both;
+    display: block;
   }
 }
 

web/themes/custom/materiotheme/assets/styles/base/_layout.scss

@@ -22,7 +22,7 @@ header[role="banner"]{
   background-color: #fff;
   overflow: visible;
   position: fixed;
-  z-index: 10;
+  z-index: 20;
   width:100vw;
   // outline: 1px solid blue;
   height: $header_height;
@@ -50,5 +50,5 @@ header[role="banner"]{
 // |_|  |_\__,_|_|_||_|
 
 main[role="main"]{
-  padding-top: $header_height;
+  padding-top: $header_height+8px;
 }

web/themes/custom/materiotheme/assets/styles/base/_variables.scss

@@ -1,3 +1,3 @@
 $base_font_size:16px;
 
-$header_height: 80px;
+$header_height: 60px;

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -175,12 +175,51 @@ aside.messages{
 }
 
 // content top
-#materio-sapi-search-form{
-  .form-item, input.button{
-    display: inline-block;
+#content-top{
+  &:after{
+    content:"";
+    clear:both;
+    display: block;
   }
 }
 
+#block-materiosapisearchblock{
+  float:right;
+  display:inline-block;
+  // box-shadow: 0 0 5px rgba(0,0,0,0.2);
+  padding:0;
+
+  #materio-sapi-search-form{
+    .form-item, input.button{
+      display: inline-block;
+    }
+
+    #edit-search{
+      border:1px #BBB solid;
+      border-radius: 14px;
+      padding:0.3em;
+      color:#666;
+    }
+
+    #edit-submit{
+      border:0;
+      text-indent: 50px;
+      overflow: hidden;
+      width:20px; height:20px;
+      // border-radius: 7px;
+      background-image: url('../img/search.png');
+      background-position: center;
+      background-repeat: no-repeat;
+      background-size: contain;
+    }
+
+  }
+
+}
+
+h1.page-title{
+  margin:0;
+}
 
 // front
 article.node--type-frontpage{
@@ -227,6 +266,9 @@ article.node--type-frontpage{
 
 
 .cards-list{
+  .search-info{
+    margin:0 0 1em 0;
+  }
   &>ul{
     margin:0; padding:0;
     &>li{

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -96,5 +96,4 @@ export default {
 
 <style lang="scss" scoped>
 
-
 </style>