codecheck

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

6
.p-paginator {
7
    display: flex;
8
    align-items: center;
9
    justify-content: center;
10
    flex-wrap: wrap;
11
}
12

13
.p-paginator-left-content {
14
    margin-right: auto;
15
}
16

17
.p-paginator-right-content {
18
    margin-left: auto;
19
}
20

21
.p-paginator-page,
22
.p-paginator-next,
23
.p-paginator-last,
24
.p-paginator-first,
25
.p-paginator-prev,
26
.p-paginator-current {
27
    cursor: pointer;
28
    display: inline-flex;
29
    align-items: center;
30
    justify-content: center;
31
    line-height: 1;
32
    user-select: none;
33
    overflow: hidden;
34
    position: relative;
35
}
36

37
.p-paginator-element:focus {
38
    z-index: 1;
39
    position: relative;
40
}
41

42
// theme
43
.p-paginator {
44
    background: $paginatorBg;
45
    color: $paginatorTextColor;
46
    border: $paginatorBorder;
47
    border-width: $paginatorBorderWidth;
48
    padding: $paginatorPadding;
49
    border-radius: $borderRadius;
50

51
    .p-paginator-first,
52
    .p-paginator-prev,
53
    .p-paginator-next,
54
    .p-paginator-last {
55
        background-color: $paginatorElementBg;
56
        border: $paginatorElementBorder;
57
        color: $paginatorElementIconColor;
58
        min-width: $paginatorElementWidth;
59
        height: $paginatorElementHeight;
60
        margin: $paginatorElementMargin;
61
        transition: $listItemTransition;
62
        border-radius: $paginatorElementBorderRadius;
63

64
        &:not(.p-disabled):not(.p-highlight):hover {
65
            background: $paginatorElementHoverBg;
66
            border-color: $paginatorElementHoverBorderColor;
67
            color: $paginatorElementIconHoverColor;
68
        }
69
    }
70

71
    .p-paginator-first {
72
        border-top-left-radius: $paginatorElementBorderRadius;
73
        border-bottom-left-radius: $paginatorElementBorderRadius;
74
    }
75
    
76
    .p-paginator-last {
77
        border-top-right-radius: $paginatorElementBorderRadius;
78
        border-bottom-right-radius: $paginatorElementBorderRadius;
79
    }
80

81
    .p-dropdown {
82
        margin-left: $inlineSpacing;
83
        margin-right: $inlineSpacing;
84
        height: $paginatorElementHeight;
85

86
        .p-dropdown-label {
87
            padding-right: 0;
88
        }
89
    }
90

91
    .p-paginator-page-input {
92
        margin-left: $inlineSpacing;
93
        margin-right: $inlineSpacing;
94

95
        .p-inputtext {
96
            max-width: $paginatorElementWidth;
97
        }
98
    }
99

100
    .p-paginator-current {
101
        background-color: $paginatorElementBg;
102
        border: $paginatorElementBorder;
103
        color: $paginatorElementIconColor;
104
        min-width: $paginatorElementWidth;
105
        height: $paginatorElementHeight;
106
        margin: $paginatorElementMargin;
107
        padding: 0 $inlineSpacing;
108
    }
109

110
    .p-paginator-pages {
111
        .p-paginator-page {
112
            background-color: $paginatorElementBg;
113
            border: $paginatorElementBorder;
114
            color: $paginatorElementIconColor;
115
            min-width: $paginatorElementWidth;
116
            height: $paginatorElementHeight;
117
            margin: $paginatorElementMargin;
118
            transition: $listItemTransition;
119
            border-radius: $paginatorElementBorderRadius;
120

121
            &.p-highlight {
122
                background: $highlightBg;
123
                border-color: $highlightBg;
124
                color: $highlightTextColor;
125
            }
126

127
            &:not(.p-highlight):hover {
128
                background: $paginatorElementHoverBg;
129
                border-color: $paginatorElementHoverBorderColor;
130
                color: $paginatorElementIconHoverColor;
131
            }
132
        }
133
    }
134
}
135