715 lines
20 KiB
JavaScript
715 lines
20 KiB
JavaScript
export default {
|
|
root: {
|
|
class: [
|
|
// Flexbox
|
|
'flex xl:flex-row flex-col'
|
|
]
|
|
},
|
|
sourcecontrols: {
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'flex xl:flex-col justify-center gap-2',
|
|
|
|
// Spacing
|
|
'p-[1.125rem]'
|
|
]
|
|
},
|
|
sourcemoveupbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
sourcemovetopbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
sourcemovedownbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
sourcemovebottombutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
sourcewrapper: {
|
|
class: [
|
|
// Flexbox
|
|
'grow shrink basis-2/4',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'border border-surface-200 dark:border-surface-700',
|
|
'outline-none'
|
|
]
|
|
},
|
|
sourceheader: {
|
|
class: [
|
|
'font-semibold',
|
|
|
|
// Shape
|
|
'border-0 rounded-t-md',
|
|
|
|
// Spacing
|
|
'pt-3 px-4 pb-2',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/80',
|
|
'bg-surface-0 dark:bg-surface-900'
|
|
]
|
|
},
|
|
sourcelist: {
|
|
class: [
|
|
// Spacing
|
|
'list-none m-0',
|
|
'p-1',
|
|
|
|
// Size
|
|
'min-h-[12rem] max-h-[24rem]',
|
|
|
|
// Shape
|
|
'rounded-b-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/80',
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
|
|
// Focus & Outline
|
|
'outline-none',
|
|
|
|
// Misc
|
|
'overflow-auto'
|
|
]
|
|
},
|
|
item: ({ context }) => ({
|
|
class: [
|
|
// Position
|
|
'relative',
|
|
|
|
// Spacing
|
|
'py-2 px-3 m-0 my-[2px] first:mt-0 last:mb-0',
|
|
|
|
// Shape
|
|
'border-none',
|
|
'rounded-md',
|
|
|
|
// Transition
|
|
'transition duration-200',
|
|
|
|
// Color
|
|
{ 'text-surface-700 dark:text-white/80 bg-surface-0 dark:bg-surface-900': !context.active },
|
|
{ 'text-primary-highlight-inverse bg-primary-highlight': context.active },
|
|
|
|
// State
|
|
{
|
|
'hover:bg-surface-100 dark:hover:bg-[rgba(255,255,255,0.03)]': !context.active,
|
|
'hover:bg-primary-highlight-hover': context.active
|
|
},
|
|
|
|
// Misc
|
|
'cursor-pointer overflow-hidden'
|
|
]
|
|
}),
|
|
buttons: {
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'flex xl:flex-col justify-center gap-2',
|
|
|
|
// Spacing
|
|
'p-[1.125rem]'
|
|
]
|
|
},
|
|
movetotargetbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
movealltotargetbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
movetosourcebutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
movealltosourcebutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
targetcontrols: {
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'flex xl:flex-col justify-center gap-2',
|
|
|
|
// Spacing
|
|
'p-[1.125rem]'
|
|
]
|
|
},
|
|
targetmoveupbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
targetmovetopbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
targetmovedownbutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
targetmovebottombutton: {
|
|
root: ({ context }) => ({
|
|
class: [
|
|
// Flexbox & Alignment
|
|
'relative inline-flex items-center justify-center',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-surface-0',
|
|
'bg-surface-100 dark:bg-surface-800',
|
|
'border border-surface-100 dark:border-surface-800',
|
|
|
|
// Spacing & Size
|
|
'w-10',
|
|
'm-0',
|
|
'px-0 py-2',
|
|
|
|
// Transitions
|
|
'transition duration-200 ease-in-out',
|
|
|
|
// State
|
|
'hover:bg-surface-200 dark:hover:bg-[rgba(255,255,255,0.03)] hover:border-surface-200 dark:hover:border-surface-700',
|
|
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
|
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
|
{ 'cursor-default pointer-events-none opacity-60': context.disabled },
|
|
|
|
// Interactivity
|
|
'cursor-pointer user-select-none'
|
|
]
|
|
}),
|
|
label: {
|
|
class: [
|
|
//Font
|
|
'leading-[normal]',
|
|
|
|
// Flexbox
|
|
'flex-initial',
|
|
|
|
// Size
|
|
'w-0'
|
|
]
|
|
}
|
|
},
|
|
targetwrapper: {
|
|
class: [
|
|
// Flexbox
|
|
'grow shrink basis-2/4',
|
|
|
|
// Shape
|
|
'rounded-md',
|
|
|
|
// Color
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
'border border-surface-200 dark:border-surface-700',
|
|
'outline-none'
|
|
]
|
|
},
|
|
targetheader: {
|
|
class: [
|
|
'font-semibold',
|
|
|
|
// Shape
|
|
'border-0 rounded-t-md',
|
|
|
|
// Spacing
|
|
'pt-3 px-4 pb-2',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/80',
|
|
'bg-surface-0 dark:bg-surface-900'
|
|
]
|
|
},
|
|
targetlist: {
|
|
class: [
|
|
// Spacing
|
|
'list-none m-0',
|
|
'p-1',
|
|
|
|
// Size
|
|
'min-h-[12rem] max-h-[24rem]',
|
|
|
|
// Shape
|
|
'rounded-b-md',
|
|
|
|
// Color
|
|
'text-surface-700 dark:text-white/80',
|
|
'bg-surface-0 dark:bg-surface-900',
|
|
|
|
// Focus & Outline
|
|
'outline-none',
|
|
|
|
// Misc
|
|
'overflow-auto'
|
|
]
|
|
},
|
|
transition: {
|
|
enterFromClass: '!transition-none',
|
|
enterActiveClass: '!transition-none',
|
|
leaveActiveClass: '!transition-none',
|
|
leaveToClass: '!transition-none'
|
|
}
|
|
};
|