diff options
Diffstat (limited to '')
| -rw-r--r-- | public/css/mixin/progress-bar.less | 217 | ||||
| -rw-r--r-- | public/css/mixin/state-badges.less | 31 | ||||
| -rw-r--r-- | public/css/mixins.less | 5 |
3 files changed, 253 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..d15b4c3 --- /dev/null +++ b/public/css/mixin/progress-bar.less @@ -0,0 +1,217 @@ +.progress-bar() { + &.progress-bar { + --hPadding: 10%; + --duration-scale: 80%; + + .above, + .below { + list-style-type: none; + margin: 0; + padding: 0; + + position: relative; + height: ~"calc(2em + 2px)"; + } + + .below { + > .left { + position: absolute; + left: var(--hPadding); + top: 0; + } + + > .right { + position: absolute; + left: ~"calc(var(--hPadding) + var(--duration-scale))"; + top: 0; + } + } + + .positioned { + position: absolute; + } + + .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: -7/12em; + transform: rotate(225deg); + } + + &.right-aligned { + // This is (.675em (:before placement) + .5em (half :before width)) + 1px (:before border) + transform: translate(~"calc(-1.175em - 1px)", 0); + + &::before { + top: auto; + left: 1.175em; + bottom: -.5em; + } + } + + &.left-aligned { + // 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); + + &::before { + top: auto; + left: auto; + right: .675em; + bottom: -.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 { + @marker-gap: 1/12em; + + .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; + width: .857em; + z-index: 2; + + position: absolute; + top: @marker-gap; + + &.highlighted { + background-color: @icinga-blue; + } + + &.left { + left: var(--hPadding); + } + + &.right { + left: ~"calc(var(--hPadding) + var(--duration-scale))"; + } + } + + .progress { + position: absolute; + left: var(--hPadding); + width: var(--duration-scale); + + &[data-animate-progress]::before { + content: ""; + display: block; + width: .5em + @marker-gap; + height: 1em + (@marker-gap * 2); + margin-top: -@marker-gap; + + .rounded-corners(.5em); + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + position: absolute; + left: -.5em - @marker-gap; + } + + > .bar { + width: 0; // set by progress-bar.js + height: 1em + (@marker-gap * 2); + margin-top: -@marker-gap; + } + + &::before, + > .bar { + background-color: @gray-light; + } + } + + .timeline-overlay { + position: absolute; + left: ~"calc(var(--hPadding) + var(--duration-scale))"; + width: var(--overlay-scale); + height: 1em + (@marker-gap * 2); + margin-top: -@marker-gap; + + opacity: .6; + } + + .progress > .bar, + .timeline-overlay { + display: flex; + justify-content: flex-end; + + .now { + width: .25em; + + border: solid @default-bg; + border-width: 1px 0 1px 0; + background-color: red; + } + } + } + } +} diff --git a/public/css/mixin/state-badges.less b/public/css/mixin/state-badges.less new file mode 100644 index 0000000..4be2d07 --- /dev/null +++ b/public/css/mixin/state-badges.less @@ -0,0 +1,31 @@ +.state-badges() { + &.state-badges { + padding: 0; + + ul { + padding: 0; + } + + li { + display: inline-block; + } + + li > ul > li:first-child:not(:last-child) .state-badge { + border-bottom-right-radius: 0; + border-top-right-radius: 0; + } + + li > ul > li:last-child:not(:first-child) .state-badge { + border-bottom-left-radius: 0; + border-top-left-radius: 0; + } + + > li:not(:last-child) { + margin-right: .25em; + } + + li > ul > li + li { + margin-left: 1px; + } + } +} diff --git a/public/css/mixins.less b/public/css/mixins.less new file mode 100644 index 0000000..326bf46 --- /dev/null +++ b/public/css/mixins.less @@ -0,0 +1,5 @@ +/* Icinga DB Web | (c) 2020 Icinga GmbH | GPLv2 */ + +.monospace() { + font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; +} |