Added FLO ID assets balance in portfolio
This commit is contained in:
sairaj mote
parent
819708a578
commit
483dcc47d6
1
docs/css/back.svg
Normal file
1
docs/css/back.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#ffcdab;}.b{fill:#fff4c5;}</style></defs><title>back</title><path class="a" d="M1343.5-.5c33.54,48.75,50.34,166,277.18,193.18C1808.39,215.21,1899.21,313.38,1920,364c-.33-146.23-.17-218.31-.5-364.54Z"/><path class="b" d="M1343.5-.5a288.26,288.26,0,0,0,159,88.78c48.38,9.32,76.65,13.77,132.58,22.68,93.5,14.9,141.37,56.9,170.42,80.54a466.36,466.36,0,0,1,115,139q-.49-165.49-1-331Z"/></svg>
|
||||
|
After Width: | Height: | Size: 499 B |
33
docs/css/bg-art2.svg
Normal file
33
docs/css/bg-art2.svg
Normal file
@ -0,0 +1,33 @@
|
||||
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<g filter="url(#filter0_d)">
|
||||
<rect x="312" y="323" width="240" height="140" rx="18" transform="rotate(30 312 323)" fill="#1C783B"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d)">
|
||||
<rect x="431.283" y="302" width="240" height="140" rx="18" transform="rotate(50.0235 431.283 302)" fill="#2DBD5E"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d" x="225" y="320" width="301.846" height="265.244" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="-5" dy="9"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d" x="307" y="299" width="285.477" height="297.86" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dx="-5" dy="9"/>
|
||||
<feGaussianBlur stdDeviation="6"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0">
|
||||
<rect width="512" height="512" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
@ -531,7 +531,7 @@ sm-checkbox {
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tooltip .banner {
|
||||
@ -1006,10 +1006,77 @@ sm-checkbox {
|
||||
|
||||
#portfolio {
|
||||
display: grid;
|
||||
width: auto;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-content: flex-start;
|
||||
width: min(60rem, 100%);
|
||||
}
|
||||
|
||||
.personal-asset-balance {
|
||||
align-content: flex-start;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
width: 100%;
|
||||
}
|
||||
.personal-asset-balance:not(:last-of-type) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(1) {
|
||||
background: url("bg-art2.svg") no-repeat bottom right, #c2ffd7;
|
||||
background-size: contain;
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(1) .icon {
|
||||
background-color: rgba(102, 255, 156, 0.5);
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(1) .button {
|
||||
border: solid thin rgba(102, 255, 156, 0.5);
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(2) {
|
||||
background: url("back.svg") no-repeat top right, #fcffa8;
|
||||
background-size: contain;
|
||||
}
|
||||
.personal-asset-balance:nth-of-type(2) .icon {
|
||||
background-color: rgba(255, 234, 0, 0.5);
|
||||
}
|
||||
.personal-asset-balance > .flex {
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
.personal-asset-balance > .flex .icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.personal-asset-balance .button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
padding-right: 0.8rem;
|
||||
justify-self: flex-start;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
transition: box-shadow 0.3s;
|
||||
}
|
||||
.personal-asset-balance .button .icon {
|
||||
height: 1rem;
|
||||
background-color: transparent;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
.personal-asset-balance .button:hover {
|
||||
box-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
|
||||
#personal_rupee_balance span:first-of-type,
|
||||
#personal_flo_balance span:first-of-type {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
#personal_rupee_balance span:last-of-type,
|
||||
#personal_flo_balance span:last-of-type {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.portfolio_actions__wrapper {
|
||||
@ -1030,6 +1097,7 @@ sm-checkbox {
|
||||
#my_assets {
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.balance-card {
|
||||
@ -1335,6 +1403,18 @@ sm-checkbox {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#portfolio_cards_wrapper {
|
||||
overflow-x: auto;
|
||||
-ms-scroll-snap-type: x proximity;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
|
||||
.personal-asset-balance {
|
||||
scroll-snap-align: start;
|
||||
width: min(16rem, 90%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
@ -1501,7 +1581,7 @@ sm-checkbox {
|
||||
|
||||
#portfolio {
|
||||
gap: 1rem 2rem;
|
||||
grid-template-columns: 20rem 24rem;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
}
|
||||
#portfolio__header {
|
||||
grid-column: 1/3;
|
||||
|
||||
2
docs/css/main.min.css
vendored
2
docs/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -501,7 +501,7 @@ sm-checkbox {
|
||||
}
|
||||
.tooltip {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: 20;
|
||||
cursor: pointer;
|
||||
.banner {
|
||||
position: absolute;
|
||||
@ -911,10 +911,76 @@ sm-checkbox {
|
||||
}
|
||||
#portfolio {
|
||||
display: grid;
|
||||
width: auto;
|
||||
gap: 1.5rem;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
align-content: flex-start;
|
||||
width: min(60rem, 100%);
|
||||
}
|
||||
.personal-asset-balance {
|
||||
align-content: flex-start;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
width: 100%;
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
&:nth-of-type(1) {
|
||||
background: url("bg-art2.svg") no-repeat bottom right, hsl(141, 100%, 88%);
|
||||
background-size: contain;
|
||||
.icon {
|
||||
background-color: hsla(141, 100%, 70%, 0.5);
|
||||
}
|
||||
.button {
|
||||
border: solid thin hsla(141, 100%, 70%, 0.5);
|
||||
}
|
||||
}
|
||||
&:nth-of-type(2) {
|
||||
background: url("back.svg") no-repeat top right, hsl(62, 100%, 83%);
|
||||
background-size: contain;
|
||||
.icon {
|
||||
background-color: hsla(55, 100%, 50%, 0.5);
|
||||
}
|
||||
}
|
||||
& > .flex {
|
||||
margin-bottom: 0.3rem;
|
||||
.icon {
|
||||
height: 2rem;
|
||||
width: 2rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.3rem;
|
||||
fill: rgba(0, 0, 0, 0.8);
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 0.5rem;
|
||||
padding-right: 0.8rem;
|
||||
justify-self: flex-start;
|
||||
border-radius: 1rem;
|
||||
background-color: rgba(var(--foreground-color), 1);
|
||||
color: rgba(var(--text-color), 1);
|
||||
transition: box-shadow 0.3s;
|
||||
.icon {
|
||||
height: 1rem;
|
||||
background-color: transparent;
|
||||
margin-right: 0.3rem;
|
||||
}
|
||||
&:hover {
|
||||
box-shadow: 0 0.3rem 0.5rem rgba(0 0 0/ 0.16);
|
||||
}
|
||||
}
|
||||
}
|
||||
#personal_rupee_balance,
|
||||
#personal_flo_balance {
|
||||
span:first-of-type {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
span:last-of-type {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
.portfolio_actions__wrapper {
|
||||
grid-column: span 3;
|
||||
@ -932,6 +998,7 @@ sm-checkbox {
|
||||
#my_assets {
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
.balance-card {
|
||||
display: grid;
|
||||
@ -1184,6 +1251,15 @@ sm-checkbox {
|
||||
#price_chart_container {
|
||||
flex: 1;
|
||||
}
|
||||
#portfolio_cards_wrapper {
|
||||
overflow-x: auto;
|
||||
scroll-snap-type: x proximity;
|
||||
}
|
||||
.personal-asset-balance {
|
||||
scroll-snap-align: start;
|
||||
width: min(16rem, 90%);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.hide-on-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
@ -1336,7 +1412,7 @@ sm-checkbox {
|
||||
}
|
||||
#portfolio {
|
||||
gap: 1rem 2rem;
|
||||
grid-template-columns: 20rem 24rem;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
&__header {
|
||||
grid-column: 1/3;
|
||||
padding-bottom: 1rem;
|
||||
|
||||
122
docs/index.html
122
docs/index.html
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user