diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss index 97ac9c5..fad934e 100644 --- a/app/assets/stylesheets/application.css.scss +++ b/app/assets/stylesheets/application.css.scss @@ -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; } \ No newline at end of file diff --git a/app/views/layouts/submission.html.erb b/app/views/layouts/submission.html.erb index 9f24203..e56263a 100644 --- a/app/views/layouts/submission.html.erb +++ b/app/views/layouts/submission.html.erb @@ -11,7 +11,7 @@ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> - +
<%= yield %> diff --git a/app/views/submissions/create.html.erb b/app/views/submissions/create.html.erb index 7f13f5f..d392df8 100644 --- a/app/views/submissions/create.html.erb +++ b/app/views/submissions/create.html.erb @@ -1,16 +1,28 @@
-
+
-
- -
+
+
+ + + + + + + + +
+
+
-

Thank You! +

Thank You!


-

We received your submission.


-
- +

We received your submission.


+
+