From e7f1af2e6d0c41da504a26ad626f0a712c286a25 Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Wed, 2 Sep 2015 09:57:29 +0200
Subject: [PATCH] Search styling

---
 .../admin/app/styles/components/selectize.css | 25 +++++++++++++------
 ghost/admin/app/styles/layouts/main.css       | 19 +++++++++++---
 2 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/ghost/admin/app/styles/components/selectize.css b/ghost/admin/app/styles/components/selectize.css
index f93d047289..2339d16293 100644
--- a/ghost/admin/app/styles/components/selectize.css
+++ b/ghost/admin/app/styles/components/selectize.css
@@ -205,13 +205,13 @@
     cursor: pointer;
 }
 .selectize-dropdown [data-selectable] .highlight {
-    background: rgba(125, 168, 208, 0.2);
+    background: #fff3b8;
     border-radius: 1px;
 }
 .selectize-dropdown [data-selectable],
 .selectize-dropdown .optgroup-header,
 .selectize-dropdown .dropdown-empty-message {
-    padding: 5px 8px;
+    padding: 7px 8px;
 }
 .selectize-dropdown .optgroup:first-child .optgroup-header {
     border-top: 0 none;
@@ -305,13 +305,24 @@
     border-color: #b8b8b8;
 }
 .selectize-dropdown .optgroup-header {
+    position: relative;
+    display: inline-block;
     padding-top: 7px;
+    background: #fff;
+    color: var(--midgrey);
     font-size: 0.85em;
-    font-weight: bold;
 }
-.selectize-dropdown .optgroup {
-    border-top: 1px solid #f0f0f0;
+.selectize-dropdown .optgroup-header:after {
+    content: "";
+    position: absolute;
+    top: 52%;
+    left: calc(100% + 3px);
+    display: block;
+    width: calc(187px - 100%);
+    height: 1px;
+    border-bottom: #dfe1e3 1px solid;
 }
-.selectize-dropdown .optgroup:first-child {
-    border-top: 0 none;
+
+.selectize-dropdown .option {
+    line-height: 1.35em;
 }
diff --git a/ghost/admin/app/styles/layouts/main.css b/ghost/admin/app/styles/layouts/main.css
index 8e73ecebbe..01c179ece7 100644
--- a/ghost/admin/app/styles/layouts/main.css
+++ b/ghost/admin/app/styles/layouts/main.css
@@ -104,6 +104,10 @@
     margin: 0 15px 10px;
 }
 
+.gh-nav-search .selectize-control {
+    display: flex;
+}
+
 .gh-nav-search-input .selectize-input {
     padding: 4px 8px;
     padding-right: 30px;
@@ -115,15 +119,21 @@
     font-size: 1.3rem;
 }
 
+.gh-nav-search .selectize-input.dropdown-active {
+    border-bottom: none;
+}
+
+.gh-nav-search .selectize-dropdown-content {
+    max-height: calc(100vh - 150px);
+}
+
 .gh-nav-search-button {
     position: absolute;
-    top: -5px;
+    top: 0;
     right: 0;
     bottom: 0;
     z-index: 1;
-    display: flex;
-    align-items: center;
-    padding: 0 10px 0 5px;
+    padding: 0 8px 0 5px;
 }
 
 .gh-nav-search-button i {
@@ -131,6 +141,7 @@
     height: 16px;
     color: var(--midgrey);
     font-size: 13px;
+    line-height: 13px;
     transition: color 0.2s ease;
     transform: rotate(90deg);
 }