better looking search suggestion

- fixes bug that hides the suggestions behind the input bar
- suggestion items are now highlighted on hover
- better positioning
- larger font size for search bar suggestions

3 files changed, 44 insertions, 8 deletions

diff --git a/res/css/partials/input-bar.scss b/res/css/partials/input-bar.scss
index 913c7e48..11a821bb 100644
--- a/res/css/partials/input-bar.scss
+++ b/res/css/partials/input-bar.scss
@@ -56,25 +56,26 @@
 }
 
 .suggestion{
+  position: relative;
   color: $dark-grey;
   max-height: 580px;
   overflow-y: scroll;
   font-size: $h3-size;
   list-style-type: none;
   width: inherit;
-  position: relative;
   margin-top: 6px;
   border: 1px solid $mid-grey;
   @include rz-box-sizing-border;
   background: white;
-  // this box should have a shadow but we need a js solution to hide it before its appears  - @include rz-box-shadow(0px, 1px, 6px, 0px, rgba(0,0,0,0.3) );
+  z-index: 100;
+  @include rz-box-shadow(0px, 3px, 6px, 0px, rgba(0,0,0,0.3) );
 }
 
 .suggestion-item {
   padding: 6px 0px 6px 18px;
 }
 
-.suggestion .selected {
+.suggestion-item.selected, .suggestion-item:hover {
   padding-left: 16px;
   background-color: $light-grey;
   border-left: 2px solid $cyan;
diff --git a/res/css/partials/search-bar.scss b/res/css/partials/search-bar.scss
index db46df31..b9f0de7d 100644
--- a/res/css/partials/search-bar.scss
+++ b/res/css/partials/search-bar.scss
@@ -1,6 +1,7 @@
 @import '../modules/mixins'; // For box-shadow
 
 .search-bar{
+  position: relative;
   width:100%;
   height:$four-baselines;
   background: white;
@@ -23,12 +24,29 @@
   background-repeat: no-repeat;
 }
 
-input {
+#search {
   font-family: $base-font-family;
   font-size: $h3-size;
   width: 80%;
 }
 
+#search-suggestion {
+  position: absolute;
+  width: 70%;
+  margin-left: $doc-margin;
+  top: $three-baselines + 6px;
+}
+
+#search-suggestion .suggestion-item {
+  padding: $one-baseline 0px $one-baseline $two-baselines;
+}
+
+#search-suggestion .suggestion-item.selected, #search-suggestion .suggestion-item:hover {
+  padding: $one-baseline 0px $one-baseline 22px;
+}
+
+
+
 .export {
   cursor: pointer;
   text-align: right;
diff --git a/res/css/style.css b/res/css/style.css
index 155d4f25..0caedff0 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -383,24 +383,28 @@ body.debug .debug-ui-right {
   outline: none; }
 
 .suggestion {
+  position: relative;
   color: #363636;
   max-height: 580px;
   overflow-y: scroll;
   font-size: 18px;
   list-style-type: none;
   width: inherit;
-  position: relative;
   margin-top: 6px;
   border: 1px solid #919095;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  background: white; }
+  background: white;
+  z-index: 100;
+  -webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
+  -moz-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); }
 
 .suggestion-item {
   padding: 6px 0px 6px 18px; }
 
-.suggestion .selected {
+.suggestion-item.selected, .suggestion-item:hover {
   padding-left: 16px;
   background-color: #f5f5fa;
   border-left: 2px solid #33c2e0;
@@ -542,6 +546,7 @@ body.debug .debug-ui-right {
   margin: 24px 0px 24px 0px; }
 
 .search-bar {
+  position: relative;
   width: 100%;
   height: 48px;
   background: white;
@@ -563,11 +568,23 @@ body.debug .debug-ui-right {
   background-position: center;
   background-repeat: no-repeat; }
 
-input {
+#search {
   font-family: "Source_Regular", sans-serif;
   font-size: 18px;
   width: 80%; }
 
+#search-suggestion {
+  position: absolute;
+  width: 70%;
+  margin-left: 70px;
+  top: 42px; }
+
+#search-suggestion .suggestion-item {
+  padding: 12px 0px 12px 24px; }
+
+#search-suggestion .suggestion-item.selected, #search-suggestion .suggestion-item:hover {
+  padding: 12px 0px 12px 22px; }
+
 .export {
   cursor: pointer;
   text-align: right;