Files
htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/panel/_tabview.scss
2024-06-10 10:50:27 +02:00

141 lines
2.8 KiB
SCSS

// core
.p-tabview-nav-container {
position: relative;
}
.p-tabview-scrollable .p-tabview-nav-container {
overflow: hidden;
}
.p-tabview-nav-content {
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scrollbar-width: none;
overscroll-behavior: contain auto;
}
.p-tabview-nav {
display: flex;
margin: 0;
padding: 0;
list-style-type: none;
flex: 1 1 auto;
}
.p-tabview-header-action {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
position: relative;
text-decoration: none;
overflow: hidden;
}
.p-tabview-ink-bar {
display: none;
z-index: 1;
}
.p-tabview-header-action:focus {
z-index: 1;
}
.p-tabview-title {
line-height: 1;
white-space: nowrap;
}
.p-tabview-nav-btn {
position: absolute;
top: 0;
z-index: 2;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.p-tabview-nav-prev {
left: 0;
}
.p-tabview-nav-next {
right: 0;
}
.p-tabview-nav-content::-webkit-scrollbar {
display: none;
}
// theme
.p-tabview {
.p-tabview-nav {
background: $tabviewNavBg;
border: $tabviewNavBorder;
border-width: $tabviewNavBorderWidth;
li {
margin-right: $tabviewHeaderSpacing;
.p-tabview-nav-link {
border: $tabviewHeaderBorder;
border-width: $tabviewHeaderBorderWidth;
border-color: $tabviewHeaderBorderColor;
background: $tabviewHeaderBg;
color: $tabviewHeaderTextColor;
padding: $tabviewHeaderPadding;
font-weight: $tabviewHeaderFontWeight;
border-top-right-radius: $borderRadius;
border-top-left-radius: $borderRadius;
transition: $listItemTransition;
margin: $tabviewHeaderMargin;
outline-color: transparent;
&:not(.p-disabled):focus-visible {
@include focused-inset();
}
}
&:not(.p-highlight):not(.p-disabled):hover {
.p-tabview-nav-link {
background: $tabviewHeaderHoverBg;
border-color: $tabviewHeaderHoverBorderColor;
color: $tabviewHeaderTextHoverColor;
}
}
&.p-highlight {
.p-tabview-nav-link {
background: $tabviewHeaderActiveBg;
border-color: $tabviewHeaderActiveBorderColor;
color: $tabviewHeaderTextActiveColor;
}
}
}
}
.p-tabview-nav-btn.p-link {
background: $tabviewHeaderActiveBg;
color: $tabviewHeaderTextActiveColor;
width: $buttonIconOnlyWidth;
box-shadow: $raisedButtonShadow;
border-radius: 0;
outline-color: transparent;
&:focus-visible {
@include focused-inset();
}
}
.p-tabview-panels {
background: $tabviewContentBg;
padding: $tabviewContentPadding;
border: $tabviewContentBorder;
color: $tabviewContentTextColor;
border-bottom-right-radius: $borderRadius;
border-bottom-left-radius: $borderRadius;
}
}