fixed sass variable colors and polished top bar css

9 files changed, 135 insertions, 80 deletions

diff --git a/res/css/modules/Typography.scss b/res/css/modules/Typography.scss
index 224e7a44..03d4a5b4 100644
--- a/res/css/modules/Typography.scss
+++ b/res/css/modules/Typography.scss
@@ -1,3 +1,21 @@
+// Font font-family:
+
+@font-face {
+	font-family: 'Source_Regular';
+	src: url('../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot'); /* IE9 Compat Modes */
+	src: url('../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.woff') format('woff'), /* Modern Browsers */
+       url('../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
+}
+
+@font-face {
+	font-family: 'Source_Semibold';
+	src: url('../../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot'); /* IE9 Compat Modes */
+	src: url('../../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('../../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.woff') format('woff'), /* Modern Browsers */
+       url('../../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.ttf')  format('truetype'); /* Safari, Android, iOS */
+}
+
 //Font size
 $h1-size: 30px;
 $h2-size: 24px;
@@ -11,11 +29,11 @@ $regular: 400;
 $bold: 600;
 
 // Base font
-$base-font-family: 'Source Sans Pro', sans-serif;
-$semibold-font-family: 'Source Sans Pro Semibold', sans-serif;
+$base-font-family: 'Source_Regular', sans-serif;
+$semibold-font-family: 'Source_Semibold', sans-serif;
 
 $base-font-weight: $regular;
-$base-font-size: 13px;
+$base-font-size: 12px;
 $base-line-height: 1.4;
 
 
diff --git a/res/css/modules/colors.scss b/res/css/modules/colors.scss
index 705cf9f7..bfefa5a5 100644
--- a/res/css/modules/colors.scss
+++ b/res/css/modules/colors.scss
@@ -1,9 +1,9 @@
-//$light-grey: #f5f5fa;
-//$mid-grey: #919095;
-//
$dark-grey: #363636;
-//$magenta: #ee3654;

-//$cyan: #33c2e0;
-//
$blue: #004681;
-//
$purple: #8b3ab0;
-//
$orange: #ff8b11;
-//
$yellow: #fad900;
\ No newline at end of file
+$light-grey: #f5f5fa;
+$mid-grey: #919095;
+$dark-grey: #363636;
+$magenta: #ee3654;
+$cyan: #33c2e0;
+$blue: #004681;
+$purple: #8b3ab0;
+$orange: #ff8b11;
+$yellow: #fad900;
\ No newline at end of file
diff --git a/res/css/modules/positions.scss b/res/css/modules/positions.scss
index 88b1362a..f4e23fbf 100644
--- a/res/css/modules/positions.scss
+++ b/res/css/modules/positions.scss
@@ -5,4 +5,4 @@ $task-alert-height: 48px;
 $task-desc-height: 20px;
 $input-bar-height:36px;
 
-$left-margin: 60px;
+$doc-margin: 70px;
diff --git a/res/css/partials/base.scss b/res/css/partials/base.scss
index 957f9127..7e2679f5 100644
--- a/res/css/partials/base.scss
+++ b/res/css/partials/base.scss
@@ -6,6 +6,7 @@
 //Globals
 html, body {
   height: 100%;
+  font-family: $base-font-family;
 }
 
 body {
@@ -15,7 +16,7 @@ body {
   min-width: 980px;
   padding: 0;
   color: #FFF;
-  font-size: 14px;
+  font-size: 12px;
   background-color:#f5f5fa;
 }
 
diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index 07df842e..9fb47d64 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -1,22 +1,30 @@
 .input-bar {
+  font-family: $base-font-family;
+  color: $mid-grey;
   position: fixed;
   display: block;
   height: $input-bar-height;
   width: 420px;
   top: $top-bar-height+$search-bar-height+$task-alert-height+20px;
-  left: $left-margin;
+  left: $doc-margin;
   padding-left:8px;
   border-radius: 4px;
-  border: 1px solid #919095;//$mid-grey
+  border: 1px solid $mid-grey;
   background: white;
   &:focus {
     border-radius: 4px;
-    border: 1px solid #919095;//$mid-grey
+    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);  }
 }
 
+#textanalyser.ui-autocomplete-input {
+  font-family: $base-font-family;
+  color: $mid-grey;
+}
+
+
 .add-button {
   position:fixed;
   top: $top-bar-height+$search-bar-height+$task-alert-height+22px;
@@ -37,7 +45,7 @@
 .ui-helper-hidden-accessible{
   position:fixed;
   top: $top-bar-height+$search-bar-height+$task-alert-height+35px+$input-bar-height;
-  left:$left-margin+8px;
+  left:$doc-margin+8px;
   text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
   font-size:16px;
 }
\ No newline at end of file
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index 5e8d95ba..c78e62c3 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -18,13 +18,12 @@
   width: 100%;
   top: $top-bar-height+($search-bar-height - $search-icon-height)/2;
   height:$search-icon-height;
-  left: $left-margin + 40px;
+  left: $doc-margin + 40px;
 }
 .search-icon {
   position:fixed;
   width:20px;
   height:$search-icon-height;
-  left: $left-margin;
+  left: $doc-margin;
   top: $top-bar-height+($search-bar-height - $search-icon-height)/2;
-
 }
diff --git a/res/css/partials/top-bar.scss b/res/css/partials/top-bar.scss
index aeebe9f2..22fa64ac 100644
--- a/res/css/partials/top-bar.scss
+++ b/res/css/partials/top-bar.scss
@@ -3,45 +3,54 @@
   top:0;
   left:0;
   width:100%;
-  height:$top-bar-height;
-  background-color:#363636; //todo: $dark-grey
+  min-height:$top-bar-height;
+  background-color:$dark-grey;
 }
 
 .doc-title{
-  position:fixed;
+  float: left;
   font-family: $semibold-font-family;
-  left:$left-margin;
-  top:10px;
-  color: #f5f5fa; //todo: $light-grey:
+  color: $light-grey;
+  margin: 10px $doc-margin 10px $doc-margin;
+}
 
