base.less: Redesign loading effect
This commit is contained in:
parent
f93529ff74
commit
224e87c856
|
@ -188,13 +188,34 @@ td, th {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Styles for when containers are loading. JS will remove this once the containers are ready
|
.container {
|
||||||
.impact {
|
&:before {
|
||||||
.transition(background-color 2s 1s linear !important);
|
content: "";
|
||||||
background-color: @gray-lighter !important;
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: -10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.impact > .controls, .impact li.active a {
|
&.impact {
|
||||||
.transition(background-color 2s 1s linear !important);
|
overflow: hidden;
|
||||||
background-color: @gray-lighter !important;
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.impact:before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
background: @body-bg-color url(/img/icinga-loader.gif) no-repeat center center;
|
||||||
|
background-size: 4em 4em;
|
||||||
|
opacity: .7;
|
||||||
|
pointer-events: all;
|
||||||
|
position: absolute;
|
||||||
|
top: 2.5em;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
z-index: 10;
|
||||||
|
.transition(opacity 1s 2s linear !important);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue