90 lines
1.3 KiB
SCSS
90 lines
1.3 KiB
SCSS
@-webkit-keyframes checkmark {
|
|
0% {
|
|
stroke-dashoffset: 100px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 200px
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes checkmark {
|
|
0% {
|
|
stroke-dashoffset: 100px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 200px
|
|
}
|
|
}
|
|
|
|
@keyframes checkmark {
|
|
0% {
|
|
stroke-dashoffset: 100px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 0px
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes checkmark-circle {
|
|
0% {
|
|
stroke-dashoffset: 480px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 960px;
|
|
|
|
}
|
|
}
|
|
|
|
@-ms-keyframes checkmark-circle {
|
|
0% {
|
|
stroke-dashoffset: 240px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 480px
|
|
}
|
|
}
|
|
|
|
@keyframes checkmark-circle {
|
|
0% {
|
|
stroke-dashoffset: 480px
|
|
}
|
|
|
|
100% {
|
|
stroke-dashoffset: 960px
|
|
}
|
|
}
|
|
|
|
@keyframes colored-circle {
|
|
0% {
|
|
opacity: 0
|
|
}
|
|
|
|
100% {
|
|
opacity: 100
|
|
}
|
|
}
|
|
|
|
.svg-icon-checkmark svg polyline {
|
|
-webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
|
|
animation: checkmark 0.30s ease-in-out 0.9s backwards
|
|
}
|
|
|
|
.svg-icon-checkmark svg g {
|
|
stroke: $success;
|
|
}
|
|
.svg-icon-checkmark svg circle {
|
|
-webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
|
|
animation: checkmark-circle 0.8s ease-in-out backwards;
|
|
}
|
|
|
|
.svg-icon-checkmark svg circle#colored {
|
|
-webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
|
|
animation: colored-circle 0.8s ease-in-out 0.9s backwards;
|
|
fill: $success;
|
|
}
|