From 96f4eff4dcda34446510238eecd65a4a108f6709 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Fri, 24 Jan 2020 11:30:33 +0100
Subject: [PATCH] menu.less: Fix placement of clickable badges in flyout menus

---
 public/css/icinga/menu.less | 55 +++++++++++++++++++++++++------------
 1 file changed, 37 insertions(+), 18 deletions(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 3b2c60f5a..77c2c2f2d 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -143,12 +143,6 @@ ul:not(.nav-level-2) > .selected > a {
     padding: 0.364em 0.545em 0.364em (@icon-width + .75em)/@font-size-small;
   }
 
-  &:not(.selected):not(.active) > a:not(.badge):hover,
-  &:not(.selected):not(.active) > a:not(.badge):focus {
-    background-color: darken(@menu-active-bg-color, 20);
-    color: @menu-2ndlvl-highlight-color;
-  }
-
   &.active {
     background-color: @menu-highlight-color;
     overflow: hidden;
@@ -276,7 +270,9 @@ ul:not(.nav-level-2) > .selected > a {
       > a {
         color: @menu-flyout-color;
         padding-left: 1.5em;
+      }
 
+      &:not(.active) {
         &:hover, &:focus {
           background-color: @tr-active-color;
         }
@@ -284,10 +280,6 @@ ul:not(.nav-level-2) > .selected > a {
 
       &.active > a {
         color: @menu-color;
-
-        &:focus, &:hover {
-          background-color: @menu-highlight-color;
-        }
       }
 
       // Hide activity caret when displayed as flyout
@@ -319,6 +311,28 @@ ul:not(.nav-level-2) > .selected > a {
     // Position relative to parent
     margin-left: 4em;
     margin-top: -3.333em;
+
+    > .badge-nav-item {
+      display: flex;
+      align-items: center;
+
+      a:not(.badge) {
+        flex: 1 1 auto;
+        width: 0;
+      }
+
+      a.badge {
+         color: white;
+         flex: 0 1 auto;
+         margin-right: 1em;
+         padding: .25em;
+         width: auto;
+
+         &:hover {
+           opacity: .6;
+         }
+       }
+    }
   }
 }
 
@@ -475,6 +489,19 @@ input[type=text].search-input {
   margin-right: 0;
 }
 
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
+  &.nav-item:not(.badge-nav-item) {
+    &:not(.selected):not(.active):hover,
+    &:not(.selected):not(.active):focus {
+      background-color: darken(@menu-bg-color, 20);
+
+      > a {
+        color: @menu-2ndlvl-highlight-color;
+      }
+    }
+  }
+}
+
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
 #layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
   &.badge-nav-item {
@@ -511,11 +538,3 @@ input[type=text].search-input {
     }
   }
 }
-
-#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
-  &.badge-nav-item {
-    &:hover {
-      background-color: lighten(@icinga-blue, 80);
-    }
-  }
-}