From 1ab978cc617f2ceafa50675a0b502c8271faa513 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 18 Feb 2024 17:48:05 +0300 Subject: [PATCH] Migrated password --- components/lib/theme/aura/index.js | 4 +- components/lib/theme/aura/password/index.js | 111 ++++++++++++++++++ .../lib/theme/aura/password/package.json | 6 + 3 files changed, 120 insertions(+), 1 deletion(-) create mode 100644 components/lib/theme/aura/password/index.js create mode 100644 components/lib/theme/aura/password/package.json diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index 919deb7b8..f660bd0ca 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -36,6 +36,7 @@ import overlaypanel from 'primevue/theme/aura/overlaypanel'; import paginator from 'primevue/theme/aura/paginator'; import panel from 'primevue/theme/aura/panel'; import panelmenu from 'primevue/theme/aura/panelmenu'; +import password from 'primevue/theme/aura/password'; import picklist from 'primevue/theme/aura/picklist'; import progressbar from 'primevue/theme/aura/progressbar'; import progressspinner from 'primevue/theme/aura/progressspinner'; @@ -58,8 +59,8 @@ import terminal from 'primevue/theme/aura/terminal'; import textarea from 'primevue/theme/aura/textarea'; import tieredmenu from 'primevue/theme/aura/tieredmenu'; import timeline from 'primevue/theme/aura/timeline'; -import togglebutton from 'primevue/theme/aura/togglebutton'; import toast from 'primevue/theme/aura/toast'; +import togglebutton from 'primevue/theme/aura/togglebutton'; import toolbar from 'primevue/theme/aura/toolbar'; import tooltip from 'primevue/theme/aura/tooltip'; import tree from 'primevue/theme/aura/tree'; @@ -246,6 +247,7 @@ export default { organizationchart, overlaypanel, paginator, + password, panel, panelmenu, picklist, diff --git a/components/lib/theme/aura/password/index.js b/components/lib/theme/aura/password/index.js new file mode 100644 index 000000000..60670502f --- /dev/null +++ b/components/lib/theme/aura/password/index.js @@ -0,0 +1,111 @@ +export default { + variables: { + colorScheme: { + light: { + meter: { + borderColor: '{surface.200}' + }, + icon: { + color: '{surface.500}' + }, + strength: { + backgroundWeak: '{red.500}', + backgroundMedium: '{amber.500}', + backgroundStrong: '{green.500}' + }, + overlay: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + meter: { + borderColor: '{surface.700}' + }, + icon: { + color: '{surface.400}' + }, + strength: { + backgroundWeak: '{red.400}', + backgroundMedium: '{amber.400}', + backgroundStrong: '{green.400}' + }, + overlay: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + } + } + } + }, + css: ` +.p-password { + display: inline-flex; + position: relative; +} + +.p-password .p-password-panel { + min-width: 100%; +} + +.p-password-meter { + height: 10px; + margin-bottom: 0.75rem; + background: var(--p-password-meter-border-color); + border-radius: var(--p-rounded-base); +} + +.p-password-strength { + height: 100%; + width: 0; + transition: width 1s ease-in-out; + border-radius: var(--p-rounded-base); +} + +.p-password-strength.weak { + background: var(--p-password-strength-background-weak); +} + +.p-password-strength.medium { + background: var(--p-password-strength-background-medium); +} + +.p-password-strength.strong { + background: var(--p-password-strength-background-strong); +} + +.p-fluid .p-password { + display: flex; +} + +.p-password-input::-ms-reveal, +.p-password-input::-ms-clear { + display: none; +} + +.p-password-panel { + padding: 0.75rem; + background: var(--p-password-overlay-background); + color: var(--p-password-overlay-text-color); + border: 1px solid var(--p-password-overlay-border-color); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); + border-radius: var(--p-rounded-base); +} + +.p-password > svg:last-of-type, +.p-password > i:last-of-type { + right: 0.75rem; + color: var(--p-password-icon-color); + position: absolute; + top: 50%; + margin-top: -0.5rem; + width: 1rem; + height: 1rem; +} + +.p-password:has(svg,i) .p-password-input { + padding-right: 2.5rem; +} +` +}; diff --git a/components/lib/theme/aura/password/package.json b/components/lib/theme/aura/password/package.json new file mode 100644 index 000000000..f8e9d7ae0 --- /dev/null +++ b/components/lib/theme/aura/password/package.json @@ -0,0 +1,6 @@ +{ + "main": "./index.cjs.js", + "module": "./index.esm.js", + "unpkg": "./index.min.js", + "types": "./index.d.ts" +}