codecheck

1
// core
2
.p-carousel {
3
    display: flex;
4
    flex-direction: column;
5
}
6

7
.p-carousel-content {
8
    display: flex;
9
    flex-direction: column;
10
    overflow: auto;
11
}
12

13
.p-carousel-prev,
14
.p-carousel-next {
15
    align-self: center;
16
    flex-grow: 0;
17
    flex-shrink: 0;
18
    display: flex;
19
    justify-content: center;
20
    align-items: center;
21
    overflow: hidden;
22
    position: relative;
23
}
24

25
.p-carousel-container {
26
    display: flex;
27
    flex-direction: row;
28
}
29

30
.p-carousel-items-content {
31
    overflow: hidden;
32
    width: 100%;
33
}
34

35
.p-carousel-items-container {
36
    display: flex;
37
    flex-direction: row;
38
}
39

40
.p-carousel-indicators {
41
    display: flex;
42
    flex-direction: row;
43
    justify-content: center;
44
    flex-wrap: wrap;
45
}
46

47
.p-carousel-indicator > button {
48
    display: flex;
49
    align-items: center;
50
    justify-content: center;
51
}
52

53
/* Vertical */
54
.p-carousel-vertical .p-carousel-container {
55
    flex-direction: column;
56
}
57

58
.p-carousel-vertical .p-carousel-items-container {
59
    flex-direction: column;
60
    height: 100%;
61
}
62

63
/* Keyboard Support */
64
.p-items-hidden .p-carousel-item {
65
    visibility: hidden;
66
}
67

68
.p-items-hidden .p-carousel-item.p-carousel-item-active {
69
    visibility: visible;
70
}
71

72
// theme
73
.p-carousel {
74
    .p-carousel-content {
75
        .p-carousel-prev,
76
        .p-carousel-next {
77
            @include action-icon();
78
            margin: $inlineSpacing;
79
        }
80
    }
81

82
    .p-carousel-indicators {
83
        padding: $carouselIndicatorsPadding;
84

85
        .p-carousel-indicator {
86
            margin-right: $inlineSpacing;
87
            margin-bottom: $inlineSpacing;
88
           
89
            button {
90
                background-color: $carouselIndicatorBg;
91
                width: $carouselIndicatorWidth;
92
                height: $carouselIndicatorHeight;
93
                transition: $actionIconTransition;
94
                border-radius: $carouselIndicatorBorderRadius;
95

96
                &:hover {
97
                    background: $carouselIndicatorHoverBg;
98
                }
99
            }
100

101
            &.p-highlight {
102
                button {
103
                    background: $highlightBg;
104
                    color: $highlightTextColor;
105
                }
106
            }
107
        }
108
    }
109
}
110