From f14256a7ee0cd4cf6751e3d1c10ec3a64192fb5b Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Tue, 9 Jul 2019 10:20:59 +0200
Subject: [PATCH] CSS: Adapt form design with filter editor

refs #3676
---
 library/Icinga/Web/Widget/FilterEditor.php |  4 ++--
 public/css/icinga/widgets.less             | 23 ++++++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/library/Icinga/Web/Widget/FilterEditor.php b/library/Icinga/Web/Widget/FilterEditor.php
index ce43e2c82..9a59ac7f3 100644
--- a/library/Icinga/Web/Widget/FilterEditor.php
+++ b/library/Icinga/Web/Widget/FilterEditor.php
@@ -783,8 +783,8 @@ class FilterEditor extends AbstractWidget
             . $this->renderFilter($this->filter)
             . '</li></ul>'
             . '<div class="buttons">'
-            . '<input type="submit" name="submit" value="Apply" />'
-            . '<input type="submit" name="cancel" value="Cancel" />'
+            . '<input type="submit" name="cancel" value="Cancel" class="button btn-cancel" />'
+            . '<input type="submit" name="submit" value="Apply" class="button btn-primary"/>'
             . '</div>'
             . '<input type="hidden" name="formUID" value="FilterEditor">'
             . '</form>'
diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index f053d9974..4294eb5c2 100644
--- a/public/css/icinga/widgets.less
+++ b/public/css/icinga/widgets.less
@@ -188,6 +188,8 @@ table.multiselect tr[href] td {
 
 #main div.filter {
   form.editor {
+    max-width: 37em;
+
     input[type=text], select {
       width: 12em;
     }
@@ -196,14 +198,23 @@ table.multiselect tr[href] td {
       background-color: #eee;
     }
 
-    div.buttons {
-      float: right;
-    }
-
     button {
       border: none;
       background: none;
     }
+
+    .buttons {
+      padding: .25em 0;
+      text-align: right;
+    }
+
+    .buttons input {
+      .button();
+    }
+
+    .buttons input:not(:last-child) {
+      margin-right:.5em;
+    }
   }
 }
 
@@ -279,7 +290,7 @@ ul.tree li::after {
 
 /* Stop left vertical line at "mid-height" after last nodes (at each level) */
 ul.tree li:last-child::before {
-  height: 1em;
+  height: 1.5em;
 }
 
 /* No border for the root element - there must be only ONE root */
@@ -294,8 +305,8 @@ ul.tree > ul > li::before, ul.tree > ul > li::after {
 
 ul.tree li a {
   display: inline-block;
-  padding-left: 1em;
   line-height: 2em;
+  padding: 0 .5em;
   text-decoration: none;
   color: @gray;
   background-repeat: no-repeat;