Add icon svg on the submission thank you page

Added icon svg and animation
This commit is contained in:
karemarsy
2020-04-22 20:13:24 +02:00
parent 144fa22820
commit 139ae58906
3 changed files with 143 additions and 12 deletions

View File

@@ -35,7 +35,7 @@ $light: #fff;
height: 100%;
}
.is-vcentered{
.is-vcentered {
height: 100vh;
}
@@ -47,8 +47,6 @@ $light: #fff;
}
}
body {
min-height: 100vh;
}
@@ -56,4 +54,125 @@ body {
.button.google {
background: rgb(225, 98, 89);
color: white;
}
.animation-ctn {
text-align: center;
margin-top: 5em;
}
@-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
}
}
/* other styles */
/* .svg svg {
display: none
}
*/
.inlinesvg .svg svg {
display: inline
}
.svg-icon {
align-items: center;
display: inline-flex;
justify-content: center;
height: 154px;
width: 154px;
}
/* .svg img {
display: none
} */
.svg-icon--order-success 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--order-success svg circle {
-webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
animation: checkmark-circle 0.8s ease-in-out backwards;
}
.svg-icon--order-success 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;
}