From ee00920032324aade8493bd34daf8de292e0511d Mon Sep 17 00:00:00 2001
From: Toby Zerner <toby.zerner@gmail.com>
Date: Mon, 28 Mar 2016 10:23:49 +1030
Subject: [PATCH] Fix search box overlapping forum title in some cases. closes
 #697

- Fix jank in shrinking animation when search box loses focus after overlapping forum title.
- Use solid colors instead of transparent whites/blacks for colored header controls so that search box isn't transparent when it does overlap forum title.
- This also simplifies colored header variables, making them more analogous to the non-colored header variables, and allowing for the removal of some conditional CSS in the notifications dropdown button.

Some more radical changes to header layout (flexbox?) may be made when we implement the new mobile design (#867), but for now this is an acceptable fix.
---
 .../core/less/forum/NotificationsDropdown.less      | 11 +----------
 framework/core/less/lib/Search.less                 | 13 ++++++++-----
 framework/core/less/lib/mixins/light-contents.less  | 11 +++++++----
 framework/core/less/lib/variables.less              |  4 ++--
 4 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/framework/core/less/forum/NotificationsDropdown.less b/framework/core/less/forum/NotificationsDropdown.less
index 1a45b9a88..7ce7bfb1d 100644
--- a/framework/core/less/forum/NotificationsDropdown.less
+++ b/framework/core/less/forum/NotificationsDropdown.less
@@ -24,11 +24,6 @@
   }
 }
 
-.NotificationsDropdown .Dropdown-toggle .Button-icon {
-  & when (@config-colored-header = true) {
-    color: mix(@header-bg, @header-color);
-  }
-}
 .NotificationsDropdown .Dropdown-toggle.new .Button-icon {
   color: @header-color;
 }
@@ -37,7 +32,7 @@
   position: absolute;
   top: 1px;
   left: 17px;
-  background: @control-color;
+  background: @header-control-color;
   color: @header-bg;
   font-size: 11px;
   font-weight: bold;
@@ -49,10 +44,6 @@
   height: 18px;
   text-align: center;
 
-  & when (@config-colored-header = true) {
-    background: mix(@header-bg, @header-color);
-  }
-
   @media @phone {
     left: 20px;
   }
diff --git a/framework/core/less/lib/Search.less b/framework/core/less/lib/Search.less
index ccad7be8c..cfa2a770c 100755
--- a/framework/core/less/lib/Search.less
+++ b/framework/core/less/lib/Search.less
@@ -2,12 +2,15 @@
   position: relative;
 }
 @media @tablet-up {
-  .Search.focused {
-    margin-left: -400px;
-    .transition(all 0.4s);
+  .Search {
+    .transition(margin-left 0.4s);
 
-    input, .Search-results {
-      width: 400px;
+    &.focused {
+      margin-left: -400px;
+
+      input, .Search-results {
+        width: 400px;
+      }
     }
   }
 }
diff --git a/framework/core/less/lib/mixins/light-contents.less b/framework/core/less/lib/mixins/light-contents.less
index de06e0972..3224d04cc 100644
--- a/framework/core/less/lib/mixins/light-contents.less
+++ b/framework/core/less/lib/mixins/light-contents.less
@@ -1,18 +1,21 @@
 // This is a mixin which styles components (buttons, inputs, etc.) for use on
 // dark backgrounds.
 .light-contents(@color: #fff, @control-bg: fade(#000, 10%), @control-color: #fff) {
-  &, a, .Button--link, .Search-input {
+  &, a {
     color: @color;
   }
+  .Button--link, .Search-input {
+    color: @control-color;
+  }
   .FormControl {
     background: @control-bg;
     border: 0;
     color: @control-color;
-    .placeholder(fade(@control-color, 80%));
+    .placeholder(@control-color);
 
     &:focus {
-      color: @control-color;
-      background: fadein(@control-bg, 5%);
+      color: @color;
+      background: fadein(darken(@control-bg, 5%), 10%);
     }
   }
   .Button, .Button:hover {
diff --git a/framework/core/less/lib/variables.less b/framework/core/less/lib/variables.less
index 3b39e1357..f44824939 100755
--- a/framework/core/less/lib/variables.less
+++ b/framework/core/less/lib/variables.less
@@ -81,8 +81,8 @@
 .define-header(true) {
   @header-bg:                      @primary-color;
   @header-color:                   @body-bg;
-  @header-control-bg:              fade(#000, 10%);
-  @header-control-color:           @body-bg;
+  @header-control-bg:              mix(#000, @header-bg, 10%);
+  @header-control-color:           mix(@body-bg, @header-bg, 60%);
 }
 
 // ---------------------------------