codecheck

1
@use "sass:math";
2

3
// core
4
.p-chips {
5
    display: inline-flex;
6
}
7

8
.p-chips-multiple-container {
9
    margin: 0;
10
    padding: 0;
11
    list-style-type: none;
12
    cursor: text;
13
    overflow: hidden;
14
    display: flex;
15
    align-items: center;
16
    flex-wrap: wrap;
17
}
18

19
.p-chips-token {
20
    cursor: default;
21
    display: inline-flex;
22
    align-items: center;
23
    flex: 0 0 auto;
24
}
25

26
.p-chips-input-token {
27
    flex: 1 1 auto;
28
    display: inline-flex;
29
}
30

31
.p-chips-token-icon {
32
    cursor: pointer;
33
}
34

35
.p-chips-input-token input {
36
    border: 0 none;
37
    outline: 0 none;
38
    background-color: transparent;
39
    margin: 0;
40
    padding: 0;
41
    box-shadow: none;
42
    border-radius: 0;
43
    width: 100%;
44
}
45

46
.p-fluid .p-chips {
47
    display: flex;
48
}
49

50
// theme
51
.p-chips {
52
    &:not(.p-disabled):hover {
53
        .p-chips-multiple-container {
54
            border-color: $inputHoverBorderColor;
55
        }
56
    }
57

58
    &:not(.p-disabled).p-focus {
59
        .p-chips-multiple-container {
60
            @include focused-input();
61
        }
62
    }
63

64
    .p-chips-multiple-container {
65
        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
66
        outline-color: transparent;
67

68
        .p-chips-token {
69
            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
70
            margin-right: $inlineSpacing;
71
            background: $chipBg;
72
            color: $chipTextColor;
73
            border-radius: $chipBorderRadius;
74

75
            &.p-focus {
76
                background: $chipFocusBg;
77
                color: $chipFocusTextColor;
78
            }
79

80
            .p-chips-token-icon {
81
                margin-left: $inlineSpacing;
82
            }
83
        }
84

85
        .p-chips-input-token {
86
            padding: math.div(nth($inputPadding, 1), 2) 0;
87

88
            input {
89
                font-family: var(--font-family);
90
                font-feature-settings: var(--font-feature-settings, normal);
91
                font-size: $inputTextFontSize;
92
                color: $textColor;
93
                padding: 0;
94
                margin: 0;
95
            }
96
        }
97
    }
98

99
    &.p-invalid.p-component > .p-inputtext {
100
        @include invalid-input();
101
    }
102
}
103