RanchiMall/flopay
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.77

Browse Source
This commit is contained in:
sairaj mote 2020-10-16 04:27:18 +05:30
parent 4e7e693819
commit 8a3ba16386
5 changed files with 134 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
css/main.css
View File

@ -350,10 +350,17 @@ textarea {
width: 100%;
}
.empty-state svg {
stroke: rgba(var(--text-color), 0.8);
height: 12em;
width: 12em;
}
.empty-state svg polyline,
.empty-state svg path,
.empty-state svg ellipse {
stroke-linecap: round;
stroke-linejoin: round;
stroke: rgba(var(--text-color), 0.7);
fill: none;
}
.container-header {
display: flex;
@ -1181,7 +1188,7 @@ sm-panel {
width: auto;
}
#success_svg, #failure_svg {
#failure_svg {
height: 5rem;
width: 5rem;
stroke-width: 4;
@ -1192,9 +1199,45 @@ sm-panel {
animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#success_svg polyline {
fill: none;
stroke: #00C853;
#success_art {
margin: 1rem 0;
height: 12rem;
width: 12rem;
align-self: center;
}
#success_art circle {
transform-origin: center;
transform: scale(0.9);
animation: scale-up 1s forwards ease-out;
}
#success_art polygon {
transform-origin: center;
transform: rotate(-20deg);
animation: rotate-in-place 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#success_art polygon:nth-of-type(1) {
animation-delay: 0.1s;
}
#success_art polygon:nth-of-type(2) {
animation-delay: 0.2s;
}
#success_art polygon:nth-of-type(3) {
animation-delay: 0.3s;
}
#success_art circle:nth-of-type(1) {
animation-delay: 0.1s;
}
#success_art circle:nth-of-type(2) {
animation-delay: 0.2s;
}
#success_art circle:nth-of-type(3) {
animation-delay: 0.3s;
}
#success_art circle:nth-of-type(4) {
animation-delay: 0.4s;
}
#success_art circle:nth-of-type(5) {
animation-delay: 0.5s;
}
#failure_svg line {
@ -1414,9 +1457,7 @@ sm-panel {
}
#transaction_page #transaction_details {
position: relative;
margin: 1.5rem 0;
padding: 1.5rem;
background-color: rgba(var(--text-color), 0.06);
padding: 0.5rem;
max-width: 50ch;
border-radius: 0.5rem;
}
@ -1461,6 +1502,22 @@ sm-panel {
margin: 1.5rem;
}
@keyframes scale-up {
from {
transform: scale(0.9);
}
to {
transform: none;
}
}
@keyframes rotate-in-place {
from {
transform: rotate(-20deg);
}
to {
transform: none;
}
}
#people_container {
display: grid;
grid-template-columns: repeat(4, 1fr);

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

74
css/main.scss
View File

