85 lines
2.2 KiB
CSS
85 lines
2.2 KiB
CSS
.p-tabs {
|
|
@apply flex flex-col
|
|
}
|
|
|
|
.p-tablist {
|
|
@apply flex relative
|
|
}
|
|
|
|
.p-tabs-scrollable > .p-tablist {
|
|
@apply overflow-hidden
|
|
}
|
|
|
|
.p-tablist-viewport {
|
|
@apply overflow-x-auto overflow-y-hidden overscroll-y-contain overscroll-x-auto
|
|
}
|
|
|
|
.p-tablist-viewport::-webkit-scrollbar {
|
|
@apply hidden
|
|
}
|
|
|
|
.p-tablist-tab-list {
|
|
@apply relative flex bg-surface-0 dark:bg-surface-900 border-b border-surface-200 dark:border-surface-700
|
|
}
|
|
|
|
.p-tablist-content {
|
|
@apply flex-grow
|
|
}
|
|
|
|
.p-tablist-nav-button {
|
|
@apply !absolute flex-shrink-0 top-0 z-20 h-full flex items-center justify-center cursor-pointer
|
|
bg-surface-0 dark:bg-surface-900 text-surface-500 dark:text-surface-400 hover:text-surface-700 dark:hover:text-surface-0 w-10
|
|
shadow-[0px_0px_10px_50px_rgba(255,255,255,0.6)] dark:shadow-[0px_0px_10px_50px] dark:shadow-surface-900/50
|
|
focus-visible:z-10 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-primary
|
|
transition-colors duration-200
|
|
}
|
|
|
|
.p-tablist-prev-button {
|
|
@apply start-0
|
|
}
|
|
|
|
.p-tablist-next-button {
|
|
@apply end-0
|
|
}
|
|
|
|
.p-tablist-prev-button:dir(rtl),
|
|
.p-tablist-next-button:dir(rtl) {
|
|
@apply rotate-180
|
|
}
|
|
|
|
.p-tab {
|
|
@apply flex-shrink-0 cursor-pointer select-none relative whitespace-nowrap py-4 px-[1.125rem]
|
|
border-b border-surface-200 dark:border-surface-700 font-semibold
|
|
text-surface-500 dark:text-surface-400
|
|
transition-colors duration-200 -mb-px
|
|
}
|
|
|
|
.p-tab.p-disabled {
|
|
@apply cursor-default
|
|
}
|
|
|
|
.p-tab:not(.p-disabled):focus-visible {
|
|
@apply z-10 outline outline-1 outline-offset-[-1px] outline-primary
|
|
}
|
|
|
|
.p-tab:not(.p-tab-active):not(.p-disabled):hover {
|
|
@apply text-surface-700 dark:text-surface-0
|
|
}
|
|
|
|
.p-tab-active {
|
|
@apply border-primary text-primary
|
|
}
|
|
|
|
.p-tabpanels {
|
|
@apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
|
pt-[0.875rem] pb-[1.125rem] px-[1.125rem] outline-none
|
|
}
|
|
|
|
.p-tablist-active-bar {
|
|
@apply z-10 block absolute -bottom-px h-px bg-primary transition-[left] duration-200 ease-[cubic-bezier(0.35,0,0.25,1)]
|
|
}
|
|
|
|
.p-tablist-viewport {
|
|
@apply [scrollbar-behavior:smooth] [scrollbar-width:none]
|
|
}
|