summaryrefslogtreecommitdiffstats
path: root/public/css/widget/state-change.less
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--public/css/widget/state-change.less128
1 files changed, 128 insertions, 0 deletions
diff --git a/public/css/widget/state-change.less b/public/css/widget/state-change.less
new file mode 100644
index 0000000..adc8d42
--- /dev/null
+++ b/public/css/widget/state-change.less
@@ -0,0 +1,128 @@
+.state-change {
+ display: inline-flex;
+
+ &.reversed-state-balls {
+ // This is needed, because with ~ we can address only subsequent nodes
+ flex-direction: row-reverse;
+ }
+
+ .state-ball {
+ .box-shadow(0, 0, 0, 1px, @body-bg-color);
+ }
+
+ // Same on same
+ .state-ball ~ .state-ball {
+ &.ball-size-xs {
+ margin-left: -.05em;
+ }
+
+ &.ball-size-s {
+ margin-left: -.15em;
+ }
+
+ &.ball-size-m {
+ margin-left: -.275em;
+ }
+
+ &.ball-size-ml {
+ margin-left: -.375em;
+ }
+
+ &.ball-size-l,
+ &.ball-size-xl {
+ margin-left: -.875em;
+ }
+ }
+
+ // big left, smaller right
+ &:not(.reversed-state-balls) .ball-size-l ~ .state-ball {
+ &.ball-size-ml {
+ margin-top: .25em;
+ margin-left: -.5em;
+ margin-right: .25em;
+ }
+ }
+
+ // smaller left, big right
+ &.reversed-state-balls .ball-size-l ~ .state-ball {
+ &.ball-size-ml {
+ z-index: -1;
+ margin-top: .25em;
+ margin-right: -.5em;
+ }
+ }
+
+ .state-ball.state-ok,
+ .state-ball.state-up,
+ .state-pending {
+ &.ball-size-l,
+ &.ball-size-xl {
+ background-color: @body-bg-color;
+ }
+ }
+
+ // Avoid transparency on overlapping solid state-change state-balls
+ .state-ball.handled {
+ position: relative;
+ opacity: 1;
+
+ i {
+ position: relative;
+ z-index: 3;
+ }
+
+ &:before {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ border-radius: 50%;
+ opacity: .6;
+ z-index: 2
+ }
+
+ &:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: -2px;
+ left: -2px;
+ right: -2px;
+ bottom: -2px;
+ border-radius: 50%;
+ background-color: @body-bg-color;
+ z-index: 1;
+ }
+
+ &.state-pending:before {
+ background-color: @color-pending;
+ }
+
+ &.state-down:before {
+ background-color: @color-down;
+ }
+
+ &.state-warning:before {
+ background-color: @color-warning;
+ }
+
+ &.state-critical:before {
+ background-color: @color-critical;
+ }
+
+ &.state-unknown:before {
+ background-color: @color-unknown;
+ }
+ }
+}
+
+.overdue .state-change .state-ball {
+ .box-shadow(0, 0, 0, 1px, @gray-lighter);
+
+ &.handled:after {
+ background-color: @gray-lighter;
+ }
+}