95 lines
1.9 KiB
CSS
95 lines
1.9 KiB
CSS
@import './button';
|
|
|
|
.p-drawer {
|
|
@apply flex flex-col pointer-events-auto relative transition-transform duration-300
|
|
border border-surface-200 dark:border-surface-700
|
|
bg-surface-0 dark:bg-surface-900
|
|
text-surface-700 dark:text-surface-0
|
|
shadow-[0_20px_25px_-5px_rgba(0,0,0,0.1),0_8px_10px_-6px_rgba(0,0,0,0.1)]
|
|
}
|
|
|
|
.p-drawer {
|
|
@apply [transform:translate3d(0,0,0)]
|
|
}
|
|
|
|
.p-drawer-content {
|
|
@apply overflow-y-auto flex-grow pt-0 pb-5 px-5
|
|
}
|
|
|
|
.p-drawer-header {
|
|
@apply flex items-center justify-between flex-shrink-0 p-5
|
|
}
|
|
|
|
.p-drawer-footer {
|
|
@apply p-5
|
|
}
|
|
|
|
.p-drawer-title {
|
|
@apply font-semibold text-2xl
|
|
}
|
|
|
|
.p-drawer-full .p-drawer {
|
|
@apply transition-none transform-none w-screen h-screen max-h-full top-0 left-0
|
|
}
|
|
|
|
.p-drawer-left .p-drawer-enter-from,
|
|
.p-drawer-left .p-drawer-leave-to {
|
|
@apply -translate-x-full
|
|
}
|
|
|
|
.p-drawer-right .p-drawer-enter-from,
|
|
.p-drawer-right .p-drawer-leave-to {
|
|
@apply translate-x-full
|
|
}
|
|
|
|
.p-drawer-top .p-drawer-enter-from,
|
|
.p-drawer-top .p-drawer-leave-to {
|
|
@apply -translate-y-full
|
|
}
|
|
|
|
.p-drawer-bottom .p-drawer-enter-from,
|
|
.p-drawer-bottom .p-drawer-leave-to {
|
|
@apply translate-y-full
|
|
}
|
|
|
|
.p-drawer-full .p-drawer-enter-from,
|
|
.p-drawer-full .p-drawer-leave-to {
|
|
@apply opacity-0
|
|
}
|
|
|
|
.p-drawer-full .p-drawer-enter-active,
|
|
.p-drawer-full .p-drawer-leave-active {
|
|
@apply transition-opacity animate-duration-400 ease-[cubic-bezier(0.25,0.8,0.25,1)]
|
|
}
|
|
|
|
.p-drawer-left .p-drawer {
|
|
@apply w-80 h-full border-r
|
|
}
|
|
|
|
.p-drawer-right .p-drawer {
|
|
@apply w-80 h-full border-s
|
|
}
|
|
|
|
.p-drawer-top .p-drawer {
|
|
@apply h-40 w-full border-b
|
|
}
|
|
|
|
.p-drawer-bottom .p-drawer {
|
|
@apply h-40 w-full border-t
|
|
}
|
|
|
|
.p-drawer-left .p-drawer-content,
|
|
.p-drawer-right .p-drawer-content,
|
|
.p-drawer-top .p-drawer-content,
|
|
.p-drawer-bottom .p-drawer-content {
|
|
@apply w-full h-full
|
|
}
|
|
|
|
.p-drawer-open {
|
|
@apply flex
|
|
}
|
|
|
|
.p-overlay-mask:dir(rtl) {
|
|
@apply flex-row-reverse;
|
|
}
|