primevue-mirror/apps/labs/assets/styles/primevue/password.css

62 lines
1.2 KiB
CSS

@import './inputtext';
.p-password {
@apply inline-flex relative
}
.p-password .p-password-overlay {
@apply min-w-full
}
.p-password-meter {
@apply h-3 bg-surface-200 dark:bg-surface-700 rounded-md
}
.p-password-meter-label {
@apply h-full w-0 transition-[width] duration-1000 ease-in-out rounded-md
}
.p-password-meter-weak {
@apply bg-red-500 dark:bg-red-400
}
.p-password-meter-medium {
@apply bg-amber-500 dark:bg-amber-400
}
.p-password-meter-strong {
@apply bg-green-500 dark:bg-green-400
}
.p-password-fluid {
@apply flex
}
.p-password-fluid .p-password-input {
@apply w-full
}
.p-password-input::-ms-reveal,
.p-password-input::-ms-clear {
@apply hidden
}
.p-password-overlay {
@apply p-3 rounded-md bg-surface-0 dark:bg-surface-900
border border-surface-200 dark:border-surface-700
text-surface-700 dark:text-surface-0
shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
}
.p-password-content {
@apply flex flex-col gap-2
}
.p-password-toggle-mask-icon {
@apply end-3 text-surface-500 dark:text-surface-400 absolute top-1/2 -mt-2 w-4 h-4
}
.p-password:has(.p-password-toggle-mask-icon) .p-password-input {
@apply pe-10
}