1 files changed, 167 insertions, 0 deletions
diff --git a/public/css/icinga/responsive.less b/public/css/icinga/responsive.less
new file mode 100644
index 0000000..6d1cae8
--- /dev/null
+++ b/public/css/icinga/responsive.less
@@ -0,0 +1,167 @@
+/*! Icinga Web 2 | (c) 2016 Icinga Development Team | GPLv2+ */
+
+// Not growing larger than 3840px at 1em=16px right now
+@media screen and (min-width: 240em) {
+  #header {
+    min-width: 240em;
+  }
+
+  #main {
+    width: 227em;
+  }
+}
+
+// More than 100em, usually 1600px at 1em=16px
+@media screen and (min-width: 100em) {
+  html {
+    font-family: 'wide-layout';
+  }
+}
+
+// Up to 1152px at 1em=16px
+@media screen and (max-width:72em) {
+  html {
+    font-family: 'compact-layout';
+  }
+}
+
+// Up to 752px at 1em=16px
+@media screen and (max-width: 47em) {
+  html {
+    font-family: 'poor-layout';
+  }
+}
+
+// Up to 576px at 1em=16px, should fit 320px devices
+@media screen and (max-width: 36em) {
+  html {
+    font-family: 'minimal-layout';
+  }
+}
+
+#layout.compact-layout {
+  font-size: 0.875em;
+}
+
+#layout.poor-layout {
+  font-size: 0.875em;
+
+  #layout.twocols {
+    #col1 {
+      display: none;
+    }
+
+    #main > .container {
+      width: 100%;
+    }
+  }
+
+  .dashboard > div.container {
+    width: 100%;
+  }
+}
+
+#layout:not(.minimal-layout) {
+  #mobile-menu-toggle {
+    display: none;
+  }
+}
+
+#layout.minimal-layout {
+  #sidebar {
+    width: 100%;
+    overflow: auto;
+  }
+
+  #header-logo-container {
+    width: auto;
+    height: 4em;
+    padding: 0;
+    background: inherit;
+  }
+
+  #header-logo {
+    float: left;
+    width: 9em;
+    height: 3em;
+    margin: .5em 1em;
+    background-position: left center;
+  }
+
+  #mobile-menu-toggle {
+    float: right;
+  }
+
+  #sidebar:not(.expanded) #menu {
+    display: none;
+  }
+
+  #menu {
+    -webkit-box-shadow: none;
+       -moz-box-shadow: none;
+            box-shadow: none;
+  }
+
+  #content-wrapper {
+    flex-direction: column;
+  }
+
+  #main {
+    flex: 1 1 auto;
+    height: 0;
+  }
+
+  ul > .selected > a:after,
+  ul > .nav-item.active:after {
+    display: none;
+  }
+
+  .dashboard > div.container {
+    width: 100%;
+  }
+}
+
+// Dashboard
+
+.dashboard > .container {
+  padding-right: 0;
+  width: 100%;
+}
+
+#layout:not(.twocols).default-layout .dashboard > .container:not(:only-child) {
+  padding-right: @gutter;
+  width: 50%;
+}
+
+#layout:not(.twocols).wide-layout .dashboard > .container:not(:only-child) {
+  padding-right: @gutter;
+  width: 33.33%;
+}
+
+// Columns
+
+#layout.twocols #col2 {
+  border-left: 1px solid @gray-lighter;
+}
+
+#layout.twocols.wide-layout #col2 {
+  flex-grow: 2;
+}
+
+// Safe areas for iPhone X
+
+#header, #sidebar, #footer {
+  padding-left: constant(safe-area-inset-left);
+}
+
+#main, #footer {
+  padding-right: constant(safe-area-inset-right);
+}
+
+#layout.twocols #col2 {
+  border-left: 1px solid @gray-lighter;
+
+  &:empty {
+    display: flex;
+  }
+}