94 lines
2.6 KiB
JavaScript
94 lines
2.6 KiB
JavaScript
export default {
|
|
root: ({ props }) => ({
|
|
class: [
|
|
// Positioning
|
|
'absolute z-1',
|
|
{
|
|
'left-0 bottom-0 w-full': props.position == 'bottom',
|
|
'left-0 top-0 w-full': props.position == 'top',
|
|
'left-0 top-0 h-full': props.position == 'left',
|
|
'right-0 top-0 h-full': props.position == 'right'
|
|
},
|
|
|
|
// Flexbox & Alignment
|
|
'flex justify-center items-center',
|
|
|
|
// Interactivity
|
|
'pointer-events-none'
|
|
]
|
|
}),
|
|
container: {
|
|
class: [
|
|
// Flexbox
|
|
'flex',
|
|
|
|
// Shape & Border
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'bg-surface-0/10 dark:bg-surface-900/20 border border-surface-0/20',
|
|
'backdrop-blur-sm',
|
|
|
|
// Spacing
|
|
'p-2',
|
|
|
|
// Misc
|
|
'pointer-events-auto'
|
|
]
|
|
},
|
|
menu: ({ props }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'flex items-center justify-center',
|
|
{
|
|
'flex-col': props.position == 'left' || props.position == 'right'
|
|
},
|
|
|
|
// List Style
|
|
'm-0 p-0 list-none',
|
|
|
|
// Shape
|
|
'outline-none'
|
|
]
|
|
}),
|
|
menuitem: ({ props, context, instance }) => ({
|
|
class: [
|
|
// Spacing & Shape
|
|
'p-2 rounded-md',
|
|
|
|
// Conditional Scaling
|
|
{
|
|
'hover:scale-150': instance.currentIndex === context.index,
|
|
'scale-125': instance.currentIndex - 1 === context.index || instance.currentIndex + 1 === context.index,
|
|
'scale-110': instance.currentIndex - 2 === context.index || instance.currentIndex + 2 === context.index
|
|
},
|
|
|
|
// Positioning & Hover States
|
|
{
|
|
'origin-bottom hover:mx-6': props.position == 'bottom',
|
|
'origin-top hover:mx-6': props.position == 'top',
|
|
'origin-left hover:my-6': props.position == 'left',
|
|
'origin-right hover:my-6': props.position == 'right'
|
|
},
|
|
|
|
// Transitions & Transform
|
|
'transition-all duration-200 ease-cubic-bezier-will-change-transform transform'
|
|
]
|
|
}),
|
|
action: {
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'flex flex-col items-center justify-center',
|
|
|
|
// Position
|
|
'relative',
|
|
|
|
// Size
|
|
'w-16 h-16',
|
|
|
|
// Misc
|
|
'cursor-default overflow-hidden'
|
|
]
|
|
}
|
|
};
|