Keyboard focus and mouse hover feedback for 'Show password' toggle

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt 2019-01-25 12:00:16 +01:00 committed by Roeland Jago Douma
parent 7c68e0eae7
commit d1ba0d52ab
No known key found for this signature in database
GPG Key ID: F941078878347C0C
4 changed files with 22 additions and 12 deletions

View File

@ -362,9 +362,6 @@ label.infield {
top: .8em;
float: right;
}
#show, #dbpassword-toggle, #personal-show {
display: none;
}
#show + label, #dbpassword-toggle + label {
right: 21px;
top: 15px !important;
@ -386,6 +383,11 @@ label.infield {
#show + label:before, #dbpassword-toggle + label:before, #personal-show + label:before {
display: none;
}
/* Feedback for keyboard focus and mouse hover */
#show:focus + label, #dbpassword:focus + label, #personal-show:focus + label,
#show + label:hover, #dbpassword + label:hover, #personal-show + label:hover {
opacity: 1;
}
#pass2, input[name='personal-password-clone'] {
padding: .6em 2.5em .4em .4em;
width: 8em;

View File

@ -271,10 +271,6 @@ label.infield {
float: right;
}
#show, #dbpassword, #personal-show {
display: none;
}
#show + label, #dbpassword + label {
right: 21px;
top: 15px !important;
@ -296,6 +292,18 @@ label.infield {
opacity: .3;
}
/* Feedback for keyboard focus and mouse hover */
#show,
#dbpassword,
#personal-show {
&:focus + label {
opacity: 1;
}
+ label:hover {
opacity: 1;
}
}
#show + label:before, #dbpassword + label:before, #personal-show + label:before {
display: none;
}
@ -312,8 +320,8 @@ label.infield {
#personal-show + label {
display: block;
right: 0;
margin-top: -41px;
margin-right: -6px;
margin-top: -43px;
margin-right: -4px;
padding: 22px;
}

View File

@ -50,7 +50,7 @@ script('core', [
value="<?php p($_['adminpass']); ?>"
autocomplete="off" autocapitalize="none" autocorrect="off" required>
<label for="adminpass" class="infield"><?php p($l->t( 'Password' )); ?></label>
<input type="checkbox" id="show" name="show">
<input type="checkbox" id="show" class="hidden-visually" name="show">
<label for="show"></label>
</p>
</fieldset>
@ -113,7 +113,7 @@ script('core', [
value="<?php p($_['dbpass']); ?>"
autocomplete="off" autocapitalize="none" autocorrect="off">
<label for="dbpass" class="infield"><?php p($l->t( 'Database password' )); ?></label>
<input type="checkbox" id="dbpassword-toggle" name="dbpassword-toggle">
<input type="checkbox" id="dbpassword-toggle" class="hidden-visually" name="dbpassword-toggle">
<label for="dbpassword-toggle"></label>
</p>
<p class="groupmiddle">

View File

@ -52,7 +52,7 @@ if($_['passwordChangeSupported']) {
placeholder="<?php p($l->t('New password')); ?>"
data-typetoggle="#personal-show"
autocomplete="off" autocapitalize="none" autocorrect="off" />
<input type="checkbox" id="personal-show" name="show" /><label for="personal-show" class="personal-show-label"></label>
<input type="checkbox" id="personal-show" class="hidden-visually" name="show" /><label for="personal-show" class="personal-show-label"></label>
</div>
<input id="passwordbutton" type="submit" value="<?php p($l->t('Change password')); ?>" />