Files
ui/src/runtime/ui.config/elements/progress.ts
2024-10-24 10:30:37 +02:00

75 lines
2.3 KiB
TypeScript

export default {
wrapper: 'w-full flex flex-col gap-2',
indicator: {
container: {
base: 'flex flex-row justify-end',
width: 'min-w-fit',
transition: 'transition-all'
},
align: 'text-end',
width: 'w-fit',
color: 'text-gray-400 dark:text-gray-500',
size: {
'2xs': 'text-xs',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base',
'2xl': 'text-base'
}
},
progress: {
base: 'block appearance-none border-none overflow-hidden',
width: 'w-full [&::-webkit-progress-bar]:w-full',
size: {
'2xs': 'h-px',
'xs': 'h-0.5',
'sm': 'h-1',
'md': 'h-2',
'lg': 'h-3',
'xl': 'h-4',
'2xl': 'h-5'
},
rounded: 'rounded-full [&::-webkit-progress-bar]:rounded-full',
track: '[&::-webkit-progress-bar]:bg-gray-200 [&::-webkit-progress-bar]:dark:bg-gray-700 [@supports(selector(&::-moz-progress-bar))]:bg-gray-200 [@supports(selector(&::-moz-progress-bar))]:dark:bg-gray-700',
bar: '[&::-webkit-progress-value]:rounded-full [&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:ease-in-out [&::-moz-progress-bar]:rounded-full',
color: 'text-{color}-500 dark:text-{color}-400',
background: '[&::-webkit-progress-value]:bg-current [&::-moz-progress-bar]:bg-current',
indeterminate: {
base: 'indeterminate:relative',
rounded: 'indeterminate:after:rounded-full [&:indeterminate::-webkit-progress-value]:rounded-full [&:indeterminate::-moz-progress-bar]:rounded-full'
}
},
steps: {
base: 'grid grid-cols-1',
color: 'text-{color}-500 dark:text-{color}-400',
size: {
'2xs': 'text-xs',
'xs': 'text-xs',
'sm': 'text-sm',
'md': 'text-sm',
'lg': 'text-sm',
'xl': 'text-base',
'2xl': 'text-base'
}
},
step: {
base: 'transition-all opacity-0 truncate row-start-1 col-start-1',
align: 'text-end',
active: 'opacity-100',
first: 'text-gray-500 dark:text-gray-400'
},
animation: {
'carousel': 'bar-animation-carousel',
'carousel-inverse': 'bar-animation-carousel-inverse',
'swing': 'bar-animation-swing',
'elastic': 'bar-animation-elastic'
},
default: {
color: 'primary',
size: 'md',
animation: 'carousel'
}
}