github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): tweak fetching history ui

Browse Source
This commit is contained in:
Łukasz Mierzwa
2021-07-02 16:51:41 +01:00
committed by Łukasz Mierzwa
parent 49b9813193
commit 8b4a17683d
1 changed files with 36 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ui/src/Styles/Components/_AlertHistory.scss
View File

@@ -1,3 +1,5 @@
@use "sass:math";
.alert-history-tooltip {
width: 100%;
height: 4px;
@@ -12,6 +14,12 @@ svg.alert-history {
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%;
@@ -43,10 +51,37 @@ svg.alert-history {
fill: $alert-history-inactive;
}
&.fetching {
fill: transparent;
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;
}
}
}