Utils animation
This commit is contained in:
@@ -81,6 +81,21 @@ body
|
|||||||
background-color: white
|
background-color: white
|
||||||
border-bottom: thin solid $color-background
|
border-bottom: thin solid $color-background
|
||||||
|
|
||||||
|
&.empty
|
||||||
|
padding: 15px
|
||||||
|
justify-content: center
|
||||||
|
span
|
||||||
|
cursor: default
|
||||||
|
text-align: center
|
||||||
|
color: $color-text-dark-secondary
|
||||||
|
i
|
||||||
|
margin-right: 5px
|
||||||
|
display: inline-block
|
||||||
|
transform-origin: 50% 60%
|
||||||
|
|
||||||
|
&:hover span i
|
||||||
|
+animation-wiggle
|
||||||
|
|
||||||
.col-splitter
|
.col-splitter
|
||||||
flex: 0 0 auto
|
flex: 0 0 auto
|
||||||
width: 8px
|
width: 8px
|
||||||
|
@@ -198,6 +198,15 @@
|
|||||||
fill-mode: forwards
|
fill-mode: forwards
|
||||||
iteration-count: infinite
|
iteration-count: infinite
|
||||||
|
|
||||||
|
=animation-wiggle
|
||||||
|
animation:
|
||||||
|
name: wiggle
|
||||||
|
duration: 1s
|
||||||
|
delay: 0s
|
||||||
|
fill-mode: forwards
|
||||||
|
iteration-count: infinite
|
||||||
|
timing-function: linear
|
||||||
|
|
||||||
.spin
|
.spin
|
||||||
+spin
|
+spin
|
||||||
&:before, &:after
|
&:before, &:after
|
||||||
@@ -209,6 +218,16 @@
|
|||||||
to
|
to
|
||||||
transform: rotate(360deg)
|
transform: rotate(360deg)
|
||||||
|
|
||||||
|
@keyframes wiggle
|
||||||
|
0
|
||||||
|
transform: rotate(0deg)
|
||||||
|
25%
|
||||||
|
transform: rotate(25deg)
|
||||||
|
75%
|
||||||
|
transform: rotate(-25deg)
|
||||||
|
100%
|
||||||
|
transform: rotate(0deg)
|
||||||
|
|
||||||
@keyframes pulse
|
@keyframes pulse
|
||||||
0
|
0
|
||||||
opacity: 1
|
opacity: 1
|
||||||
|
Reference in New Issue
Block a user