codecheck

1
// core
2
.p-tabview-nav-container {
3
    position: relative;
4
}
5

6
.p-tabview-scrollable .p-tabview-nav-container {
7
    overflow: hidden;
8
}
9

10
.p-tabview-nav-content {
11
    overflow-x: auto;
12
    overflow-y: hidden;
13
    scroll-behavior: smooth;
14
    scrollbar-width: none;
15
    overscroll-behavior: contain auto;
16
}
17

18
.p-tabview-nav {
19
    display: flex;
20
    margin: 0;
21
    padding: 0;
22
    list-style-type: none;
23
    flex: 1 1 auto;
24
}
25

26
.p-tabview-header-action {
27
    cursor: pointer;
28
    user-select: none;
29
    display: flex;
30
    align-items: center;
31
    position: relative;
32
    text-decoration: none;
33
    overflow: hidden;
34
}
35

36
.p-tabview-ink-bar {
37
    display: none;
38
    z-index: 1;
39
}
40

41
.p-tabview-header-action:focus {
42
    z-index: 1;
43
}
44

45
.p-tabview-title {
46
    line-height: 1;
47
    white-space: nowrap;
48
}
49

50
.p-tabview-nav-btn {
51
    position: absolute;
52
    top: 0;
53
    z-index: 2;
54
    height: 100%;
55
    display: flex;
56
    align-items: center;
57
    justify-content: center;
58
}
59

60
.p-tabview-nav-prev {
61
    left: 0;
62
}
63

64
.p-tabview-nav-next {
65
    right: 0;
66
}
67

68
.p-tabview-nav-content::-webkit-scrollbar {
69
    display: none;
70
}
71

72
// theme
73
.p-tabview {
74
    .p-tabview-nav {
75
        background: $tabviewNavBg;
76
        border: $tabviewNavBorder;
77
        border-width: $tabviewNavBorderWidth;
78

79
        li {
80
            margin-right: $tabviewHeaderSpacing;
81

82
            .p-tabview-nav-link {
83
                border: $tabviewHeaderBorder;
84
                border-width: $tabviewHeaderBorderWidth;
85
                border-color: $tabviewHeaderBorderColor;
86
                background: $tabviewHeaderBg;
87
                color: $tabviewHeaderTextColor;
88
                padding: $tabviewHeaderPadding;
89
                font-weight: $tabviewHeaderFontWeight;
90
                border-top-right-radius: $borderRadius;
91
                border-top-left-radius: $borderRadius;
92
                transition: $listItemTransition;
93
                margin: $tabviewHeaderMargin;
94
                outline-color: transparent;
95

96
                &:not(.p-disabled):focus-visible {
97
                    @include focused-inset();
98
                }
99
            }
100

101
            &:not(.p-highlight):not(.p-disabled):hover {
102
                .p-tabview-nav-link {
103
                    background: $tabviewHeaderHoverBg;
104
                    border-color: $tabviewHeaderHoverBorderColor;
105
                    color: $tabviewHeaderTextHoverColor;
106
                }
107
            }
108

109
            &.p-highlight {
110
                .p-tabview-nav-link {
111
                    background: $tabviewHeaderActiveBg;
112
                    border-color: $tabviewHeaderActiveBorderColor;
113
                    color: $tabviewHeaderTextActiveColor;
114
                }
115
            }
116
        }
117
    }
118
    
119
    .p-tabview-nav-btn.p-link {
120
        background: $tabviewHeaderActiveBg;
121
        color: $tabviewHeaderTextActiveColor;
122
        width: $buttonIconOnlyWidth;
123
        box-shadow: $raisedButtonShadow;
124
        border-radius: 0;
125
        outline-color: transparent;
126

127
        &:focus-visible {
128
            @include focused-inset();
129
        }
130
    }
131

132
    .p-tabview-panels {
133
        background: $tabviewContentBg;
134
        padding: $tabviewContentPadding;
135
        border: $tabviewContentBorder;
136
        color: $tabviewContentTextColor;
137
        border-bottom-right-radius: $borderRadius;
138
        border-bottom-left-radius: $borderRadius;
139
    }
140
}
141