codecheck

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

6
.p-picklist-buttons {
7
    display: flex;
8
    flex-direction: column;
9
    justify-content: center;
10
}
11

12
.p-picklist-list-wrapper {
13
    flex: 1 1 50%;
14
}
15

16
.p-picklist-list {
17
    list-style-type: none;
18
    margin: 0;
19
    padding: 0;
20
    overflow: auto;
21
    min-height: 12rem;
22
    max-height: 24rem;
23
}
24

25
.p-picklist-item {
26
    cursor: pointer;
27
    overflow: hidden;
28
    position: relative;
29
}
30

31
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
32
.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
33
    transition: none;
34
}
35

36
// theme
37
.p-picklist {
38
    .p-picklist-buttons {
39
        padding: $panelContentPadding;
40

41
        .p-button {
42
            margin-bottom: $inlineSpacing;
43
        }
44
    }
45

46
    .p-picklist-list-wrapper {
47
        background: $panelContentBg;
48
        border: $panelContentBorder;
49
        border-radius: $borderRadius;
50
        transition: $formElementTransition;
51
        outline-color: transparent;
52

53
        &.p-focus {
54
            @include focused-input();
55
        }
56
    }
57

58
    .p-picklist-header {
59
        color: $panelHeaderTextColor;
60
        padding: $panelHeaderPadding;
61
        font-weight: $panelHeaderFontWeight;
62
    }
63

64
    .p-picklist-list {
65
        color: $panelContentTextColor;
66
        padding: $inputListPadding;
67
        outline: 0 none;
68

69
        &:not(:first-child) {
70
            border-top: $panelContentBorder;
71
        }
72

73
        .p-picklist-item {
74
            padding: $inputListItemPadding;
75
            margin: $inputListItemMargin;
76
            border: $inputListItemBorder;
77
            color: $inputListItemTextColor;
78
            background: $inputListItemBg;
79
            transition: transform $transitionDuration, $listItemTransition;
80

81
            &:first-child {
82
                margin-top: 0;
83
            }
84

85
            &:last-child {
86
                margin-bottom: 0;
87
            }
88

89
            &:not(.p-highlight):hover {
90
                background: $inputListItemHoverBg;
91
                color: $inputListItemTextHoverColor;
92

93
                &.p-focus {
94
                    color: $inputListItemTextHoverColor;
95
                    background: $inputListItemHoverBg;
96
                }
97
            }
98

99
            &.p-focus {
100
                color: $inputListItemTextHoverColor;
101
                background: $inputListItemHoverBg;
102
            }
103

104
            &.p-highlight {
105
                color: $highlightTextColor;
106
                background: $highlightBg;
107

108
                &.p-focus {
109
                    background: $highlightFocusBg;
110
                }
111
            }
112
        }
113
    }
114

115
    &.p-picklist-striped {
116
        .p-picklist-list {
117
            .p-picklist-item:nth-child(even) {
118
                background: $panelContentEvenRowBg;
119

120
                &:hover {
121
                    background: $inputListItemHoverBg;
122
                }
123
            }
124
        }
125
    }
126
}