vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored Password

pull/5677/head
Cagatay Civici 2024-04-07 13:51:31 +03:00
parent b82cd4ead4
commit f63a1cf6a4
2 changed files with 18 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/lib/password/style/PasswordStyle.js
View File

@ -9,27 +9,21 @@ const classes = {
'p-password p-component p-inputwrapper', 'p-password p-component p-inputwrapper',
{ {
'p-inputwrapper-filled': instance.filled, 'p-inputwrapper-filled': instance.filled,
'p-inputwrapper-focus': instance.focused, 'p-inputwrapper-focus': instance.focused
'p-password-icon-field': props.toggleMask
} }
], ],
input: ({ props }) => [ input: 'p-password-input',
'p-password-input', hideIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
{ showIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
'p-disabled': props.disabled
}
],
hideIcon: 'p-input-icon',
showIcon: 'p-input-icon',
panel: ({ instance }) => [ panel: ({ instance }) => [
'p-password-panel p-component', 'p-password-overlay p-component',
{ {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
meter: 'p-password-meter', meter: 'p-password-meter',
meterLabel: ({ instance }) => `p-password-strength ${instance.meter ? instance.meter.strength : ''}`, meterLabel: ({ instance }) => `p-password-meter-value ${instance.meter ? 'p-password-meter-' + instance.meter.strength : ''}`,
info: 'p-password-info' info: 'p-password-meter-text'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

23
components/lib/themes/primeone/base/password/index.js
View File

@ -5,7 +5,7 @@ export default {
position: relative; position: relative;
} }
.p-password .p-password-panel { .p-password .p-password-overlay {
min-width: 100%; min-width: 100%;
} }
@ -16,23 +16,23 @@ export default {
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
} }
.p-password-strength { .p-password-meter-value {
height: 100%; height: 100%;
width: 0; width: 0;
transition: width 1s ease-in-out; transition: width 1s ease-in-out;
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
} }
.p-password-strength.weak { .p-password-meter-weak {
background: ${dt('password.weak.background')}; background: ${dt('password.strength.weak.background')};
} }
.p-password-strength.medium { .p-password-meter-medium {
background: ${dt('password.medium.background')}; background: ${dt('password.strength.medium.background')};
} }
.p-password-strength.strong { .p-password-meter-strong {
background: ${dt('password.strong.background')}; background: ${dt('password.strength.strong.background')};
} }
.p-fluid .p-password { .p-fluid .p-password {
@ -44,7 +44,7 @@ export default {
display: none; display: none;
} }
.p-password-panel { .p-password-overlay {
padding: 0.75rem; padding: 0.75rem;
background: ${dt('password.overlay.background')}; background: ${dt('password.overlay.background')};
color: ${dt('password.overlay.color')}; color: ${dt('password.overlay.color')};
@ -53,8 +53,7 @@ export default {
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
} }
.p-password > svg:last-of-type, .p-password-toggle-mask-icon {
.p-password > i:last-of-type {
right: 0.75rem; right: 0.75rem;
color: ${dt('password.icon.color')}; color: ${dt('password.icon.color')};
position: absolute; position: absolute;
@ -64,7 +63,7 @@ export default {
height: 1rem; height: 1rem;
} }
.p-password:has(svg,i) .p-password-input { .p-password:has(.p-password-toggle-mask-icon) .p-password-input {
padding-right: 2.5rem; padding-right: 2.5rem;
} }
` `