+.user-area {
+  float: right;
+  margin: 3px $doc-margin 3px $doc-margin;
 }
 
-.profile-circle {
-  position:fixed;
-  right: 400px;
+.username {
+  display: inline-block;
+  text-align: right;
+}
+
+.profile-circle{
   border-radius: 50%;
   width: 30px;
   height: 30px;
-  background: #33c2e0;//todo: $cyan
-  top:3px;
+  background: $cyan;
+  display: inline-block;
 }
 
 .profile-initials {
-  position:fixed;
-  top:10px;
-  right:405px;
-  color: #f5f5fa;//$light-grey
+  display: inline-block;
+  color: $light-grey;
+  font-size: $h4-size;
+  position: relative;
+  left: -27px;
+  top: -10px;
 }
 
 .profile-username {
-  position:fixed;
-  top:10px;
-  right: 295px;
-  color: #f5f5fa;//$light-grey
+  display: inline-block;
+  top:12px;
+  color: $light-grey;
+  position: relative;
+  left: -20px;
+  top: -10px;
 }
 
-.owner-logo {
-  position:fixed;
-  top:3px;
-  right: 50px;
+.organization-logo {
+  display: inline-block;
+  margin-left: 12px;
 }
\ No newline at end of file
diff --git a/res/css/partials/typography.scss b/res/css/partials/typography.scss
index 63074f90..388afef5 100644
--- a/res/css/partials/typography.scss
+++ b/res/css/partials/typography.scss
@@ -1,7 +1,4 @@
-@font-face {
-  font-family: 'MyWebFont';
-  src: url(../../font/SourceSansPro-Regular.ttf) format('ttf');
-}
+/* Headings */
 
 h1 {
   font-size: $h1-size;
diff --git a/res/css/style.css b/res/css/style.css
index d6c4ee10..3553e52f 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -1,6 +1,19 @@
 @import url(vendor/ui.css);
+@font-face {
+  font-family: 'Source_Regular';
+  src: url("../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot");
+  /* IE9 Compat Modes */
+  src: url("../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.woff") format("woff"), url("../../font/sourcesanspro_regular/SourceSansPro-Regular-webfont.ttf") format("truetype");
+  /* Safari, Android, iOS */ }
+@font-face {
+  font-family: 'Source_Semibold';
+  src: url("../../font/sourcesanspro_semibold/SourceSansPro-Semibold-webfont.eot");
+  /* 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 */ }
 html, body {
-  height: 100%; }
+  height: 100%;
+  font-family: "Source_Regular", sans-serif; }
 
 body {
   overflow-y: hidden;
@@ -9,7 +22,7 @@ body {
   min-width: 980px;
   padding: 0;
   color: #FFF;
-  font-size: 14px;
+  font-size: 12px;
   background-color: #f5f5fa; }
 
 a {
@@ -271,12 +284,14 @@ table {
   font-size: 17px; }
 
 .input-bar {
+  font-family: "Source_Regular", sans-serif;
+  color: #919095;
   position: fixed;
   display: block;
   height: 36px;
   width: 420px;
   top: 152px;
-  left: 60px;
+  left: 70px;
   padding-left: 8px;
   border-radius: 4px;
   border: 1px solid #919095;
@@ -288,6 +303,10 @@ table {
     -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); }
 
+#textanalyser.ui-autocomplete-input {
+  font-family: "Source_Regular", sans-serif;
+  color: #919095; }
+
 .add-button {
   position: fixed;
   top: 154px;
@@ -304,7 +323,7 @@ table {
 .ui-helper-hidden-accessible {
   position: fixed;
   top: 203px;
-  left: 68px;
+  left: 78px;
   text-shadow: -1px 1px 8px #E DE275, 1px -1px 8px #EDE275;
   font-size: 16px; }
 
@@ -358,13 +377,13 @@ table {
   width: 100%;
   top: 50px;
   height: 20px;
-  left: 100px; }
+  left: 110px; }
 
 .search-icon {
   position: fixed;
   width: 20px;
   height: 20px;
-  left: 60px;
+  left: 70px;
   top: 50px; }
 
 .task-alert {
@@ -402,45 +421,51 @@ table {
   top: 0;
   left: 0;
   width: 100%;
-  height: 36px;
+  min-height: 36px;
   background-color: #363636; }
 
 .doc-title {
-  position: fixed;
-  font-family: "Source Sans Pro Semibold", sans-serif;
-  left: 60px;
-  top: 10px;
-  color: #f5f5fa; }
+  float: left;
+  font-family: "Source_Semibold", sans-serif;
+  color: #f5f5fa;
+  margin: 10px 70px 10px 70px; }
+
+.user-area {
+  float: right;
+  margin: 3px 70px 3px 70px; }
+
+.username {
+  display: inline-block;
+  text-align: right; }
 
 .profile-circle {
-  position: fixed;
-  right: 400px;
   border-radius: 50%;
   width: 30px;
   height: 30px;
   background: #33c2e0;
-  top: 3px; }
+  display: inline-block; }
 
 .profile-initials {
-  position: fixed;
-  top: 10px;
-  right: 405px;
-  color: #f5f5fa; }
+  display: inline-block;
+  color: #f5f5fa;
+  font-size: 14px;
+  position: relative;
+  left: -27px;
+  top: -10px; }
 
 .profile-username {
-  position: fixed;
-  top: 10px;
-  right: 295px;
-  color: #f5f5fa; }
+  display: inline-block;
+  top: 12px;
+  color: #f5f5fa;
+  position: relative;
+  left: -20px;
+  top: -10px; }
 
-.owner-logo {
-  position: fixed;
-  top: 3px;
-  right: 50px; }
+.organization-logo {
+  display: inline-block;
+  margin-left: 12px; }
 
-@font-face {
-  font-family: 'MyWebFont';
-  src: url(../../font/SourceSansPro-Regular.ttf) format("ttf"); }
+/* Headings */
 h1 {
   font-size: 30px; }
 
@@ -455,5 +480,3 @@ h2 {
 
 h1 {
   font-size: 12px; }
-
-/*# sourceMappingURL=style.css.map */