1 files changed, 379 insertions, 0 deletions
diff --git a/public/css/icinga/layout.less b/public/css/icinga/layout.less
new file mode 100644
index 0000000..c37da79
--- /dev/null
+++ b/public/css/icinga/layout.less
@@ -0,0 +1,379 @@
+/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
+
+#footer {
+  bottom: 0;
+  right: 0;
+  left: 12em;
+  position: fixed;
+  z-index: 999;
+}
+
+#layout.minimal-layout #footer {
+  left: 0;
+}
+
+.sidebar-collapsed #footer {
+  left: 3em;
+}
+
+#guest-error {
+  background-color: @icinga-blue;
+  height: 100%;
+  overflow: auto;
+}
+
+#guest-error #icinga-logo {
+  .fadein();
+}
+
+#guest-error-message {
+  .fadein();
+  color: @body-bg-color;
+  font-size: 2em;
+}
+
+#header,
+#login,
+#content-wrapper {
+  font-size: @font-size;
+  line-height: @line-height;
+}
+
+#header-logo-container {
+  background: @menu-bg-color;
+  height: 6em;
+  padding: 1.25em;
+  width: 16em;
+}
+
+#header-logo,
+#mobile-menu-logo {
+  background-image: url('../img/icinga-logo.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: contain;
+  display: block;
+  height: 100%;
+  width: 100%;
+
+  &:focus {
+    opacity: .6;
+    outline: none;
+  }
+}
+
+#mobile-menu-logo {
+  width: 50%;
+  float: left;
+  height: 2em;
+  margin-top: .25em;
+  background-position: .75em center;
+}
+
+#mobile-menu-toggle .icon-cancel {
+  display: none;
+}
+
+#icinga-logo {
+  background-image: url('../img/icinga-logo-big.svg');
+  background-position: center bottom;
+  background-repeat: no-repeat;
+  background-size: contain; // Does not work in IE < 10
+  height: 177px;
+  margin-bottom: 2em;
+  width: 100%;
+
+  &.invert {
+    background-image: url('../img/icinga-logo-big-dark.svg');
+  }
+}
+
+#layout {
+  background-color: @body-bg-color;
+  color: @text-color;
+  font-family: @font-family;
+}
+
+#login {
+  overflow: auto;
+}
+
+@gutter: 1em;
+
+// x-column-layout
+#main {
+  .clearfix();
+
+  & > .container {
+    width: 0;
+    overflow: auto;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+
+    &:empty {
+      display: none;
+    }
+
+    & > .content {
+      flex: 1 1 auto;
+      overflow: auto;
+    }
+
+    & > .controls {
+      > .tabs {
+        // Remove gutter for tabs
+        margin-left: -1 * @gutter;
+        margin-right: -1 * @gutter;
+        height: 2.5em;
+      }
+
+      .tabs:first-child:not(:last-child) {
+        margin-bottom: .5em;
+      }
+    }
+  }
+}
+
+// Not part of the above to relax specificity and to allow modules adjust this
+:not(.dashboard) > .container {
+  & > .controls {
+    padding-left: @gutter;
+    padding-right: @gutter;
+  }
+
+  & > .content {
+    padding: @gutter;
+  }
+}
+
+// Mobile menu
+#layout.minimal-layout #sidebar {
+  background-color: @menu-bg-color;
+}
+
+#mobile-menu-toggle {
+  color: @menu-color;
+  text-align: right;
+
+  > button {
+    background: none;
+    border: none;
+    font-size: 2em;
+    padding: 0 .5em;
+    line-height: 2;
+
+    -webkit-appearance: none;
+       -moz-appearance: none;
+        -ms-appearance: none;
+            appearance: none;
+  }
+
+  i:before {
+    margin-right: 0;
+  }
+}
+
+.container,
+.error-message,
+.modal-window {
+  // Don't outline containers and error messages when focused because they receive focus for accessibility only
+  // programmatically
+  outline: none;
+}
+
+.controls {
+  > .tabs {
+    overflow: hidden;
+  }
+}
+
+// Dashboard grid
+
+.dashboard {
+  letter-spacing: -0.417em;
+
+  > .container {
+    display: inline-block;
+    letter-spacing: normal;
+    vertical-align: top;
+    // Column width controlled by #layout
+    width: 100%;
+
+    &:last-of-type {
+      // See reponsive.less for gutters
+      padding-right: 0;
+    }
+  }
+}
+
+// Notification styles
+
+#notifications {
+  // Reset defaults
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+#notifications > li {
+  color: @text-color;
+  display: block;
+  line-height: 2.5em;
+  border-left: .5em solid @gray-light;
+  background: @body-bg-color;
+  margin-bottom: 1px;
+  box-shadow: 0 0 1em 0 rgba(0,0,0,0.25);
+
+  .icon {
+    padding: .5em;
+    width: 3em;
+    text-align: center;
+  }
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &.error {
+    border-color: @color-notification-error;
+    background: @color-notification-error;
+    color: @text-color-on-icinga-blue;
+
+    .icon {
+      color: @text-color-on-icinga-blue;
+    }
+  }
+
+  &.info {
+    border-color: @color-notification-info;
+
+    .icon {
+      color: @color-notification-info;
+    }
+  }
+
+  &.success {
+    border-color: @color-notification-success;
+
+    .icon {
+      color: @color-notification-success;
+    }
+  }
+
+  &.warning {
+    border-color: @color-notification-warning;
+    background: @color-notification-warning;
+    color: @text-color-inverted;
+
+    .icon {
+      color: @text-color-inverted;
+    }
+  }
+}
+
+// Collapsed sidebar
+#layout:not(.minimal-layout).sidebar-collapsed {
+  #header-logo-container {
+    height: 3em;
+    padding: 0.25em 0.125em;
+    width: 4em;
+  }
+
+  #header-logo {
+    background-image: url('../img/icinga-logo-compact.svg');
+  }
+
+  #sidebar {
+    width: 4em;
+  }
+
+  #open-sidebar {
+    display: inline;
+  }
+
+  #close-sidebar {
+    display: none;
+  }
+
+  #menu {
+    .nav-level-1 {
+      > .badge-nav-item > a {
+        position: relative;
+
+        > .badge {
+          position: absolute;
+          right: .5em;
+          bottom: .25em;
+          font-size: 75%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 4em;
+        }
+      }
+
+      > .nav-item.active > a > .badge {
+        display: unset;
+      }
+    }
+
+    img.icon {
+      margin: 0 1.25em -.25em 0.25em;
+      font-size: 1.5em;
+    }
+
+    .nav-item {
+      white-space: nowrap;
+    }
+
+    .nav-item.no-icon > a {
+      padding-left: .75em;
+    }
+
+    .nav-level-1 > .nav-item i {
+      font-size: 1.5em;
+      margin-right: .5em;
+    }
+
+    > .search-control {
+      height: 3.333em;
+    }
+  }
+
+  #search {
+    padding-left: 3.75em;
+  }
+
+  #search:focus {
+    background-color: @menu-bg-color;
+    border-radius: 0 .25em .25em 0;
+    box-shadow: 0 0 .25em 0 rgba(0, 0, 0, .2);
+    color: @menu-color;
+    width: 20em;
+    position: fixed;
+    z-index: 1;
+  }
+
+  .search-input {
+    font-size: 1.25em;
+    padding-right: .625em;
+  }
+
+  .search-reset {
+    display: none;
+  }
+
+  .skip-links {
+    a, button {
+      width: 20em;
+    }
+  }
+}
+
+@light-mode: {
+  #header-logo,
+  #mobile-menu-logo,
+  #about .icinga-logo {
+    filter: brightness(0.415) sepia(1) ~"saturate(0.1)" hue-rotate(144deg);
+  }
+};