@ -358,9 +358,16 @@ textarea {
place-items: center;
width: 100%;
svg {
stroke: rgba(var(--text-color), 0.8);
height: 12em;
width: 12em;
polyline,
path,
ellipse{
stroke-linecap: round;
stroke-linejoin: round;
stroke: rgba(var(--text-color), 0.7);
fill: none;
}
}
}
@ -1224,7 +1231,7 @@ sm-panel{
width: auto;
}
}
#success_svg, #failure_svg{
#failure_svg{
height: 5rem;
width: 5rem;
stroke-width: 4;
@ -1235,10 +1242,44 @@ sm-panel{
animation: popup 2s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#success_svg{
polyline{
fill: none;
stroke: #00C853 ;
#success_art{
margin: 1rem 0;
height: 12rem;
width: 12rem;
align-self: center;
circle{
transform-origin: center;
transform: scale(0.9);
animation: scale-up 1s forwards ease-out;
}
polygon{
transform-origin: center;
transform: rotate(-20deg);
animation: rotate-in-place 1s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
polygon:nth-of-type(1){
animation-delay: 0.1s;
}
polygon:nth-of-type(2){
animation-delay: 0.2s;
}
polygon:nth-of-type(3){
animation-delay: 0.3s;
}
circle:nth-of-type(1){
animation-delay: 0.1s;
}
circle:nth-of-type(2){
animation-delay: 0.2s;
}
circle:nth-of-type(3){
animation-delay: 0.3s;
}
circle:nth-of-type(4){
animation-delay: 0.4s;
}
circle:nth-of-type(5){
animation-delay: 0.5s;
}
}
#failure_svg{
@ -1458,9 +1499,8 @@ sm-panel{
}
#transaction_details{
position: relative;
margin: 1.5rem 0;
padding: 1.5rem;
background-color: rgba(var(--text-color), 0.06);
padding: .5rem;
//background-color: rgba(var(--text-color), 0.06);
max-width: 50ch;
border-radius: 0.5rem;
.icon{
@ -1505,6 +1545,22 @@ sm-panel{
margin: 1.5rem;
}
}
@keyframes scale-up{
from{
transform: scale(0.9);
}
to{
transform: none;
}
}
@keyframes rotate-in-place{
from{
transform: rotate(-20deg);
}
to{
transform: none;
}
}
#people_container{
display: grid;
grid-template-columns: repeat(4, 1fr);

1
css/success-art.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 128 128"><defs><style>.a{fill:#d4145a;}.b{fill:#2e3192;}.c{fill:#fff;}.d{fill:#662d91;}.e{fill:#9e005d;}.f{fill:#00a99d;}</style></defs><title>success-art</title><polygon class="a" points="87.96 46.76 59.68 69.04 48.54 54.9 43.83 58.62 54.97 72.75 58.68 77.47 91.67 51.47 87.96 46.76"/><polygon class="b" points="84.33 42.6 61.5 70.43 47.58 59.02 43.78 63.66 57.7 75.07 62.33 78.88 88.97 46.41 84.33 42.6"/><polygon class="c" points="86.09 44.39 60.64 69.85 47.91 57.12 43.66 61.36 56.39 74.09 60.64 78.33 90.33 48.64 86.09 44.39"/><circle class="a" cx="27" cy="33" r="2"/><circle class="a" cx="111.5" cy="93.5" r="5.5"/><circle class="d" cx="47" cy="88" r="2"/><circle class="d" cx="22.5" cy="82.5" r="4.5"/><circle class="d" cx="45.5" cy="114.5" r="3.5"/><circle class="d" cx="82" cy="18" r="5"/><circle class="e" cx="102.5" cy="51.5" r="1.5"/><circle class="e" cx="60.5" cy="37.5" r="2.5"/><circle class="e" cx="103" cy="77" r="3"/><circle class="e" cx="87.5" cy="108.5" r="3.5"/><circle class="f" cx="39" cy="20" r="3"/><circle class="f" cx="85" cy="83" r="2"/><circle class="f" cx="32.5" cy="101.5" r="3.5"/><circle class="f" cx="112" cy="113" r="1"/><circle class="f" cx="115" cy="29" r="2"/><circle class="f" cx="18" cy="53" r="1"/><circle class="f" cx="11" cy="5" r="1"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

38
index.html
View File

@ -338,12 +338,8 @@
<line x1="64" y1="64" x2="0" y2="0" />
</svg>
</header>
<section id="success_section" class="flex direction-column hide-completely">
<svg id="success_svg" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<title>success</title>
<ellipse cx="32" cy="32" rx="31.5" ry="31.49" />
<polyline points="17.04 30.48 27.92 41.36 46.96 22.32" />
</svg>
<section id="success_section" class="flex direction-column">
<svg id="success_art" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><defs><style>.a{fill:#d4145a;}.b{fill:#2e3192;}.c{fill:#fff;}.d{fill:#662d91;}.e{fill:#9e005d;}.f{fill:#00a99d;}</style></defs><title>success-art</title><polygon class="a" points="87.96 46.76 59.68 69.04 48.54 54.9 43.83 58.62 54.97 72.75 58.68 77.47 91.67 51.47 87.96 46.76"/><polygon class="b" points="84.33 42.6 61.5 70.43 47.58 59.02 43.78 63.66 57.7 75.07 62.33 78.88 88.97 46.41 84.33 42.6"/><polygon class="c" points="86.09 44.39 60.64 69.85 47.91 57.12 43.66 61.36 56.39 74.09 60.64 78.33 90.33 48.64 86.09 44.39"/><circle class="a" cx="27" cy="33" r="2"/><circle class="a" cx="111.5" cy="93.5" r="5.5"/><circle class="d" cx="47" cy="88" r="2"/><circle class="d" cx="22.5" cy="82.5" r="4.5"/><circle class="d" cx="45.5" cy="114.5" r="3.5"/><circle class="d" cx="82" cy="18" r="5"/><circle class="e" cx="102.5" cy="51.5" r="1.5"/><circle class="e" cx="60.5" cy="37.5" r="2.5"/><circle class="e" cx="103" cy="77" r="3"/><circle class="e" cx="87.5" cy="108.5" r="3.5"/><circle class="f" cx="39" cy="20" r="3"/><circle class="f" cx="85" cy="83" r="2"/><circle class="f" cx="32.5" cy="101.5" r="3.5"/><circle class="f" cx="112" cy="113" r="1"/><circle class="f" cx="115" cy="29" r="2"/><circle class="f" cx="18" cy="53" r="1"/><circle class="f" cx="11" cy="5" r="1"/></svg>
</section>
<section id="failure_section" class="hide-completely flex direction-column">
<svg id="failure_svg" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
@ -688,14 +684,6 @@
<svg viewBox="0 0 529.94 446.5">
<defs>
<style>
.a,
.b,
.c,
.d {
fill: none;
stroke-linejoin: round;
}
.a {
stroke-width: 9px;
}
@ -747,27 +735,16 @@
<svg viewBox="0 0 529.94 446.5">
<defs>
<style>
.a,
.b,
.c,
.d {
fill: none;
stroke-linejoin: round;
}
.a {
stroke-width: 9px;
}
.b,
.c {
stroke-width: 5px;
}
.c {
stroke-dasharray: 11.94 11.94;
}
.d {
stroke-width: 3px;
}
@ -806,27 +783,16 @@
<svg viewBox="0 0 529.94 446.5">
<defs>
<style>
.a,
.b,
.c,
.d {
fill: none;
stroke-linejoin: round;
}
.a {
stroke-width: 9px;
}
.b,
.c {
stroke-width: 5px;
}
.c {
stroke-dasharray: 11.94 11.94;
}
.d {
stroke-width: 3px;
}