From 3e02d5aff85babc3ffbfcf52313f2108e313aa23 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Sat, 13 Apr 2024 13:46:43 +0200 Subject: Adding upstream version 2.12.1. Signed-off-by: Daniel Baumann --- public/css/icinga/mixins.less | 201 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 public/css/icinga/mixins.less (limited to 'public/css/icinga/mixins.less') 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; + } +} -- cgit v1.2.3