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

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

2 files changed, 19 insertions, 9 deletions

diff --git a/core/css/guest.css b/core/css/guest.css
index dc9a82bda69..39d76c5676c 100644
--- a/core/css/guest.css
+++ b/core/css/guest.css
@@ -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;
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 11c737af52f..efd18bf2e52 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -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;
 }