1 files changed, 303 insertions, 0 deletions
diff --git a/public/css/icinga/configmenu.less b/public/css/icinga/configmenu.less
new file mode 100644
index 0000000..05e50e8
--- /dev/null
+++ b/public/css/icinga/configmenu.less
@@ -0,0 +1,303 @@
+#menu {
+  margin-bottom: 3em;
+}
+
+.sidebar-collapsed #menu {
+  margin-bottom: 8em;
+}
+
+#menu .config-menu {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: @menu-bg-color;
+  margin-top: auto;
+
+  > ul {
+    display: flex;
+    flex-wrap: nowrap;
+    padding: 0;
+
+    > li {
+      > a {
+        padding: 0.5em 0.5em 0.5em 0.75em;
+        line-height: 2.167em;
+        white-space: nowrap;
+        text-decoration: none;
+
+      }
+
+      &:hover .nav-level-1 {
+        display: block;
+      }
+    }
+
+    li.active a:after {
+      display: none;
+    }
+
+    .user-nav-item {
+      width: 100%;
+      overflow: hidden; // necessary for .text-ellipsis of <a>
+
+      > a {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &:not(.active):hover a,
+      &:not(.active) a:focus {
+        background: @menu-hover-bg-color;
+      }
+    }
+
+    .config-nav-item {
+      line-height: 2;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      > button {
+        background: none;
+        border: none;
+        display: block;
+        .rounded-corners();
+
+        > .state-badge {
+          position: absolute;
+          pointer-events: none;
+        }
+
+        .icon {
+          opacity: .8;
+          font-size: 1.25em;
+
+          &:before {
+            margin-right: 0;
+          }
+        }
+      }
+
+      &:hover > button {
+        background: fade(@menu-hover-bg-color, 25);
+
+        > .state-badge  {
+          display: none;
+        }
+      }
+
+      button:focus {
+        background: fade(@menu-hover-bg-color, 25);
+      }
+
+      &.active > button {
+        color: @text-color-inverted;
+        background: @icinga-blue;
+      }
+    }
+
+    .state-badge {
+      line-height: 1.2;
+      padding: .25em;
+      font-family: @font-family-wide;
+    }
+  }
+
+  .nav-level-1 li {
+    &.badge-nav-item > a {
+      display: flex;
+      align-items: baseline;
+      width: 100%;
+
+      .state-badge {
+        margin-left: auto;
+      }
+    }
+  }
+
+  .nav-item-logout {
+    color: @color-critical;
+    border-top: 1px solid @gray-lighter;
+  }
+
+  .user-ball {
+    .ball();
+    .ball-size-l();
+    .ball-solid(@icinga-blue);
+
+    // icingadb-web/public/css/common.less: .user-ball
+    font-weight: bold;
+    text-transform: uppercase;
+
+    // compensate border vertically and add space to the right;
+    margin: -1px .2em -2px 0;
+    border: 1px solid @text-color-inverted;
+    font-style: normal;
+    line-height: 1.2;
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .config-menu {
+  .user-nav-item {
+    > a {
+      padding-right: 4.75em;
+    }
+
+    &.active.selected + .config-nav-item {
+      > button {
+        color: @text-color-inverted;
+      }
+    }
+  }
+
+  .config-nav-item {
+    position: absolute;
+    right: 2.5em;
+    bottom: 0;
+    top: 0;
+
+    .state-badge {
+      left: -1em;
+      top: 0;
+    }
+  }
+
+  .flyout {
+    bottom: 100%;
+    right: -2em;
+    width: 15em;
+  }
+}
+
+.sidebar-collapsed #menu .config-menu {
+  ul {
+    flex-direction: column;
+
+    .user-ball {
+      margin-left: .25em * 1.5/2;
+      margin-right: .5em + .25em * 1.5/2;
+      width: 2em * 1.5/2 ;
+      height: 2em * 1.5/2;
+      font-size: 2/1.5em;
+      line-height: 1;
+    }
+
+    .config-nav-item {
+      padding-right: 0;
+      margin-bottom: 3em;
+
+      .icon {
+        font-size: 1.5em;
+      }
+
+      button {
+        position: relative;
+        width: 3em;
+        margin: .125em .5em;
+        padding: .5em .75em;
+
+        .state-badge {
+          right: -.25em;
+          bottom: -.25em;
+          font-size: .75em;
+
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 4em;
+        }
+      }
+    }
+  }
+
+  .flyout {
+    bottom: 0;
+    left: 100%;
+    width: 14em;
+
+    &:before {
+      left: -.6em;
+      bottom: 1em;
+      transform: rotate(135deg);
+    }
+  }
+}
+
+.flyout {
+  display: none;
+  position: absolute;
+  border: 1px solid @gray-lighter;
+  background: @body-bg-color;
+  box-shadow: 0 0 1em 0 rgba(0,0,0,.25);
+  z-index: 1;
+  .rounded-corners();
+
+  a {
+    font-size: 11/12em;
+    padding: 0.364em 0.545em 0.364em 2em;
+    line-height: 2;
+
+    &:hover {
+      text-decoration: none;
+      background: @menu-2ndlvl-highlight-bg-color;
+    }
+  }
+
+  h3 {
+    font-size: 10/12em;
+    color: @text-color-light;
+    letter-spacing: .1px;
+    padding: 0.364em 0.545em 0.364em 0.545em;
+    margin: 0;
+  }
+
+  .flyout-content {
+    overflow: auto;
+    // Partially escape to have ems calculated
+    max-height: calc(~"100vh - " 50/12em);
+    padding: .5em 0;
+    position: relative;
+  }
+
+  // Caret
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    transform: rotate(45deg);
+    background: @body-bg-color;
+    border-bottom: 1px solid @gray-lighter;
+    border-right: 1px solid @gray-lighter;
+    height: 1.1em;
+    width: 1.1em;
+    bottom: -.6em;
+    right: 2.5em;
+  }
+}
+
+// Prevent flyout to vanish on autorefresh
+#layout.config-flyout-open .config-nav-item {
+  .flyout {
+    display: block;
+  }
+
+  > button > .state-badge {
+    display: none;
+  }
+}
+
+#layout.minimal-layout .config-menu {
+  display: none;
+}
+
+#layout.minimal-layout #menu {
+  margin-bottom: 0;
+}
+
+#layout:not(.minimal-layout) #menu .primary-nav {
+  .user-nav-item,
+  .configuration-nav-item,
+  .system-nav-item {
+    display: none;
+  }
+}