47 lines
1.4 KiB
CSS
47 lines
1.4 KiB
CSS
.p-popover {
|
|
@apply mt-[10px] bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0
|
|
border border-surface-200 dark:border-surface-700
|
|
rounded-md shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
|
|
before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
|
|
before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
|
|
after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
|
|
after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
|
|
}
|
|
|
|
.p-popover-content {
|
|
@apply p-3
|
|
}
|
|
|
|
.p-popover-flipped {
|
|
@apply -mt-[10px] mb-[10px]
|
|
}
|
|
|
|
.p-popover-enter-from {
|
|
@apply opacity-0 scale-y-75
|
|
}
|
|
|
|
.p-popover-leave-to {
|
|
@apply opacity-0
|
|
}
|
|
|
|
.p-popover-enter-active {
|
|
@apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
|
|
}
|
|
|
|
.p-popover-leave-active {
|
|
@apply transition-opacity duration-100 ease-linear
|
|
}
|
|
|
|
.p-popover-flipped:after,
|
|
.p-popover-flipped:before {
|
|
@apply bottom-auto top-full
|
|
}
|
|
|
|
.p-popover.p-popover-flipped:after {
|
|
@apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
|
|
}
|
|
|
|
.p-popover.p-popover-flipped:before {
|
|
@apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
|
|
}
|