Fixes to search dropdown

1 files changed, 44 insertions, 9 deletions

diff --git a/app/javascript/flavours/glitch/styles/components/drawer.scss b/app/javascript/flavours/glitch/styles/components/drawer.scss
index ebf996907..865ab4343 100644
--- a/app/javascript/flavours/glitch/styles/components/drawer.scss
+++ b/app/javascript/flavours/glitch/styles/components/drawer.scss
@@ -114,19 +114,27 @@
   }
 
   & > .icon {
+    display: block;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 18px;
+    height: 18px;
+    color: $ui-secondary-color;
+    font-size: 18px;
+    line-height: 18px;
+    z-index: 2;
+
     .fa {
       display: inline-block;
       position: absolute;
-      top: 10px;
-      right: 10px;
-      width: 18px;
-      height: 18px;
-      color: $ui-secondary-color;
-      font-size: 18px;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
       opacity: 0;
       cursor: default;
       pointer-events: none;
-      z-index: 2;
       transition: all 100ms linear;
     }
 
@@ -136,14 +144,15 @@
     }
 
     .fa-times-circle {
-      top: 11px;
       transform: rotate(-90deg);
       cursor: pointer;
 
       &:hover { color: $primary-text-color }
     }
+  }
 
-    &.active {
+  &.active {
+    & > .icon {
       .fa-search {
         opacity: 0;
         transform: rotate(90deg);
@@ -158,6 +167,32 @@
   }
 }
 
+.drawer--search--popout {
+  box-sizing: border-box;
+  margin-top: 10px;
+  border-radius: 4px;
+  padding: 10px 14px 14px 14px;
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  color: $ui-primary-color;
+  background: $simple-background-color;
+
+  h4 {
+    margin-bottom: 10px;
+    color: $ui-primary-color;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  ul { margin-bottom: 10px }
+  li { padding: 4px 0 }
+
+  em {
+    color: $ui-base-color;
+    font-weight: 500;
+  }
+}
+
 .drawer--account {
   padding: 10px;
   color: $ui-primary-color;