From 8505d26182155493fac76564e5c0eb3cbc2b49f6 Mon Sep 17 00:00:00 2001
From: Devin Howard <devin@callysto.com>
Date: Sat, 28 Nov 2015 22:50:32 +0800
Subject: [PATCH] search box css fixes

---
 app/assets/stylesheets/search.scss.erb | 111 ++++++++++++-------------
 1 file changed, 52 insertions(+), 59 deletions(-)

diff --git a/app/assets/stylesheets/search.scss.erb b/app/assets/stylesheets/search.scss.erb
index affde153..607a561f 100644
--- a/app/assets/stylesheets/search.scss.erb
+++ b/app/assets/stylesheets/search.scss.erb
@@ -25,10 +25,6 @@
 	padding: 5px 10px 5px 10px;
 }
 
-.sidebarSearchField {
-  color: #424242;
-}
-
 .sidebarSearchIcon {
   float: left;
   width: 72px;
@@ -74,6 +70,7 @@
 .resultmap, .resulttopic, .resultmapper, .resultnoresult {
   min-height: 48px;
   display: table;
+  width: 100%;
 }
 
 .canEditMap button.addToMap {
@@ -87,22 +84,6 @@
   border-radius: 14px;
 }
 
-.sidebarSearchField {
-  height: 20px;
-  border-top: 1px solid #BDBDBD;
-  border-bottom: 1px solid #BDBDBD;
-  border-left: none;
-  border-right: none;
-  padding: 5px 0 5px 0;
-  width: 0px;
-  margin: 0;
-  outline: none;
-  font-size: 14px;
-  line-height: 14px;
-  background: #F5F5F5; 
-  font-family: 'din-medium', helvetica, sans-serif;
-}
-
 /* main search selector */
 
 .sidebarSearch {
@@ -110,9 +91,26 @@
   height: 32px;
   position: relative;
 
-  .twitter-typeahead,
+  .twitter-typeahead {
+    float: left;
+  }
+
   .sidebarSearchField {
     float: left;
+    height: 20px;
+    border-top: 1px solid #BDBDBD;
+    border-bottom: 1px solid #BDBDBD;
+    border-left: none;
+    border-right: none;
+    padding: 5px 0 5px 0;
+    width: 0px;
+    margin: 0;
+    outline: none;
+    font-size: 14px;
+    line-height: 14px;
+    background: #F5F5F5; 
+    font-family: 'din-medium', helvetica, sans-serif;
+    color: #424242;
   }
 
   .tt-hint {
@@ -132,7 +130,7 @@
     font-family: 'din-medium', helvetica, sans-serif;
   }
 
-  .tt-dropdown-menu {
+  .tt-menu {
     top: 40px !important;
     background: #F5F5F5;
     width: 472px;
@@ -188,27 +186,52 @@
     .maximizeResults {
       background-position: -32px 0;
     }
-  }/* tt-dropdown-menu */
+  }/* tt-menu */
 
   .tt-suggestion {
     position: relative;
     background: #FFF;
     padding: 8px 0;
 
+    > div {
+      display: table-cell;
+    }
+
     &:hover {
       background: #E0E0E0;
     }
-    .searchResIconWrapper {
-      display: table-cell;
-      vertical-align: middle;
-      height: 32px;
-      padding: 0 18px 0 28px;
-    }
     .icon {
       width: 32px;
       height: 32px;
       border-radius:16px;
     }
+    .resultText {
+      width: 260px;
+      padding-left: 8px;
+      vertical-align: middle;
+      word-wrap: break-word;
+    }
+    .resultTitle {
+      font-weight: normal;
+      font-size: 16px;
+      line-height: 20px;
+      width: 100%;
+      font-family: 'din-regular', helvetica, sans-serif;
+    }
+    .resultDesc {
+      font-size: 12px;
+      line-height: 16px;
+      width: 100%;
+      font-style: italic;
+      font-family: helvetica, sans-serif;
+    }
+
+    .topicMetacode,
+    .searchResIconWrapper {
+      vertical-align: middle;
+      padding: 0 0 0 8px;
+      width: 70px;
+    }
   }/* tt-suggestion */
 
   .tt-dataset {
@@ -274,28 +297,6 @@
     }
   }/* tt-dataset-mappers */
 
-  .resultText {
-    width: 260px;
-    display: table-cell;
-    padding-left: 8px;
-    vertical-align: middle;
-    word-wrap: break-word;
-  }
-  .resultTitle {
-    font-weight: normal;
-    font-size: 16px;
-    line-height: 20px;
-    width: 100%;
-    font-family: 'din-regular', helvetica, sans-serif;
-  }
-  .resultDesc {
-    font-size: 12px;
-    line-height: 16px;
-    width: 100%;
-    font-style: italic;
-    font-family: helvetica, sans-serif;
-  }
-
   .autoOptions {
     width: 114px;
     height: 48px;
@@ -308,7 +309,6 @@
     div,
     button {
       position: absolute;
-      padding: 0;
       margin: 0;
       border: none;
       outline: none;
@@ -377,13 +377,6 @@
     line-height: 24px;
   }
 
-  .topicMetacode {
-    display: table-cell;
-    vertical-align: middle;
-    padding: 0 0 0 8px;
-    width: 70px;
-  }
-
   .tip {
     display: none;
     position: absolute;