bumi/tinyforms
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
bumi 2020-04-22 20:58:51 +02:00
parent efe6a916f1
commit 92cdd51c0d
3 changed files with 100 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
app/assets/stylesheets/application.css.scss
View File

@ -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
View 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;
}

26
app/views/submissions/create.html.erb
View File

@ -1,32 +1,24 @@
<div class="container">
<div class="columns is-vcentered">
<div class="column is-family-secondary has-text-centered is-half is-offset-one-quarter">
<div>
<div class="animation-ctn">
<div class="svg-icon svg-icon--order-success svg">
<div class="column has-text-centered is-half is-offset-one-quarter">
<div class="svg-icon svg-icon-checkmark inline-svg">
<svg xmlns="http://www.w3.org/2000/svg" width="154px" height="154px">
<g fill="none" stroke="#22AE73" stroke-width="2">
<g fill="none" stroke-width="2">
<circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;">
</circle>
<circle id="colored" fill="#22AE73" cx="77" cy="77" r="72"
<circle id="colored" cx="77" cy="77" r="72"
style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;"></circle>
<polyline class="st0" stroke="#fff" stroke-width="10" points="43.5,77.8 63.7,97.9 112.2,49.4 "
style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;" />
</g>
</svg>
</div>
</div>
<h1 class="title">Thank You!</h1>
<p class="subtitle is-5">We received your submission.</p>
<p>
<button onclick="window.history.back()" class="button is-success">Back to previous page</button>
<p>
</div>
<h1 class=" has-text-black is-size-1 has-text-weight-semibold">Thank You!
</h1><br>
<p class="is-size-5 has-text-black ">We received your submission.</p><br>
<div class="">
<button onclick="window.history.back()" class="button is-success is-medium">Back to previous page</button>
</div>
</div>
</div>
</div>