1 files changed, 554 insertions, 0 deletions
diff --git a/public/css/icinga/menu.less b/public/css/icinga/menu.less
new file mode 100644
index 0000000..98650a2
--- /dev/null
+++ b/public/css/icinga/menu.less
@@ -0,0 +1,554 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+#menu [class^="icon-"],
+#menu [class*=" icon-"] {
+  &:before {
+    width: 1.5em;
+  }
+}
+
+@icon-width: 1.7em; // 1.5em width + 0.2em right margin
+
+#menu {
+  background-color: @menu-bg-color;
+  width: 100%;
+  flex: 1;
+  overflow: auto;
+  overflow-x: hidden;
+}
+
+#menu .nav-item {
+  vertical-align: middle;
+
+  > a {
+    position: relative;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-item > a:first-of-type {
+  // Respect overflowing content
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item {
+  overflow: hidden;
+}
+
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item > a {
+  // Clip overflowing content
+  overflow: hidden;
+  width: 4em;
+}
+
+#menu .nav-level-1 > .nav-item {
+  line-height: 2.167em; // 26 px
+  color: @menu-color;
+
+  &.active {
+    color: @menu-active-color;
+
+    > a > .badge {
+      display: none;
+    }
+
+    background-color: @menu-active-bg-color;
+  }
+
+  &.no-icon > a {
+    padding-left: @icon-width + .75em;
+  }
+
+  > a {
+    padding: 0.5em 0.5em 0.5em .75em;
+  }
+
+  &.active:not(.selected) > a:focus,
+  &.active:not(.selected) > a:hover {
+    background-color: @menu-active-hover-bg-color;
+  }
+
+  &:not(.selected) > a:hover,
+  &:not(.selected) > a:focus {
+    background-color: @menu-hover-bg-color;
+  }
+
+  // Balance icon weight for non active menu items
+  &:not(.active) > a > i {
+    opacity: .8;
+  }
+
+  & > a > .icon-letter:before {
+    content: attr(data-letter);
+    font-family: @font-family;
+    font-weight: 800;
+    text-transform: uppercase;
+  }
+}
+
+#menu ul:not(.nav-level-2) > .selected > a {
+  background-color: @menu-highlight-color;
+  color: @text-color-inverted;
+
+  &:focus {
+    background-color: @menu-highlight-hover-bg-color;
+  }
+
+  &:after {
+    .transform(rotate(45deg));
+
+    position: absolute;
+    right: -.75em;
+
+    background-color: @body-bg-color;
+    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;
+  line-height: 1.833em; // 22px
+
+  > a {
+    color: @menu-2ndlvl-color;
+    font-size: @font-size-small;
+    padding: 0.364em 0.545em 0.364em 0.545em;
+
+    &:first-of-type {
+      padding-left: (@icon-width + .75em)/@font-size-small;
+    }
+  }
+
+  &.active {
+    overflow: hidden;
+    position: relative;
+  }
+
+  // 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;
+    position: absolute;
+    top: .5em;
+    right: -.75em;
+    z-index: 3;
+  }
+
+  &.active > a {
+    color: @menu-2ndlvl-active-color;
+    background-color: @menu-2ndlvl-active-bg-color;
+
+    &:focus {
+      &:first-of-type,
+      &:first-of-type ~ a {
+        color: @menu-2ndlvl-active-hover-color;
+        background-color: @menu-2ndlvl-active-hover-bg-color;
+      }
+    }
+  }
+}
+
+.no-js #menu .nav-level-2 > .nav-item {
+  // Expand menu if JavaScript is disabled
+  display: block;
+}
+
+#layout:not(.sidebar-collapsed) {
+  #menu .nav-level-1 > .nav-item {
+    &.active {
+      .nav-level-2 > li {
+        // Expand menu if active
+        display: block;
+      }
+    }
+  }
+}
+
+#menu img.icon {
+  line-height: 1;
+  margin: 0 0.5em -.05em 0.25em;
+  width: 1em;
+}
+
+#menu img[src*="/img/icons/"] {
+  &:not([src$="tux.png"]):not([src$="win.png"]):not([src$="_white.png"]) {
+    -webkit-filter: invert(100%);
+    -moz-filter: invert(100%);
+    -ms-filter: invert(100%);
+    filter: invert(100%);
+  }
+}
+
+.nav-item:hover img.icon {
+  opacity: .6;
+}
+
+#menu input.search {
+  background: transparent url('../img/icons/search_white.png') no-repeat 1em center;
+  background-size: 1em auto;
+  border: none;
+  color: @menu-color;
+  line-height: 2.167em;
+  padding: .25em;
+  padding-left: @icon-width + .75em;
+  width: 100%;
+
+  &:focus::placeholder {
+    color: @menu-color;
+  }
+  &:focus::-ms-input-placeholder {
+    color: @menu-color;
+  }
+
+  &.active {
+    background-color: @menu-active-bg-color;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: @menu-search-hover-bg-color;
+  }
+}
+
+// Badge offset correction
+#menu > nav > .nav-level-1 > .badge-nav-item > a > .badge {
+  margin-top: 0.2em;
+}
+
+#menu .nav-level-2 > .badge-nav-item > a > .badge {
+  margin-top: 0.2em;
+  margin-right: .5em
+}
+
+// Hovered menu
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover,
+#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
+  > .nav-level-2 {
+    background-color: @menu-flyout-bg-color;
+    border: 1px solid;
+    border-color: @gray-light;
+    border-radius: .25em;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,.3);
+    padding: @vertical-padding 0;
+    width: 14em;
+    position: fixed;
+    z-index: 1;
+
+    &: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;
+      position: relative;
+
+      > a {
+        color: @menu-flyout-color;
+
+        &:first-of-type {
+          padding-left: 1.5em;
+        }
+      }
+
+      &:not(.active) {
+        a:hover, a:focus {
+          &:first-of-type,
+          &:first-of-type ~ a {
+            background-color: @menu-2ndlvl-highlight-bg-color;
+          }
+        }
+      }
+
+      &.active > a {
+        color: @menu-color;
+      }
+
+      // Hide activity caret when displayed as flyout
+      &:after {
+        display: none;
+      }
+    }
+  }
+
+  > a > .badge {
+    display: none;
+  }
+
+  img.icon {
+    opacity: .6;
+  }
+}
+
+#layout:not(.minimal-layout) #menu .nav-level-1 > .nav-item:not(.active).hover {
+  > .nav-level-2 {
+    // Position relative to parent
+    margin-left: 16em;
+    margin-top: -3.167em;
+  }
+}
+
+#layout:not(.minimal-layout).sidebar-collapsed #menu .nav-level-1 > .nav-item.hover {
+  > .nav-level-2 {
+    // Position relative to parent
+    margin-left: 4em;
+    margin-top: -3.333em;
+
+    > .badge-nav-item {
+      display: flex;
+
+      a:first-of-type {
+        flex: 1 1 auto;
+        width: 0;
+      }
+
+      a:first-of-type ~ a {
+         flex: 0;
+         width: auto;
+
+         &:hover,
+         &:focus {
+           .badge {
+             opacity: .6;
+           }
+         }
+       }
+    }
+  }
+}
+
+// Accessibility skip links
+.skip-links {
+  position: relative;
+  font-size: 1/.75em;
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    li {
+      display: block;
+      a, button[type="submit"] {
+        background-color: @body-bg-color;
+        border: none;
+        left: -999px;
+        padding: @vertical-padding @horizontal-padding;
+        position: absolute;
+        width: 100%;
+        z-index: 1;
+        &:focus {
+          left: 0;
+          outline-offset: -3px;
+        }
+      }
+      button[type="submit"] {
+        text-align: left;
+      }
+    }
+  }
+}
+
+#sidebar.expanded {
+  #mobile-menu-toggle .icon-menu {
+    display: none;
+  }
+
+  #mobile-menu-toggle .icon-cancel {
+    display: inline-block;
+  }
+}
+
+.search-control {
+  position: relative;
+}
+
+.search-input:focus ~ .search-reset:hover {
+  background-color: @menu-active-hover-bg-color;
+}
+
+.search-reset {
+  background: none;
+  border: 0;
+  color: @menu-color;
+  cursor: pointer;
+  display: none;
+  height: 100%;
+  padding: 0;
+  user-select: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  &:focus,
+  &:hover {
+    background-color: @menu-search-hover-bg-color;
+    outline: none;
+  }
+}
+
+// Override forms.less
+input[type=text].search-input {
+  padding-right: 1.4em;
+  text-overflow: ellipsis;
+  transition: none;
+}
+
+.search-input:focus:-moz-placeholder { // FF 18-
+  color: @gray-light;
+}
+
+.search-input:focus::-moz-placeholder { // FF 19+
+  color: @gray-light;
+}
+
+.search-input:focus:-ms-input-placeholder {
+  color: @gray-light;
+}
+
+.search-input:focus::-webkit-input-placeholder {
+  color: @gray-light;
+}
+
+.search-input ~ .search-reset {
+  opacity: 0;
+}
+
+.search-input:valid ~ .search-reset {
+  display: block;
+  opacity: 1;
+}
+
+.search-input:invalid,
+.search-input:-moz-submit-invalid,
+.search-input:-moz-ui-invalid {
+  // Disable glow
+  box-shadow: none;
+}
+
+// Toggle sidebar button
+#toggle-sidebar {
+  font-size: 1/.75em;
+
+  // Reset button styles
+  background: none;
+  border: none;
+  padding: 0;
+  color: @text-color-light;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 3;
+  line-height: 2;
+
+  i {
+    background-color: @body-bg-color;
+    border-radius: .25em 0 0 .25em;
+    font-size: 1.125em;
+    width: 2em;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover, &:focus {
+    i {
+      color: @menu-highlight-color;
+    }
+  }
+}
+
+html.no-js  #toggle-sidebar {
+  display: none;
+}
+
+#layout.minimal-layout #toggle-sidebar {
+  display: none;
+}
+
+#open-sidebar {
+  display: none;
+}
+
+#open-sidebar:before,
+#close-sidebar:before {
+  width: 1.4em;
+  margin-right: 0;
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
+  &.nav-item:not(.badge-nav-item) {
+    &:not(.selected):not(.active) a:hover,
+    &:not(.selected):not(.active) a:focus {
+      background-color: @menu-2ndlvl-highlight-bg-color;
+    }
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li,
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item:not(.active).hover .nav-level-2 > li {
+  &.badge-nav-item {
+    display: flex;
+  }
+
+  &.badge-nav-item a:first-of-type {
+    flex: 1 1 auto;
+    width: 0;
+  }
+
+  &.badge-nav-item a:first-of-type ~ a {
+    flex: 0;
+    width: auto;
+
+    &:hover,
+    &:focus {
+      .badge {
+        opacity: .6;
+      }
+    }
+  }
+}
+
+#layout:not(.sidebar-collapsed) #menu .nav-level-1 > .nav-item.active .nav-level-2 > li {
+  &.badge-nav-item:not(.selected) {
+    a:hover,
+    a:focus {
+      &:first-of-type,
+      &:first-of-type ~ a {
+        background-color: @menu-2ndlvl-highlight-bg-color;
+      }
+    }
+  }
+}