1 files changed, 164 insertions, 0 deletions
diff --git a/asset/css/controls.less b/asset/css/controls.less
new file mode 100644
index 0000000..1bccbd8
--- /dev/null
+++ b/asset/css/controls.less
@@ -0,0 +1,164 @@
+.pagination-control {
+  li > a {
+    color: var(--control-color, @control-color);
+    border-radius: .25em;
+  }
+
+  li > a:hover {
+    background: var(--control-hover-bg, @control-hover-bg);
+  }
+
+  .previous-page,
+  .next-page {
+    padding: .5em .25em;
+
+    i {
+      display: block;
+    }
+
+    i:before {
+      margin: 0;
+    }
+  }
+
+  .previous-page > i {
+    margin-left: -.125em;
+  }
+
+  .next-page > i {
+    margin-right: -.125em;
+  }
+}
+
+// Style
+
+.control-button {
+  .appearance(none);
+  background: none;
+  border: none;
+  color: var(--control-color, @control-color);
+  .rounded-corners();
+
+  &:hover, &:focus, &.active {
+    background-color: var(--control-hover-bg, @control-hover-bg);
+    text-decoration: none;
+  }
+
+  &.disabled {
+    color: var(--control-disabled-color, @control-disabled-color);
+
+    &:hover {
+      background: none;
+    }
+  }
+
+  i.icon:before {
+    color: inherit;
+  }
+}
+
+// Layout
+
+.control-button {
+  display: inline-block;
+  padding: .25em .5em;
+
+  > i.icon {
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+  }
+
+  i.icon:before {
+    margin-right: 0;
+  }
+}
+
+.sort-control {
+  display: flex;
+  justify-content: flex-end;
+
+  .form-element {
+    display: inline-flex;
+    align-items: baseline;
+    margin-right: .5em;
+
+    label {
+      margin-right: .5em;
+    }
+  }
+
+  .control-button {
+    margin: 0;
+  }
+}
+
+.search-controls {
+  display: flex;
+  min-width: 100%;
+
+  .search-bar {
+    flex: 1 1 auto;
+
+    & ~ .control-button {
+      margin-left: .5em;
+    }
+  }
+}
+
+/**
+ The default layout of list controls in Icinga Web
+
+ ┌────────────────────────────────────────────────────────────────┐
+ │ .pagination-control               .limit-control .sort-control │
+ │ <-------------------- .search-controls ----------------------> │
+ └────────────────────────────────────────────────────────────────┘
+ */
+.controls.default-layout {
+  .box-shadow(0, 0, 0, 1px, @controls-separator-bg);
+
+  z-index: 1; // The content may clip, this ensures the separator is always visible
+  & + .content {
+    z-index: 0;
+  }
+
+  > .pagination-control {
+    float: left;
+  }
+
+  > .sort-control,
+  > .limit-control {
+    float: right;
+  }
+
+  > .limit-control {
+    margin-right: .5em;
+  }
+
+  > .search-controls {
+    clear: both;
+  }
+
+  > :not(:only-child) {
+    margin-bottom: 0.5em;
+  }
+
+  > .sort-control,
+  > .search-controls > .control-button:last-child {
+    margin-right: -.5em;
+  }
+
+  > .search-controls > .search-bar .search-suggestions {
+    // Suggestions should be kept at a distance from the bottom of the page
+    margin-bottom: 2.5em;
+  }
+
+  > .search-controls > .search-bar .filter-input-area {
+    label {
+      &::after,
+      input {
+        padding: 0 .5em;
+      }
+    }
+  }
+}