124 lines
2.7 KiB
Plaintext
124 lines
2.7 KiB
Plaintext
/*! Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
|
|
|
|
.box-sizing(@sizing: border-box) {
|
|
-webkit-box-sizing: @sizing;
|
|
-moz-box-sizing: @sizing;
|
|
box-sizing: @sizing;
|
|
}
|
|
|
|
.button(@background-color: @body-bg-color, @color: @icinga-blue) {
|
|
.rounded-corners(3px);
|
|
|
|
background-color: @background-color;
|
|
border: 2px solid @color;
|
|
color: @color;
|
|
cursor: pointer;
|
|
padding: @vertical-padding @horizontal-padding;
|
|
|
|
// Transition mixin does not work w/ comma-separated transistions
|
|
-webkit-transition: background 0.3s ease, color 0.3s ease;
|
|
-moz-transition: background 0.3s ease, color 0.3s ease;
|
|
-o-transition: background 0.3s ease, color 0.3s ease;
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
|
|
&:hover {
|
|
background-color: @color;
|
|
color: @background-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.clearfix {
|
|
&:after {
|
|
content: "";
|
|
clear: both;
|
|
display: table;
|
|
}
|
|
}
|
|
|
|
.invisible {
|
|
// Maintain layout but hide visually and from screen readers
|
|
visibility: hidden;
|
|
}
|
|
|
|
.opacity(@opacity: 0.6) {
|
|
-webkit-opacity: @opacity;
|
|
-moz-opacity: @opacity;
|
|
opacity: @opacity;
|
|
}
|
|
|
|
.transform(@transform) {
|
|
-webkit-transform: @transform;
|
|
-moz-transform: @transform;
|
|
-ms-transform: @transform;
|
|
-o-transform: @transform;
|
|
transform: @transform;
|
|
}
|
|
|
|
.rounded-corners(@border-radius: 0.4em) {
|
|
-webkit-border-radius: @border-radius;
|
|
-moz-border-radius: @border-radius;
|
|
border-radius: @border-radius;
|
|
|
|
-webkit-background-clip: padding-box;
|
|
-moz-background-clip: padding;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.transition (@transition) {
|
|
-webkit-transition: @transition;
|
|
-moz-transition: @transition;
|
|
-o-transition: @transition;
|
|
transition: @transition;
|
|
}
|
|
|
|
.visible {
|
|
visibility: visible;
|
|
}
|
|
|
|
// Fadein animation
|
|
|
|
/* Chrome, WebKit */
|
|
@-webkit-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* FF < 16 */
|
|
@-moz-keyframes fadein {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
/* IE */
|
|
@-ms-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;
|
|
}
|