49 lines
1.2 KiB
CSS
49 lines
1.2 KiB
CSS
|
@import './button';
|
||
|
|
|
||
|
|
.p-speeddial {
|
||
|
|
@apply static flex gap-2
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-button {
|
||
|
|
@apply z-10
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-button.p-speeddial-rotate {
|
||
|
|
@apply [transition:transform_250ms_cubic-bezier(0.4,0,0.2,1)_0ms,background_200ms,color_200ms,border-color_200ms] will-change-transform
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-list {
|
||
|
|
@apply m-0 p-0 list-none flex items-center justify-center pointer-events-none outline-none z-20 gap-2
|
||
|
|
transition-[top] ease-linear duration-200
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-item {
|
||
|
|
@apply scale-0 opacity-0 [transition:transform_200ms_cubic-bezier(0.4,0,0.2,1)_0ms,opacity_0.8s] will-change-transform
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-circle .p-speeddial-item,
|
||
|
|
.p-speeddial-semi-circle .p-speeddial-item,
|
||
|
|
.p-speeddial-quarter-circle .p-speeddial-item {
|
||
|
|
@apply absolute
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-mask {
|
||
|
|
@apply absolute start-0 top-0 w-full h-full opacity-0 bg-black/40 dark:bg-black/60 rounded-md transition-opacity duration-150
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-mask-visible {
|
||
|
|
@apply pointer-events-none opacity-100 transition-opacity duration-150
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-open .p-speeddial-list {
|
||
|
|
@apply pointer-events-auto
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-open .p-speeddial-item {
|
||
|
|
@apply scale-100 opacity-100
|
||
|
|
}
|
||
|
|
|
||
|
|
.p-speeddial-open .p-speeddial-rotate {
|
||
|
|
@apply rotate-45
|
||
|
|
}
|