From d1ba0d52abc434d7a444068319ffa9b115d03eb8 Mon Sep 17 00:00:00 2001
From: Jan-Christoph Borchardt
Date: Fri, 25 Jan 2019 12:00:16 +0100
Subject: [PATCH] Keyboard focus and mouse hover feedback for 'Show password'
toggle
Signed-off-by: Jan-Christoph Borchardt
---
core/css/guest.css | 8 +++++---
core/css/styles.scss | 20 +++++++++++++------
core/templates/installation.php | 4 ++--
.../templates/settings/personal/security.php | 2 +-
4 files changed, 22 insertions(+), 12 deletions(-)
diff --git a/core/css/guest.css b/core/css/guest.css
index dc9a82bda6..39d76c5676 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 11c737af52..efd18bf2e5 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;
}
diff --git a/core/templates/installation.php b/core/templates/installation.php
index 3fdde8da1c..3a6fd283e0 100644
--- a/core/templates/installation.php
+++ b/core/templates/installation.php
@@ -50,7 +50,7 @@ script('core', [
value=""
autocomplete="off" autocapitalize="none" autocorrect="off" required>
-
+
@@ -113,7 +113,7 @@ script('core', [
value=""
autocomplete="off" autocapitalize="none" autocorrect="off">
-
+
diff --git a/settings/templates/settings/personal/security.php b/settings/templates/settings/personal/security.php
index ab69f36a00..f3edec0c18 100644
--- a/settings/templates/settings/personal/security.php
+++ b/settings/templates/settings/personal/security.php
@@ -52,7 +52,7 @@ if($_['passwordChangeSupported']) {
placeholder="t('New password')); ?>"
data-typetoggle="#personal-show"
autocomplete="off" autocapitalize="none" autocorrect="off" />
-
+