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

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

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