diff options
Diffstat (limited to '_sass/custom')
| -rw-r--r-- | _sass/custom/custom.scss | 147 |
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 |