From ff9a964cfff0bba852c919f45125d52a1ac7e788 Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Tue, 27 Feb 2024 10:56:06 +0530 Subject: [PATCH 1/7] AF Password Field| theme update for the password field --- src/components/password/_password.scss | 75 ++++++++++++++++++++++++++ src/theme.scss | 1 + 2 files changed, 76 insertions(+) create mode 100644 src/components/password/_password.scss diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss new file mode 100644 index 0000000..bb9f3d8 --- /dev/null +++ b/src/components/password/_password.scss @@ -0,0 +1,75 @@ +/* ===============Text Input================== */ +.cmp-adaptiveform-password { + color: $dark-gray; + font-size: $font-md; + margin: $field-margin; + display: flex; + flex-direction: column; + } + .cmp-adaptiveform-password__label-container{ + display: flex; + align-items: center; + justify-content: space-between; + } + .cmp-adaptiveform-password__widget { + margin-top: $label-top-margin; + height: $field-height; + border-radius: 0.25rem; + border: 1px solid $dark-gray; + font-size: $font-md; + color: $dark-gray; + padding: 0 $field-padding-left; + } + .cmp-adaptiveform-password__longdescription { + color: $light-gray; + background-color: $very-light-gray; + font-size: $font-sm; + margin-top: $error-top-margin; + margin-bottom: 5px; + padding: 10px; + p{ + margin: 0; + padding: 0; + } + } + .cmp-adaptiveform-password__shortdescription { + font-size: $font-sm; + margin-top: $error-top-margin; + } + .cmp-adaptiveform-password__questionmark{ + display:inline-block; + width:1rem; + height:1rem; + border-radius: 9px; + background: url(./resources/images/question.svg) center center / cover no-repeat,#969696; + cursor : pointer; + // below properties for backward compatibility + position: absolute; + right: 20px; + } + // below properties for backward compatibility + .cmp-adaptiveform-password__label-container .cmp-adaptiveform-password__questionmark{ + position: unset; + right: unset; + } + .cmp-adaptiveform-password__errormessage{ + color: $error; + font-size: $font-sm; + margin-top: $error-top-margin; + } + .cmp-adaptiveform-password[data-cmp-valid=false]{ + background: $light-error; + border: 0 solid $error; + border-inline-start-width: 4px; + padding-inline-start: 5px; + } + .cmp-adaptiveform-password[data-cmp-valid=true]{ + border: 0 solid $success; + border-inline-start-width: 4px; + padding-inline-start: 5px; + } + .cmp-adaptiveform-password .fisheye{ + position: absolute; + right: 25px; + margin-top: 45px + } \ No newline at end of file diff --git a/src/theme.scss b/src/theme.scss index 73a9b5e..f6eaecc 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -33,3 +33,4 @@ @import 'src/components/recaptcha/_recaptcha.scss'; @import 'src/components/verticaltabs/_verticaltabs.scss'; @import 'src/components/checkbox/_checkbox.scss'; +@import 'src/component/password/_password.scss'; \ No newline at end of file From 3e74b1ba039d851b441d9bddb9713e95fc5ada39 Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Fri, 1 Mar 2024 14:49:23 +0530 Subject: [PATCH 2/7] AF Password| Added eye icons to the theme as background url for input box password --- src/components/password/_password.scss | 20 +++++++++++++++++--- src/resources/images/eye-slash-solid.svg | 1 + 2 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 src/resources/images/eye-slash-solid.svg diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index bb9f3d8..2e4e2a9 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -19,6 +19,7 @@ font-size: $font-md; color: $dark-gray; padding: 0 $field-padding-left; + position:relative; } .cmp-adaptiveform-password__longdescription { color: $light-gray; @@ -68,8 +69,21 @@ border-inline-start-width: 4px; padding-inline-start: 5px; } - .cmp-adaptiveform-password .fisheye{ + .cmp-adaptiveform-password__input-wrapper{ + position:relative; + } + .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__widget{ + width:100% + } + .cmp-adaptiveform-password__input-wrapper .eyeicon{ + display:inline-block; position: absolute; - right: 25px; - margin-top: 45px + right: -5px; + top: 6px; + height: 19px; + width: 25px; + background-image: url(./resources/images/eye-slash-solid.svg); + background-position: 0 0; + background-repeat: no-repeat; + background-size: 15px; } \ No newline at end of file diff --git a/src/resources/images/eye-slash-solid.svg b/src/resources/images/eye-slash-solid.svg new file mode 100644 index 0000000..4104803 --- /dev/null +++ b/src/resources/images/eye-slash-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file From eaf65fd9c986828033a15c4c8e1c1bff5787ea96 Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Mon, 11 Mar 2024 13:18:47 +0530 Subject: [PATCH 3/7] AF Password | Updated class name to BEM styling for eyeicon --- src/components/password/_password.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index 2e4e2a9..d24a29a 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -75,7 +75,7 @@ .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__widget{ width:100% } - .cmp-adaptiveform-password__input-wrapper .eyeicon{ + .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon{ display:inline-block; position: absolute; right: -5px; From b0b28fe052e290ceffb3f86f9b21202091782eab Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Sun, 28 Apr 2024 16:26:05 +0530 Subject: [PATCH 4/7] AF-password|PR comments fixes --- src/components/password/_password.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index d24a29a..3840b2e 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -76,14 +76,13 @@ width:100% } .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon{ - display:inline-block; + display: inline-block; + width: 1rem; + height: 1rem; + top: 20px; + align-content: center; position: absolute; - right: -5px; - top: 6px; - height: 19px; - width: 25px; background-image: url(./resources/images/eye-slash-solid.svg); - background-position: 0 0; - background-repeat: no-repeat; - background-size: 15px; + cursor: pointer; + right: 20px; } \ No newline at end of file From 17c7b854a6c8979be062919477e93fe3ceb53037 Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Mon, 16 Sep 2024 16:51:37 +0530 Subject: [PATCH 5/7] Password Comp|Updated css for eye open and eye lash close features --- src/components/password/_password.scss | 9 +++++++-- src/resources/images/eye-solid.svg | 1 + 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 src/resources/images/eye-solid.svg diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index 3840b2e..10ad4e9 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -82,7 +82,12 @@ top: 20px; align-content: center; position: absolute; - background-image: url(./resources/images/eye-slash-solid.svg); + background-image: url(./resources/images/eye-solid.svg); + background-repeat: no-repeat; cursor: pointer; right: 20px; - } \ No newline at end of file + } + + .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon.close { + background-image: url(./resources/images/eye-slash-solid.svg); +} \ No newline at end of file diff --git a/src/resources/images/eye-solid.svg b/src/resources/images/eye-solid.svg new file mode 100644 index 0000000..14d634c --- /dev/null +++ b/src/resources/images/eye-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file From 8968a0d0e7c3ea8aac8f8ff9ee2651c8792ce3d7 Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Tue, 14 Jan 2025 21:12:50 +0530 Subject: [PATCH 6/7] Updated css class per update on JS code --- src/components/password/_password.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index 10ad4e9..99c5052 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -82,12 +82,12 @@ top: 20px; align-content: center; position: absolute; - background-image: url(./resources/images/eye-solid.svg); + background-image: url(./resources/images/eye-slash-solid.svg); background-repeat: no-repeat; cursor: pointer; right: 20px; } - .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon.close { - background-image: url(./resources/images/eye-slash-solid.svg); + .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon.open { + background-image: url(./resources/images/eye-solid.svg); } \ No newline at end of file From 6704301a8e6e39b4a5614830253e285e936b3442 Mon Sep 17 00:00:00 2001 From: Sushil Kumar <88363275+kum-sushil@users.noreply.github.com> Date: Wed, 15 Jan 2025 10:58:02 +0530 Subject: [PATCH 7/7] Updated code comments --- src/components/password/_password.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index 99c5052..91687b8 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -1,4 +1,4 @@ -/* ===============Text Input================== */ +/* ===============Password================== */ .cmp-adaptiveform-password { color: $dark-gray; font-size: $font-md;