1 files changed, 281 insertions, 0 deletions
diff --git a/public/css/icinga/controls.less b/public/css/icinga/controls.less
new file mode 100644
index 0000000..01cf152
--- /dev/null
+++ b/public/css/icinga/controls.less
@@ -0,0 +1,281 @@
+/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
+
+// TODO(el): Rename .filter to .filter-control
+
+// Hide auto sumbit info in controls
+.controls .autosubmit-info {
+  display: none;
+}
+
+
+// Backend selection control in user and group list views
+.backend-selection {
+  float: left;
+
+  .control-label-group, select {
+    display: inline-block;
+  }
+
+  select {
+    margin-left: .5em;
+  }
+}
+
+.controls input.search,
+input.search {
+  .transition(border 0.3s ease);
+  .transition(background-image 0.2s ease);
+
+  background-image: url(../img/icons/search_white.png);
+  background-repeat: no-repeat;
+  background-size: 1em 1em;
+  background-position: .25em center;
+  outline: none;
+  padding-left: 1.5em;
+  width: 20em;
+
+  &:focus {
+    background-image: url(../img/icons/search_icinga_blue.png);
+  }
+
+  &:focus:not([readonly]) {
+    border-color: @icinga-blue;
+  }
+}
+
+@light-mode: {
+  #menu input.search,
+  .controls input.search,
+  input.search {
+    background-image: url(../img/icons/search.png);
+  }
+};
+
+.backend-selection,
+.pagination-control,
+.selection-info,
+.sort-controls-container {
+  margin-bottom: 0.5em;
+}
+
+.filter {
+  // Display filter control on a new line
+  clear: both;
+  margin: .5em 0;
+
+  > a {
+    color: @icinga-blue;
+    padding: .5em;
+    line-height: 1;
+  }
+
+  > a > i {
+    text-align: center;
+     &:before {
+       margin-right: 0;
+     }
+  }
+
+  .form input {
+    padding: @vertical-padding @vertical-padding;
+  }
+}
+
+.controls .filter {
+  form .search {
+    height: 2em;
+  }
+}
+
+.controls .button-link {
+  height: 2em;
+}
+
+.limiter-control > select {
+  margin-left: .5em;
+}
+
+.pagination-control {
+  // Display the pagination-control on a new line
+  clear: both;
+  float: left;
+
+  li {
+    line-height: 1;
+
+    &.active {
+      border-bottom: 2px solid @icinga-blue;
+
+      > a,
+      > a:hover {
+        color: @icinga-blue;
+        /* Compensate border-bottom: 2px */
+        margin-bottom: -2px;
+      }
+
+      > a:hover {
+        background: none;
+        cursor: default;
+        text-decoration: none;
+      }
+    }
+
+    &.disabled {
+      color: @disabled-gray;
+      cursor: no-drop;
+    }
+
+    > a,
+    > span {
+      padding: 0.5em;
+    }
+    > a:hover {
+      background-color: @gray-lighter;
+      text-decoration: none;
+    }
+  }
+
+  .previous-page {
+    padding-left: 0;
+  }
+
+  .next-page {
+    padding-right: 0;
+  }
+}
+
+// Multi-selection info
+.selection-info {
+  float: right;
+  font-size: @font-size-small;
+
+  &:hover {
+    cursor: help;
+  }
+}
+
+.sort-control {
+  label {
+    width: auto;
+    margin-right: 0.5em;
+  }
+
+  select[name=sort] {
+    width: 12em;
+    margin-left: 0;
+  }
+
+  select[name=dir] {
+    width: 8em;
+    margin-left: 0;
+  }
+}
+
+.sort-controls-container {
+  clear: right;
+  float: right;
+  display: flex;
+
+  > *:not(:last-child) {
+    margin-right: .5em;
+  }
+}
+
+.sort-direction-control {
+  margin-left: 0.25em;
+  width: 1em;
+
+  .spinner {
+    line-height: 1;
+  }
+}
+
+.controls .icinga-controls {
+  .control-label-group {
+    margin-top: 0;
+    margin-bottom: 0;
+    line-height: 1.5em;
+    padding-top: 0.25em;
+    padding-bottom: 0.25em;
+  }
+
+  input,
+  select {
+    max-width: 16em;
+  }
+
+  select {
+    padding-right: 1.526em;
+    margin-top: 0;
+    margin-bottom: 0;
+    /* compensate inconsistent select height calculations */
+    line-height: 1;
+    max-height: 2em;
+  }
+}
+
+// Datetime picker colors
+
+// The less variables are essentially the official dark theme for the flatpickr
+@fp-calendarBackground: #3f4458;
+@fp-calendarBorderColor: darken(#3f4458, 50%);
+
+@fp-monthForeground: #fff;
+@fp-monthBackground: #3f4458;
+
+@fp-weekdaysBackground: transparent;
+@fp-weekdaysForeground: #fff;
+
+@fp-dayForeground: fadeout(white, 5%);
+@fp-dayHoverBackground: lighten(@fp-calendarBackground, 25%);
+
+@fp-todayColor: #eee;
+@fp-today_fg_color: #3f4458;
+
+@fp-selectedDayBackground: #80CBC4;
+
+.icinga-datetime-picker .flatpickr-day.today {
+  &:hover,
+  &:focus {
+    color: @fp-today_fg_color;
+  }
+}
+
+@light-mode: {
+  :root {
+    // These are actually the default colors for the flatpickr
+
+    @fp-dayForeground: #393939;
+    @fp-dayHoverBackground: #e6e6e6;
+
+    --fp-calendarBackground: #ffffff;
+    --fp-calendarBorderColor: @fp-dayHoverBackground;
+
+    --fp-arrowColor: fadeout(@fp-dayForeground, 40%);
+    --fp-arrow_hover_color: #f64747;
+
+    --fp-monthForeground: fadeout(black, 10%);
+    --fp-monthBackground: transparent;
+
+    --fp-weekdaysBackground: transparent;
+    --fp-weekdaysForeground: fadeout(black, 46%);
+    --fp-weekNumberForeground: fadeout(@fp-dayForeground, 70%);
+
+    --fp-dayForeground: @fp-dayForeground;
+    --fp-dayHoverBackground: @fp-dayHoverBackground;
+    --fp-disabledDayForeground: fadeout(@fp-dayForeground, 90%);
+    --fp-outsideRangeDayForeground: fadeout(@fp-dayForeground, 70%);
+    --fp-selectedDayBackground: #569FF7;
+    --fp-todayColor: #959ea9;
+
+    --fp-timeHoverBg: lighten(@fp-dayHoverBackground, 3);
+
+    --fp-hoverInvertedBg: fadeout(black, 95%);
+
+    --fp-numChooserSvgFillColor: fadeout(fadeout(black, 10%), 50%);
+    --fp-hoverNumChooserBg: fadeout(black, 90%);
+    --fp-numChooserBorderColor: fadeout(@fp-dayForeground, 85%);
+  }
+};
+
+// Datetime picker colors (end)