From 6a7c73dd7772bacb9c74af96b11deae0522b8791 Mon Sep 17 00:00:00 2001
From: Jennifer Mourek <jennifer.mourek@icinga.com>
Date: Thu, 28 Feb 2019 15:54:55 +0100
Subject: [PATCH] Add caret to flyout menu

---
 public/css/icinga/menu.less | 45 +++++++++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 4 deletions(-)

diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
index 9083b65d8..28e5bfd82 100644
--- a/public/css/icinga/menu.less
+++ b/public/css/icinga/menu.less
@@ -101,6 +101,30 @@
   }
 }
 
+ul:not(.nav-level-2) > .selected > a {
+  background-color: @menu-highlight-color;
+  color: @text-color-inverted;
+
+  &:hover {
+    color: @text-color-inverted;
+  }
+
+  &:after {
+    .transform(rotate(45deg));
+
+    position: absolute;
+    right: -.75em;
+
+    background-color: #fff;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,0.6);
+    content: "";
+    display: block;
+    height: 1.25em;
+    margin-top: -1.75em;
+    width: 1.25em;
+  }
+}
+
 #menu .nav-level-2 > .nav-item {
   // Collapse menu by default
   display: none;
@@ -131,16 +155,14 @@
 
   // Little caret on active level-2 item
   &.active:after {
+    .transform(rotate(45deg));
+
     background-color: @body-bg-color;
     box-shadow: 0 0 1em 0 rgba(0,0,0,.6);
     content: "";
     display: block;
     height: 1.25em;
     width: 1.25em;
-    -webkit-transform: rotate(45deg);
-       -moz-transform: rotate(45deg);
-        -ms-transform: rotate(45deg);
-            transform: rotate(45deg);
     position: absolute;
     top: .5em;
     right: -.75em;
@@ -223,6 +245,21 @@
     width: 14em;
     position: fixed;
 
+    &:after {
+      .transform(rotate(45deg));
+
+      background-color: @body-bg-color;
+      border-bottom: 1px solid @gray-light;
+      border-left: 1px solid @gray-light;
+      content: "";
+      display: block;
+      height: 1.1em;
+      width: 1.1em;
+      position: absolute;
+      top: 1em;
+      left: -.6em;
+      z-index: -1;
+    }
     > .nav-item {
       display: block;
       padding-left: 0;