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

UI fixes

Browse Source
This commit is contained in:
sairaj mote 2022-03-24 17:47:02 +05:30
parent 29e31eae9b
commit a173ef09dd
4 changed files with 6 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
css/main.css
View File

@ -521,64 +521,6 @@ h3 {
cursor: pointer;
}
textarea {
color: inherit;
width: 100%;
font-size: 1em;
display: flex;
background-color: transparent;
padding: 1em;
border-radius: 0.3rem;
border: none;
font-family: inherit;
transition: box-shadow 0.2s;
outline: none;
caret-color: var(--accent-color, teal);
resize: none;
line-height: 1.6;
}
.textarea {
display: grid;
width: 100%;
align-self: flex-start;
position: relative;
border-radius: 0.3rem;
padding: 1rem 0.8rem;
background-color: rgba(var(--text-color), 0.06);
transition: box-shadow 0.2s;
}
.textarea > * {
padding: 0;
grid-area: 1/1/2/2;
}
.textarea .label {
align-self: flex-start;
pointer-events: none;
opacity: 0.6;
transition: transform 0.2s, color 0.2s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transform-origin: left;
will-change: transform;
}
.textarea.label-active .label {
opacity: 1;
transform: translateY(-60%) scale(0.8);
color: var(--accent-color);
}
.textarea.label-active textarea {
transform: translateY(0.5rem);
}
.textarea:focus-within {
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
}
.textarea:focus-within > * {
box-shadow: none;
}
#show_character_count {
font-size: 0.8rem;
margin-left: auto;

2
css/main.min.css vendored
View File

File diff suppressed because one or more lines are too long

56
css/main.scss
View File

@ -487,62 +487,6 @@ h3 {
cursor: pointer;
}
textarea {
color: inherit;
width: 100%;
font-size: 1em;
display: flex;
background-color: transparent;
padding: 1em;
border-radius: 0.3rem;
border: none;
font-family: inherit;
transition: box-shadow 0.2s;
outline: none;
caret-color: var(--accent-color, teal);
resize: none;
line-height: 1.6;
}
.textarea {
display: grid;
width: 100%;
align-self: flex-start;
position: relative;
border-radius: 0.3rem;
padding: 1rem 0.8rem;
background-color: rgba(var(--text-color), 0.06);
transition: box-shadow 0.2s;
& > * {
padding: 0;
grid-area: 1/1/2/2;
}
.label {
align-self: flex-start;
pointer-events: none;
opacity: 0.6;
transition: transform 0.2s, color 0.2s;
user-select: none;
transform-origin: left;
will-change: transform;
}
&.label-active {
.label {
opacity: 1;
transform: translateY(-60%) scale(0.8);
color: var(--accent-color);
}
textarea {
transform: translateY(0.5rem);
}
}
&:focus-within {
box-shadow: 0 0 0 0.1rem var(--accent-color) inset;
& > * {
box-shadow: none;
}
}
}
#show_character_count {
font-size: 0.8rem;
margin-left: auto;

9
index.html
View File

@ -536,8 +536,8 @@
<h5>Recovered FLO ID</h5>
<sm-copy id="recovered_flo_id"></sm-copy>
</div>
<sm-input id="retrieve_flo_id_field" class="password-field" type="password"
error-text="Invalid private key" placeholder="Private key" required autofocus>
<sm-input id="retrieve_flo_id_field" type="password" error-text="Invalid private key"
placeholder="Private key" class="password-field" required autofocus>
<label slot="right" class="interact">
<input type="checkbox" class="hide" readonly onchange="togglePrivateKeyVisibility(this)">
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@ -606,7 +606,7 @@
</svg>
<h4>Enter sender's private key</h4>
<sm-form>
<sm-input id="get_private_key_field" type="password" required autofocus>
<sm-input id="get_private_key_field" class="password-field " type="password" required autofocus>
<label slot="right" class="interact">
<input type="checkbox" class="hide" readonly onchange="togglePrivateKeyVisibility(this)">
<svg class="icon invisible" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24"
@ -1221,7 +1221,8 @@
function handleMobileChange(e) {
isMobileView = e.matches
}
mobileQuery.addListener(handleMobileChange)
mobileQuery.addEventListener('change', handleMobileChange)
handleMobileChange(mobileQuery)
</script>
<script>