summaryrefslogtreecommitdiffstats
path: root/_sass/custom
diff options
context:
space:
mode:
Diffstat (limited to '_sass/custom')
-rw-r--r--_sass/custom/custom.scss147
1 files changed, 147 insertions, 0 deletions
diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
index 5a4c533..ec35a97 100644
--- a/_sass/custom/custom.scss
+++ b/_sass/custom/custom.scss
@@ -204,4 +204,151 @@ figure {
vertical-align: middle;
margin-left: 10px;
width: 20px;
+}
+
+
+.animated {
+ svg {
+ width: 100px;
+ display: block;
+ margin: 40px auto 0;
+ }
+ &.pause {
+ svg .success, svg .error, svg .loading {
+ display: none;
+ }
+ }
+ &.success {
+ color: $green-500;
+ fill: $green-500;
+ svg .error, svg .loading, svg .pause {
+ display: none;
+ }
+ }
+ &.error {
+ color: $red-500;
+ fill: $red-500;
+ svg .success, svg .loading, svg .pause {
+ display: none;
+ }
+ }
+ &.loading {
+ svg .success, svg .error, svg .pause {
+ display: none;
+ }
+ svg .path {
+ stroke-dasharray: 269%;
+ stroke-dashoffset: 0;
+ -webkit-animation: loading 1s cubic-bezier(1,1,1,1) 0s infinite;
+ animation: loading 1s cubic-bezier(1,1,1,1) 0s infinite;
+ transform-origin: 50% 50%;
+ -webkit-transform-origin: 50% 50%;
+ -moz-transform-origin: 50px 50px;
+ }
+ }
+ &.complete {
+ svg .path {
+ stroke-dasharray: 314%;
+ stroke-dashoffset: 0;
+ }
+ }
+
+ .path {
+ stroke-dasharray: 1000;
+ stroke-dashoffset: 0;
+ &.circle {
+ -webkit-animation: dash .9s ease-in-out;
+ animation: dash .9s ease-in-out;
+ }
+ &.line {
+ stroke-dashoffset: 1000;
+ -webkit-animation: dash .9s .35s ease-in-out forwards;
+ animation: dash .9s .35s ease-in-out forwards;
+ }
+ &.check {
+ stroke-dashoffset: -100;
+ -webkit-animation: dash-check .9s .35s ease-in-out forwards;
+ animation: dash-check .9s .35s ease-in-out forwards;
+ }
+ }
+
+ p {
+ text-align: center;
+ margin: 20px 0 60px;
+ font-size: 1.25em;
+ }
+
+ @keyframes rotate {
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
+
+ @keyframes loading {
+ 0% {
+ stroke-dasharray: 44% 269%;
+ stroke-dashoffset: 0%;
+ }
+ 50% {
+ stroke-dasharray: 156%;
+ stroke-dashoffset: 156%;
+ }
+ 100% {
+ stroke-dasharray: 44% 269%;
+ stroke-dashoffset: 314%;
+ }
+ }
+
+ @-webkit-keyframes dash {
+ 0% {
+ stroke-dashoffset: 1000;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+ }
+
+ @keyframes dash {
+ 0% {
+ stroke-dashoffset: 1000;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+ }
+
+ @-webkit-keyframes dash-check {
+ 0% {
+ stroke-dashoffset: -100;
+ }
+ 100% {
+ stroke-dashoffset: 900;
+ }
+ }
+
+ @keyframes dash-check {
+ 0% {
+ stroke-dashoffset: -100;
+ }
+ 100% {
+ stroke-dashoffset: 900;
+ }
+ }
+
+ @-webkit-keyframes check {
+ 0% {
+ stroke-dashoffset: -110;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+ }
+ @keyframes check {
+ 0% {
+ stroke-dashoffset: -110;
+ }
+ 100% {
+ stroke-dashoffset: 0;
+ }
+ }
} \ No newline at end of file