started edlp_search module : displaying a draft of the form

sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css

@@ -1752,7 +1752,7 @@ footer {
       overflow: hidden;
       text-align: center; }
     footer > .wrapper .region-footer-right {
-      width: 12%;
+      min-width: 12%;
       text-align: right; }
   footer nav.block-menu {
     display: inline-block; }
@@ -2026,7 +2026,8 @@ footer {
           width: 350px;
           opacity: 1; }
   footer #block-studiolinkblock {
-    pointer-events: all; }
+    pointer-events: all;
+    margin-left: 0.5em; }
     footer #block-studiolinkblock a {
       display: block;
       width: 20px;
@@ -2116,6 +2117,26 @@ footer {
       height: 200px;
       opacity: 1;
       pointer-events: auto; }
+  footer #block-edlpsearchlinkblock {
+    pointer-events: all;
+    margin-left: 0.5em; }
+    footer #block-edlpsearchlinkblock a {
+      display: block;
+      width: 20px;
+      height: 20px;
+      text-indent: 40px;
+      margin: 0;
+      overflow: hidden;
+      -webkit-mask-image: url(../img/search.svg);
+      mask-image: url(../img/search.svg);
+      -webkit-mask-size: contain;
+      mask-size: contain;
+      background-color: #000;
+      -webkit-transition: background-color 0.3s ease-in-out;
+      transition: background-color 0.3s ease-in-out;
+      cursor: pointer; }
+      footer #block-edlpsearchlinkblock a.is-active {
+        background-color: red; }
 
 .node-popup .inner {
   position: relative; }

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -752,7 +752,7 @@ footer{
     }
     .region-footer-right{
       // float:right;
-      width:12%;
+      min-width:12%;
       // min-width: 50px;
       text-align: right;
     }
@@ -1041,28 +1041,8 @@ footer{
     }
   }
 
-  $icons_w:20px;
-  #block-studiolinkblock{
-    pointer-events: all;
-    a{
-      $wh:$icons_w;
-      display: block;
-      width:$wh; height:$wh;
-      text-indent: $wh*2;
-      margin: 0;
-      overflow: hidden;
-      mask-image: url(../img/studio.svg);
-      mask-size: contain;
-      background-color: #000;
-      transition: background-color 0.3s ease-in-out;
-      cursor: pointer;
-      &.is-active{
-        background-color: red;
-      }
-    }
-  }
-
-  .block.random-player{
+  @mixin iconlinkblock($bgimgurl) {
+    $icons_w:20px;
     pointer-events: all;
     margin-left: 0.5em;
     a{
@@ -1072,7 +1052,7 @@ footer{
       text-indent: $wh*2;
       margin: 0;
       overflow: hidden;
-      mask-image: url(../img/random.svg);
+      mask-image: $bgimgurl;
       mask-size: contain;
       background-color: #000;
       transition: background-color 0.3s ease-in-out;
@@ -1082,6 +1062,13 @@ footer{
       }
     }
   }
+  #block-studiolinkblock{
+    @include iconlinkblock(url(../img/studio.svg));
+  }
+
+  .block.random-player{
+    @include iconlinkblock(url(../img/random.svg));
+  }
 
   #block-userlogin{
     pointer-events: all;
@@ -1149,6 +1136,11 @@ footer{
     }
   }
 
+
+  #block-edlpsearchlinkblock{
+    @include iconlinkblock(url(../img/search.svg));
+  }
+
 }
 
 //  _  _         _       ___

sites/all/themes/custom/edlptheme/templates/content/edlp-search-search-form.html.twig

@@ -0,0 +1,7 @@
+<div class="row">
+  <div class="col small-col-12 med-col-6 large-col-6">
+    <div class="wrapper">
+      {{ form }}
+    </div>
+  </div>
+</div>