1 files changed, 201 insertions, 0 deletions
diff --git a/public/css/icinga/mixins.less b/public/css/icinga/mixins.less
new file mode 100644
index 0000000..6c55512
--- /dev/null
+++ b/public/css/icinga/mixins.less
@@ -0,0 +1,201 @@
+/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
+
+.button(
+  @background-color: @body-bg-color,
+  @border-font-color: @icinga-blue,
+  @color-dark: @icinga-blue-dark
+) {
+  .rounded-corners(3px);
+
+  display: inline-flex;
+  align-items: baseline;
+  background-color: @background-color;
+  border: 2px solid @border-font-color;
+  color: @border-font-color;
+  cursor: pointer;
+  line-height: normal;
+  outline: none;
+  padding: ~"calc(@{vertical-padding} - 2px)" @horizontal-padding;
+
+  @duration: 0.2s;
+  // The trailing semicolon is needed to be able to pass this as a css list
+  .transition(background @duration, border @duration ease, color @duration ease;);
+
+  &:focus,
+  &:hover,
+  &.btn-primary {
+    background-color: @border-font-color;
+    color: @background-color;
+  }
+
+  &.btn-primary:focus,
+  &.btn-primary:hover {
+    background-color: @color-dark;
+    border-color: @color-dark;
+    color: @background-color;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.clearfix {
+  &:after {
+    content: "";
+    clear: both;
+    display: table;
+  }
+}
+
+.opacity(@opacity: 0.6) {
+  opacity: @opacity;
+}
+
+.transform(@transform) {
+  -webkit-transform: @transform;
+     -moz-transform: @transform;
+      -ms-transform: @transform;
+       -o-transform: @transform;
+          transform: @transform;
+}
+
+.user-select(@user-select) {
+  -webkit-user-select: @user-select;
+  -moz-user-select: @user-select;
+  -ms-user-select: @user-select;
+  user-select: @user-select;
+}
+
+.transition (@transition) {
+  -webkit-transition: @transition;
+     -moz-transition: @transition;
+       -o-transition: @transition;
+          transition: @transition;
+}
+
+// Fadein animation
+
+/* Chrome, WebKit */
+@-webkit-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* FF < 16 */
+@-moz-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes fadein {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+.fadein() {
+  opacity: 0;
+
+  -webkit-animation: fadein 2s ease-in; /* Chrome, WebKit */
+     -moz-animation: fadein 2s ease-in; /* FF < 16 */
+       -o-animation: fadein 2s ease-in; /* Opera < 12.1 */
+          animation: fadein 2s ease-in;
+
+  // Make sure that after animation is done we remain at the last keyframe value (opacity: 1)
+  -webkit-animation-fill-mode: forwards;
+     -moz-animation-fill-mode: forwards;
+       -o-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+// Mixin for stateful foreground colors, e.g. text or icons
+.fg-stateful {
+  &.state-ok {
+    color: @color-ok;
+  }
+  &.state-up {
+    color: @color-up;
+  }
+  &.state-warning {
+    color: @color-warning;
+    &.handled {
+      color: @color-warning-handled;
+    }
+  }
+  &.state-critical {
+    color: @color-critical;
+    &.handled {
+      color: @color-critical-handled;
+    }
+  }
+  &.state-down {
+    color: @color-down;
+    &.handled {
+      color: @color-down-handled;
+    }
+  }
+  &.state-unreachable {
+    color: @color-unreachable;
+    &.handled {
+      color: @color-unreachable-handled;
+    }
+  }
+  &.state-unknown {
+    color: @color-unknown;
+    &.handled {
+      color: @color-unknown-handled;
+    }
+  }
+  &.state-pending {
+    color: @color-pending;
+  }
+}
+
+// Mixin for stateful background colors
+.bg-stateful {
+  &.state-ok {
+    background-color: @color-ok;
+  }
+  &.state-up {
+    background-color: @color-up;
+  }
+  &.state-warning {
+    background-color: @color-warning;
+    &.handled {
+      background-color: @color-warning-handled;
+    }
+  }
+  &.state-critical {
+    background-color: @color-critical;
+    &.handled {
+      background-color: @color-critical-handled;
+    }
+  }
+  &.state-down {
+    background-color: @color-down;
+    &.handled {
+      background-color: @color-down-handled;
+    }
+  }
+  &.state-unreachable {
+    background-color: @color-unreachable;
+    &.handled {
+      background-color: @color-unreachable-handled;
+    }
+  }
+  &.state-unknown {
+    background-color: @color-unknown;
+    &.handled {
+      background-color: @color-unknown-handled;
+    }
+  }
+  &.state-pending {
+    background-color: @color-pending;
+  }
+}