Cleanup
This commit is contained in:
@@ -25,6 +25,7 @@ $light: #fff;
|
||||
|
||||
@import 'bulma/bulma';
|
||||
|
||||
@import "checkmark-icon";
|
||||
@import './demo';
|
||||
|
||||
.is-font-logo {
|
||||
@@ -64,88 +65,7 @@ body {
|
||||
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.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 {
|
||||
.inline-svg svg {
|
||||
display: inline
|
||||
}
|
||||
|
||||
@@ -153,25 +73,4 @@ body {
|
||||
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;
|
||||
}
|
||||
89
app/assets/stylesheets/checkmark-icon.css.scss
Normal file
89
app/assets/stylesheets/checkmark-icon.css.scss
Normal file
@@ -0,0 +1,89 @@
|
||||
@-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;
|
||||
}
|
||||
Reference in New Issue
Block a user