From e2b7b2f2cfb3c6625a33ec5cdd93b297c2699670 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Mon, 31 Aug 2015 15:30:51 -0400
Subject: [PATCH] FIX: Don't outline buttons when menu is in slide out

---
 .../discourse/components/menu-panel.js.es6    |  3 ++
 .../stylesheets/common/base/header.scss       | 44 ++++++++++---------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/app/assets/javascripts/discourse/components/menu-panel.js.es6 b/app/assets/javascripts/discourse/components/menu-panel.js.es6
index 2cf682a5d..0c51b0e76 100644
--- a/app/assets/javascripts/discourse/components/menu-panel.js.es6
+++ b/app/assets/javascripts/discourse/components/menu-panel.js.es6
@@ -37,11 +37,13 @@ export default Ember.Component.extend({
         contentHeight = fullHeight - (offsetTop - scrollTop) - PANEL_BODY_MARGIN;
       }
       $panelBody.height(contentHeight);
+      $('body').addClass('drop-down-visible');
     } else {
       $panelBody.height('auto');
       const $header = $('header.d-header');
       const headerHeight = parseInt($header.height() + $header.offset().top - $(window).scrollTop() + 3);
       this.$().css({ left: "auto", top: headerHeight + "px" });
+      $('body').removeClass('drop-down-visible');
     }
   },
 
@@ -76,6 +78,7 @@ export default Ember.Component.extend({
       $('html').off('click.close-menu-panel');
       $(window).off('scroll.discourse-menu-panel');
       this._stopWatchingSize();
+      $('body').removeClass('drop-down-visible');
     }
   },
 
diff --git a/app/assets/stylesheets/common/base/header.scss b/app/assets/stylesheets/common/base/header.scss
index 305aef128..07ac05348 100644
--- a/app/assets/stylesheets/common/base/header.scss
+++ b/app/assets/stylesheets/common/base/header.scss
@@ -82,27 +82,29 @@
           background-color: dark-light-diff($primary, $secondary, 90%, -60%);
         }
       }
-      .active .icon {
-        position: relative;
-        color: #7b7b7b;
-        background-color: $secondary;
-        cursor: default;
-        border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-        border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-        border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-        &:after {
-          display: block;
-          position: absolute;
-          top: 100%;
-          left: 0;
-          z-index: 1101;
-          width: 100%;
-          height: 0;
-          content: "";
-          border-top: 1px solid $secondary;
-        }
-        &:hover {
-        border-bottom: none;
+      .drop-down-visible & {
+        .active .icon {
+          position: relative;
+          color: #7b7b7b;
+          background-color: $secondary;
+          cursor: default;
+          border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+          border-left: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+          border-right: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
+          &:after {
+            display: block;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            z-index: 1101;
+            width: 100%;
+            height: 0;
+            content: "";
+            border-top: 1px solid $secondary;
+          }
+          &:hover {
+            border-bottom: none;
+          }
         }
       }
       [class^="fa fa-"] {