1 files changed, 167 insertions, 0 deletions
diff --git a/public/css/icinga/layout-structure.less b/public/css/icinga/layout-structure.less
new file mode 100644
index 0000000..b1ca8e6
--- /dev/null
+++ b/public/css/icinga/layout-structure.less
@@ -0,0 +1,167 @@
+/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
+
+html {
+  height: 100%;
+  font-family: 'default-layout';
+}
+
+body {
+  height: 100%;
+  overflow: hidden;
+}
+
+#layout {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#content-wrapper {
+  flex: 1 1 auto;
+  display: flex;
+  height: 0;
+
+}
+
+#sidebar {
+  width: 16em;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  z-index: 2;
+}
+
+#layout:not(.minimal-layout) #sidebar:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 1em;
+  background: linear-gradient(to left, rgba(0,0,0,.1), rgba(0,0,0,0));
+  z-index: 0;
+  pointer-events: none;
+}
+
+#main {
+  flex: 1;
+  display: flex;
+  z-index: 1;
+}
+
+.iframe {
+  #header, #sidebar {
+    display: none;
+  }
+}
+
+#responsive-debug {
+  font-size: 0.9em;
+  font-family: Courier new, monospace;
+  padding: 0.5em;
+  width: 25em;
+  color: white;
+  height: 10em;
+  display: none;
+  position: fixed;
+  bottom: 0.5em;
+  right: 2em;
+  overflow: hidden;
+  z-index: 1000;
+  background: #333;
+  border-radius: 0.5em;
+  opacity: 0.9;
+}
+
+#layout.minimal-layout #responsive-debug {
+  font-size: 0.6em;
+}
+
+#layout.poor-layout #responsive-debug {
+  font-size: 0.7em;
+}
+
+#layout.compact-layout #responsive-debug {
+  font-size: 0.8em;
+}
+
+#layout.wide-layout #responsive-debug {
+  font-size: 1em;
+}
+
+/** Fullscreen layout **/
+#layout.fullscreen-layout {
+  #sidebar {
+    display: none;
+  }
+
+  .container .controls {
+    padding: 0;
+  }
+
+  .controls > ul.tabs {
+    margin-top: 0;
+    height: 1.5em;
+    font-size: 0.75em;
+    padding: 0.2em 0 0;
+  }
+
+  .controls > ul.tabs > li > a {
+    line-height: 1.5em;
+  }
+}
+
+.controls-separated,
+.container .controls.separated {
+    box-shadow: 0 3px 4px -4px rgba(0, 0, 0, 0.2);
+//  border-bottom: 1px solid @gray-lightest;
+    padding-bottom: @horizontal-padding / 2
+}
+
+.hbox {
+  display: inline-block;
+}
+
+.hbox-item {
+  display: inline-block;
+  vertical-align: top;
+  margin-top: 0.5em;
+  margin-bottom: 0.25em;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.hbox-spacer {
+  display: inline-block;
+  vertical-align: top;
+  width: 2em;
+}
+
+/*
+ * Class to hide content from users but available for screen reader
+ * Based on: https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/
+ */
+.sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: fixed; // absolute causes view port glitches in chrome (#4310)
+  width: 1px;
+  white-space: nowrap;
+}
+
+// Hide non-javascript elements if javascript is enabled
+html.js *.no-js {
+  .sr-only;
+}
+
+// Hide javascript elements if javascript is disabled
+html.no-js *.js {
+  .sr-only;
+}