index.html: split input-container into input-container__graph-input, input-container__search

1 files changed, 37 insertions, 9 deletions

diff --git a/res/client/css/partials/input-bar.scss b/res/client/css/partials/input-bar.scss
index 589731ee..05c7abd2 100644
--- a/res/client/css/partials/input-bar.scss
+++ b/res/client/css/partials/input-bar.scss
@@ -1,8 +1,7 @@
 @import '../modules/mixins'; // For box-shadow
 
 .input-container {
-  position: fixed;
-  margin: $two-baselines 0 0 $doc-margin;
+  width: 35%;
 
   form {
     display: inline;
@@ -14,7 +13,6 @@
   font-family: $base-font-family;
   color: $mid-grey;
   max-height: $three-baselines;
-  width: 280px;
   padding: 6px 8px 5px 8px;
   border: 1px solid $mid-grey;
   @include rz-box-sizing-border;
@@ -22,28 +20,58 @@
   transition-property: width;
   transition-duration: 200ms;
   transition-timing-function: ease-in;
+  width: 100%;
   &:focus {
     border: 1px solid $mid-grey;
-    width: 520px;
     @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
   }  
 }
 
+#input-container__search {
+  position: absolute;
+  top: 40px;
+  left: 24px;
+}
+
+#input-container__graph-input {
+  position: absolute;
+  top: 100px;
+  left: 24px;
+  &:focus {
+    width: 80%;
+  }
+}
+
 #textanalyser.ui-autocomplete-input {
   font-family: $base-font-family;
   color: $mid-grey;
 }
 
-.add-button {
+#btn_add {
   float: right;
   background: url(../img/plus-button.png);
   background-position: center;
   background-repeat: no-repeat;
-  background-color: $magenta;
-  position:relative;
+  background-color: red;
+  position: absolute;
+  height: 36px;
+  width: 36px;
+  top: 0px;
+  right: 0px;
+  border: 0;
+}
+
+#btn_search {
+  float: right;
+  background: url(../img/search-icon.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: lightgreen;
+  position: absolute;
+  top: 0px;
+  right: 0px;
   height: 36px;
   width: 36px;
-  left: -36px;
   border: 0;
 }
 
@@ -79,7 +107,7 @@
 .suggestion-item.selected, .suggestion-item:hover {
   padding-left: 16px;
   background-color: $light-grey;
-  border-left: 2px solid $cyan;
+  border-left: 5px solid $cyan;
   @include rz-box-sizing-border;
 }