From 210e2a062d8015e778369a6c7d75a4e976baa5fd Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 23 Oct 2015 11:34:56 +0500
Subject: Improving UI for the search popover

---
 web/sass-files/sass/partials/_base.scss    |  1 +
 web/sass-files/sass/partials/_popover.scss | 38 +++++++++++++++++++++++-------
 2 files changed, 31 insertions(+), 8 deletions(-)

(limited to 'web/sass-files')

diff --git a/web/sass-files/sass/partials/_base.scss b/web/sass-files/sass/partials/_base.scss
index 3618fb07e..6b2e79933 100644
--- a/web/sass-files/sass/partials/_base.scss
+++ b/web/sass-files/sass/partials/_base.scss
@@ -40,6 +40,7 @@ img {
 }
 
 .popover {
+  @include border-radius(3px);
   color: #333;
   &.bottom, &.right, &.top, &.left {
     >.arrow:after {
diff --git a/web/sass-files/sass/partials/_popover.scss b/web/sass-files/sass/partials/_popover.scss
index c389ddf7d..72cb43481 100644
--- a/web/sass-files/sass/partials/_popover.scss
+++ b/web/sass-files/sass/partials/_popover.scss
@@ -21,21 +21,43 @@
 }
 
 .search-help-popover {
-    transition: opacity 0.3s;
+    visibility: hidden;
+    max-width: none;
+    width: 100%;
+    top: 36px;
+    @include single-transition(opacity, 0.3s, ease-in);
+    font-size: em(13px);
+
+    &.bottom > .arrow {
+        top: -18px;
+        border-width: 9px;
+        left: 30px;
+    }
+
+    .popover-content {
+        padding: 3px 13px;
+    }
 
     h4 {
-        text-align: left;
+        font-size: 1em;
     }
+
     ul {
-        padding-left: 2em;
-        text-align: left;
+        padding-left: 17px;
+        span {
+            @include opacity(0.7);
+        }
+        strong, b {
+            @include opacity(1);
+        }
     }
+
     .tooltip-inner {
         max-width: 100%;
     }
-}
 
-.search-help-popover.visible {
-    opacity: 100;
-    transition: opacity 0.3s;
+    &.visible {
+        visibility: visible;
+        @include opacity(1);
+    }
 }
-- 
cgit v1.2.3-1-g7c22