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

0.0.2

Browse Source
This commit is contained in:
sairaj mote 2020-06-18 00:34:23 +05:30
parent 8d9fe51497
commit d3d4a005ba
4 changed files with 9875 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
css/main.css
View File

@ -421,6 +421,23 @@ p {
color: var(--primary-color); color: var(--primary-color);
} }
.container:empty ~ .empty {
display: -ms-grid;
display: grid;
}
.empty {
display: none;
place-items: center;
width: 100%;
}
.empty svg {
stroke: rgba(var(--text), 0.8);
height: 12em;
width: 12em;
}
.container-header { .container-header {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -474,6 +491,10 @@ p {
background: var(--background) !important; background: var(--background) !important;
} }
form {
width: 100%;
}
.popup-container { .popup-container {
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
@ -490,6 +511,10 @@ p {
} }
.popup-container .popup { .popup-container .popup {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-item-align: end; -ms-flex-item-align: end;
align-self: flex-end; align-self: flex-end;
-webkit-box-align: start; -webkit-box-align: start;
@ -529,7 +554,7 @@ p {
-ms-flex-align: center; -ms-flex-align: center;
align-items: center; align-items: center;
padding: 0; padding: 0;
margin-bottom: 1.5em; margin-bottom: 1.5rem;
} }
.popup-container .popup .container-header .btn { .popup-container .popup .container-header .btn {
@ -561,7 +586,7 @@ p {
top: 0; top: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
z-index: 11; z-index: 40;
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
} }
@ -722,6 +747,17 @@ p {
text-align: right; text-align: right;
} }
.icon {
height: 1.2rem;
width: 1.2rem;
fill: none;
stroke: rgba(var(--text), 0.8);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
}
#navbar { #navbar {
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -759,17 +795,6 @@ p {
letter-spacing: 0.1em; letter-spacing: 0.1em;
} }
#navbar .navbar-item .icon {
height: 1.2rem;
width: 1.2rem;
fill: none;
stroke: rgba(var(--text), 0.8);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
}
#navbar .navbar-item h5 { #navbar .navbar-item h5 {
font-size: 0.6em; font-size: 0.6em;
margin-top: 0.4em; margin-top: 0.4em;
@ -789,20 +814,13 @@ p {
} }
#home_page h1 { #home_page h1 {
margin-top: 4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: 700; font-weight: 700;
} }
#home_page p { #home_page p {
margin-bottom: 1.5rem; margin-bottom: 3rem;
}
#home_page .user-option {
margin-bottom: 2rem;
}
#home_page .user-option:last-of-type {
margin: 0;
} }
#home_page h2 { #home_page h2 {
@ -810,25 +828,33 @@ p {
} }
.options-tab { .options-tab {
display: -webkit-box; display: -ms-grid;
display: -ms-flexbox; display: grid;
display: flex; margin-top: 1rem;
-ms-flex-wrap: wrap; -ms-grid-columns: (10rem)[2];
flex-wrap: wrap; grid-template-columns: repeat(2, 10rem);
margin-top: 0.8rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.options-tab .option { .options-tab .option {
white-space: nowrap; display: -webkit-inline-box;
padding: 0.6rem 1rem; display: -ms-inline-flexbox;
text-decoration: none; display: inline-flex;
border-right: solid 1px rgba(var(--text), 0.2); -webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-radius: 0.2rem;
padding: 1.5rem;
margin-right: 1rem;
margin-bottom: 1rem;
border: solid 1px rgba(var(--text), 0.3);
text-transform: capitalize; text-transform: capitalize;
cursor: pointer;
} }
.options-tab .option:last-of-type { .options-tab .option .icon {
border: none; margin-bottom: 1.5rem;
} }
.notification-dot::after { .notification-dot::after {
@ -896,7 +922,7 @@ p {
align-self: flex-end; align-self: flex-end;
} }
#deposit_request_container, #withdraw_request_container { .container {
display: -ms-grid; display: -ms-grid;
display: grid; display: grid;
gap: 1em; gap: 1em;
@ -960,26 +986,13 @@ p {
background: rgba(var(--text-light), 0.2); background: rgba(var(--text-light), 0.2);
} }
.empty {
display: -ms-grid;
display: grid;
place-items: center;
width: 100%;
}
.empty svg {
stroke: rgba(var(--text), 0.8);
height: 12em;
width: 12em;
}
@media only screen and (min-width: 640px) { @media only screen and (min-width: 640px) {
body { body {
padding: 1rem 6vw; padding: 1rem 6vw;
margin-left: 6rem; margin-left: 6rem;
} }
.popup-container .popup { .popup-container .popup {
width: auto; width: 24rem;
-ms-flex-item-align: center; -ms-flex-item-align: center;
-ms-grid-row-align: center; -ms-grid-row-align: center;
align-self: center; align-self: center;
@ -1010,7 +1023,7 @@ p {
margin: 1rem; margin: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
#deposit_request_container, #withdraw_request_container { .container {
-ms-grid-columns: (1fr)[2]; -ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
@ -1062,26 +1075,31 @@ p {
#sign_in_popup { #sign_in_popup {
width: 24rem; width: 24rem;
} }
.options-tab {
-ms-grid-columns: (10rem)[3];
grid-template-columns: repeat(3, 10rem);
}
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
#deposit_request_container, #withdraw_request_container { .container {
-ms-grid-columns: (1fr)[3]; -ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
#home_page .user-option {
max-width: 40%;
}
} }
@media only screen and (min-width: 1280px) { @media only screen and (min-width: 1280px) {
body { body {
padding: 1rem 12vw; padding: 1rem 12vw;
} }
#deposit_request_container, #withdraw_request_container { .container {
-ms-grid-columns: (1fr)[3]; -ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
.options-tab {
-ms-grid-columns: (10rem)[4];
grid-template-columns: repeat(4, 10rem);
}
} }
@media only screen and (min-width: 1920px) { @media only screen and (min-width: 1920px) {
@ -1089,7 +1107,7 @@ p {
font-size: 24px; font-size: 24px;
padding: 2rem 20vw; padding: 2rem 20vw;
} }
#deposit_request_container, #withdraw_request_container { .container {
-ms-grid-columns: (1fr)[4]; -ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
@ -1100,7 +1118,7 @@ p {
font-size: 24px; font-size: 24px;
padding: 2rem 30vw; padding: 2rem 30vw;
} }
#deposit_request_container, #withdraw_request_container { .container {
-ms-grid-columns: (1fr)[4]; -ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }

2
css/main.css.map
View File

File diff suppressed because one or more lines are too long

106
css/main.scss
View File

@ -268,6 +268,19 @@ p{
color: var(--primary-color); color: var(--primary-color);
} }
} }
.container:empty ~ .empty{
display: grid;
}
.empty{
display: none;
place-items: center;
width: 100%;
svg{
stroke: rgba(var(--text), 0.8);
height: 12em;
width: 12em;
}
}
.container-header{ .container-header{
display: flex; display: flex;
align-items: center; align-items: center;
@ -303,6 +316,9 @@ p{
.solid-background{ .solid-background{
background: var(--background) !important; background: var(--background) !important;
} }
form{
width: 100%;
}
.popup-container{ .popup-container{
display: grid; display: grid;
position: fixed; position: fixed;
@ -315,6 +331,7 @@ p{
z-index: 10; z-index: 10;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
.popup{ .popup{
flex-direction: column;
align-self: flex-end; align-self: flex-end;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
@ -337,7 +354,7 @@ p{
.container-header{ .container-header{
align-items: center; align-items: center;
padding: 0; padding: 0;
margin-bottom: 1.5em; margin-bottom: 1.5rem;
.btn{ .btn{
padding: 0.6em 1.2em; padding: 0.6em 1.2em;
} }
@ -357,7 +374,7 @@ p{
top: 0; top: 0;
width: 100%; width: 100%;
max-width: 100%; max-width: 100%;
z-index: 11; z-index: 40;
background: rgba(var(--foreground), 1); background: rgba(var(--foreground), 1);
#error_icon{ #error_icon{
fill: #E53935; fill: #E53935;
@ -469,6 +486,16 @@ p{
text-align: right; text-align: right;
} }
} }
.icon{
height: 1.2rem;
width: 1.2rem;
fill: none;
stroke: rgba(var(--text), 0.8);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
}
#navbar{ #navbar{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -493,16 +520,6 @@ p{
font-size: 0.9em; font-size: 0.9em;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
.icon{
height: 1.2rem;
width: 1.2rem;
fill: none;
stroke: rgba(var(--text), 0.8);
stroke-width: 6;
overflow: visible;
stroke-linecap: round;
stroke-linejoin: round;
}
h5{ h5{
font-size: 0.6em; font-size: 0.6em;
margin-top: 0.4em; margin-top: 0.4em;
@ -521,35 +538,34 @@ p{
} }
#home_page{ #home_page{
h1{ h1{
margin-top: 4rem;
margin-bottom: 1rem; margin-bottom: 1rem;
font-weight: 700; font-weight: 700;
} }
p{ p{
margin-bottom: 1.5rem; margin-bottom: 3rem;
}
.user-option{
margin-bottom: 2rem;
&:last-of-type{
margin: 0;
}
} }
h2{ h2{
margin-bottom: 1rem; margin-bottom: 1rem;
} }
} }
.options-tab{ .options-tab{
display: flex; display: grid;
flex-wrap: wrap; margin-top: 1rem;
margin-top: 0.8rem; grid-template-columns: repeat(2, 10rem);
margin-bottom: 1rem; margin-bottom: 1rem;
.option{ .option{
white-space: nowrap; display: inline-flex;
padding: 0.6rem 1rem; flex-direction: column;
text-decoration: none; border-radius: 0.2rem;
border-right: solid 1px rgba(var(--text), 0.2); padding: 1.5rem;
margin-right: 1rem;
margin-bottom: 1rem;
border: solid 1px rgba(var(--text), 0.3);
text-transform: capitalize; text-transform: capitalize;
&:last-of-type{ cursor: pointer;
border: none; .icon{
margin-bottom: 1.5rem;
} }
} }
} }
@ -599,7 +615,7 @@ p{
align-self: flex-end; align-self: flex-end;
} }
} }
#deposit_request_container, #withdraw_request_container{ .container{
display: grid; display: grid;
gap: 1em; gap: 1em;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -647,16 +663,6 @@ p{
} }
} }
} }
.empty{
display: grid;
place-items: center;
width: 100%;
svg{
stroke: rgba(var(--text), 0.8);
height: 12em;
width: 12em;
}
}
@media only screen and (min-width: 640px){ @media only screen and (min-width: 640px){
body{ body{
padding: 1rem 6vw; padding: 1rem 6vw;
@ -664,7 +670,7 @@ p{
} }
.popup-container{ .popup-container{
.popup{ .popup{
width: auto; width: 24rem;
align-self: center; align-self: center;
border-radius: 0.2rem; border-radius: 0.2rem;
height: auto; height: auto;
@ -691,7 +697,7 @@ p{
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
#deposit_request_container, #withdraw_request_container{ .container{
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
#navbar{ #navbar{
@ -740,33 +746,31 @@ p{
width: 24rem; width: 24rem;
} }
.options-tab{ .options-tab{
//grid-template-columns: repeat(4, auto); grid-template-columns: repeat(3, 10rem);
} }
} }
@media only screen and (min-width: 800px){ @media only screen and (min-width: 800px){
#deposit_request_container, #withdraw_request_container{ .container{
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
#home_page{
.user-option{
max-width: 40%;
}
}
} }
@media only screen and (min-width: 1280px){ @media only screen and (min-width: 1280px){
body{ body{
padding: 1rem 12vw; padding: 1rem 12vw;
} }
#deposit_request_container, #withdraw_request_container{ .container{
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
} }
.options-tab{
grid-template-columns: repeat(4, 10rem);
}
} }
@media only screen and (min-width: 1920px){ @media only screen and (min-width: 1920px){
body{ body{
font-size: 24px; font-size: 24px;
padding: 2rem 20vw; padding: 2rem 20vw;
} }
#deposit_request_container, #withdraw_request_container{ .container{
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }
@ -775,7 +779,7 @@ p{
font-size: 24px; font-size: 24px;
padding: 2rem 30vw; padding: 2rem 30vw;
} }
#deposit_request_container, #withdraw_request_container{ .container{
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
} }
} }

9962
index.html
View File

File diff suppressed because it is too large Load Diff