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/4] 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/4] 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/4] 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 2a4a4009cad46ce5c504618f60da0695d16bdbf4 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/4] AF-password|PR comments fixes --- package-lock.json | 4 ++-- src/components/password/_password.scss | 13 +++++++------ src/theme.scss | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index f04acf6..5f57191 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aemforms/af-canvas-theme", - "version": "1.0.12", + "version": "1.0.14", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@aemforms/af-canvas-theme", - "version": "1.0.12", + "version": "1.0.14", "license": "MIT License, Copyright 2022 Adobe Systems Incorporated", "dependencies": { "version": "^0.1.2", diff --git a/src/components/password/_password.scss b/src/components/password/_password.scss index d24a29a..469581c 100644 --- a/src/components/password/_password.scss +++ b/src/components/password/_password.scss @@ -76,14 +76,15 @@ width:100% } .cmp-adaptiveform-password__input-wrapper .cmp-adaptiveform-password__eyeicon{ - display:inline-block; + display: inline-block; + width: 1rem; + height: 1rem; + top: 25px; + 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; + cursor: pointer; + right: 20px; background-repeat: no-repeat; background-size: 15px; } \ No newline at end of file diff --git a/src/theme.scss b/src/theme.scss index f6eaecc..b008e5f 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -33,4 +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 +@import 'src/components/password/_password.scss'; \ No newline at end of file