started edlp_search module : displaying a draft of the form

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));
+  }
+
 }
 
 //  _  _         _       ___