changed position css and input bar

6 files changed, 53 insertions, 43 deletions

diff --git a/res/css/modules/positions.scss b/res/css/modules/positions.scss
index f4e23fbf..8af9546f 100644
--- a/res/css/modules/positions.scss
+++ b/res/css/modules/positions.scss
@@ -1,8 +1,11 @@
-$top-bar-height: 36px;
-$search-bar-height: 48px;
-$search-icon-height: 20px;
-$task-alert-height: 48px;
-$task-desc-height: 20px;
-$input-bar-height:36px;
+/* Vertical spacing */
+$one-baseline: 12px;
+$two-baselines: 24px;
+$three-baselines: 36px;
+$four-baselines: 48px;
 
+$icon-height: 20px;
+
+/* Horizontal spacing */
 $doc-margin: 70px;
+
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index 9fb47d64..0b7df9f6 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -1,12 +1,18 @@
+.input-container {
+  position: relative;
+  margin: $two-baselines 0 0 $doc-margin;
+
+  form {
+    display: inline;
+  }
+}
+
+
 .input-bar {
   font-family: $base-font-family;
   color: $mid-grey;
-  position: fixed;
-  display: block;
-  height: $input-bar-height;
+  height: $three-baselines;
   width: 420px;
-  top: $top-bar-height+$search-bar-height+$task-alert-height+20px;
-  left: $doc-margin;
   padding-left:8px;
   border-radius: 4px;
   border: 1px solid $mid-grey;
@@ -24,13 +30,12 @@
   color: $mid-grey;
 }
 
-
 .add-button {
-  position:fixed;
-  top: $top-bar-height+$search-bar-height+$task-alert-height+22px;
-  height: 36px;
-  width: 36px;
-  left: 453px;
+  position:relative;
+  height: 30px;
+  width: 30px;
+  left: -38px;
+  top: 10px;
 }
 
 .suggestion{
@@ -44,7 +49,7 @@
 
 .ui-helper-hidden-accessible{
   position:fixed;
-  top: $top-bar-height+$search-bar-height+$task-alert-height+35px+$input-bar-height;
+  top: $three-baselines+$four-baselines+$four-baselines+35px+$three-baselines;
   left:$doc-margin+8px;
   text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
   font-size:16px;
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index b9c37f40..94566de2 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -1,6 +1,6 @@
 .search-bar{
   width:100%;
-  height:$search-bar-height;
+  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);
@@ -10,16 +10,16 @@
 .search-input{
   position: fixed;
   width: 100%;
-  top: $top-bar-height+($search-bar-height - $search-icon-height)/2;
-  height:$search-icon-height;
+  top: $three-baselines+($four-baselines - $icon-height)/2;
+  height:$icon-height;
   left: $doc-margin + 40px;
 }
 .search-icon {
   position:fixed;
   width:20px;
-  height:$search-icon-height;
+  height:$icon-height;
   left: $doc-margin;
-  top: $top-bar-height+($search-bar-height - $search-icon-height)/2;
+  top: $three-baselines+($four-baselines - $icon-height)/2;
 }
 
 input {
diff --git a/res/css/partials/task-alert.scss b/res/css/partials/task-alert.scss
index b10d4805..02ddc202 100644
--- a/res/css/partials/task-alert.scss
+++ b/res/css/partials/task-alert.scss
@@ -1,7 +1,7 @@
 .task-alert{
   position:relative;
   width: 100%;
-  height:$task-alert-height;
+  height:$four-baselines;
   background-color: $light-cyan;
   color: $darker-cyan;
   border-top: 1px solid $dark-cyan;
@@ -12,21 +12,21 @@
 .task-desc{
   position:fixed;
   width:100%;
-  height: $task-desc-height;
-  top: $top-bar-height + $search-bar-height + ($task-alert-height - $task-desc-height)/2;
+  height: $icon-height;
+  top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2;
   text-align: center;
   font-size: $h3-size;
 }
 
 .task-close-text {
   position:fixed;
-  top: $top-bar-height + $search-bar-height + ($task-alert-height - $task-desc-height)/2 + 1 ;
+  top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2 + 1 ;
   right: 70px;
   font-size: $h4-size;
 }
 
 .task-close-button {
   position: fixed;
-  top: $top-bar-height + $search-bar-height + ($task-alert-height - $task-desc-height)/2;
+  top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2;
   right: 50px;
-}
\ No newline at end of file
+} 
\ No newline at end of file
diff --git a/res/css/partials/top-bar.scss b/res/css/partials/top-bar.scss
index 85961d41..a04fdb77 100644
--- a/res/css/partials/top-bar.scss
+++ b/res/css/partials/top-bar.scss
@@ -3,7 +3,7 @@
   top:0;
   left:0;
   width:100%;
-  min-height:$top-bar-height;
+  min-height:$three-baselines;
   background-color:$dark-grey;
 }
 
diff --git a/res/css/style.css b/res/css/style.css
index a27faa3d..c29a6b65 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -11,6 +11,8 @@
   /* IE9 Compat Modes */
   src: url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix") format("embedded-opentype"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff") format("woff"), url("../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf") format("truetype");
   /* Safari, Android, iOS */ }
+/* Vertical spacing */
+/* Horizontal spacing */
 html, body {
   height: 100%;
   font-family: "Source_Regular", sans-serif; }
@@ -283,15 +285,17 @@ table {
   height: inherit;
   font-size: 17px; }
 
+.input-container {
+  position: relative;
+  margin: 24px 0 0 70px; }
+  .input-container form {
+    display: inline; }
+
 .input-bar {
   font-family: "Source_Regular", sans-serif;
   color: #919095;
-  position: fixed;
-  display: block;
   height: 36px;
   width: 420px;
-  top: 152px;
-  left: 70px;
   padding-left: 8px;
   border-radius: 4px;
   border: 1px solid #919095;
@@ -308,11 +312,11 @@ table {
   color: #919095; }
 
 .add-button {
-  position: fixed;
-  top: 154px;
-  height: 36px;
-  width: 36px;
-  left: 453px; }
+  position: relative;
+  height: 30px;
+  width: 30px;
+  left: -38px;
+  top: 10px; }
 
 .suggestion {
   list-style-type: none; }
@@ -388,8 +392,8 @@ input {
   position: relative;
   width: 100%;
   height: 48px;
-  background-color: #D3F2F8;
-  color: #1D6E7F;
+  background-color: #d3f2f8;
+  color: #1d6e7f;
   border-top: 1px solid #8eb6bf;
   border-bottom: 1px solid #8eb6bf;
   z-index: 1; }
@@ -478,5 +482,3 @@ h2 {
 
 h1 {
   font-size: 12px; }
-
-/*# sourceMappingURL=style.css.map */