mirror of
https://github.com/prymitive/karma
synced 2026-05-05 03:16:51 +00:00
88 lines
1.5 KiB
SCSS
88 lines
1.5 KiB
SCSS
@use "sass:math";
|
|
|
|
.alert-history-tooltip {
|
|
width: 100%;
|
|
height: 4px;
|
|
line-height: 4px;
|
|
}
|
|
svg.alert-history {
|
|
height: 4px;
|
|
line-height: 4px;
|
|
width: 100%;
|
|
vertical-align: bottom;
|
|
|
|
margin-left: 1px;
|
|
margin-right: 1px;
|
|
|
|
@for $i from 1 through 24 {
|
|
&:nth-of-type(#{$i}) > rect.fetching {
|
|
animation-name: alert-history-loading-#{$i};
|
|
}
|
|
}
|
|
|
|
rect {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
transition-property: fill;
|
|
transition-duration: 0.3s;
|
|
|
|
&.firing {
|
|
&.firing-0 {
|
|
fill: #fadbd8;
|
|
}
|
|
&.firing-1 {
|
|
fill: #f3a69e;
|
|
}
|
|
&.firing-2 {
|
|
fill: #ee8277;
|
|
}
|
|
&.firing-3 {
|
|
fill: #e95e50;
|
|
}
|
|
&.firing-4 {
|
|
fill: #d04436;
|
|
}
|
|
&.firing-5 {
|
|
fill: #a2352a;
|
|
}
|
|
}
|
|
&.inactive {
|
|
fill: $alert-history-inactive;
|
|
}
|
|
&.fetching {
|
|
fill: $alert-history-inactive;
|
|
animation-timing-function: ease-out;
|
|
animation-duration: 12s;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
&.error {
|
|
fill: $warning;
|
|
}
|
|
}
|
|
}
|
|
|
|
@for $i from 1 through 24 {
|
|
@keyframes alert-history-loading-#{$i} {
|
|
$step: math.div(100, 25);
|
|
$start: ($step * $i) - $step;
|
|
$middle: ($step * $i);
|
|
$stop: ($step * $i) + $step;
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
#{$start * 1%} {
|
|
opacity: 1;
|
|
}
|
|
#{$middle * 1%} {
|
|
opacity: 0;
|
|
}
|
|
#{$stop * 1%} {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|