From 1fd673a034448756d55ef0b7fc380849635006d7 Mon Sep 17 00:00:00 2001
From: Johannes Meyer <johannes.meyer@icinga.com>
Date: Thu, 25 Jul 2019 11:52:14 +0200
Subject: [PATCH] collapsible.js: Let fade effect look good in containers with
 .impact

---
 public/css/icinga/main.less | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/public/css/icinga/main.less b/public/css/icinga/main.less
index 42a34cc2b..39bc13d0f 100644
--- a/public/css/icinga/main.less
+++ b/public/css/icinga/main.less
@@ -307,7 +307,7 @@ a:hover > .icon-cancel {
   position: relative;
   overflow: hidden;
 
-  &:before {
+  &:before, &:after {
     content: "";
     display: block;
     height: 2em;
@@ -317,5 +317,23 @@ a:hover > .icon-cancel {
     left: 0;
     right: 0;
     z-index: 1;
+
+    opacity: 1;
+    transition: opacity 2s 1s linear;
+  }
+
+  &:after {
+    opacity: 0;
+    background: linear-gradient(rgba(238,238,238,0), #eee);
+  }
+}
+
+.impact .collapsible.collapsed {
+  &:before {
+    opacity: 0;
+  }
+
+  &:after {
+    opacity: 1;
   }
 }