Add password visibility toggle
This commit will add a new password visibility toggle directive.
The new directive was added to the local user management,
user modal password input fields.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I4e2baf53eec04aaff1bba26948779de6e447e3e7
diff --git a/app/common/styles/base/buttons.scss b/app/common/styles/base/buttons.scss
index 25e5a91..6337b33 100644
--- a/app/common/styles/base/buttons.scss
+++ b/app/common/styles/base/buttons.scss
@@ -149,4 +149,31 @@
.icon {
fill: $btn-tertiary__txt;
}
+}
+
+.btn-password-toggle {
+ position: absolute;
+ right: 0;
+ margin-top: -34px;
+ height: 32px;
+ width: 52px;
+ padding-top: 6px;
+ padding-bottom: 6px;
+ padding-right: 0;
+ .icon {
+ margin-right: 0;
+ }
+ &.password-visible {
+ .icon {
+ fill: $btn-tertiary__txt--disabled;
+ }
+ }
+ &.password-hidden {
+ .icon {
+ // Adding tweaks to make sure the icons
+ // are in the same place when toggling show/hide
+ margin-right: 1px;
+ width: 20px;
+ }
+ }
}
\ No newline at end of file