diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-13 11:30:08 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-13 11:30:08 +0000 |
commit | 4ce65d59ca91871cfd126497158200a818720bce (patch) | |
tree | e277def01fc7eba7dbc21c4a4ae5576e8aa2cf1f /asset/css/balls.less | |
parent | Initial commit. (diff) | |
download | icinga-php-library-4ce65d59ca91871cfd126497158200a818720bce.tar.xz icinga-php-library-4ce65d59ca91871cfd126497158200a818720bce.zip |
Adding upstream version 0.13.1.upstream/0.13.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'asset/css/balls.less')
-rw-r--r-- | asset/css/balls.less | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/asset/css/balls.less b/asset/css/balls.less new file mode 100644 index 0000000..f3afae3 --- /dev/null +++ b/asset/css/balls.less @@ -0,0 +1,147 @@ +@ball-pad: 1/6em; + +.ball { + border-radius: 50%; + display: inline-block; + text-align: center; +} + +.ball-size-xs { + height: 1/3em; + width: 1/3em; +} + +.ball-size-s { + height: 0.5em; + width: 0.5em; +} + +.ball-size-m { + height: 0.75em; + width: 0.75em; + line-height: 0; + + i.icon:before { + font-size: .75 - @ball-pad * 2; + line-height: 1em; + } +} + +.ball-size-ml { + height: 1em; + width: 1em; + line-height: 0; + + i.icon { + line-height: 0.3; + + &:before { + font-size: 0.8 - @ball-pad * 2; + line-height: 1 - @ball-pad * 2; + } + } +} + +.ball-size-l { + height: 1.5em; + width: 1.5em; + line-height: 1em; + + i.icon:before { + font-size: 1 - @ball-pad * 2; + line-height: 1.5 - @ball-pad * 2; + } +} + +.ball-size-xl { + width: 2em; + height: 2em; + + i.icon:before { + line-height: 2 - @ball-pad * 2; + } +} + +.ball-outline(@color) { + border: @ball-pad solid @color; +} + +.ball-solid(@color) { + background-color: @color; + color: var(--default-text-color-inverted, @default-text-color-inverted); + padding: @ball-pad; +} + +.state-ball { + .ball(); + + &.state-pending:not(.ball-size-l):not(.ball-size-xl) { + .ball-solid(var(--state-pending, @state-pending)); + } + + &.state-pending.ball-size-l, + &.state-pending.ball-size-xl { + .ball-outline(var(--state-pending, @state-pending)); + } + + &.state-up:not(.ball-size-l):not(.ball-size-xl) { + .ball-solid(var(--state-up, @state-up)); + } + + &.state-up.ball-size-l, + &.state-up.ball-size-xl { + .ball-outline(var(--state-up, @state-up)); + } + + &.state-down { + .ball-solid(var(--state-down, @state-down)); + } + + &.state-ok:not(.ball-size-l):not(.ball-size-xl) { + .ball-solid(var(--state-ok, @state-ok)); + } + + &.state-ok.ball-size-l, + &.state-ok.ball-size-xl { + .ball-outline(var(--state-ok, @state-ok)); + } + + &.state-warning { + .ball-solid(var(--state-warning, @state-warning)); + } + + &.state-critical { + .ball-solid(var(--state-critical, @state-critical)); + } + + &.state-unknown { + .ball-solid(var(--state-unknown, @state-unknown)); + } + + &.handled { + opacity: 0.6; + } + + i.icon { + text-align: center; + display: block; + + &::before { + margin-right: 0; + } + } + + // Specific icon styles + &.ball-size-l i { + &.fa-sitemap:before { + font-size: 8px; // px to ignore browser min font-size + } + } + + &.ball-size-xl i { + &.fa-sitemap:before { + font-size: .857em; + line-height: (2 - @ball-pad * 2) / .857; + } + } +} |