Keyboard focus and mouse hover feedback for 'Show password' toggle
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
parent
7c68e0eae7
commit
d1ba0d52ab
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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')); ?>" />
|
||||
|
|
Loading…
Reference in New Issue