codecheck

1
// core
2
.p-password {
3
    display: inline-flex;
4
}
5

6
.p-password .p-password-panel {
7
    min-width: 100%;
8
}
9

10
.p-password-meter {
11
    height: 10px;
12
}
13

14
.p-password-strength {
15
    height: 100%;
16
    width: 0;
17
    transition: width 1s ease-in-out;
18
}
19

20
.p-fluid .p-password {
21
    display: flex;
22
}
23

24
.p-password-input::-ms-reveal,
25
.p-password-input::-ms-clear {
26
    display: none;
27
}
28

29
// theme
30
.p-password {
31
    &.p-invalid.p-component > .p-inputtext {
32
        @include invalid-input();
33
    }
34
}
35

36
.p-password-panel {
37
    padding: $panelContentPadding;
38
    background: $panelContentBg;
39
    color: $panelContentTextColor;
40
    border: $overlayContentBorder;
41
    box-shadow: $inputOverlayShadow;
42
    border-radius: $borderRadius;
43

44
    .p-password-meter {
45
        margin-bottom: $inlineSpacing;
46
        background: $passwordMeterBg;
47

48
        .p-password-strength {
49
            &.weak {
50
                background: $passwordWeakBg;
51
            }
52

53
            &.medium {
54
                background: $passwordMediumBg;
55
            }
56

57
            &.strong {
58
                background: $passwordStrongBg;
59
            }
60
        }
61
    }
62
}
63