From 997cc8da3083cbf62223f0b56b444d945f34a86b Mon Sep 17 00:00:00 2001
From: Florian Strohmaier <florian.strohmaier@icinga.com>
Date: Wed, 1 Jun 2022 17:12:09 +0200
Subject: [PATCH] Add `mobilconfigmenu` Stylesheet

---
 public/css/icinga/mobileconfigmenu.less | 155 ++++++++++++++++++++++++
 1 file changed, 155 insertions(+)
 create mode 100644 public/css/icinga/mobileconfigmenu.less

diff --git a/public/css/icinga/mobileconfigmenu.less b/public/css/icinga/mobileconfigmenu.less
new file mode 100644
index 000000000..6be716f39
--- /dev/null
+++ b/public/css/icinga/mobileconfigmenu.less
@@ -0,0 +1,155 @@
+#mobile-searchbar {
+  input.search {
+    @height: 2.5em;
+
+    width: 100%;
+    background: @low-sat-blue-dark url(../img/icons/search.png) no-repeat .5em center;
+    padding-left: 2em;
+    background-size: 1em;
+    border: none;
+    height: @height;
+    border-radius: @height/2;
+
+    &:focus {
+      outline: 3px solid rgba(0, 195, 237, 0.5);
+
+      &::placeholder {
+        color: @gray;
+      }
+    }
+  }
+
+  .search-reset {
+    right: .5em;
+  }
+
+  .search-control {
+    width: 100%;
+  }
+}
+
+#mobile-config-menu {
+  position: relative;
+
+  button {
+    .appearance(none);
+    background: none;
+    border: none;
+    .rounded-corners();
+    padding: .25em;
+    margin-right: -.25em;
+
+    > .user-ball {
+      .ball-size-l();
+    }
+  }
+
+  > li {
+    margin-right: .75em;
+  }
+
+  .state-badge {
+    font-size: .857em;
+    line-height: 1.5;
+  }
+
+  button ~ .state-badge {
+    position: absolute;
+    top: .25em;
+    left: -.5em;
+  }
+
+  .user-ball {
+    .ball();
+    .ball-solid(@icinga-blue);
+
+    // icingadb-web/public/css/common.less: .user-ball
+    font-weight: bold;
+    text-transform: uppercase;
+
+    // compensate border
+    margin: -1px;
+    border: 1px solid @text-color-inverted;
+    font-style: normal;
+    line-height: 1.2;
+
+    font-size: 1.75em;
+  }
+
+  .nav-level-1 {
+    position: fixed;
+    right: 1em;
+    left: 1em;
+    top: 4em;
+
+    li {
+      &.badge-nav-item > a {
+        display: flex;
+        align-items: baseline;
+        width: 100%;
+
+        .state-badge {
+          margin-left: auto;
+        }
+      }
+    }
+
+    li:not(.has-icon) a {
+      padding-left: 2em;
+    }
+
+    li .icon {
+      width: 1em;
+      margin-left: .3em;
+      margin-right: .2em;
+    }
+
+    li .user-ball {
+      .ball-size-m();
+      line-height: .25;
+      margin-right: .2em;
+    }
+
+    &:before {
+      transform: rotate(225deg);
+      height: 1.1em;
+      width: 1.1em;
+      top: -.6em;
+      right: .6em;
+    }
+
+    .nav-item-logout {
+      color: @color-critical;
+      border-top: 1px solid @gray-lighter;
+    }
+  }
+
+  > li.active button {
+    background: @icinga-blue
+  }
+
+  .nav-level-1 li.active.selected {
+    background: @menu-2ndlvl-active-bg-color
+  }
+}
+
+#layout:not(.minimal-layout) {
+  #mobile-config-menu,
+  #mobile-searchbar {
+    display: none;
+  }
+}
+
+#layout.mobile-config-flyout-open #mobile-config-menu {
+  button ~ .state-badge {
+    display: none;
+  }
+
+  .nav-level-1 {
+    display: block;
+  }
+
+  button {
+    background: rgba(0, 0, 0, 0.25);
+  }
+}