codecheck

1
// core
2
.p-tabmenu {
3
    overflow-x: auto;
4
}
5

6
.p-tabmenu-nav {
7
    display: flex;
8
    margin: 0;
9
    padding: 0;
10
    list-style-type: none;
11
    flex-wrap: nowrap;
12
}
13

14
.p-tabmenu-nav a {
15
    cursor: pointer;
16
    user-select: none;
17
    display: flex;
18
    align-items: center;
19
    position: relative;
20
    text-decoration: none;
21
    text-decoration: none;
22
    overflow: hidden;
23
}
24

25
.p-tabmenu-nav a:focus {
26
    z-index: 1;
27
}
28

29
.p-tabmenu-nav .p-menuitem-text {
30
    line-height: 1;
31
}
32

33
.p-tabmenu-ink-bar {
34
    display: none;
35
    z-index: 1;
36
}
37

38
.p-tabmenu::-webkit-scrollbar {
39
    display: none;
40
}
41

42
// theme
43
.p-tabmenu {
44
    .p-tabmenu-nav {
45
        background: $tabviewNavBg;
46
        border: $tabviewNavBorder;
47
        border-width: $tabviewNavBorderWidth;
48

49
        .p-tabmenuitem {
50
            margin-right: $tabviewHeaderSpacing;
51

52
            .p-menuitem-link {
53
                border: $tabviewHeaderBorder;
54
                border-width: $tabviewHeaderBorderWidth;
55
                border-color: $tabviewHeaderBorderColor;
56
                background: $tabviewHeaderBg;
57
                color: $tabviewHeaderTextColor;
58
                padding: $tabviewHeaderPadding;
59
                font-weight: $tabviewHeaderFontWeight;
60
                border-top-right-radius: $borderRadius;
61
                border-top-left-radius: $borderRadius;
62
                transition: $listItemTransition;
63
                margin: $tabviewHeaderMargin;
64
                outline-color: transparent;
65

66
                .p-menuitem-icon {
67
                    margin-right: $inlineSpacing;
68
                }
69

70
                &:not(.p-disabled):focus-visible {
71
                    @include focused-inset();
72
                }
73
            }
74

75
            &:not(.p-highlight):not(.p-disabled):hover {
76
                .p-menuitem-link {
77
                    background: $tabviewHeaderHoverBg;
78
                    border-color: $tabviewHeaderHoverBorderColor;
79
                    color: $tabviewHeaderTextHoverColor;
80
                }
81
            }
82

83
            &.p-highlight {
84
                .p-menuitem-link {
85
                    background: $tabviewHeaderActiveBg;
86
                    border-color: $tabviewHeaderActiveBorderColor;
87
                    color: $tabviewHeaderTextActiveColor;
88
                }
89
            }
90
        }
91
    }
92
}
93