fixes #182

Also started using mixins for browser prefixes - box shadow and box
sizing

5 files changed, 34 insertions, 18 deletions

diff --git a/res/css/modules/mixins.scss b/res/css/modules/mixins.scss
index e69de29b..9afcbe80 100644
--- a/res/css/modules/mixins.scss
+++ b/res/css/modules/mixins.scss
@@ -0,0 +1,11 @@
+@mixin rz-box-shadow($offset-x, $offset-y, $blur, $spread, $color) {
+	-webkit-box-shadow: $offset-x $offset-y $blur $spread $color;
+	   -moz-box-shadow: $offset-x $offset-y $blur $spread $color;
+	        box-shadow: $offset-x $offset-y $blur $spread $color;	
+}
+
+@mixin rz-box-sizing-border() {
+	-webkit-box-sizing: border-box;
+	   -moz-box-sizing: border-box;
+	        box-sizing: border-box;
+}
\ No newline at end of file
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index 76b3c29a..4e87c369 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -1,3 +1,5 @@
+@import '../modules/mixins';
+
 .input-container {
   position: fixed;
   margin: $two-baselines 0 0 $doc-margin;
@@ -12,9 +14,10 @@
   font-family: $base-font-family;
   color: $mid-grey;
   max-height: $three-baselines;
-  width: 260px;
+  width: 280px;
   padding: 6px 8px 5px 8px;
   border: 1px solid $mid-grey;
+  @include rz-box-sizing-border;
   background: white;
   transition-property: width;
   transition-duration: 200ms;
@@ -22,9 +25,8 @@
   &:focus {
     border: 1px solid $mid-grey;
     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);  }
+    @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+  }  
 }
 
 #textanalyser.ui-autocomplete-input {
@@ -33,6 +35,7 @@
 }
 
 .add-button {
+  float: right;
   background: url(../img/plus-button.png);
   background-position: center;
   background-repeat: no-repeat;
@@ -40,9 +43,8 @@
   position:relative;
   height: 36px;
   width: 36px;
-  left: -39px;
+  left: -36px;
   border: 0;
-  top: 9px;
 }
 
 .add-button:hover {
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index 3fcbe378..cd671f33 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -1,10 +1,10 @@
+@import '../modules/mixins';
+
 .search-bar{
   width:100%;
   height:$four-baselines;
   background: white;
-  -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);
+  @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
   z-index: 100;
 }
 
diff --git a/res/css/partials/task-alert.scss b/res/css/partials/task-alert.scss
index b33a2da6..211bc58f 100644
--- a/res/css/partials/task-alert.scss
+++ b/res/css/partials/task-alert.scss
@@ -7,7 +7,7 @@
   color: $darker-cyan;
   border-top: 1px solid $dark-cyan;
   border-bottom: 1px solid $dark-cyan;
-  z-index: 1;
+  z-index: -1;
 }
 
 .task-desc{
diff --git a/res/css/style.css b/res/css/style.css
index 208ab844..280a5254 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -310,9 +310,12 @@ body.debug .debug-ui-right {
   font-family: "Source_Regular", sans-serif;
   color: #919095;
   max-height: 36px;
-  width: 260px;
+  width: 280px;
   padding: 6px 8px 5px 8px;
   border: 1px solid #919095;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
   background: white;
   transition-property: width;
   transition-duration: 200ms;
@@ -329,6 +332,7 @@ body.debug .debug-ui-right {
   color: #919095; }
 
 .add-button {
+  float: right;
   background: url(../img/plus-button.png);
   background-position: center;
   background-repeat: no-repeat;
@@ -336,9 +340,8 @@ body.debug .debug-ui-right {
   position: relative;
   height: 36px;
   width: 36px;
-  left: -39px;
-  border: 0;
-  top: 9px; }
+  left: -36px;
+  border: 0; }
 
 .add-button:hover {
   background-color: #d10a40; }
@@ -400,9 +403,9 @@ body.debug .debug-ui-right {
   width: 100%;
   height: 48px;
   background: white;
-  -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);
+  -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);
   z-index: 100; }
 
 .search-input {
@@ -448,7 +451,7 @@ input {
   color: #1d6e7f;
   border-top: 1px solid #8eb6bf;
   border-bottom: 1px solid #8eb6bf;
-  z-index: 1; }
+  z-index: -1; }
 
 .task-desc {
   display: inline-block;