1 files changed, 179 insertions, 0 deletions
diff --git a/public/css/mixin/progress-bar.less b/public/css/mixin/progress-bar.less
new file mode 100644
index 0000000..532ca2c
--- /dev/null
+++ b/public/css/mixin/progress-bar.less
@@ -0,0 +1,179 @@
+.progress-bar() {
+  &.progress-bar {
+    .above,
+    .below {
+      list-style-type: none;
+      position: relative;
+      margin: 0;
+    }
+
+    .above {
+      padding: ~"calc(1em + 1px) 10%";
+    }
+
+    .below {
+      padding: 1.25em 10%;
+    }
+
+    .positioned {
+      position: absolute;
+    }
+
+    :not(.positioned).end .bubble {
+      // to move the center of the bubble to the end of the wrapper (for check-statistics end bubble only).
+      transform: translate(50%, 0);
+    }
+
+    .bubble {
+      .rounded-corners(.25em);
+      background-color: @body-bg-color;
+      border: 1px solid;
+      border-color: @gray-light;
+      position: relative;
+      box-shadow: 0 0 1em 0 rgba(0, 0, 0, .1);
+      padding: .25em .5em;
+      text-align: center;
+      width: auto;
+      // The wrapper of .bubble is dynamically moved to the left based on the value of the progress bar
+      // This moves the center of the bubble to the beginning of the wrapper regardless of the size of the content.
+      transform: translate(-50%, 0);
+      z-index: 1;
+
+      > * {
+        position: relative;
+        z-index: 2;
+      }
+
+      &:hover {
+        z-index: 5;
+      }
+
+      &:before {
+        background-color: @body-bg-color;
+        border-bottom: 1px solid @gray-light;
+        border-right: 1px solid @gray-light;
+        content: "";
+        display: block;
+        height: 1em;
+        margin-left: -.5em;
+        transform: rotate(45deg);
+        width: 1em;
+        z-index: 1;
+
+        position: absolute;
+        bottom: -.5em;
+        left: 50%;
+      }
+
+      &.upwards:before {
+        bottom: auto;
+        top: -.5em;
+        transform: rotate(225deg);
+      }
+
+      &.right {
+        // This is (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
+        transform: translate(~"calc(-1.175em - 1px)", 0);
+      }
+
+      &.right:before {
+        bottom: auto;
+        left: 1.175em;
+        top: -.5em;
+      }
+
+      &.left {
+        // entire width (moves the right border in place of the left) + (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
+        transform: translate(~"calc(-100% + 1.175em + 1px)", 0);
+      }
+
+      &.left:before {
+        bottom: auto;
+        left: auto;
+        right: .675em;
+        top: -.5em;
+      }
+    }
+
+    .above .positioned {
+      bottom: 0;
+    }
+
+    .below .positioned {
+      top: 0;
+    }
+
+    .vertical-key-value {
+      .key {
+        white-space: nowrap;
+      }
+
+      .value {
+        white-space: nowrap;
+        font-size: 1em;
+        line-height: 1;
+      }
+    }
+
+    .timeline {
+      .rounded-corners(.5em);
+      background-color: @gray-lighter;
+      height: 1em;
+      margin: 1em 0;
+      position: relative;
+      width: 100%;
+      z-index: 1;
+
+      .marker {
+        .rounded-corners(50%);
+        background-color: @gray-light;
+        height: .857em;
+        margin-left: -.857/2em;
+        margin-top: -1/12em;
+        width: .857em;
+        z-index: 2;
+
+        position: absolute;
+        top: 2/12em;
+
+        &.now {
+          background-color: @gray;
+        }
+
+        &.start,
+        &.end {
+          background-color: @icinga-blue;
+        }
+      }
+    }
+
+    .timeline-overlay {
+      height: 100%;
+      opacity: .6;
+      position: absolute;
+
+      &:before,
+      &:after {
+        content: "";
+        display: block;
+        height: 1em;
+        width: .5em;
+
+        position: absolute;
+        top: 0;
+      }
+
+      &:before {
+        border-bottom-left-radius: .5em;
+        border-top-left-radius: .5em;
+        left: -.5em;
+      }
+
+      &:after {
+        border-bottom-right-radius: .5em;
+        border-top-right-radius: .5em;
+        right: -.5em;
+      }
+    }
+  }
+}