improve task loading icon performance
This commit is contained in:
parent
b3e04d2361
commit
3b2ff7103a
1 changed files with 10 additions and 5 deletions
|
@ -1799,7 +1799,7 @@ ol.tabs li {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
background: hsl(339,80%,62%);
|
background: hsl(339,80%,62%);
|
||||||
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
|
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
|
||||||
animation: rotateplane 1.2s infinite ease-in-out;
|
animation: rotateplane 1.2s infinite ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.small.loading.icon {
|
.small.loading.icon {
|
||||||
|
@ -1815,15 +1815,15 @@ ol.tabs li {
|
||||||
|
|
||||||
@keyframes rotateplane {
|
@keyframes rotateplane {
|
||||||
0% {
|
0% {
|
||||||
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||||
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
|
||||||
background: hsl(202,68%,54%);
|
background: hsl(202,68%,54%);
|
||||||
} 50% {
|
} 50% {
|
||||||
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||||
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
|
||||||
background: hsl(145,51%,45%);
|
background: hsl(145,51%,45%);
|
||||||
} 100% {
|
} 100% {
|
||||||
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||||
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
|
||||||
background: hsl(202,68%,54%);
|
background: hsl(202,68%,54%);
|
||||||
}
|
}
|
||||||
|
@ -2087,6 +2087,7 @@ footer {
|
||||||
|
|
||||||
.tasks-navigation .icon-holder {
|
.tasks-navigation .icon-holder {
|
||||||
width: 30px;
|
width: 30px;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tasks-navigation .icon-holder .icon {
|
.tasks-navigation .icon-holder .icon {
|
||||||
|
@ -2097,7 +2098,11 @@ footer {
|
||||||
width: 10px;
|
width: 10px;
|
||||||
height: 10px;
|
height: 10px;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
position: relative;
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
margin: -6px 0 0 -5px;
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
@extend .priority.icon:after;
|
@extend .priority.icon:after;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue