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

UI changes

Browse Source
This commit is contained in:
sairaj mote 2020-09-09 02:31:29 +05:30 committed by GitHub
parent b71ff090da
commit 39369e2376
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 564 additions and 529 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components.js
View File

@ -690,6 +690,7 @@ text-align: center;
transition: color 0.3s; transition: color 0.3s;
text-transform: capitalize; text-transform: capitalize;
font-family: var(--font-family); font-family: var(--font-family);
height: 100%;
} }
@media (hover: hover){ @media (hover: hover){
:host(.active) .tab{ :host(.active) .tab{
@ -1933,7 +1934,8 @@ background: rgba(var(--text-color), 1);
box-shadow: 0 0.2rem 0.2rem #00000020, box-shadow: 0 0.2rem 0.2rem #00000020,
0 0.5rem 1rem #00000040; 0 0.5rem 1rem #00000040;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
transform: scale(0) transform: scale(0);
z-index: 1;
} }
.hide{ .hide{
pointer-events: none; pointer-events: none;
@ -1950,9 +1952,10 @@ right: 1rem;
} }
.left,.right{ .left,.right{
position: absolute; position: absolute;
width: 2rem; width: 3rem;
height: 100%; height: 100%;
transition: opacity 0.3s; transition: opacity 0.3s;
z-index: 1;
} }
.left{ .left{
background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6)) background: linear-gradient(to left, transparent, rgba(var(--foreground-color), 0.6))
@ -2727,6 +2730,7 @@ height: 0.15rem;
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
background: var(--accent-color); background: var(--accent-color);
transition: transform 0.3s, width 0.3s; transition: transform 0.3s, width 0.3s;
pointer-events: none;
} }
:host([variant="tab"]) .indicator{ :host([variant="tab"]) .indicator{
height: 100%; height: 100%;

92
css/main.css
View File

@ -375,16 +375,16 @@ textarea {
color: var(--accent-color); color: var(--accent-color);
} }
.container:empty ~ .empty { *:empty + .empty-state {
display: grid; display: grid;
} }
.empty { .empty-state {
display: none; display: none;
place-items: center; place-items: center;
width: 100%; width: 100%;
} }
.empty svg { .empty-state svg {
stroke: rgba(var(--text-color), 0.8); stroke: rgba(var(--text-color), 0.8);
height: 12em; height: 12em;
width: 12em; width: 12em;
@ -526,7 +526,7 @@ form {
margin-bottom: 1em; margin-bottom: 1em;
} }
#sign_in_popup h1 { #sign_in_popup h3 {
margin-top: 2rem; margin-top: 2rem;
} }
#sign_in_popup h4 { #sign_in_popup h4 {
@ -598,15 +598,13 @@ form {
margin: 0.3em; margin: 0.3em;
border-radius: 0.4em; border-radius: 0.4em;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
font-size: 0.9em; font-size: 0.8em;
text-transform: uppercase; text-transform: capitalize;
width: 100%; width: 100%;
letter-spacing: 0.08em; font-weight: 600;
} }
#navbar .navbar-item h5 { #navbar .navbar-item h5 {
font-size: 0.6em;
margin-top: 0.4em; margin-top: 0.4em;
font-weight: 700;
} }
#navbar .active { #navbar .active {
color: var(--accent-color); color: var(--accent-color);
@ -631,51 +629,36 @@ form {
#home_page p { #home_page p {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
#home_page .user-panel {
margin: 0 1.5rem;
}
#user_panel { .user-panel {
position: relative; position: relative;
padding: 1.5rem; padding: 1.5rem;
margin: 0 1.5rem;
border-radius: 0.6rem; border-radius: 0.6rem;
background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), rgba(var(--text-color), 0.8); background: radial-gradient(circle at top left, #EF6C00 20%, #C51162 30%, #4A148C 40%, #251f44);
box-shadow: 0 0.1rem 0.6rem #00000020; box-shadow: 0 0.1rem 0.1rem #00000020, 0 2rem 1rem -1rem #00000040;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
align-self: flex-start;
} }
#user_panel .icon { .user-panel .icon {
stroke: rgba(var(--foreground-color), 1); stroke: rgba(var(--foreground-color), 1);
} }
#user_panel::before, #user_panel::after { .user-panel .copy-row {
content: "";
position: absolute;
height: 2rem;
bottom: 0.8rem;
box-shadow: 0 1rem 0.2rem #00000030;
z-index: -1;
border-radius: 0.4rem;
}
#user_panel::before {
left: 0;
right: 50%;
transform: rotate(-3deg);
}
#user_panel::after {
left: 50%;
right: 0;
transform: rotate(3deg);
}
#user_panel .copy-row {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-shadow: 0.1rem 0.1rem 0.1rem #000000;
} }
#user_panel .grid { .user-panel .grid {
margin-top: 0.5rem; margin-top: 0.5rem;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
#user_panel .grid h5 { .user-panel .grid h5 {
font-weight: 500; font-weight: 500;
color: rgba(var(--foreground-color), 0.8); color: rgba(var(--foreground-color), 0.8);
} }
#user_type { .user-type {
font-weight: 500; font-weight: 500;
color: rgba(var(--foreground-color), 0.9); color: rgba(var(--foreground-color), 0.9);
} }
@ -755,7 +738,17 @@ sm-tab-header {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
z-index: 1; z-index: 2;
margin-bottom: 1rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
}
sm-tab::part(tab) {
padding: 0.8rem 0;
}
sm-panel {
width: 100%;
} }
.request { .request {
@ -968,7 +961,7 @@ sm-tab-header {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
#main_loader button { #main_loader sm-button {
margin-left: 0; margin-left: 0;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -993,14 +986,23 @@ sm-tab-header {
word-spacing: 0.16em; word-spacing: 0.16em;
} }
#upi_txId_section .copy-row {
margin-bottom: 1.5rem;
}
#send_amount_to_deposit {
margin-bottom: 0 !important;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page { #home_page, #deposit {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-areas: "." "left"; grid-template-areas: "." "left";
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
} }
#home_page .left { #home_page .left, #deposit .left {
grid-area: left; grid-area: left;
} }
@ -1047,9 +1049,6 @@ sm-tab-header {
height: 1.4rem; height: 1.4rem;
width: 1.4rem; width: 1.4rem;
} }
#navbar .navbar-item h5 {
font-size: 0.8em;
}
#navbar .navbar-item:hover .icon { #navbar .navbar-item:hover .icon {
stroke: rgba(var(--text-color), 1); stroke: rgba(var(--text-color), 1);
} }
@ -1075,14 +1074,11 @@ sm-tab-header {
display: inline-flex; display: inline-flex;
} }
#home_page { #home_page, #deposit {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) 24rem; grid-template-columns: minmax(0, 1fr) 24rem;
} }
#activity_page sm-tab-header {
margin-bottom: 1rem;
}
} }
@media only screen and (min-width: 800px) { @media only screen and (min-width: 800px) {
.complaint { .complaint {

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

94
css/main.scss
View File

@ -401,15 +401,14 @@ textarea {
} }
} }
.container:empty~.empty { *:empty + .empty-state {
display: grid; display: grid;
} }
.empty { .empty-state {
display: none; display: none;
place-items: center; place-items: center;
width: 100%; width: 100%;
svg { svg {
stroke: rgba(var(--text-color), 0.8); stroke: rgba(var(--text-color), 0.8);
height: 12em; height: 12em;
@ -564,7 +563,7 @@ form {
} }
#sign_in_popup { #sign_in_popup {
h1 { h3 {
margin-top: 2rem; margin-top: 2rem;
} }
@ -643,15 +642,12 @@ form {
margin: 0.3em; margin: 0.3em;
border-radius: 0.4em; border-radius: 0.4em;
color: rgba(var(--text-color), 0.8); color: rgba(var(--text-color), 0.8);
font-size: 0.9em; font-size: 0.8em;
text-transform: uppercase; text-transform: capitalize;
width: 100%; width: 100%;
letter-spacing: 0.08em; font-weight: 600;
h5 { h5 {
font-size: 0.6em;
margin-top: 0.4em; margin-top: 0.4em;
font-weight: 700;
} }
} }
@ -684,46 +680,27 @@ form {
p { p {
margin-bottom: 3rem; margin-bottom: 3rem;
} }
.user-panel{
margin: 0 1.5rem;
}
} }
#user_panel { .user-panel {
position: relative; position: relative;
padding: 1.5rem; padding: 1.5rem;
margin: 0 1.5rem;
border-radius: 0.6rem; border-radius: 0.6rem;
background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), rgba(var(--text-color), 0.8); //background: linear-gradient(160deg, #ffffff10 50%, #00000040 80%), linear-gradient(-120deg, #ffffff10 50%, #00000040 10%), midnightblue;
box-shadow: 0 0.1rem 0.6rem #00000020; background: radial-gradient(circle at top left, #EF6C00 20%, #C51162 30%, #4A148C 40%, #251f44);
box-shadow: 0 0.1rem 0.1rem #00000020, 0 2rem 1rem -1rem #00000040;
color: rgba(var(--foreground-color), 1); color: rgba(var(--foreground-color), 1);
align-self: flex-start;
.icon { .icon {
stroke: rgba(var(--foreground-color), 1); stroke: rgba(var(--foreground-color), 1);
} }
&::before,
&::after {
content: '';
position: absolute;
height: 2rem;
bottom: 0.8rem;
box-shadow: 0 1rem 0.2rem #00000030;
z-index: -1;
border-radius: 0.4rem;
}
&::before {
left: 0;
right: 50%;
transform: rotate(-3deg);
}
&::after {
left: 50%;
right: 0;
transform: rotate(3deg);
}
.copy-row { .copy-row {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
text-shadow: 0.1rem 0.1rem 0.1rem #000000;
} }
.grid { .grid {
@ -737,7 +714,7 @@ form {
} }
} }
#user_type { .user-type {
font-weight: 500; font-weight: 500;
color: rgba(var(--foreground-color), 0.9); color: rgba(var(--foreground-color), 0.9);
} }
@ -838,7 +815,15 @@ sm-tab-header {
position: sticky; position: sticky;
top: 0; top: 0;
background: rgba(var(--foreground-color), 1); background: rgba(var(--foreground-color), 1);
z-index: 1; z-index: 2;
margin-bottom: 1rem;
border-bottom: solid 1px rgba(var(--text-color), 0.2);
}
sm-tab::part(tab){
padding: 0.8rem 0;
}
sm-panel{
width: 100%;
} }
.request { .request {
@ -1088,7 +1073,7 @@ sm-tab-header {
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
button { sm-button {
margin-left: 0; margin-left: 0;
margin-top: 1.5rem; margin-top: 1.5rem;
} }
@ -1115,14 +1100,22 @@ sm-tab-header {
word-spacing: 0.16em; word-spacing: 0.16em;
} }
} }
#upi_txId_section{
.copy-row{
margin-bottom: 1.5rem;
}
}
#send_amount_to_deposit{
margin-bottom: 0 !important;
}
@media only screen and (max-width: 640px) { @media only screen and (max-width: 640px) {
#home_page { #home_page, #deposit{
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-areas: '.''left'; grid-template-areas: '.''left';
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
.left { .left {
grid-area: left; grid-area: left;
} }
@ -1174,11 +1167,6 @@ sm-tab-header {
height: 1.4rem; height: 1.4rem;
width: 1.4rem; width: 1.4rem;
} }
h5 {
font-size: 0.8em;
}
&:hover { &:hover {
.icon { .icon {
stroke: rgba(var(--text-color), 1); stroke: rgba(var(--text-color), 1);
@ -1215,18 +1203,10 @@ sm-tab-header {
} }
} }
#home_page { #home_page, #deposit {
display: grid; display: grid;
gap: 1.5rem; gap: 1.5rem;
grid-template-columns: minmax(0, 1fr) 24rem; grid-template-columns: minmax(0, 1fr) 24rem;
.left {}
}
#activity_page {
sm-tab-header {
margin-bottom: 1rem;
}
} }
} }

897
index.html
View File

File diff suppressed because it is too large Load Diff