improved input bar styling and animation

5 files changed, 58 insertions, 27 deletions

diff --git a/index.html b/index.html
index c00cf623..9f4cdf6b 100644
--- a/index.html
+++ b/index.html
@@ -43,8 +43,10 @@
   </div>
   <div class="graph-view">
     <div class="input-container">
-      <form> <input class="input-bar" id="textanalyser" placeholder="Add nodes and relationships"/></form>
-      <img class="add-button" src="res/img/add-button.png">
+      <form>
+        <input class="input-bar" id="textanalyser" placeholder="Add nodes and relationships"/>
+        <button class="add-button"></button>
+      </form>
       <div class="suggestion">
       </div>
     </div>
diff --git a/res/css/modules/colors.scss b/res/css/modules/colors.scss
index bb8520de..95956a49 100644
--- a/res/css/modules/colors.scss
+++ b/res/css/modules/colors.scss
@@ -2,6 +2,7 @@ $light-grey: #f5f5fa;
 $mid-grey: #919095;
 $dark-grey: #363636;
 $magenta: #ee3654;
+$dark-magenta: #d10a40;
 $cyan: #33c2e0;
 $blue: #004681;
 $purple: #8b3ab0;
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index e0d1303e..57de8c01 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -11,18 +11,20 @@
 .input-bar {
   font-family: $base-font-family;
   color: $mid-grey;
-  height: $three-baselines;
-  width: 420px;
-  padding-left:8px;
-  border-radius: 4px;
+  max-height: $three-baselines;
+  width: 260px;
+  padding: 6px 8px 5px 8px;
   border: 1px solid $mid-grey;
   background: white;
+  transition-property: width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in;
   &:focus {
-    border-radius: 4px;
     border: 1px solid $mid-grey;
-    -webkit-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
-    -moz-box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);
-    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.3);  }
+    width: 520px;
+    -webkit-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);
+    box-shadow: 0px 1px 6px 0px rgba(0,0,0,0.3);  }
 }
 
 #textanalyser.ui-autocomplete-input {
@@ -31,11 +33,24 @@
 }
 
 .add-button {
+  background: url(../img/plus-button.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: $magenta;
   position:relative;
-  height: 30px;
-  width: 30px;
-  left: -38px;
-  top: 10px;
+  height: 36px;
+  width: 36px;
+  left: -39px;
+  border: 0;
+  top: 9px;
+}
+
+.add-button:hover {
+  background-color: $dark-magenta;
+}
+
+.add-button:focus {
+  outline: none;
 }
 
 .suggestion{
diff --git a/res/css/style.css b/res/css/style.css
index 8fc1316c..61fa7a6a 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -292,29 +292,42 @@ table {
 .input-bar {
   font-family: "Source_Regular", sans-serif;
   color: #919095;
-  height: 36px;
-  width: 420px;
-  padding-left: 8px;
-  border-radius: 4px;
+  max-height: 36px;
+  width: 260px;
+  padding: 6px 8px 5px 8px;
   border: 1px solid #919095;
-  background: white; }
+  background: white;
+  transition-property: width;
+  transition-duration: 200ms;
+  transition-timing-function: ease-in; }
   .input-bar:focus {
-    border-radius: 4px;
     border: 1px solid #919095;
-    -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
-    -moz-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3);
-    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.3); }
+    width: 520px;
+    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+    -moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.3); }
 
 #textanalyser.ui-autocomplete-input {
   font-family: "Source_Regular", sans-serif;
   color: #919095; }
 
 .add-button {
+  background: url(../img/plus-button.png);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: #ee3654;
   position: relative;
-  height: 30px;
-  width: 30px;
-  left: -38px;
-  top: 10px; }
+  height: 36px;
+  width: 36px;
+  left: -39px;
+  border: 0;
+  top: 9px; }
+
+.add-button:hover {
+  background-color: #d10a40; }
+
+.add-button:focus {
+  outline: none; }
 
 .suggestion {
   list-style-type: none; }
diff --git a/res/img/plus-button.png b/res/img/plus-button.png
new file mode 100644
index 00000000..f86055ad
--- /dev/null
+++ b/res/img/plus-button.png