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

0.0.30

Browse Source
This commit is contained in:
sairaj mote 2020-09-15 04:25:48 +05:30
parent 267372cff1
commit ec6fd0ba5a
5 changed files with 893 additions and 558 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

183
components.js
View File

@ -204,6 +204,7 @@ border: none;
.input { .input {
display: flex; display: flex;
align-items: center; align-items: center;
text-align: left;
position: relative; position: relative;
gap: 1em; gap: 1em;
padding: 0.7em 1em; padding: 0.7em 1em;
@ -1666,72 +1667,79 @@ const smPopup = document.createElement('template')
smPopup.innerHTML = ` smPopup.innerHTML = `
<style> <style>
*{ *{
padding: 0; padding: 0;
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
:host{ :host{
display: grid; display: grid;
} }
.popup-container{ .popup-container{
display: grid; display: grid;
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
place-items: center; place-items: center;
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.6);
z-index: 10; z-index: 10;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
}
:host(.stacked) .popup{
transform: scale(0.9) translateY(-1rem) !important;
} }
.popup{ .popup{
display: flex; margin-bottom: 0.5rem;
flex-direction: column; display: flex;
position: relative; flex-direction: column;
align-self: flex-end; position: relative;
align-items: flex-start; align-self: flex-end;
width: 100%; align-items: flex-start;
border-radius: 0.5rem 0.5rem 0 0; width: calc(100% - 1rem);
transform: translateY(100%); border-radius: 0.8rem;
transition: transform 0.3s; transform: translateY(100%);
background: rgba(var(--foreground-color), 1); transition: transform 0.3s;
box-shadow: 0 -1rem 2rem #00000020; background: rgba(var(--foreground-color), 1);
max-height: 100vh; box-shadow: 0 -1rem 2rem #00000020;
max-height: 100vh;
} }
.container-header{ .container-header{
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
} }
.popup-top{ .popup-top{
display: flex; display: flex;
width: 100%; width: 100%;
} }
.popup-body{ .popup-body{
flex: 1; display: flex;
width: 100%; flex-direction: column;
padding: 1.5rem; flex: 1;
overflow-y: auto; width: 100%;
padding: 1.5rem;
overflow-y: auto;
} }
.heading{ .heading{
font-weight: 400; font-weight: 400;
} }
.heading:first-letter{ .heading:first-letter{
text-transform: uppercase; text-transform: uppercase;
} }
.hide{ .hide{
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
} }
@media screen and (min-width: 640px){ @media screen and (min-width: 640px){
.popup{ .popup{
width: max-content; width: max-content;
align-self: center; align-self: center;
border-radius: 0.4rem; border-radius: 0.4rem;
height: auto; height: auto;
box-shadow: 0 3rem 2rem -0.5rem #00000040; transform: translateY(1rem);
} box-shadow: 0 3rem 2rem -0.5rem #00000040;
}
} }
@media screen and (max-width: 640px){ @media screen and (max-width: 640px){
.popup-top{ .popup-top{
@ -1772,7 +1780,7 @@ customElements.define('sm-popup', class extends HTMLElement {
constructor() { constructor() {
super() super()
this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true)) this.attachShadow({ mode: 'open' }).append(smPopup.content.cloneNode(true))
this.allowClosing = false this.allowClosing = false
} }
@ -1785,9 +1793,6 @@ customElements.define('sm-popup', class extends HTMLElement {
} }
show(pinned, popupStack) { show(pinned, popupStack) {
setTimeout(() => {
this.allowClosing = true
}, 300);
this.setAttribute('open', '') this.setAttribute('open', '')
this.pinned = pinned this.pinned = pinned
this.popupStack = popupStack this.popupStack = popupStack
@ -1796,29 +1801,21 @@ customElements.define('sm-popup', class extends HTMLElement {
document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`) document.body.setAttribute('style', `overflow: hidden; top: -${window.scrollY}px`)
} }
hide() { hide() {
if (!this.allowClosing) return
setTimeout(() => {
this.allowClosing = false
}, 300);
this.removeAttribute('open') this.removeAttribute('open')
if (window.innerWidth < 648) { if(window.innerWidth < 640)
this.popup.style.transform = 'translateY(100%)'; this.popup.style.transform = 'translateY(100%)';
} else
else { this.popup.style.transform = 'translateY(1rem)';
this.popup.style.transform = 'scale(0.9)';
setTimeout(() => {
this.popup.style.transform = 'translateY(100%) scale(1)'
}, 300)
}
this.popupContainer.classList.add('hide') this.popupContainer.classList.add('hide')
/*if (typeof this.popupStack !== 'undefined') { if (typeof this.popupStack !== 'undefined') {
if (this.popupStack.items.length === 1) { this.popupStack.pop()
if (this.popupStack.items.length === 0) {
this.resumeScrolling() this.resumeScrolling()
} }
} }
else {*/ else {
this.resumeScrolling() this.resumeScrolling()
//} }
if (this.inputFields.length) { if (this.inputFields.length) {
setTimeout(() => { setTimeout(() => {
@ -1830,7 +1827,14 @@ customElements.define('sm-popup', class extends HTMLElement {
}) })
}, 300); }, 300);
} }
return this; this.dispatchEvent(
new CustomEvent("popupclosed", {
bubbles: true,
detail: {
popup: this
}
})
)
} }
handleTouchStart(e) { handleTouchStart(e) {
@ -2173,27 +2177,28 @@ transform: none;
opacity: 1; opacity: 1;
} }
.notification{ .notification{
display: flex; display: flex;
opacity: 0; opacity: 0;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
transform: translateY(-1rem); margin-bottom: 0.5rem;
position: relative; transform: translateY(-1rem);
border-radius: 0.3rem; position: relative;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1), border-radius: 0.3rem;
0.5rem 1rem 2rem rgba(0, 0, 0, 0.1); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1),
background: rgba(var(--foreground-color), 1); 0.5rem 1rem 2rem rgba(0, 0, 0, 0.1);
transition: height 0.3s, transform 0.3s, opacity 0.3s; background: rgba(var(--foreground-color), 1);
overflow: hidden; transition: height 0.3s, transform 0.3s, opacity 0.3s;
overflow-wrap: break-word; overflow: hidden;
word-wrap: break-word; overflow-wrap: break-word;
-ms-word-break: break-all; word-wrap: break-word;
word-break: break-all; -ms-word-break: break-all;
word-break: break-word; word-break: break-all;
-ms-hyphens: auto; word-break: break-word;
-moz-hyphens: auto; -ms-hyphens: auto;
-webkit-hyphens: auto; -moz-hyphens: auto;
hyphens: auto; -webkit-hyphens: auto;
max-width: 100%; hyphens: auto;
max-width: 100%;
} }
h4:first-letter, h4:first-letter,
p:first-letter{ p:first-letter{
@ -2264,7 +2269,7 @@ stroke-width: 6;
transform: translateX(1rem); transform: translateX(1rem);
} }
} }
@media screen and (max-width: 640px){ @media screen and (any-hover: none){
.close{ .close{
display: none display: none
} }

71
css/main.css
View File

@ -240,7 +240,7 @@ input:invalid {
background: none; background: none;
} }
.action h4 { .action h4 {
padding: 0.5rem 0.8rem; padding: 0.5rem 1.2rem;
font-size: 0.9rem; font-size: 0.9rem;
clip-path: circle(100%); clip-path: circle(100%);
transition: clip-path 0.3s; transition: clip-path 0.3s;
@ -382,10 +382,6 @@ textarea {
background: rgba(var(--foreground-color), 1) !important; background: rgba(var(--foreground-color), 1) !important;
} }
form {
width: 100%;
}
#confirmation, #confirmation,
#prompt { #prompt {
flex-direction: column; flex-direction: column;
@ -419,6 +415,16 @@ form {
margin-bottom: 1em; margin-bottom: 1em;
} }
sm-popup .illustration {
position: relative;
height: 4rem;
width: 4rem;
padding: 1rem;
stroke: var(--accent-color);
margin-bottom: 1rem;
border-radius: 5rem;
background: rgba(var(--text-color), 0.06);
}
sm-popup sm-input:not(:last-of-type) { sm-popup sm-input:not(:last-of-type) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -444,6 +450,17 @@ sm-popup p {
margin-left: auto; margin-left: auto;
} }
details, summary {
margin-bottom: 1rem;
}
details p {
border-radius: 0.2rem;
padding: 0.5rem 1rem;
background: rgba(var(--text-color), 0.06);
margin-bottom: 0;
}
#sign_in_popup h3 { #sign_in_popup h3 {
margin-top: 2rem; margin-top: 2rem;
} }
@ -931,6 +948,50 @@ sm-panel {
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@keyframes popup {
0% {
stroke-dashoffset: 50;
transform: translateY(4rem) scale(0.2, 0.6);
}
40% {
transform: translateY(0) scale(0.2);
}
41% {
transform: translateY(0) scale(0.2);
}
50% {
stroke-dashoffset: 50;
transform: translateY(0) scale(1);
}
100% {
stroke-dashoffset: 0;
}
}
#success_section h4, #failure_section h4 {
text-align: center;
margin-top: 1rem;
}
#success_svg, #failure_svg {
height: 5rem;
width: 5rem;
stroke-width: 4;
align-self: center;
stroke: none;
stroke-dasharray: 50;
fill: rgba(var(--text-color), 0.06);
animation: popup 2s forwards infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#success_svg polyline {
fill: none;
stroke: #00C853;
}
#failure_svg line {
stroke: #EF5350;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit { #home_page, #deposit {
display: grid; display: grid;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

77
css/main.scss
View File

@ -241,7 +241,6 @@ input:invalid {
justify-content: center; justify-content: center;
padding: 0; padding: 0;
background: none; background: none;
&[disabled] { &[disabled] {
.primary-btn { .primary-btn {
background: none; background: none;
@ -249,7 +248,7 @@ input:invalid {
} }
h4 { h4 {
padding: 0.5rem 0.8rem; padding: 0.5rem 1.2rem;
font-size: 0.9rem; font-size: 0.9rem;
clip-path: circle(100%); clip-path: circle(100%);
transition: clip-path 0.3s; transition: clip-path 0.3s;
@ -403,10 +402,6 @@ textarea {
background: rgba(var(--foreground-color), 1) !important; background: rgba(var(--foreground-color), 1) !important;
} }
form {
width: 100%;
}
#confirmation, #confirmation,
#prompt { #prompt {
flex-direction: column; flex-direction: column;
@ -441,6 +436,16 @@ form {
} }
sm-popup{ sm-popup{
.illustration{
position: relative;
height: 4rem;
width: 4rem;
padding: 1rem;
stroke: var(--accent-color);
margin-bottom: 1rem;
border-radius: 5rem;
background: rgba(var(--text-color), 0.06);
}
sm-input:not(:last-of-type) { sm-input:not(:last-of-type) {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -467,6 +472,18 @@ sm-popup{
} }
} }
details, summary{
margin-bottom: 1rem;
}
details{
p{
border-radius: 0.2rem;
padding: 0.5rem 1rem;
background: rgba(var(--text-color), 0.06);
margin-bottom: 0;
}
}
#sign_in_popup { #sign_in_popup {
h3 { h3 {
margin-top: 2rem; margin-top: 2rem;
@ -1003,6 +1020,54 @@ sm-panel{
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
@keyframes popup{
0%{
stroke-dashoffset: 50;
transform: translateY(4rem) scale(0.2, 0.6);
}
40%{
transform: translateY(0) scale(0.2);
}
41%{
transform: translateY(0) scale(0.2);
}
50%{
stroke-dashoffset: 50;
transform: translateY(0) scale(1);
}
100%{
stroke-dashoffset: 0;
}
}
#success_section, #failure_section{
h4{
text-align: center;
margin-top: 1rem;
}
}
#success_svg, #failure_svg{
height: 5rem;
width: 5rem;
stroke-width: 4;
align-self: center;
stroke: none;
stroke-dasharray: 50;
fill: rgba(var(--text-color), 0.06);
animation: popup 2s forwards infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#success_svg{
polyline{
fill: none;
stroke: #00C853 ;
}
}
#failure_svg{
line{
stroke: #EF5350;
}
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page, #deposit{ #home_page, #deposit{
display: grid; display: grid;

1118
index.html
View File

File diff suppressed because it is too large Load Diff