Browse Source

Fix visibility icon on password page

Fix popup buttons and description overflow
master
morethanwords 4 years ago
parent
commit
a1c512a96b
  1. 2
      src/index.hbs
  2. 2
      src/pages/pagePassword.ts
  3. 8
      src/scss/partials/pages/_password.scss
  4. 3
      src/scss/partials/popups/_peer.scss
  5. 3
      src/scss/partials/popups/_popup.scss

2
src/index.hbs

@ -95,7 +95,7 @@ @@ -95,7 +95,7 @@
<div class="input-field">
<input type="password" name="password" id="password" autocomplete="off" required />
<label for="password">Password</label>
<span class="toggle-visible tgico-eye1"></span>
<span class="toggle-visible tgico"></span>
</div>
<button class="btn-primary rp">NEXT</button>
</div>

2
src/pages/pagePassword.ts

@ -57,7 +57,7 @@ let onFirstMount = (): Promise<any> => { @@ -57,7 +57,7 @@ let onFirstMount = (): Promise<any> => {
cancelEvent(e);
passwordVisible = !passwordVisible;
this.classList.toggle('tgico-eye2', passwordVisible);
this.classList.toggle('eye-hidden', passwordVisible);
if(passwordVisible) {
passwordInput.setAttribute('type', 'text');
animation.setDirection(1);

8
src/scss/partials/pages/_password.scss

@ -30,6 +30,14 @@ @@ -30,6 +30,14 @@
transition: .2s;
padding: .5rem;
&:before {
content: $tgico-eye1;
}
&.eye-hidden:before {
content: $tgico-eye2;
}
html.no-touch &:hover {
color: #000;
}

3
src/scss/partials/popups/_peer.scss

@ -27,6 +27,9 @@ @@ -27,6 +27,9 @@
margin-bottom: 1.625rem;
min-width: 15rem;
max-width: fit-content;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-word;
}
&-buttons {

3
src/scss/partials/popups/_popup.scss

@ -100,6 +100,9 @@ @@ -100,6 +100,9 @@
color: $color-blue;
position: relative;
overflow: hidden;
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
html.no-touch &:hover {
background-color: var(--color-gray-hover);

Loading…
Cancel
Save