Merge pull request #24915 from BrandynL/show-password-hover-on-wc-forms
Show password hover on wc forms
This commit is contained in:
commit
9a3e6247a9
|
@ -352,6 +352,28 @@
|
|||
.form-row-wide {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.password-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.show-password-input {
|
||||
position: absolute;
|
||||
right: 0.7em;
|
||||
top: 0.7em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.show-password-input::after {
|
||||
@include iconafter( "\e010" ); // Icon styles and glyph
|
||||
}
|
||||
|
||||
.show-password-input.display-password:after {
|
||||
color: #e8e8e8;
|
||||
}
|
||||
}
|
||||
|
||||
#payment {
|
||||
|
|
|
@ -78,4 +78,19 @@ jQuery( function( $ ) {
|
|||
}, 1000 );
|
||||
}
|
||||
};
|
||||
|
||||
// Show password visiblity hover icon on woocommerce forms
|
||||
$( '.woocommerce form input[type="password"]' ).wrap( '<span class="password-input"></span>' );
|
||||
$( '.password-input' ).append( '<span class="show-password-input"></span>' );
|
||||
|
||||
$( '.show-password-input' ).click(
|
||||
function() {
|
||||
$( this ).toggleClass( 'display-password' );
|
||||
if ( $( this ).hasClass('display-password') ) {
|
||||
$( this ).siblings( ['input[name="password"]', 'input[type="password"]'] ).prop('type', 'text');
|
||||
} else {
|
||||
$( this ).siblings( 'input[name="password"]' ).prop('type', 'password');
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue