continued UI overhaul
This commit is contained in:
sairaj mote
parent
055b07761e
commit
443925e4f5
221
css/main.css
221
css/main.css
@ -14,8 +14,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--accent-color: #3D5AFE;
|
--accent-color: #6300d4;
|
||||||
--secondary-color: #ffac2e;
|
|
||||||
--text-color: 17, 17, 17;
|
--text-color: 17, 17, 17;
|
||||||
--text-color-light: 100, 100, 100;
|
--text-color-light: 100, 100, 100;
|
||||||
--foreground-color: 255, 255, 255;
|
--foreground-color: 255, 255, 255;
|
||||||
@ -27,8 +26,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
body[data-theme=dark] {
|
body[data-theme=dark] {
|
||||||
--accent-color:#657cff;
|
--accent-color:#d7b5ff;
|
||||||
--secondary-color: #d60739;
|
|
||||||
--text-color: 240, 240, 240;
|
--text-color: 240, 240, 240;
|
||||||
--text-color-light: 170, 170, 170;
|
--text-color-light: 170, 170, 170;
|
||||||
--foreground-color: 20, 20, 20;
|
--foreground-color: 20, 20, 20;
|
||||||
@ -155,38 +153,35 @@ sm-textarea {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.popup__header__title {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(var(--text-color), 0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-icon {
|
.close-icon {
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__section {
|
#main_card {
|
||||||
backdrop-filter: blur(1rem);
|
height: 100%;
|
||||||
}
|
grid-row: 1/3;
|
||||||
.home_page__section--left {
|
|
||||||
background-color: rgba(var(--foreground-color), 0.8);
|
|
||||||
}
|
|
||||||
.home_page__section--right {
|
|
||||||
overflow: hidden;
|
|
||||||
background-color: rgba(var(--foreground-color), 0.9);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__header {
|
#main_header {
|
||||||
gap: 0.2rem 1rem;
|
grid-area: header;
|
||||||
}
|
height: max-content;
|
||||||
.home_page__header--left {
|
gap: 0.2rem 0.5rem;
|
||||||
padding: 1.5rem 0.7rem 1.5rem 1rem;
|
padding: 1.5rem 0.7rem 1.5rem 1rem;
|
||||||
grid-template-columns: 1fr auto;
|
grid-template-columns: 1fr auto;
|
||||||
grid-template-areas: "company setting" "app setting";
|
grid-template-areas: "company setting" "app setting";
|
||||||
}
|
}
|
||||||
.home_page__header--right {
|
|
||||||
padding: 1.5rem 1rem;
|
#page_container {
|
||||||
|
grid-area: page;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__company-name {
|
.header__company-name {
|
||||||
@ -209,36 +204,29 @@ sm-textarea {
|
|||||||
padding: 0.8rem;
|
padding: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__settings-button__icon {
|
#main_navbar {
|
||||||
transform: rotate(90deg);
|
grid-area: nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__nav {
|
.navbar__item {
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
gap: 1rem;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
|
||||||
width: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button__icon {
|
|
||||||
height: 3rem;
|
|
||||||
width: 3rem;
|
|
||||||
padding: 0.8rem;
|
padding: 0.8rem;
|
||||||
border-radius: 0.8rem;
|
border-radius: 0.5rem;
|
||||||
margin-bottom: 0.8rem;
|
}
|
||||||
|
.navbar__item--active .navbar__item__icon {
|
||||||
fill: var(--accent-color);
|
fill: var(--accent-color);
|
||||||
background: rgba(var(--foreground-color), 1);
|
}
|
||||||
|
.navbar__item--active .navbar__item__title {
|
||||||
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button__name {
|
.navbar__item__icon {
|
||||||
|
margin-right: 1rem;
|
||||||
|
fill: rgba(var(--text-color), 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar__item__title {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(var(--text-color), 0.7);
|
color: rgba(var(--text-color), 0.7);
|
||||||
@ -265,8 +253,14 @@ sm-textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.header__title {
|
.header__title {
|
||||||
font-weight: 500;
|
font-size: 1.1rem;
|
||||||
color: rgba(var(--text-color), 0.7);
|
font-weight: 700;
|
||||||
|
color: rgba(var(--text-color), 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
#send_flo_form {
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#search_contacts {
|
#search_contacts {
|
||||||
@ -313,13 +307,14 @@ sm-textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#contacts_container {
|
#contacts_container {
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 1rem;
|
flex-wrap: wrap;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-content: flex-start;
|
min-height: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0 1rem 6rem 1rem;
|
align-content: flex-start;
|
||||||
|
padding: 0 0 6rem 1rem;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -327,10 +322,12 @@ sm-textarea {
|
|||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: calc(50% - 1rem);
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1rem;
|
align-items: center;
|
||||||
min-height: 8rem;
|
margin: 0 1rem 1rem 0;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -339,13 +336,16 @@ sm-textarea {
|
|||||||
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.contact-hidden-options {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
.contact-card__checkbox {
|
.contact-card__checkbox {
|
||||||
--border-radius: 0.5rem;
|
--border-radius: 0.5rem;
|
||||||
--border-color: rgba(var(--text-color), 0.6);
|
--border-color: rgba(var(--text-color), 0.6);
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-card__initial {
|
.contact-card__initial {
|
||||||
@ -357,13 +357,14 @@ sm-textarea {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
margin-bottom: 1.5rem;
|
margin: 1.5rem 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: rgba(var(--text-color), 0.1);
|
background-color: rgba(var(--text-color), 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact-card__name {
|
.contact-card__name {
|
||||||
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -372,11 +373,6 @@ sm-textarea {
|
|||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
|
||||||
.contact__grid {
|
|
||||||
gap: 1rem;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contact-card__more {
|
.contact-card__more {
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
@ -392,27 +388,41 @@ sm-textarea {
|
|||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page__header {
|
||||||
|
padding: 1rem 1rem 2rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page__title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (max-width: 640px) {
|
@media all and (max-width: 640px) {
|
||||||
#main_card {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fab {
|
#main_card {
|
||||||
position: fixed;
|
min-height: 100%;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
grid-template-areas: "header" "page" "nav";
|
||||||
|
background: rgba(var(--foreground-color), 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
#home_page {
|
#main_navbar {
|
||||||
height: 100%;
|
flex-direction: row;
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__section--right {
|
.navbar__item {
|
||||||
align-content: flex-start;
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__nav {
|
.navbar__item__icon {
|
||||||
padding: 0.5rem 1rem 2rem 1rem;
|
margin: 0 0 0.5rem 0;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
}
|
||||||
|
|
||||||
|
.navbar__item__icon {
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media all and (min-width: 640px) {
|
@media all and (min-width: 640px) {
|
||||||
@ -430,40 +440,51 @@ sm-textarea {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#main_card {
|
#main_card {
|
||||||
|
position: relative;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
grid-template-columns: 15rem 1fr;
|
||||||
|
grid-template-rows: min-content 1fr;
|
||||||
|
grid-template-areas: "header page" "nav page";
|
||||||
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
|
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
|
||||||
|
background: rgba(var(--foreground-color), 0.9);
|
||||||
}
|
}
|
||||||
|
|
||||||
#home_page {
|
#main_header {
|
||||||
|
padding: 1.5rem 1.2rem 1.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main_navbar {
|
||||||
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
padding: 0 1rem;
|
||||||
grid-template-columns: 20rem 1fr;
|
align-content: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__section--left {
|
#page_container {
|
||||||
border-radius: 0.5rem 0 0 0.5rem;
|
position: relative;
|
||||||
|
grid-row: 1/3;
|
||||||
}
|
}
|
||||||
.home_page__section--right {
|
#page_container::after {
|
||||||
grid-template-rows: auto 1fr;
|
content: "";
|
||||||
border-radius: 0 0.5rem 0.5rem 0;
|
position: absolute;
|
||||||
box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.06);
|
left: 0;
|
||||||
|
height: 65%;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(var(--text-color), 0.2);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
|
|
||||||
.home_page__header--left {
|
.page__header {
|
||||||
padding: 1.8rem 1.7rem 2rem 2.5rem;
|
padding: 2rem 1.5rem;
|
||||||
}
|
|
||||||
.home_page__header--right {
|
|
||||||
padding: 2rem 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.home_page__nav {
|
|
||||||
padding: 0 2.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#contacts_container {
|
#contacts_container {
|
||||||
padding: 0 2.5rem 8rem 2.5rem;
|
padding: 0 1rem 8rem 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#add_contact_button {
|
#add_contact_button {
|
||||||
@ -477,11 +498,15 @@ sm-textarea {
|
|||||||
width: 65vw;
|
width: 65vw;
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.contact-card {
|
||||||
|
width: calc(33.33% - 1rem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media all and (min-width: 1920px) {
|
@media all and (min-width: 1920px) {
|
||||||
#main_card {
|
#main_card {
|
||||||
width: 65vw;
|
width: 60vw;
|
||||||
height: 70vh;
|
height: 65vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (any-hover: hover) {
|
@media (any-hover: hover) {
|
||||||
|
|||||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
227
css/main.scss
227
css/main.scss
@ -12,8 +12,7 @@
|
|||||||
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
--ease-out-overshhot: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||||
}
|
}
|
||||||
body{
|
body{
|
||||||
--accent-color: #3D5AFE;
|
--accent-color: #6300d4;
|
||||||
--secondary-color: #ffac2e;
|
|
||||||
--text-color: 17, 17, 17;
|
--text-color: 17, 17, 17;
|
||||||
--text-color-light: 100, 100, 100;
|
--text-color-light: 100, 100, 100;
|
||||||
--foreground-color: 255, 255, 255;
|
--foreground-color: 255, 255, 255;
|
||||||
@ -24,8 +23,7 @@ body{
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
body[data-theme='dark']{
|
body[data-theme='dark']{
|
||||||
--accent-color:#657cff;
|
--accent-color:#d7b5ff;
|
||||||
--secondary-color: #d60739;
|
|
||||||
--text-color: 240, 240, 240;
|
--text-color: 240, 240, 240;
|
||||||
--text-color-light: 170, 170, 170;
|
--text-color-light: 170, 170, 170;
|
||||||
--foreground-color: 20, 20, 20;
|
--foreground-color: 20, 20, 20;
|
||||||
@ -129,38 +127,31 @@ sm-textarea{
|
|||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.popup__header__title{
|
|
||||||
font-size: 1.1rem;
|
|
||||||
font-weight: 500;
|
|
||||||
color: rgba(var(--text-color), 0.8);
|
|
||||||
}
|
|
||||||
.close-icon{
|
.close-icon{
|
||||||
height: 2rem;
|
height: 2rem;
|
||||||
width: 2rem;
|
width: 2rem;
|
||||||
}
|
}
|
||||||
#main_card{
|
#main_card{
|
||||||
|
height: 100%;
|
||||||
|
grid-row: 1/3;
|
||||||
}
|
}
|
||||||
.home_page__section{
|
#main_header{
|
||||||
backdrop-filter: blur(1rem);
|
grid-area: header;
|
||||||
&--left{
|
height: max-content;
|
||||||
background-color: rgba(var(--foreground-color), 0.8);
|
gap: 0.2rem 0.5rem;
|
||||||
}
|
padding: 1.5rem 0.7rem 1.5rem 1rem;
|
||||||
&--right{
|
grid-template-columns: 1fr auto;
|
||||||
overflow: hidden;
|
grid-template-areas: 'company setting' 'app setting';
|
||||||
background-color: rgba(var(--foreground-color), 0.9);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.home_page__header{
|
#page_container{
|
||||||
gap: 0.2rem 1rem;
|
grid-area: page;
|
||||||
&--left{
|
}
|
||||||
padding: 1.5rem 0.7rem 1.5rem 1rem;
|
.page{
|
||||||
grid-template-columns: 1fr auto;
|
position: relative;
|
||||||
grid-template-areas: 'company setting' 'app setting';
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
&--right{
|
height: 100%;
|
||||||
padding: 1.5rem 1rem;
|
width: 100%;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.header__company-name{
|
.header__company-name{
|
||||||
grid-area: company;
|
grid-area: company;
|
||||||
@ -179,34 +170,30 @@ sm-textarea{
|
|||||||
grid-area: setting;
|
grid-area: setting;
|
||||||
padding: 0.8rem;
|
padding: 0.8rem;
|
||||||
}
|
}
|
||||||
.header__settings-button__icon{
|
#main_navbar{
|
||||||
transform: rotate(90deg);
|
grid-area: nav;
|
||||||
}
|
}
|
||||||
.home_page__nav{
|
.navbar__item{
|
||||||
padding: 1.5rem 1rem;
|
|
||||||
gap: 1rem;
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-button{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
padding: 0.8rem;
|
||||||
width: 4rem;
|
border-radius: 0.5rem;
|
||||||
|
&--active{
|
||||||
|
|
||||||
|
.navbar__item__icon{
|
||||||
|
fill: var(--accent-color);
|
||||||
|
}
|
||||||
|
.navbar__item__title{
|
||||||
|
color: var(--accent-color);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-button__icon{
|
.navbar__item__icon{
|
||||||
height: 3rem;
|
margin-right: 1rem;
|
||||||
width: 3rem;
|
fill: rgba(var(--text-color), 0.7);
|
||||||
padding: 0.8rem;
|
|
||||||
border-radius: 0.8rem;
|
|
||||||
margin-bottom: 0.8rem;
|
|
||||||
fill: var(--accent-color);
|
|
||||||
background: rgba(var(--foreground-color), 1);
|
|
||||||
}
|
}
|
||||||
.nav-button__name{
|
.navbar__item__title{
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: rgba(var(--text-color), 0.7);
|
color: rgba(var(--text-color), 0.7);
|
||||||
@ -227,13 +214,21 @@ sm-textarea{
|
|||||||
fill: white;
|
fill: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#base_header{
|
#base_header{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.header__title{
|
.header__title{
|
||||||
font-weight: 500;
|
font-size: 1.1rem;
|
||||||
color: rgba(var(--text-color), 0.7);
|
font-weight: 700;
|
||||||
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
|
#send_flo_form{
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#search_contacts{
|
#search_contacts{
|
||||||
width: 14rem;
|
width: 14rem;
|
||||||
--padding: 0.5rem 0.6rem;
|
--padding: 0.5rem 0.6rem;
|
||||||
@ -274,23 +269,26 @@ sm-textarea{
|
|||||||
}
|
}
|
||||||
|
|
||||||
#contacts_container{
|
#contacts_container{
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 1rem;
|
flex-wrap: wrap;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
align-content: flex-start;
|
min-height: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
padding: 0 1rem 6rem 1rem;
|
align-content: flex-start;
|
||||||
|
padding: 0 0 6rem 1rem;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
||||||
}
|
}
|
||||||
.contact-card{
|
.contact-card{
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: calc(50% - 1rem);
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1rem;
|
align-items: center;
|
||||||
min-height: 8rem;
|
margin: 0 1rem 1rem 0;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
flex-shrink: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-self: flex-start;
|
align-self: flex-start;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -298,13 +296,15 @@ sm-textarea{
|
|||||||
background: rgba(var(--foreground-color), 1);
|
background: rgba(var(--foreground-color), 1);
|
||||||
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.06);
|
||||||
}
|
}
|
||||||
|
.contact-hidden-options{
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
}
|
||||||
.contact-card__checkbox{
|
.contact-card__checkbox{
|
||||||
--border-radius: 0.5rem;
|
--border-radius: 0.5rem;
|
||||||
--border-color: rgba(var(--text-color), 0.6);
|
--border-color: rgba(var(--text-color), 0.6);
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
margin: 1rem;
|
|
||||||
}
|
}
|
||||||
.contact-card__initial{
|
.contact-card__initial{
|
||||||
width: 3rem;
|
width: 3rem;
|
||||||
@ -315,12 +315,13 @@ sm-textarea{
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
border-radius: 1rem;
|
border-radius: 1rem;
|
||||||
margin-bottom: 1.5rem;
|
margin: 1.5rem 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: rgba(var(--text-color), 0.1);
|
background-color: rgba(var(--text-color), 0.1);
|
||||||
}
|
}
|
||||||
.contact-card__name{
|
.contact-card__name{
|
||||||
|
text-align: center;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
@ -328,10 +329,6 @@ sm-textarea{
|
|||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
color: rgba(var(--text-color), 0.8);
|
color: rgba(var(--text-color), 0.8);
|
||||||
}
|
}
|
||||||
.contact__grid{
|
|
||||||
gap: 1rem;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
}
|
|
||||||
.contact-card__more{
|
.contact-card__more{
|
||||||
padding: 0.4rem;
|
padding: 0.4rem;
|
||||||
}
|
}
|
||||||
@ -346,24 +343,36 @@ sm-textarea{
|
|||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.page__header{
|
||||||
|
padding: 1rem 1rem 2rem 1rem;
|
||||||
|
}
|
||||||
|
.page__title{
|
||||||
|
font-size: 1.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
// mobile only styles
|
// mobile only styles
|
||||||
@media all and (max-width: 640px){
|
@media all and (max-width: 640px){
|
||||||
#main_card{
|
body{
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
.fab{
|
#main_card{
|
||||||
position: fixed;
|
min-height: 100%;
|
||||||
|
grid-template-rows: auto 1fr auto;
|
||||||
|
grid-template-areas: 'header' 'page' 'nav';
|
||||||
|
background: rgba(var(--foreground-color), 0.9);
|
||||||
}
|
}
|
||||||
#home_page{
|
#main_navbar{
|
||||||
height: 100%;
|
flex-direction: row;
|
||||||
grid-template-rows: auto 1fr;
|
|
||||||
}
|
}
|
||||||
.home_page__section--right{
|
.navbar__item{
|
||||||
align-content: flex-start;
|
flex: 1;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.home_page__nav{
|
.navbar__item__icon{
|
||||||
padding: 0.5rem 1rem 2rem 1rem;
|
margin: 0 0 0.5rem 0;
|
||||||
grid-template-columns: repeat(4, 1fr);
|
}
|
||||||
|
.navbar__item__icon{
|
||||||
|
margin: 0 0 0.5rem 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -380,39 +389,46 @@ sm-textarea{
|
|||||||
padding: 1rem 1.5rem 0 1rem;
|
padding: 1rem 1.5rem 0 1rem;
|
||||||
}
|
}
|
||||||
#main_card{
|
#main_card{
|
||||||
|
position: relative;
|
||||||
width: 80vw;
|
width: 80vw;
|
||||||
height: 80vh;
|
height: 80vh;
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
backdrop-filter: blur(1rem);
|
||||||
|
grid-template-columns: 15rem 1fr;
|
||||||
|
grid-template-rows: min-content 1fr;
|
||||||
|
grid-template-areas: 'header page' 'nav page';
|
||||||
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
|
box-shadow: 0 1.5rem 1.5rem rgba(0, 0, 0, 0.16);
|
||||||
|
background: rgba(var(--foreground-color), 0.9);
|
||||||
}
|
}
|
||||||
#home_page{
|
#main_header{
|
||||||
|
padding: 1.5rem 1.2rem 1.5rem 2rem;
|
||||||
|
}
|
||||||
|
#main_navbar{
|
||||||
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-y: auto;
|
padding: 0 1rem;
|
||||||
grid-template-columns: 20rem 1fr;
|
align-content: flex-start;
|
||||||
}
|
}
|
||||||
.home_page__section{
|
#page_container{
|
||||||
&--left{
|
position: relative;
|
||||||
border-radius: 0.5rem 0 0 0.5rem;
|
grid-row: 1/3;
|
||||||
}
|
&::after{
|
||||||
&--right{
|
content: '';
|
||||||
grid-template-rows: auto 1fr;
|
position: absolute;
|
||||||
border-radius: 0 0.5rem 0.5rem 0;
|
left: 0;
|
||||||
box-shadow: -0.5rem 0 1rem rgba(0, 0, 0, 0.06);
|
height: 65%;
|
||||||
|
width: 1px;
|
||||||
|
background: rgba(var(--text-color), 0.2);
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.home_page__header{
|
.page__header{
|
||||||
&--left{
|
padding: 2rem 1.5rem;
|
||||||
padding: 1.8rem 1.7rem 2rem 2.5rem;
|
|
||||||
}
|
|
||||||
&--right{
|
|
||||||
padding: 2rem 2.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.home_page__nav{
|
|
||||||
padding: 0 2.5rem;
|
|
||||||
}
|
}
|
||||||
#contacts_container{
|
#contacts_container{
|
||||||
padding: 0 2.5rem 8rem 2.5rem;
|
padding: 0 1rem 8rem 2rem;
|
||||||
}
|
}
|
||||||
#add_contact_button{
|
#add_contact_button{
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -425,11 +441,14 @@ sm-textarea{
|
|||||||
width: 65vw;
|
width: 65vw;
|
||||||
height: 85vh;
|
height: 85vh;
|
||||||
}
|
}
|
||||||
|
.contact-card{
|
||||||
|
width: calc(33.33% - 1rem);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@media all and (min-width: 1920px){
|
@media all and (min-width: 1920px){
|
||||||
#main_card{
|
#main_card{
|
||||||
width: 65vw;
|
width: 60vw;
|
||||||
height: 70vh;
|
height: 65vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@media (any-hover: hover){
|
@media (any-hover: hover){
|
||||||
|
|||||||
125
new.html
125
new.html
@ -35,14 +35,6 @@
|
|||||||
</sm-popup>
|
</sm-popup>
|
||||||
<sm-notifications id="notification_drawer"></sm-notifications>
|
<sm-notifications id="notification_drawer"></sm-notifications>
|
||||||
|
|
||||||
<!-- Popups -->
|
|
||||||
|
|
||||||
<sm-popup id="check_balance_popup">
|
|
||||||
<h2 id="current_balance">0</h2>
|
|
||||||
<sm-input placeholder="FLO address" floID required></sm-input>
|
|
||||||
<sm-button variant="primary" disable>Check</sm-button>
|
|
||||||
</sm-popup>
|
|
||||||
|
|
||||||
<sm-popup id="contact_popup">
|
<sm-popup id="contact_popup">
|
||||||
<h3 id="contact_popup__initial">S</h3>
|
<h3 id="contact_popup__initial">S</h3>
|
||||||
<h4 id="contact_popup__name">Sairaj Mote</h4>
|
<h4 id="contact_popup__name">Sairaj Mote</h4>
|
||||||
@ -51,73 +43,41 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</sm-popup>
|
</sm-popup>
|
||||||
|
|
||||||
<sm-popup id="send_flo_popup" open>
|
|
||||||
<header slot="header" class="popup__header">
|
|
||||||
<button class="popup__header__close">
|
|
||||||
<svg class="icon close-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"/></svg>
|
|
||||||
</button>
|
|
||||||
<h4 class="popup__header__title">Send FLO</h4>
|
|
||||||
</header>
|
|
||||||
<sm-input id="sender_adddress" placeholder="Sender's address" animate></sm-input>
|
|
||||||
<sm-input id="receiver_adddress" placeholder="Receiver's address" animate></sm-input>
|
|
||||||
<sm-input id="sent_amount" type="number" placeholder="Amount" animate></sm-input>
|
|
||||||
<sm-textarea id="sent_flo_data" rows="4" placeholder="FLO data"></sm-textarea>
|
|
||||||
<sm-button variant="primary" disable>Send</sm-button>
|
|
||||||
</sm-popup>
|
|
||||||
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
||||||
<main id="main_card">
|
<main id="main_card" class="grid">
|
||||||
<div id="home_page" class="page grid">
|
<header id="main_header" class="grid align-center">
|
||||||
<section class="home_page__section home_page__section--left">
|
<h5 class="header__company-name">RanhiMall</h5>
|
||||||
<header class="home_page__header home_page__header--left grid align-center">
|
<h4 class="header__app-name">FLO Web Wallet</h4>
|
||||||
<h5 class="header__company-name">RanhiMall</h5>
|
<button class="header__settings-button" title="settings">
|
||||||
<h4 class="header__app-name">FLO Web Wallet</h4>
|
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5.334 4.545a9.99 9.99 0 0 1 3.542-2.048A3.993 3.993 0 0 0 12 3.999a3.993 3.993 0 0 0 3.124-1.502 9.99 9.99 0 0 1 3.542 2.048 3.993 3.993 0 0 0 .262 3.454 3.993 3.993 0 0 0 2.863 1.955 10.043 10.043 0 0 1 0 4.09c-1.16.178-2.23.86-2.863 1.955a3.993 3.993 0 0 0-.262 3.455 9.99 9.99 0 0 1-3.542 2.047A3.993 3.993 0 0 0 12 20a3.993 3.993 0 0 0-3.124 1.502 9.99 9.99 0 0 1-3.542-2.047 3.993 3.993 0 0 0-.262-3.455 3.993 3.993 0 0 0-2.863-1.954 10.043 10.043 0 0 1 0-4.091 3.993 3.993 0 0 0 2.863-1.955 3.993 3.993 0 0 0 .262-3.454zM13.5 14.597a3 3 0 1 0-3-5.196 3 3 0 0 0 3 5.196z"/></svg>
|
||||||
<button class="header__settings-button" title="settings">
|
</button>
|
||||||
<svg class="icon header__settings-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
</header>
|
||||||
<g>
|
<nav id="main_navbar" class="flex">
|
||||||
<path fill="none" d="M0 0h24v24H0z"/>
|
<button id="home_button" class="navbar__item navbar__item--active">
|
||||||
<path d="M12 1l9.5 5.5v11L12 23l-9.5-5.5v-11L12 1zm0 14a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
|
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
|
||||||
</g>
|
<span class="navbar__item__title">Dashboard</span>
|
||||||
</svg>
|
</button>
|
||||||
</button>
|
<button id="send_flo_button" class="navbar__item">
|
||||||
</header>
|
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/></svg>
|
||||||
<nav class="home_page__nav grid">
|
<span class="navbar__item__title">Send FLO</span>
|
||||||
<button id="send_flo_button" class="nav-button">
|
</button>
|
||||||
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
<button id="check_balance_button" class="navbar__item">
|
||||||
<g>
|
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 9h19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9zm1-6h15v4H2V4a1 1 0 0 1 1-1zm12 11v2h3v-2h-3z"/></svg>
|
||||||
<path fill="none" d="M0 0h24v24H0z"/>
|
<span class="navbar__item__title">Check balance</span>
|
||||||
<path d="M1.946 9.315c-.522-.174-.527-.455.01-.634l19.087-6.362c.529-.176.832.12.684.638l-5.454 19.086c-.15.529-.455.547-.679.045L12 14l6-8-8 6-8.054-2.685z"/>
|
</button>
|
||||||
</g>
|
<button id="get_flo_button" class="navbar__item">
|
||||||
</svg>
|
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
|
||||||
<span class="nav-button__name">Send FLO</span>
|
<span class="navbar__item__title">Get FLO address</span>
|
||||||
</button>
|
</button>
|
||||||
<button id="check_balance_button" onclick="showPopup('check_balance_popup')" class="nav-button">
|
<button id="recover_flo_button" class="navbar__item hide-completely">
|
||||||
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
<svg class="icon navbar__item__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M10.313 11.566l7.94-7.94 2.121 2.121-1.414 1.414 2.121 2.121-3.535 3.536-2.121-2.121-2.99 2.99a5.002 5.002 0 0 1-7.97 5.849 5 5 0 0 1 5.848-7.97zm-.899 5.848a2 2 0 1 0-2.828-2.828 2 2 0 0 0 2.828 2.828z"/></svg>
|
||||||
<g>
|
<span class="navbar__item__title">Recover FLO address</span>
|
||||||
<path fill="none" d="M0 0h24v24H0z"/>
|
</button>
|
||||||
<path d="M22 6h-7a6 6 0 1 0 0 12h7v2a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v2zm-7 2h8v8h-8a4 4 0 1 1 0-8zm0 3v2h3v-2h-3z"/>
|
</nav>
|
||||||
</g>
|
<div id="page_container" class="flex">
|
||||||
</svg>
|
<section class="page">
|
||||||
<span class="nav-button__name">Check balance</span>
|
<header class="page__header flex direction-column">
|
||||||
</button>
|
|
||||||
<button id="get_flo_button" class="nav-button">
|
|
||||||
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0H24V24H0z"/><path d="M6 21.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5c1.585 0 2.924 1.054 3.355 2.5H15v-2h2V9.242L14.757 7H9V9H3V3h6v2h5.757L18 1.756 22.243 6 19 9.241V15L21 15v6h-6v-2H9.355c-.43 1.446-1.77 2.5-3.355 2.5zm0-5c-.828 0-1.5.672-1.5 1.5s.672 1.5 1.5 1.5 1.5-.672 1.5-1.5-.672-1.5-1.5-1.5zm13 .5h-2v2h2v-2zM18 4.586L16.586 6 18 7.414 19.414 6 18 4.586zM7 5H5v2h2V5z"/></svg>
|
|
||||||
<span class="nav-button__name">Get FLO address</span>
|
|
||||||
</button>
|
|
||||||
<button id="recover_flo_button" class="nav-button">
|
|
||||||
<svg class="icon nav-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
||||||
<g>
|
|
||||||
<path fill="none" d="M0 0h24v24H0z"/>
|
|
||||||
<path d="M8 7v4L2 6l6-5v4h5a8 8 0 1 1 0 16H4v-2h9a6 6 0 1 0 0-12H8z"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<span class="nav-button__name">Recover FLO address</span>
|
|
||||||
</button>
|
|
||||||
</nav>
|
|
||||||
</section>
|
|
||||||
<section class="home_page__section home_page__section--right grid">
|
|
||||||
<header class="home_page__header home_page__header--right flex direction-column">
|
|
||||||
<div id="base_header" class="flex space-between align-center">
|
<div id="base_header" class="flex space-between align-center">
|
||||||
<h4 class="header__title">Saved addresses</h4>
|
<h4 class="header__title">Saved addresses</h4>
|
||||||
<sm-input id="search_contacts" placeholder="Search" type="search">
|
<sm-input id="search_contacts" placeholder="Search" type="search">
|
||||||
@ -147,14 +107,14 @@
|
|||||||
</header>
|
</header>
|
||||||
<ul id="contacts_container">
|
<ul id="contacts_container">
|
||||||
<li class="contact-card" data-flo-id="f1234">
|
<li class="contact-card" data-flo-id="f1234">
|
||||||
<sm-checkbox class="contact-card__checkbox"></sm-checkbox>
|
<div class="contact-hidden-options flex space-between align-center">
|
||||||
<h3 class="contact-card__initial">S</h3>
|
<sm-checkbox class="contact-card__checkbox"></sm-checkbox>
|
||||||
<div class="grid contact__grid align-center">
|
<button class="contact-card__more" aria-label="Contact details">
|
||||||
<h4 class="contact-card__name">Sairaj</h4>
|
|
||||||
<button class="contact-card__more">
|
|
||||||
<svg class="icon more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
<svg class="icon more-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
<h3 class="contact-card__initial">S</h3>
|
||||||
|
<h4 class="contact-card__name">Sairaj</h4>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<button id="add_contact_button" class="fab" title="Add FLO address as a contact to monitor">
|
<button id="add_contact_button" class="fab" title="Add FLO address as a contact to monitor">
|
||||||
@ -166,6 +126,15 @@
|
|||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</section>
|
</section>
|
||||||
|
<section id="send_flo_page" class="page hide-completely">
|
||||||
|
<form id="send_flo_form" class="grid" onsubmit="return false">
|
||||||
|
<sm-input id="sender_adddress" placeholder="Sender's address" required></sm-input>
|
||||||
|
<sm-input id="receiver_adddress" placeholder="Receiver's address" required></sm-input>
|
||||||
|
<sm-input id="sent_amount" class="amount-input" type="number" step="0.0000001" placeholder="Amount" required></sm-input>
|
||||||
|
<sm-textarea id="sent_flo_data" placeholder="FLO data" rows="4" required></sm-textarea>
|
||||||
|
<sm-button variant="primary" disable>Send</sm-button>
|
||||||
|
</form>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<script src="script/components.js"></script>
|
<script src="script/components.js"></script>
|
||||||
|
|||||||
@ -195,6 +195,7 @@ border: none;
|
|||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
--font-size: 1rem;
|
||||||
--border-radius: 0.3rem;
|
--border-radius: 0.3rem;
|
||||||
--padding: 0.7rem 1rem;
|
--padding: 0.7rem 1rem;
|
||||||
--background: rgba(var(--text-color), 0.06);
|
--background: rgba(var(--text-color), 0.06);
|
||||||
@ -262,7 +263,7 @@ border: none;
|
|||||||
.label {
|
.label {
|
||||||
opacity: .7;
|
opacity: .7;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 1rem;
|
font-size: var(--font-size);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
-webkit-transition: -webkit-transform 0.3s;
|
-webkit-transition: -webkit-transform 0.3s;
|
||||||
@ -300,7 +301,7 @@ border: none;
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
input{
|
input{
|
||||||
font-size: 1rem;
|
font-size: var(--font-size);
|
||||||
border: none;
|
border: none;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
outline: none;
|
outline: none;
|
||||||
@ -510,13 +511,17 @@ customElements.define('sm-input',
|
|||||||
this.max = parseInt(maxValue)
|
this.max = parseInt(maxValue)
|
||||||
}
|
}
|
||||||
if (this.hasAttribute('minlength')) {
|
if (this.hasAttribute('minlength')) {
|
||||||
let minValue = this.getAttribute('minlength')
|
const minValue = this.getAttribute('minlength')
|
||||||
this.input.setAttribute('minlength', minValue)
|
this.input.setAttribute('minlength', minValue)
|
||||||
}
|
}
|
||||||
if (this.hasAttribute('maxlength')) {
|
if (this.hasAttribute('maxlength')) {
|
||||||
let maxValue = this.getAttribute('maxlength')
|
const maxValue = this.getAttribute('maxlength')
|
||||||
this.input.setAttribute('maxlength', maxValue)
|
this.input.setAttribute('maxlength', maxValue)
|
||||||
}
|
}
|
||||||
|
if (this.hasAttribute('step')) {
|
||||||
|
const steps = this.getAttribute('step')
|
||||||
|
this.input.setAttribute('step', steps)
|
||||||
|
}
|
||||||
if (this.hasAttribute('pattern')) {
|
if (this.hasAttribute('pattern')) {
|
||||||
this.input.setAttribute('pattern', this.getAttribute('pattern'))
|
this.input.setAttribute('pattern', this.getAttribute('pattern'))
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user