<!DOCTYPE html>
<html>
<head>
<title>Toggle Password</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;
}
label,
input:not([type="checkbox"]),
toggle-password {
display: block;
width: 100%;
}
input,
toggle-password {
margin-bottom: 1em;
}
/*toggle-password {
background-color: #f7f7f7;
padding: 0.5em;
}*/
/**
* Setup keyframes for pulsing animation
*/
@-webkit-keyframes loadingPlaceholders {
0% {
background-color: lightgray;
}
50% {
background-color: #e5e5e5;
}
100% {
background-color: lightgray;
}
}
@keyframes loadingPlaceholders {
0% {
background-color: lightgray;
}
50% {
background-color: #e5e5e5;
}
100% {
background-color: lightgray;
}
}
toggle-password:not(:defined) {
min-height: 85px;
-webkit-animation: loadingPlaceholders 1.5s ease-in infinite;
animation: loadingPlaceholders 1.5s ease-in infinite;
background-color: #e5e5e5;
}
</style>
</head>
<body>
<h1>Toggle Password</h1>
<form>
<!-- A checkbox toggle -->
<toggle-password
field-value="test1234"
>
</toggle-password>
<!-- A button toggle -->
<toggle-password
use-button
field-value="test1234"
>
</toggle-password>
<!-- Show password fields by default -->
<toggle-password
use-button
visible
field-value="test1234"
>
</toggle-password>
</form>
<script src="toggle-password.js"></script>
</body>
</html>