first commit
This commit is contained in:
70
resources/css/presets/aura/accordion/index.js
Normal file
70
resources/css/presets/aura/accordion/index.js
Normal file
@ -0,0 +1,70 @@
|
||||
export default {
|
||||
accordiontab: {
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
// Sizing
|
||||
'pt-6 pb-0',
|
||||
'mt-6',
|
||||
|
||||
// Shape
|
||||
'border-x-0 border-b-0',
|
||||
|
||||
// Color
|
||||
'border border-surface-200 dark:border-surface-700',
|
||||
|
||||
// State
|
||||
{ 'select-none pointer-events-none cursor-default opacity-60': props?.disabled }
|
||||
]
|
||||
}),
|
||||
headerAction: ({ context }) => ({
|
||||
class: [
|
||||
//Font
|
||||
'font-semibold',
|
||||
'leading-7',
|
||||
|
||||
// Alignments
|
||||
'flex items-center justify-between flex-row-reverse',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'bg-transparent',
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 ring-inset dark:focus-visible:ring-primary-500', // Focus
|
||||
|
||||
// Misc
|
||||
'cursor-pointer no-underline select-none'
|
||||
]
|
||||
}),
|
||||
headerIcon: {
|
||||
class: 'inline-block ml-2'
|
||||
},
|
||||
headerTitle: {
|
||||
class: 'leading-7'
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Font
|
||||
'leading-7',
|
||||
|
||||
// Spacing
|
||||
'pr-12 pt-2',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:text-surface-0/70'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
||||
enterToClass: 'max-h-[1000px]',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
}
|
||||
};
|
||||
262
resources/css/presets/aura/autocomplete/index.js
Normal file
262
resources/css/presets/aura/autocomplete/index.js
Normal file
@ -0,0 +1,262 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flex
|
||||
'inline-flex',
|
||||
|
||||
// Size
|
||||
{ 'w-full': props.multiple },
|
||||
|
||||
// Color
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
|
||||
//States
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
container: ({ props, state }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans sm:text-sm leading-none',
|
||||
|
||||
// Flex
|
||||
'flex items-center flex-wrap',
|
||||
'gap-1',
|
||||
|
||||
// Spacing
|
||||
'm-0 list-none',
|
||||
'px-3 py-1',
|
||||
{ 'px-3 py-1.5': !props.multiple, 'px-3 py-1': props.multiple },
|
||||
// Size
|
||||
'w-full',
|
||||
|
||||
// Shape
|
||||
'appearance-none rounded-md',
|
||||
|
||||
// Color
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'shadow-sm',
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0',
|
||||
// States
|
||||
{ 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-text overflow-hidden'
|
||||
]
|
||||
}),
|
||||
inputtoken: ({ props }) => ({
|
||||
class: [{ 'py-1.5 px-0': !props.multiple, 'p-0.5': props.multiple }, , 'inline-flex flex-auto']
|
||||
}),
|
||||
input: ({ props }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans sm:text-sm leading-none',
|
||||
|
||||
// Shape
|
||||
'appearance-none rounded-md',
|
||||
{ 'rounded-tr-none rounded-br-none': props.dropdown },
|
||||
{ 'outline-none shadow-none rounded-none': props.multiple },
|
||||
|
||||
// Size
|
||||
{ 'w-full': props.multiple },
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
{ 'py-1.5 px-3': !props.multiple, 'p-0': props.multiple },
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'border',
|
||||
{
|
||||
'bg-surface-0 dark:bg-surface-900': !props.multiple,
|
||||
'border-surface-300 dark:border-surface-700': !props.multiple && !props.invalid,
|
||||
'border-0 bg-transparent': props.multiple
|
||||
},
|
||||
|
||||
// Invalid State
|
||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
{ 'focus:outline-none focus:outline-offset-0 focus:ring-inset focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400': !props.multiple },
|
||||
|
||||
// Transition
|
||||
'transition-colors duration-200'
|
||||
]
|
||||
}),
|
||||
token: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex items-center',
|
||||
|
||||
// Spacing
|
||||
'py-0.5 px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-[1.14rem]',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/70',
|
||||
'bg-surface-200 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: 'leading-5'
|
||||
},
|
||||
removeTokenIcon: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-md leading-6',
|
||||
|
||||
// Spacing
|
||||
'ml-2',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
dropdownbutton: {
|
||||
root: {
|
||||
class: [
|
||||
'relative text-sm leading-none',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom',
|
||||
|
||||
// Shape
|
||||
'rounded-r-md',
|
||||
|
||||
// Size
|
||||
'px-2.5 py-1.5',
|
||||
'-ml-px',
|
||||
|
||||
// Colors
|
||||
'text-surface-600 dark:text-surface-100',
|
||||
'bg-surface-100 dark:bg-surface-800',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-200 dark:hover:bg-surface-700',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
||||
]
|
||||
}
|
||||
},
|
||||
loadingicon: {
|
||||
class: ['text-sm leading-none text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[0.5rem] -mt-2 animate-spin']
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-2',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
'max-h-[15rem]',
|
||||
'overflow-auto',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
{ 'font-normal': !context.selected, 'font-bold': context.selected },
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-none',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
|
||||
{ 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
|
||||
{ 'bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700': context.focused && context.selected },
|
||||
{ 'bg-transparent text-surface-700 dark:text-white/80': !context.focused && context.selected },
|
||||
|
||||
//States
|
||||
'hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: [
|
||||
//Font
|
||||
'font-bold',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-600/80',
|
||||
|
||||
// Misc
|
||||
'cursor-auto'
|
||||
]
|
||||
},
|
||||
emptymessage: {
|
||||
class: [
|
||||
// Font
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-transparent'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
45
resources/css/presets/aura/avatar/index.js
Normal file
45
resources/css/presets/aura/avatar/index.js
Normal file
@ -0,0 +1,45 @@
|
||||
export default {
|
||||
root: ({ props, parent }) => ({
|
||||
class: [
|
||||
// Font
|
||||
{
|
||||
'text-sm': props.size == null || props.size == 'normal',
|
||||
'text-lg': props.size == 'large',
|
||||
'text-xl': props.size == 'xlarge'
|
||||
},
|
||||
|
||||
// Alignments
|
||||
'inline-flex items-center justify-center',
|
||||
'shrink-0',
|
||||
'relative',
|
||||
|
||||
// Sizes
|
||||
{
|
||||
'h-8 w-8': props.size == null || props.size == 'normal',
|
||||
'w-12 h-12': props.size == 'large',
|
||||
'w-16 h-16': props.size == 'xlarge'
|
||||
},
|
||||
{ '-ml-4': parent.instance.$style?.name == 'avatargroup' },
|
||||
|
||||
// Shapes
|
||||
{
|
||||
'rounded-lg': props.shape == 'square',
|
||||
'rounded-full': props.shape == 'circle'
|
||||
},
|
||||
{ 'border-2': parent.instance.$style?.name == 'avatargroup' },
|
||||
|
||||
// Colors
|
||||
'bg-surface-100 dark:bg-surface-700',
|
||||
{ 'border-white dark:border-surface-800': parent.instance.$style?.name == 'avatargroup' }
|
||||
]
|
||||
}),
|
||||
image: ({ props }) => ({
|
||||
class: [
|
||||
'h-full w-full',
|
||||
{
|
||||
'rounded-lg': props.shape == 'square',
|
||||
'rounded-full': props.shape == 'circle'
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
42
resources/css/presets/aura/badge/index.js
Normal file
42
resources/css/presets/aura/badge/index.js
Normal file
@ -0,0 +1,42 @@
|
||||
export default {
|
||||
root: ({ props, context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-medium',
|
||||
{
|
||||
'text-xs leading-[1.5rem]': props.size == null,
|
||||
'text-lg leading-[2.25rem]': props.size == 'large',
|
||||
'text-2xl leading-[3rem]': props.size == 'xlarge'
|
||||
},
|
||||
|
||||
// Alignment
|
||||
'text-center inline-block',
|
||||
|
||||
// Size
|
||||
'p-0 px-1',
|
||||
{
|
||||
'min-w-[1.5rem] h-[1.5rem]': props.size == null,
|
||||
'min-w-[2.25rem] h-[2.25rem]': props.size == 'large',
|
||||
'min-w-[3rem] h-[3rem]': props.size == 'xlarge'
|
||||
},
|
||||
|
||||
// Shape
|
||||
{
|
||||
'rounded-full': props.value.length == 1,
|
||||
'rounded-[0.71rem]': props.value.length !== 1
|
||||
},
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
{
|
||||
'bg-primary-500 dark:bg-primary-400': props.severity == null || props.severity == 'primary',
|
||||
'bg-surface-500 dark:bg-surface-400': props.severity == 'secondary',
|
||||
'bg-green-500 dark:bg-green-400': props.severity == 'success',
|
||||
'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
|
||||
'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
|
||||
'bg-purple-500 dark:bg-purple-400': props.severity == 'help',
|
||||
'bg-red-500 dark:bg-red-400': props.severity == 'danger'
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
44
resources/css/presets/aura/badgedirective/index.js
Normal file
44
resources/css/presets/aura/badgedirective/index.js
Normal file
@ -0,0 +1,44 @@
|
||||
export default {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-medium',
|
||||
'text-xs leading-6 font-sans',
|
||||
|
||||
// Alignment
|
||||
'flex items-center justify-center',
|
||||
'text-center',
|
||||
|
||||
// Position
|
||||
'absolute top-0 right-0 transform translate-x-1/2 -translate-y-1/2 origin-top-right',
|
||||
|
||||
// Size
|
||||
'm-0',
|
||||
{
|
||||
'p-0': context.nogutter || context.dot,
|
||||
'p-1': !context.nogutter && !context.dot,
|
||||
'min-w-[0.5rem] h-2': context.dot,
|
||||
'min-w-[1rem] h-4': !context.dot
|
||||
},
|
||||
|
||||
// Shape
|
||||
{
|
||||
'rounded-full': context.nogutter || context.dot,
|
||||
'rounded-[10px]': !context.nogutter && !context.dot
|
||||
},
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'ring-1 ring-white dark:ring-surface-900',
|
||||
{
|
||||
'bg-primary-500 dark:bg-primary-400': !context.info && !context.success && !context.warning && !context.danger && !context.help && !context.secondary,
|
||||
'bg-surface-500 dark:bg-surface-400': context.secondary,
|
||||
'bg-green-500 dark:bg-green-400': context.success,
|
||||
'bg-blue-500 dark:bg-blue-400': context.info,
|
||||
'bg-orange-500 dark:bg-orange-400': context.warning,
|
||||
'bg-purple-500 dark:bg-purple-400': context.help,
|
||||
'bg-red-500 dark:bg-red-400': context.danger
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
8
resources/css/presets/aura/blockui/index.js
Normal file
8
resources/css/presets/aura/blockui/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
root: {
|
||||
class: 'relative'
|
||||
},
|
||||
mask: {
|
||||
class: 'bg-surface-900/60 backdrop-blur-sm'
|
||||
}
|
||||
};
|
||||
45
resources/css/presets/aura/breadcrumb/index.js
Normal file
45
resources/css/presets/aura/breadcrumb/index.js
Normal file
@ -0,0 +1,45 @@
|
||||
export default {
|
||||
menu: {
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'flex items-center flex-nowrap gap-x-1.5',
|
||||
|
||||
// Spacing
|
||||
'm-0 p-0 list-none leading-none'
|
||||
]
|
||||
},
|
||||
action: {
|
||||
class: [
|
||||
// Font
|
||||
'font-semibold text-decoration-none text-sm',
|
||||
|
||||
// Flex & Alignment
|
||||
'flex items-center gap-x-1.5 ',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/70',
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0',
|
||||
'focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition-shadow duration-200'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: 'text-surface-500 dark:text-white/70'
|
||||
},
|
||||
separator: {
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'flex items-center shrink-0',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/70'
|
||||
]
|
||||
}
|
||||
};
|
||||
221
resources/css/presets/aura/button/index.js
Normal file
221
resources/css/presets/aura/button/index.js
Normal file
@ -0,0 +1,221 @@
|
||||
export default {
|
||||
root: ({ props, context, parent }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignments
|
||||
'items-center justify-center inline-flex text-center align-bottom',
|
||||
|
||||
// Sizes & Spacing
|
||||
'text-sm',
|
||||
{
|
||||
'px-2.5 py-1.5 min-w-[2rem]': props.size === null,
|
||||
'px-2 py-1': props.size === 'small',
|
||||
'px-3 py-2': props.size === 'large'
|
||||
},
|
||||
{
|
||||
'h-8 w-8 p-0': props.label == null && props.icon !== null
|
||||
},
|
||||
|
||||
// Shapes
|
||||
{ 'shadow-sm': !props.raised && !props.link && !props.text, 'shadow-lg': props.raised },
|
||||
{ 'rounded-md': !props.rounded, 'rounded-full': props.rounded },
|
||||
{ 'rounded-none first:rounded-l-md last:rounded-r-md self-center': parent.instance.$name == 'InputGroup' },
|
||||
|
||||
// Link Button
|
||||
{ 'text-primary-600 bg-transparent ring-transparent': props.link },
|
||||
|
||||
// Plain Button
|
||||
{ 'text-white bg-gray-500 ring-1 ring-gray-500': props.plain && !props.outlined && !props.text },
|
||||
// Plain Text Button
|
||||
{ 'text-surface-500': props.plain && props.text },
|
||||
// Plain Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-gray-500': props.plain && props.outlined },
|
||||
|
||||
// Text Button
|
||||
{ 'bg-transparent ring-transparent': props.text && !props.plain },
|
||||
|
||||
// Outlined Button
|
||||
{ 'bg-transparent': props.outlined && !props.plain },
|
||||
|
||||
// --- Severity Buttons ---
|
||||
|
||||
// Primary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'bg-primary-500 dark:bg-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-primary-500 dark:ring-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Primary Text Button
|
||||
{ 'text-primary-500 dark:text-primary-400': props.text && props.severity === null && !props.plain },
|
||||
// Primary Outlined Button
|
||||
{ 'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20': props.outlined && props.severity === null && !props.plain },
|
||||
|
||||
// Secondary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-surface-500 dark:ring-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Secondary Text Button
|
||||
{ 'text-surface-500 dark:text-surface-400': props.text && props.severity === 'secondary' && !props.plain },
|
||||
// Secondary Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain },
|
||||
|
||||
// Success Button
|
||||
{
|
||||
'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-green-500 dark:ring-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Success Text Button
|
||||
{ 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
|
||||
// Success Outlined Button
|
||||
{ 'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain },
|
||||
|
||||
// Info Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-blue-500 dark:ring-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Info Text Button
|
||||
{ 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
|
||||
// Info Outlined Button
|
||||
{ 'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain },
|
||||
|
||||
// Warning Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-orange-500 dark:ring-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Warning Text Button
|
||||
{ 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
|
||||
// Warning Outlined Button
|
||||
{ 'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain },
|
||||
|
||||
// Help Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-purple-500 dark:ring-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Help Text Button
|
||||
{ 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
|
||||
// Help Outlined Button
|
||||
{ 'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain },
|
||||
|
||||
// Danger Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-red-500 dark:ring-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Danger Text Button
|
||||
{ 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
|
||||
// Danger Outlined Button
|
||||
{ 'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain },
|
||||
|
||||
// --- Severity Button States ---
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
|
||||
{ 'focus:ring-offset-2': !props.link && !props.plain && !props.outlined && !props.text },
|
||||
|
||||
// Link
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': props.link },
|
||||
|
||||
// Plain
|
||||
{ 'hover:bg-gray-600 hover:ring-gray-600': props.plain && !props.outlined && !props.text },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) },
|
||||
|
||||
// Primary
|
||||
{ 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:ring-primary-600 dark:hover:ring-primary-300': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': props.severity === null },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain },
|
||||
|
||||
// Secondary
|
||||
{ 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
|
||||
|
||||
// Success
|
||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:ring-green-600 dark:hover:ring-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
|
||||
|
||||
// Info
|
||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:ring-blue-600 dark:hover:ring-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
|
||||
|
||||
// Warning
|
||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:ring-orange-600 dark:hover:ring-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
|
||||
|
||||
// Help
|
||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:ring-purple-600 dark:hover:ring-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
|
||||
|
||||
// Danger
|
||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:ring-red-600 dark:hover:ring-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
|
||||
|
||||
// Disabled
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden select-none'
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'duration-200',
|
||||
'font-semibold',
|
||||
{
|
||||
'hover:underline': props.link
|
||||
},
|
||||
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
}
|
||||
]
|
||||
}),
|
||||
loadingicon: ({ props }) => ({
|
||||
class: [
|
||||
'h-3 w-3',
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
},
|
||||
'animate-spin'
|
||||
]
|
||||
}),
|
||||
badge: ({ props }) => ({
|
||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
||||
})
|
||||
};
|
||||
607
resources/css/presets/aura/calendar/index.js
Normal file
607
resources/css/presets/aura/calendar/index.js
Normal file
@ -0,0 +1,607 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'max-w-full',
|
||||
'relative',
|
||||
'shadow-sm',
|
||||
'rounded-md',
|
||||
// Misc
|
||||
{ 'opacity-40 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
input: ({ props }) => ({
|
||||
class: [
|
||||
// Display
|
||||
'flex flex-auto',
|
||||
|
||||
// Font
|
||||
'font-sans leading-none sm:text-sm',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-offset-0',
|
||||
{ 'ring-surface-300 dark:ring-surface-700': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// Spacing
|
||||
'm-0 py-1.5 px-3',
|
||||
'-ml-px',
|
||||
|
||||
// Shape
|
||||
'appearance-none',
|
||||
{ 'rounded-md': !props.showIcon || props.iconDisplay == 'input' },
|
||||
{ 'rounded-l-md flex-1 pr-9 ': props.showIcon && props.iconDisplay !== 'input' },
|
||||
{ 'rounded-md flex-1 pr-9': props.showIcon && props.iconDisplay === 'input' },
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'outline-none focus:ring-primary-500 dark:focus:ring-primary-400'
|
||||
]
|
||||
}),
|
||||
inputicon: {
|
||||
class: ['sm:text-sm', 'absolute top-[50%] -mt-2', 'text-surface-600 dark:text-surface-200', 'right-[.75rem]']
|
||||
},
|
||||
dropdownbutton: {
|
||||
root: {
|
||||
class: [
|
||||
'relative text-sm',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom',
|
||||
|
||||
// Shape
|
||||
'rounded-r-md',
|
||||
|
||||
// Size
|
||||
'px-2.5 py-1.5 leading-none',
|
||||
|
||||
// Colors
|
||||
'text-surface-600 dark:text-surface-100',
|
||||
'bg-surface-100 dark:bg-surface-800',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-200 dark:hover:bg-surface-700',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
||||
]
|
||||
}
|
||||
},
|
||||
panel: ({ props }) => ({
|
||||
class: [
|
||||
// Display & Position
|
||||
{
|
||||
absolute: !props.inline,
|
||||
'inline-block': props.inline
|
||||
},
|
||||
|
||||
// Size
|
||||
{ 'w-auto p-2 ': !props.inline },
|
||||
{ 'min-w-[80vw] w-auto p-2 ': props.touchUI },
|
||||
{ 'p-2 min-w-full': props.inline },
|
||||
|
||||
// Shape
|
||||
'rounded-lg',
|
||||
{
|
||||
'shadow-md ring-1': !props.inline
|
||||
},
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'ring-surface-200 dark:ring-surface-700',
|
||||
|
||||
//misc
|
||||
{ 'overflow-x-auto': props.inline }
|
||||
]
|
||||
}),
|
||||
datepickerMask: {
|
||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
|
||||
},
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
//Font
|
||||
'font-semibold text-md',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-between',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
{ 'py-2 pl-2 pb-4': !(props.numberOfMonths > 1), 'py-2 pb-4': props.numberOfMonths > 1 },
|
||||
|
||||
// Shape
|
||||
'rounded-t-md',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800'
|
||||
]
|
||||
}),
|
||||
previousbutton: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
{ ' order-2': !(props.numberOfMonths > 1), 'order-1': props.numberOfMonths > 1 },
|
||||
// Size
|
||||
'p-1.5 m-0',
|
||||
|
||||
// Colors
|
||||
'text-surface-500 dark:text-white/60',
|
||||
'border-0',
|
||||
'bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden'
|
||||
]
|
||||
}),
|
||||
title: ({ props }) => ({
|
||||
class: [
|
||||
// Text
|
||||
'leading-6',
|
||||
'my-0',
|
||||
'order-1',
|
||||
{ 'mr-auto': !(props.numberOfMonths > 1), ' mx-auto': props.numberOfMonths > 1 }
|
||||
]
|
||||
}),
|
||||
monthTitle: {
|
||||
class: [
|
||||
// Font
|
||||
'text-base leading-6',
|
||||
'font-semibold',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/80',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Spacing
|
||||
'm-0 mr-2',
|
||||
|
||||
// States
|
||||
'hover:text-primary-500 dark:hover:text-primary-400',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
yearTitle: {
|
||||
class: [
|
||||
// Font
|
||||
'text-base leading-6',
|
||||
'font-semibold',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/80',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
|
||||
// States
|
||||
'hover:text-primary-500 dark:hover:text-primary-400',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
nextbutton: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center order-3',
|
||||
{ ' order-3': !(props.numberOfMonths > 1), 'order-1': props.numberOfMonths > 1 },
|
||||
|
||||
// Size
|
||||
'p-1.5 m-0',
|
||||
|
||||
// Colors
|
||||
'text-surface-500 dark:text-white/60',
|
||||
'border-0',
|
||||
'bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden'
|
||||
]
|
||||
}),
|
||||
table: {
|
||||
class: [
|
||||
// Size & Shape
|
||||
'w-full',
|
||||
|
||||
// Spacing
|
||||
'm-0 my-2'
|
||||
]
|
||||
},
|
||||
tableheadercell: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-0 md:p-2'
|
||||
]
|
||||
},
|
||||
tablebodyrow: {
|
||||
class: ['border-b border-surface-200 dark:border-surface-700 last:border-b-0']
|
||||
},
|
||||
weekheader: {
|
||||
class: ['leading-6 text-sm font-normal', 'text-surface-600 dark:text-white/70', 'opacity-40 cursor-default', 'mb-2']
|
||||
},
|
||||
weeknumber: {
|
||||
class: ['text-surface-600 dark:text-white/70 font-normal', 'opacity-40 cursor-default']
|
||||
},
|
||||
weekday: {
|
||||
class: [
|
||||
// Colors
|
||||
'text-surface-500 dark:text-white/60 font-normal'
|
||||
]
|
||||
},
|
||||
day: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-0 md:p-2'
|
||||
]
|
||||
},
|
||||
weeklabelcontainer: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
'mx-auto',
|
||||
|
||||
// Shape & Size
|
||||
'w-10 h-10',
|
||||
'rounded-full',
|
||||
'border-transparent border',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
|
||||
'text-primary-500 dark:text-primary-400': context.selected && !context.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
{
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80': !context.disabled
|
||||
},
|
||||
{
|
||||
'opacity-40 cursor-default': context.disabled,
|
||||
'cursor-pointer': !context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
daylabel: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
'mx-auto',
|
||||
|
||||
// Shape & Size
|
||||
'w-8 h-8',
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-0 bg-surface-900 dark:text-surface-900 dark:bg-surface-0': context.date.today && !context.selected && !context.disabled,
|
||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled && !context.date.today,
|
||||
'text-primary-500 dark:text-primary-400': context.selected && !context.disabled && !context.date.today,
|
||||
'text-primary-200 dark:text-primary-600 bg-surface-900 dark:bg-surface-0': context.selected && !context.disabled && context.date.today
|
||||
},
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
{
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-600/80': !context.disabled,
|
||||
'hover:bg-surface-700 dark:hover:bg-surface-200': !context.disabled && context.date.today
|
||||
},
|
||||
|
||||
{
|
||||
'opacity-40 cursor-default': context.disabled,
|
||||
'cursor-pointer': !context.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
monthpicker: {
|
||||
class: [
|
||||
// Spacing
|
||||
'my-2'
|
||||
]
|
||||
},
|
||||
month: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-1/3',
|
||||
'px-2.5 py-1.5',
|
||||
'mt-1',
|
||||
'text-md leading-none',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
|
||||
'text-primary-500 dark:text-primary-400': context.selected && !context.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-600/80',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}),
|
||||
yearpicker: {
|
||||
class: [
|
||||
// Spacing
|
||||
'my-2'
|
||||
]
|
||||
},
|
||||
year: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-1/3',
|
||||
'px-2.5 py-1.5',
|
||||
'mt-1',
|
||||
'text-md leading-none',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-600 dark:text-white/70 bg-transparent': !context.selected && !context.disabled,
|
||||
'text-primary-500 dark:text-primary-400': context.selected && !context.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-600/80',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}),
|
||||
timepicker: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
'justify-center items-center',
|
||||
|
||||
// Spacing
|
||||
'p-1.5'
|
||||
]
|
||||
},
|
||||
separatorcontainer: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'flex-col',
|
||||
|
||||
// Spacing
|
||||
'px-2'
|
||||
]
|
||||
},
|
||||
separator: {
|
||||
class: [
|
||||
// Text
|
||||
'text-xl'
|
||||
]
|
||||
},
|
||||
hourpicker: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'flex-col',
|
||||
|
||||
// Spacing
|
||||
'px-2'
|
||||
]
|
||||
},
|
||||
minutepicker: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'flex-col',
|
||||
|
||||
// Spacing
|
||||
'px-2'
|
||||
]
|
||||
},
|
||||
secondPicker: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'flex-col',
|
||||
|
||||
// Spacing
|
||||
'px-2'
|
||||
]
|
||||
},
|
||||
ampmpicker: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'flex-col',
|
||||
|
||||
// Spacing
|
||||
'px-2'
|
||||
]
|
||||
},
|
||||
incrementbutton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'p-1.5 m-0',
|
||||
|
||||
// Colors
|
||||
'text-surface-500 dark:text-white/60',
|
||||
'border-0',
|
||||
'bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden'
|
||||
]
|
||||
},
|
||||
decrementbutton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'p-1.5 m-0',
|
||||
|
||||
// Colors
|
||||
'text-surface-500 dark:text-white/60',
|
||||
'border-0',
|
||||
'bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden'
|
||||
]
|
||||
},
|
||||
groupcontainer: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex'
|
||||
]
|
||||
},
|
||||
group: {
|
||||
class: [
|
||||
// Flexbox and Sizing
|
||||
'flex-1',
|
||||
|
||||
// Borders
|
||||
'border-l',
|
||||
'border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Spacing
|
||||
'pr-0.5',
|
||||
'pl-0.5',
|
||||
'pt-0',
|
||||
'pb-0',
|
||||
|
||||
// Pseudo-Classes
|
||||
'first:pl-0',
|
||||
'first:border-l-0'
|
||||
]
|
||||
},
|
||||
buttonbar: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex justify-between items-center',
|
||||
|
||||
// Spacing
|
||||
'pt-2.5 pb-1.5 px-0',
|
||||
|
||||
// Shape
|
||||
'border-t border-surface-200 dark:border-surface-700'
|
||||
]
|
||||
},
|
||||
todaybutton: {
|
||||
root: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Spacing
|
||||
'px-2.5 py-1.5 text-sm leading-none',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'bg-transparent border-transparent',
|
||||
'text-primary-500 dark:text-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition-colors duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
'hover:bg-primary-300/20',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}
|
||||
},
|
||||
clearbutton: {
|
||||
root: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Spacing
|
||||
'px-2.5 py-1.5 text-sm leading-none',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'bg-transparent border-transparent',
|
||||
'text-primary-500 dark:text-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition-colors duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
'hover:bg-primary-300/20',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
37
resources/css/presets/aura/card/index.js
Normal file
37
resources/css/presets/aura/card/index.js
Normal file
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
//Shape
|
||||
'rounded-lg',
|
||||
'shadow-md',
|
||||
|
||||
//Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'text-surface-700 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
header: {
|
||||
class: ['border-b border-surface-200 dark:border-surface-700']
|
||||
},
|
||||
body: {
|
||||
class: 'py-5'
|
||||
},
|
||||
title: {
|
||||
class: 'text-lg font-medium mb-2 px-5 md:px-6'
|
||||
},
|
||||
subtitle: {
|
||||
class: [
|
||||
//Spacing
|
||||
'mb-1 px-5 md:px-6',
|
||||
|
||||
//Color
|
||||
'text-surface-600 dark:text-surface-0/60'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: 'py-6 px-5 md:px-6'
|
||||
},
|
||||
footer: {
|
||||
class: ['px-5 md:px-6 pt-5 pb-0', 'border-t border-surface-200 dark:border-surface-700']
|
||||
}
|
||||
};
|
||||
149
resources/css/presets/aura/carousel/index.js
Normal file
149
resources/css/presets/aura/carousel/index.js
Normal file
@ -0,0 +1,149 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex flex-col'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Flexbox & Overflow
|
||||
'flex flex-col overflow-auto'
|
||||
]
|
||||
},
|
||||
container: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
|
||||
// Orientation
|
||||
{
|
||||
'flex-row': props.orientation !== 'vertical',
|
||||
'flex-col': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
previousbutton: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center self-center',
|
||||
|
||||
// Sizing & Overflow
|
||||
'overflow-hidden w-8 h-8',
|
||||
|
||||
// Spacing
|
||||
'mx-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Border & Background
|
||||
'border-0 bg-transparent',
|
||||
|
||||
// Color
|
||||
'text-surface-600',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
nextbutton: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center self-center',
|
||||
|
||||
// Sizing & Overflow
|
||||
'overflow-hidden w-8 h-8',
|
||||
|
||||
// Spacing
|
||||
'mx-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Border & Background
|
||||
'border-0 bg-transparent',
|
||||
|
||||
// Color
|
||||
'text-surface-600',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
itemscontent: {
|
||||
class: [
|
||||
// Overflow & Width
|
||||
'overflow-hidden w-full'
|
||||
]
|
||||
},
|
||||
itemscontainer: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
|
||||
// Orientation & Sizing
|
||||
{
|
||||
'flex-row': props.orientation !== 'vertical',
|
||||
'flex-col h-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
item: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex shrink-0 grow ',
|
||||
|
||||
// Size
|
||||
{
|
||||
'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
|
||||
|
||||
'w-full h-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
itemcloned: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex shrink-0 grow',
|
||||
'unvisible',
|
||||
|
||||
// Size
|
||||
{
|
||||
'w-full sm:w-[50%] md:w-[33.333333333333336%]': props.orientation !== 'vertical',
|
||||
|
||||
'w-full h-full': props.orientation == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
indicators: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex flex-row justify-center flex-wrap'
|
||||
]
|
||||
},
|
||||
indicator: {
|
||||
class: [
|
||||
// Spacing
|
||||
'mr-2 mb-2'
|
||||
]
|
||||
},
|
||||
indicatorbutton: ({ context }) => ({
|
||||
class: [
|
||||
// Sizing & Shape
|
||||
'w-6 h-1.5 rounded-md',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Focus Styles
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Color & Background
|
||||
{
|
||||
'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted,
|
||||
'bg-primary-500 hover:bg-primary-600': context.highlighted
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
209
resources/css/presets/aura/cascadeselect/index.js
Normal file
209
resources/css/presets/aura/cascadeselect/index.js
Normal file
@ -0,0 +1,209 @@
|
||||
export default {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-sm',
|
||||
|
||||
// Color and Background
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
|
||||
// States
|
||||
{ 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none',
|
||||
{ 'opacity-60': props.disabled, 'pointer-events-none': props.disabled }
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
//Font
|
||||
'font-sans',
|
||||
'leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Flex & Alignment
|
||||
' flex flex-auto',
|
||||
|
||||
// Sizing and Spacing
|
||||
'w-[1%]',
|
||||
'py-1.5 px-3',
|
||||
|
||||
//Shape
|
||||
'rounded-none',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'border-0',
|
||||
{ 'text-surface-800 dark:text-white/80': props.modelValue, 'text-surface-400 dark:text-surface-500': !props.modelValue },
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:shadow-none',
|
||||
|
||||
// Misc
|
||||
'relative',
|
||||
'cursor-pointer',
|
||||
'overflow-hidden overflow-ellipsis',
|
||||
'whitespace-nowrap',
|
||||
'appearance-none'
|
||||
]
|
||||
}),
|
||||
dropdownbutton: {
|
||||
class: [
|
||||
//Font
|
||||
'sm:text-sm',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'text-surface-500',
|
||||
|
||||
// Size
|
||||
'w-12',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-md',
|
||||
'rounded-br-md'
|
||||
]
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-2',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: [
|
||||
// Sizing
|
||||
'max-h-[200px]',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none mx-1.5'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
||||
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
|
||||
},
|
||||
|
||||
// Hover States
|
||||
{
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
|
||||
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-shadow',
|
||||
'duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
content: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2 px-4',
|
||||
|
||||
// Misc
|
||||
'no-underline',
|
||||
'overflow-hidden',
|
||||
'cursor-pointer',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
groupicon: {
|
||||
class: [
|
||||
// Alignment
|
||||
'ml-auto'
|
||||
]
|
||||
},
|
||||
sublist: {
|
||||
class: [
|
||||
// Size
|
||||
'w-full sm:w-48',
|
||||
|
||||
// Spacing
|
||||
'p-1.5',
|
||||
'm-0',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-none sm:shadow-md',
|
||||
'border-0',
|
||||
|
||||
// Position
|
||||
'static sm:absolute',
|
||||
'z-10',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
separator: {
|
||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
108
resources/css/presets/aura/checkbox/index.js
Normal file
108
resources/css/presets/aura/checkbox/index.js
Normal file
@ -0,0 +1,108 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: ({ props, context }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked && !props.invalid,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
|
||||
},
|
||||
|
||||
// Invalid State
|
||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
'text-white dark:text-surface-900',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
};
|
||||
45
resources/css/presets/aura/chip/index.js
Normal file
45
resources/css/presets/aura/chip/index.js
Normal file
@ -0,0 +1,45 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex items-center',
|
||||
|
||||
// Spacing
|
||||
'px-2 py-0.5',
|
||||
|
||||
// Shape
|
||||
'rounded-[1.14rem]',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-surface-0/70',
|
||||
'bg-surface-200 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: 'text-xs leading-6 mx-0'
|
||||
},
|
||||
icon: {
|
||||
class: 'leading-6 mr-2'
|
||||
},
|
||||
image: {
|
||||
class: ['w-6 h-6 mr-2', 'rounded-full']
|
||||
},
|
||||
removeIcon: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-md leading-6',
|
||||
|
||||
// Spacing
|
||||
'ml-2',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}
|
||||
};
|
||||
112
resources/css/presets/aura/chips/index.js
Normal file
112
resources/css/presets/aura/chips/index.js
Normal file
@ -0,0 +1,112 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
container: ({ state, props }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans sm:text-sm leading-none',
|
||||
|
||||
// Flex
|
||||
'flex items-center flex-wrap gap-1',
|
||||
|
||||
// Spacing
|
||||
'm-0 py-1 px-3',
|
||||
|
||||
// Size
|
||||
'w-full',
|
||||
|
||||
// Shape
|
||||
'list-none',
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'shadow-sm',
|
||||
|
||||
// States
|
||||
{ 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
|
||||
|
||||
// Transition
|
||||
'transition-colors duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-text overflow-hidden',
|
||||
'appearance-none'
|
||||
]
|
||||
}),
|
||||
|
||||
inputtoken: {
|
||||
class: ['py-0.5 px-0', 'inline-flex flex-auto']
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
// Font
|
||||
'font-sans sm:text-sm leading-none',
|
||||
|
||||
// Size
|
||||
'w-full',
|
||||
|
||||
// Spacing
|
||||
'p-0 m-0',
|
||||
|
||||
// Shape
|
||||
'appearance-none rounded-none',
|
||||
'border-0 outline-none',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-transparent',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500'
|
||||
]
|
||||
},
|
||||
token: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex items-center',
|
||||
|
||||
// Spacing
|
||||
'py-0.5 px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-[1.14rem]',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/70',
|
||||
'bg-surface-200 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: 'leading-5'
|
||||
},
|
||||
removeTokenIcon: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-md leading-6',
|
||||
|
||||
// Spacing
|
||||
'ml-2',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}
|
||||
};
|
||||
123
resources/css/presets/aura/colorpicker/index.js
Normal file
123
resources/css/presets/aura/colorpicker/index.js
Normal file
@ -0,0 +1,123 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Display
|
||||
'inline-block',
|
||||
|
||||
// Misc
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
// Font
|
||||
'font-sans text-base ',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'p-3',
|
||||
|
||||
// Size & Shape
|
||||
'rounded-lg w-8 h-8',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'border border-surface-300 dark:border-surface-700',
|
||||
|
||||
// States
|
||||
'hover:border-primary-500 dark:hover:border-primary-400',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Transition
|
||||
'transition-colors duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
panel: ({ props }) => ({
|
||||
class: [
|
||||
// Position & Size
|
||||
{
|
||||
'relative h-[166px] w-[193px]': props.inline,
|
||||
'absolute h-[166px] w-[193px]': !props.inline
|
||||
},
|
||||
|
||||
// Shape
|
||||
'shadow-md border rounded-md',
|
||||
|
||||
// Colors
|
||||
'bg-surface-800 border-surface-900 dark:border-surface-600'
|
||||
]
|
||||
}),
|
||||
selector: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-[8px] left-[8px]',
|
||||
|
||||
// Size
|
||||
'h-[150px] w-[150px]'
|
||||
]
|
||||
},
|
||||
color: {
|
||||
class: [
|
||||
// Size
|
||||
'h-[150px] w-[150px]'
|
||||
],
|
||||
style: 'background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)'
|
||||
},
|
||||
colorhandle: {
|
||||
class: [
|
||||
'absolute',
|
||||
|
||||
// Shape
|
||||
'rounded-full border border-solid',
|
||||
|
||||
// Size
|
||||
'h-[10px] w-[10px]',
|
||||
|
||||
// Spacing
|
||||
'-ml-[5px] -mt-[5px]',
|
||||
|
||||
// Colors
|
||||
'border-white',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer opacity-85'
|
||||
]
|
||||
},
|
||||
hue: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-[8px] left-[167px]',
|
||||
|
||||
// Size
|
||||
'h-[150px] w-[17px]',
|
||||
|
||||
// Opacity
|
||||
'opacity-85'
|
||||
],
|
||||
style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
|
||||
},
|
||||
huehandle: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute left-0 -ml-[2px] -mt-[5px]',
|
||||
|
||||
// Size
|
||||
'h-[10px] w-[21px]',
|
||||
|
||||
// Shape
|
||||
'border-solid border-2',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer opacity-85'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
122
resources/css/presets/aura/confirmpopup/index.js
Normal file
122
resources/css/presets/aura/confirmpopup/index.js
Normal file
@ -0,0 +1,122 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-lg',
|
||||
'shadow-xl',
|
||||
'border-0',
|
||||
|
||||
// Positioning
|
||||
'z-40 transform origin-center',
|
||||
'mt-3 absolute left-0 top-0',
|
||||
|
||||
// Color
|
||||
'dark:border',
|
||||
'dark:border-surface-700',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
|
||||
// Before: Arrow
|
||||
'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-surface-0 dark:before:border-b-surface-800'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Font
|
||||
'text-sm',
|
||||
|
||||
// Spacing
|
||||
'px-6',
|
||||
'py-3',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-600 dark:text-surface-0/70',
|
||||
|
||||
// Misc
|
||||
'overflow-y-auto'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: 'text-xl mr-2'
|
||||
},
|
||||
footer: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-end',
|
||||
'shrink-0',
|
||||
'text-right',
|
||||
'gap-3',
|
||||
|
||||
// Spacing
|
||||
'px-6',
|
||||
'py-3',
|
||||
|
||||
// Shape
|
||||
'border-t-0',
|
||||
'rounded-b-lg',
|
||||
|
||||
// Colors
|
||||
'bg-surface-50 dark:bg-surface-700',
|
||||
'text-surface-700 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
rejectbutton: {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom justify-center',
|
||||
|
||||
// Sizes & Spacing
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'text-sm',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-primary-500 dark:text-primary-400',
|
||||
|
||||
// States
|
||||
'hover:bg-primary-300/20',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
||||
]
|
||||
}
|
||||
},
|
||||
acceptbutton: {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom justify-center',
|
||||
|
||||
// Sizes & Spacing
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'text-sm',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'ring-1 ring-primary-500 dark:ring-primary-400',
|
||||
|
||||
// States
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400'
|
||||
]
|
||||
}
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
123
resources/css/presets/aura/contextmenu/index.js
Normal file
123
resources/css/presets/aura/contextmenu/index.js
Normal file
@ -0,0 +1,123 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Sizing and Shape
|
||||
'min-w-[12rem]',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Spacing
|
||||
'p-1.5',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'dark:border dark:border-surface-700'
|
||||
]
|
||||
},
|
||||
menu: {
|
||||
class: [
|
||||
// Spacings and Shape
|
||||
'list-none',
|
||||
'm-0',
|
||||
'p-0',
|
||||
'outline-none'
|
||||
]
|
||||
},
|
||||
menuitem: {
|
||||
class: 'relative'
|
||||
},
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
//Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
||||
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
|
||||
},
|
||||
|
||||
// Hover States
|
||||
{
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
|
||||
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-shadow',
|
||||
'duration-200',
|
||||
|
||||
// Disabled
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled }
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-semibold',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2',
|
||||
'px-3',
|
||||
|
||||
// Misc
|
||||
'no-underline',
|
||||
'overflow-hidden',
|
||||
'cursor-pointer',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Spacing
|
||||
'mr-2',
|
||||
'leading-6',
|
||||
'text-sm'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: ['leading-6', 'text-sm']
|
||||
},
|
||||
submenu: ({ props }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'w-full sm:w-48',
|
||||
|
||||
// Spacing
|
||||
'p-1.5',
|
||||
'm-0',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-md',
|
||||
'rounded-md',
|
||||
|
||||
// Position
|
||||
'static sm:absolute',
|
||||
'z-10',
|
||||
{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-700'
|
||||
]
|
||||
}),
|
||||
submenuicon: {
|
||||
class: ['ml-auto']
|
||||
},
|
||||
separator: {
|
||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-250'
|
||||
}
|
||||
};
|
||||
1233
resources/css/presets/aura/datatable/index.js
Normal file
1233
resources/css/presets/aura/datatable/index.js
Normal file
File diff suppressed because it is too large
Load Diff
40
resources/css/presets/aura/dataview/index.js
Normal file
40
resources/css/presets/aura/dataview/index.js
Normal file
@ -0,0 +1,40 @@
|
||||
export default {
|
||||
content: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-0',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800'
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
class: [
|
||||
// flex
|
||||
'flex flex-wrap',
|
||||
|
||||
// Spacing
|
||||
'ml-0 mr-0 mt-0',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800'
|
||||
]
|
||||
},
|
||||
header: {
|
||||
class: [
|
||||
'font-semibold',
|
||||
|
||||
// Spacing
|
||||
'p-6',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700 border-b'
|
||||
]
|
||||
}
|
||||
};
|
||||
3
resources/css/presets/aura/deferred/index.js
Normal file
3
resources/css/presets/aura/deferred/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
root: {}
|
||||
};
|
||||
236
resources/css/presets/aura/dialog/index.js
Normal file
236
resources/css/presets/aura/dialog/index.js
Normal file
@ -0,0 +1,236 @@
|
||||
export default {
|
||||
root: ({ state }) => ({
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-lg',
|
||||
'shadow-xl',
|
||||
'border-0',
|
||||
|
||||
// Size
|
||||
'max-h-[90vh]',
|
||||
{ 'sm:w-full sm:max-w-lg': !state.maximized },
|
||||
'm-0',
|
||||
|
||||
// Transitions
|
||||
'transform',
|
||||
'scale-100',
|
||||
|
||||
// Color
|
||||
'dark:border',
|
||||
'dark:border-surface-700',
|
||||
|
||||
// Maximized State
|
||||
{
|
||||
'transition-none': state.maximized,
|
||||
'transform-none': state.maximized,
|
||||
'!w-screen': state.maximized,
|
||||
'!h-screen': state.maximized,
|
||||
'!max-h-full': state.maximized,
|
||||
'!top-0': state.maximized,
|
||||
'!left-0': state.maximized
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-between',
|
||||
'shrink-0',
|
||||
|
||||
// Spacing
|
||||
'p-6 pt-4',
|
||||
|
||||
// Shape
|
||||
'rounded-tl-lg',
|
||||
'rounded-tr-lg',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
title: {
|
||||
class: ['font-semibold text-base leading-6']
|
||||
},
|
||||
icons: {
|
||||
class: ['flex items-center']
|
||||
},
|
||||
closeButton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size and Spacing
|
||||
'mr-2',
|
||||
'last:mr-0',
|
||||
'w-6 h-6',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
'text-surface-500',
|
||||
'bg-transparent',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden'
|
||||
]
|
||||
},
|
||||
maximizablebutton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size and Spacing
|
||||
'mr-2',
|
||||
'last:mr-0',
|
||||
'w-6 h-6',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
'text-surface-500',
|
||||
'bg-transparent',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: {
|
||||
class: [
|
||||
// Display
|
||||
'inline-block',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3'
|
||||
]
|
||||
},
|
||||
maximizableicon: {
|
||||
class: [
|
||||
// Display
|
||||
'inline-block',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3'
|
||||
]
|
||||
},
|
||||
content: ({ state, instance }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'text-sm',
|
||||
// Spacing
|
||||
'px-6',
|
||||
'pb-3',
|
||||
'pt-0',
|
||||
|
||||
// Shape
|
||||
{
|
||||
grow: state.maximized,
|
||||
'rounded-bl-lg': !instance.$slots.footer,
|
||||
'rounded-br-lg': !instance.$slots.footer
|
||||
},
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-600 dark:text-surface-0/70',
|
||||
|
||||
// Misc
|
||||
'overflow-y-auto'
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-end',
|
||||
'shrink-0',
|
||||
'text-right',
|
||||
'gap-3',
|
||||
|
||||
// Spacing
|
||||
'px-6',
|
||||
'py-3',
|
||||
|
||||
// Shape
|
||||
'border-t-0',
|
||||
'rounded-b-lg',
|
||||
|
||||
// Colors
|
||||
'bg-surface-50 dark:bg-surface-700',
|
||||
'text-surface-700 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
mask: ({ props }) => ({
|
||||
class: [
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-300',
|
||||
{ 'p-5': !props.position == 'full' },
|
||||
|
||||
// Background and Effects
|
||||
{ 'has-[.mask-active]:bg-transparent dark:has-[.mask-active]:bg-transparent bg-surface-500/70 dark:bg-surface-700/70': props.modal, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal }
|
||||
]
|
||||
}),
|
||||
transition: ({ props }) => {
|
||||
return props.position === 'top'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 -translate-y-full translate-z-0 mask-active'
|
||||
}
|
||||
: props.position === 'bottom'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-y-full mask-active',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 translate-x-0 translate-y-full translate-z-0 mask-active'
|
||||
}
|
||||
: props.position === 'left' || props.position === 'topleft' || props.position === 'bottomleft'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 -translate-x-full translate-y-0 translate-z-0 mask-active'
|
||||
}
|
||||
: props.position === 'right' || props.position === 'topright' || props.position === 'bottomright'
|
||||
? {
|
||||
enterFromClass: 'opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 opacity-0 scale-75 translate-x-full translate-y-0 translate-z-0 mask-active'
|
||||
}
|
||||
: {
|
||||
enterFromClass: 'opacity-0 scale-75 mask-active',
|
||||
enterActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveActiveClass: 'transition-all duration-200 ease-out',
|
||||
leaveToClass: 'opacity-0 scale-75 mask-active'
|
||||
};
|
||||
}
|
||||
};
|
||||
67
resources/css/presets/aura/divider/index.js
Normal file
67
resources/css/presets/aura/divider/index.js
Normal file
@ -0,0 +1,67 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Flex and Position
|
||||
'flex relative',
|
||||
{ 'justify-center': props.layout == 'vertical' },
|
||||
{ 'items-center': props.layout == 'vertical' },
|
||||
{
|
||||
'justify-start': props?.align == 'left' && props.layout == 'horizontal',
|
||||
'justify-center': props?.align == 'center' && props.layout == 'horizontal',
|
||||
'justify-end': props?.align == 'right' && props.layout == 'horizontal',
|
||||
'items-center': props?.align == 'top' && props.layout == 'vertical',
|
||||
'items-start': props?.align == 'center' && props.layout == 'vertical',
|
||||
'items-end': props?.align == 'bottom' && props.layout == 'vertical'
|
||||
},
|
||||
|
||||
// Spacing
|
||||
{
|
||||
'my-5 mx-0 py-0 px-5': props.layout == 'horizontal',
|
||||
'mx-4 md:mx-5 py-5': props.layout == 'vertical'
|
||||
},
|
||||
|
||||
// Size
|
||||
{
|
||||
'w-full': props.layout == 'horizontal',
|
||||
'min-h-full': props.layout == 'vertical'
|
||||
},
|
||||
|
||||
// Before: Line
|
||||
'before:block',
|
||||
|
||||
// Position
|
||||
{
|
||||
'before:absolute before:left-0 before:top-1/2': props.layout == 'horizontal',
|
||||
'before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2': props.layout == 'vertical'
|
||||
},
|
||||
|
||||
// Size
|
||||
{
|
||||
'before:w-full': props.layout == 'horizontal',
|
||||
'before:min-h-full': props.layout == 'vertical'
|
||||
},
|
||||
|
||||
// Shape
|
||||
{
|
||||
'before:border-solid': props.type == 'solid',
|
||||
'before:border-dotted': props.type == 'dotted',
|
||||
'before:border-dashed': props.type == 'dashed'
|
||||
},
|
||||
|
||||
// Color
|
||||
{
|
||||
'before:border-t before:border-surface-200 before:dark:border-surface-600': props.layout == 'horizontal',
|
||||
'before:border-l before:border-surface-200 before:dark:border-surface-600': props.layout == 'vertical'
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: {
|
||||
class: [
|
||||
// Space and Position
|
||||
'p-2 z-10',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800'
|
||||
]
|
||||
}
|
||||
};
|
||||
93
resources/css/presets/aura/dock/index.js
Normal file
93
resources/css/presets/aura/dock/index.js
Normal file
@ -0,0 +1,93 @@
|
||||
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'
|
||||
]
|
||||
}
|
||||
};
|
||||
261
resources/css/presets/aura/dropdown/index.js
Normal file
261
resources/css/presets/aura/dropdown/index.js
Normal file
@ -0,0 +1,261 @@
|
||||
export default {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-sm',
|
||||
|
||||
// Color and Background
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
|
||||
// States
|
||||
{ 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none',
|
||||
{ 'opacity-60': props.disabled, 'pointer-events-none': props.disabled }
|
||||
]
|
||||
}),
|
||||
input: ({ props }) => ({
|
||||
class: [
|
||||
//Font
|
||||
'font-sans',
|
||||
'leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Display
|
||||
'block',
|
||||
'flex-auto',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'border-0',
|
||||
{ 'text-surface-800 dark:text-white/80': props.modelValue != undefined, 'text-surface-400 dark:text-surface-500': props.modelValue == undefined },
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
|
||||
// Sizing and Spacing
|
||||
'w-[1%]',
|
||||
'py-1.5 px-3',
|
||||
{ 'pr-7': props.showClear },
|
||||
|
||||
//Shape
|
||||
'rounded-none',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:shadow-none',
|
||||
|
||||
// Misc
|
||||
'relative',
|
||||
'cursor-pointer',
|
||||
'overflow-hidden overflow-ellipsis',
|
||||
'whitespace-nowrap',
|
||||
'appearance-none'
|
||||
]
|
||||
}),
|
||||
trigger: {
|
||||
class: [
|
||||
//Font
|
||||
'sm:text-sm',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'text-surface-500',
|
||||
|
||||
// Size
|
||||
'w-12',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-md',
|
||||
'rounded-br-md'
|
||||
]
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-2',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: [
|
||||
// Sizing
|
||||
'max-h-[15rem]',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
{ 'font-normal': !context.selected, 'font-bold': context.selected },
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-none',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected && !context.disabled },
|
||||
{ 'text-surface-600 dark:text-white/70': !context.focused && !context.selected && context.disabled },
|
||||
{ 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
|
||||
{ 'bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700': context.focused && context.selected },
|
||||
{ 'bg-transparent text-surface-700 dark:text-white/80': !context.focused && context.selected },
|
||||
|
||||
//States
|
||||
'hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700',
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
{ 'pointer-events-none cursor-default': context.disabled },
|
||||
{ 'cursor-pointer': !context.disabled },
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: [
|
||||
//Font
|
||||
'font-bold',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-600/80',
|
||||
|
||||
// Misc
|
||||
'cursor-auto'
|
||||
]
|
||||
},
|
||||
emptymessage: {
|
||||
class: [
|
||||
// Font
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-transparent'
|
||||
]
|
||||
},
|
||||
header: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
//Shape
|
||||
'rounded-tl-md',
|
||||
'rounded-tr-md',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-100 dark:bg-surface-800'
|
||||
]
|
||||
},
|
||||
filtercontainer: {
|
||||
class: 'relative'
|
||||
},
|
||||
filterinput: {
|
||||
class: [
|
||||
// Font
|
||||
'font-sans',
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Sizing
|
||||
'py-1.5 px-3',
|
||||
'pr-7',
|
||||
'-mr-7',
|
||||
'w-full',
|
||||
|
||||
//Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'placeholder:text-surface-400',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-tl-md',
|
||||
'rounded-tr-md',
|
||||
'appearance-none',
|
||||
|
||||
// States
|
||||
'focus:ring-2 focus:ring-inset focus:outline-none focus:outline-offset-0',
|
||||
'focus:ring-primary-600 dark:focus:ring-primary-500',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
filtericon: {
|
||||
class: ['absolute', 'top-1/2 right-3', '-mt-2']
|
||||
},
|
||||
clearicon: {
|
||||
class: [
|
||||
// Color
|
||||
'text-surface-500',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-1/2',
|
||||
'right-12',
|
||||
|
||||
// Spacing
|
||||
'-mt-2'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
85
resources/css/presets/aura/fieldset/index.js
Normal file
85
resources/css/presets/aura/fieldset/index.js
Normal file
@ -0,0 +1,85 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'block',
|
||||
|
||||
// Spacing
|
||||
'px-5 md:px-6 py-5',
|
||||
|
||||
// Shape
|
||||
'rounded-md rounded-lg',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700 ring-offset-0'
|
||||
]
|
||||
},
|
||||
legend: ({ props }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-medium',
|
||||
'leading-none',
|
||||
|
||||
//Spacing
|
||||
{ 'p-0': props.toggleable, 'px-3 py-1.5': !props.toggleable },
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
|
||||
// Transition
|
||||
'transition-none',
|
||||
|
||||
// States
|
||||
{ '': props.toggleable },
|
||||
{ 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-600 ring-inset dark:focus:ring-primary-500': props.toggleable }
|
||||
]
|
||||
}),
|
||||
toggler: ({ props }) => ({
|
||||
class: [
|
||||
// Alignments
|
||||
'flex items-center justify-center',
|
||||
'relative',
|
||||
|
||||
//Spacing
|
||||
{ 'px-3 py-1.5': props.toggleable },
|
||||
|
||||
// Shape
|
||||
{ 'rounded-md': props.toggleable },
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-surface-200 hover:text-surface-900 hover:text-surface-900': props.toggleable },
|
||||
|
||||
// States
|
||||
{ 'hover:text-surface-900 dark:hover:text-surface-100': props.toggleable },
|
||||
{ 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500': props.toggleable },
|
||||
|
||||
// Misc
|
||||
{
|
||||
'transition-none cursor-pointer overflow-hidden select-none': props.toggleable
|
||||
}
|
||||
]
|
||||
}),
|
||||
togglerIcon: {
|
||||
class: 'mr-2 inline-block'
|
||||
},
|
||||
legendTitle: {
|
||||
class: 'flex items-center justify-center leading-none'
|
||||
},
|
||||
content: {
|
||||
class: 'p-0'
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
||||
enterToClass: 'max-h-[1000px]',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
173
resources/css/presets/aura/fileupload/index.js
Normal file
173
resources/css/presets/aura/fileupload/index.js
Normal file
@ -0,0 +1,173 @@
|
||||
export default {
|
||||
input: {
|
||||
class: 'hidden'
|
||||
},
|
||||
buttonbar: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
'flex-wrap',
|
||||
|
||||
// Colors
|
||||
'bg-surface-50',
|
||||
'dark:bg-surface-800',
|
||||
'text-surface-700',
|
||||
'dark:text-white/80',
|
||||
|
||||
// Spacing
|
||||
'p-5',
|
||||
'gap-2',
|
||||
|
||||
// Borders
|
||||
'border',
|
||||
'border-solid',
|
||||
'border-surface-200',
|
||||
'dark:border-surface-700',
|
||||
'border-b-0',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-lg',
|
||||
'rounded-tl-lg'
|
||||
]
|
||||
},
|
||||
chooseButton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom justify-center',
|
||||
|
||||
// Spacing
|
||||
'px-2.5 py-1.5',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Font
|
||||
'text-sm',
|
||||
'font-semibold',
|
||||
|
||||
// Colors
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border-primary-500 dark:border-primary-400',
|
||||
|
||||
// States
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden',
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
chooseIcon: {
|
||||
class: ['mr-2', 'inline-block']
|
||||
},
|
||||
chooseButtonLabel: {
|
||||
class: ['flex-1', 'font-bold']
|
||||
},
|
||||
uploadbutton: {
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
}
|
||||
},
|
||||
cancelbutton: {
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
}
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0',
|
||||
'dark:bg-surface-900',
|
||||
'text-surface-700',
|
||||
'dark:text-white/80',
|
||||
|
||||
// Spacing
|
||||
'p-8',
|
||||
|
||||
// Borders
|
||||
'border',
|
||||
'border-surface-200',
|
||||
'dark:border-surface-700',
|
||||
|
||||
// Shape
|
||||
'rounded-b-lg'
|
||||
]
|
||||
},
|
||||
file: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
'flex-wrap',
|
||||
|
||||
// Spacing
|
||||
'p-4',
|
||||
'mb-2',
|
||||
'last:mb-0',
|
||||
|
||||
// Borders
|
||||
'border',
|
||||
'border-surface-200',
|
||||
'dark:border-surface-700',
|
||||
'gap-2',
|
||||
|
||||
// Shape
|
||||
'rounded'
|
||||
]
|
||||
},
|
||||
thumbnail: {
|
||||
class: 'shrink-0'
|
||||
},
|
||||
fileName: {
|
||||
class: 'mb-2 break-all'
|
||||
},
|
||||
fileSize: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
uploadicon: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
progressbar: {
|
||||
root: {
|
||||
class: [
|
||||
// Position and Overflow
|
||||
'overflow-hidden',
|
||||
'absolute top-0 left-0',
|
||||
|
||||
// Shape and Size
|
||||
'border-0',
|
||||
'h-2',
|
||||
'rounded-md',
|
||||
'w-full',
|
||||
|
||||
// Colors
|
||||
'bg-surface-100 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
value: {
|
||||
class: [
|
||||
// Flexbox & Overflow & Position
|
||||
'absolute flex items-center justify-center overflow-hidden',
|
||||
|
||||
// Colors
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
|
||||
// Spacing & Sizing
|
||||
'm-0',
|
||||
'h-full w-0',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
|
||||
// Transitions
|
||||
'transition-width duration-1000 ease-in-out'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
26
resources/css/presets/aura/floatlabel/index.js
Normal file
26
resources/css/presets/aura/floatlabel/index.js
Normal file
@ -0,0 +1,26 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'block relative',
|
||||
|
||||
// Base Label Appearance
|
||||
'[&>*:last-child]:text-surface-900/60 dark:[&>*:last-child]:text-white/60',
|
||||
'[&>*:last-child]:absolute',
|
||||
'[&>*:last-child]:top-1/2',
|
||||
'[&>*:last-child]:-translate-y-1/2',
|
||||
'[&>*:last-child]:left-3',
|
||||
'[&>*:last-child]:pointer-events-none',
|
||||
'[&>*:last-child]:transition-all',
|
||||
'[&>*:last-child]:duration-200',
|
||||
'[&>*:last-child]:ease',
|
||||
|
||||
// Focus Label Appearance
|
||||
'[&>*:last-child]:has-[:focus]:-top-3',
|
||||
'[&>*:last-child]:has-[:focus]:text-sm',
|
||||
|
||||
// Filled Input Label Appearance
|
||||
'[&>*:last-child]:has-[.filled]:-top-3',
|
||||
'[&>*:last-child]:has-[.filled]:text-sm'
|
||||
]
|
||||
}
|
||||
};
|
||||
306
resources/css/presets/aura/galleria/index.js
Normal file
306
resources/css/presets/aura/galleria/index.js
Normal file
@ -0,0 +1,306 @@
|
||||
export default {
|
||||
content: ({ parent, props }) => ({
|
||||
class: [
|
||||
'flex',
|
||||
{
|
||||
'flex-col': props.fullScreen
|
||||
},
|
||||
{
|
||||
'flex-col': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
|
||||
'flex-row': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
|
||||
}
|
||||
]
|
||||
}),
|
||||
itemwrapper: ({ parent, props }) => ({
|
||||
class: [
|
||||
'group',
|
||||
'flex relative',
|
||||
{
|
||||
'grow shrink w-0 justify-center': props.fullScreen
|
||||
},
|
||||
{
|
||||
'flex-col': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'top',
|
||||
'flex-row items-center': parent.props.indicatorsPosition === 'left' || parent.props.indicatorsPosition === 'right'
|
||||
},
|
||||
{
|
||||
'order-2': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left',
|
||||
'flex-row': parent.props.thumbnailsPosition === 'right'
|
||||
}
|
||||
]
|
||||
}),
|
||||
|
||||
itemcontainer: ({ parent }) => ({
|
||||
class: [
|
||||
'flex h-full relative',
|
||||
{
|
||||
'order-1': parent.props.indicatorsPosition === 'bottom' || parent.props.indicatorsPosition === 'right',
|
||||
'order-2': parent.props.indicatorsPosition === 'top' || parent.props.indicatorsPosition === 'left'
|
||||
}
|
||||
]
|
||||
}),
|
||||
item: {
|
||||
class: [
|
||||
// Flex
|
||||
'flex justify-center items-center h-full w-full',
|
||||
|
||||
// Sizing
|
||||
'h-full w-full'
|
||||
]
|
||||
},
|
||||
thumbnailwrapper: ({ parent }) => ({
|
||||
class: [
|
||||
// Flex
|
||||
'flex flex-col shrink-0',
|
||||
|
||||
{
|
||||
'order-1': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'left'
|
||||
},
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
}),
|
||||
thumbnailcontainer: ({ parent }) => ({
|
||||
class: [
|
||||
// Flex
|
||||
'flex',
|
||||
|
||||
// Spacing
|
||||
'p-4',
|
||||
|
||||
// Colors
|
||||
'bg-black/90',
|
||||
|
||||
{
|
||||
'flex-row': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom',
|
||||
'flex-col grow': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
|
||||
}
|
||||
]
|
||||
}),
|
||||
previousthumbnailbutton: {
|
||||
class: [
|
||||
// Positioning
|
||||
'self-center relative',
|
||||
|
||||
// Display & Flexbox
|
||||
'flex shrink-0 justify-center items-center overflow-hidden',
|
||||
|
||||
// Spacing
|
||||
'm-2',
|
||||
|
||||
// Appearance
|
||||
'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
|
||||
|
||||
// Hover Effects
|
||||
'hover:bg-surface-0/10 hover:text-white',
|
||||
|
||||
// Focus Effects
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
|
||||
]
|
||||
},
|
||||
thumbnailitemscontainer: {
|
||||
class: 'overflow-hidden w-full'
|
||||
},
|
||||
thumbnailitems: ({ parent }) => ({
|
||||
class: [
|
||||
'flex',
|
||||
{
|
||||
'flex-col h-full': parent.props.thumbnailsPosition === 'right' || parent.props.thumbnailsPosition === 'left'
|
||||
}
|
||||
]
|
||||
}),
|
||||
thumbnailitem: ({ parent }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'grow shrink-0',
|
||||
|
||||
// Sizing
|
||||
{
|
||||
'w-full md:w-[25%] lg:w-[20%]': parent.props.thumbnailsPosition === 'top' || parent.props.thumbnailsPosition === 'bottom'
|
||||
},
|
||||
|
||||
// Misc
|
||||
'overflow-auto',
|
||||
'cursor-pointer',
|
||||
'opacity-50',
|
||||
|
||||
// States
|
||||
'hover:opacity-100',
|
||||
'hover:transition-opacity',
|
||||
'hover:duration-300'
|
||||
]
|
||||
}),
|
||||
nextthumbnailbutton: {
|
||||
class: [
|
||||
// Positioning
|
||||
'self-center relative',
|
||||
|
||||
// Display & Flexbox
|
||||
'flex shrink-0 justify-center items-center overflow-hidden',
|
||||
|
||||
// Spacing
|
||||
'm-2',
|
||||
|
||||
// Appearance
|
||||
'bg-transparent text-white w-8 h-8 rounded-full transition duration-200 ease-in-out',
|
||||
|
||||
// Hover Effects
|
||||
'hover:bg-surface-0/10 hover:text-white',
|
||||
|
||||
// Focus Effects
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
|
||||
]
|
||||
},
|
||||
indicators: ({ parent }) => ({
|
||||
class: [
|
||||
// flex
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Spacing
|
||||
'p-4',
|
||||
|
||||
// Indicators Position
|
||||
{
|
||||
'order-2': parent.props.indicatorsPosition == 'bottom',
|
||||
'order-1': parent.props.indicatorsPosition == 'top',
|
||||
'order-1 flex-col': parent.props.indicatorsPosition == 'left',
|
||||
'flex-col order-2': parent.props.indicatorsPosition == 'right'
|
||||
},
|
||||
{
|
||||
'absolute z-10 bg-black/50': parent.props.showIndicatorsOnItem
|
||||
},
|
||||
|
||||
{
|
||||
'bottom-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'bottom' && parent.props.showIndicatorsOnItem,
|
||||
'top-0 left-0 w-full items-start': parent.props.indicatorsPosition == 'top' && parent.props.showIndicatorsOnItem,
|
||||
'left-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'left' && parent.props.showIndicatorsOnItem,
|
||||
'right-0 top-0 h-full items-start': parent.props.indicatorsPosition == 'right' && parent.props.showIndicatorsOnItem
|
||||
}
|
||||
]
|
||||
}),
|
||||
indicator: ({ parent }) => ({
|
||||
class: [
|
||||
{
|
||||
'mr-2': parent.props.indicatorsPosition == 'bottom' || parent.props.indicatorsPosition == 'top',
|
||||
'mb-2': parent.props.indicatorsPosition == 'left' || parent.props.indicatorsPosition == 'right'
|
||||
}
|
||||
]
|
||||
}),
|
||||
indicatorbutton: ({ context }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Appearance
|
||||
'rounded-full transition duration-200',
|
||||
|
||||
// Focus Effects
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Conditional Appearance: Not Highlighted
|
||||
{ 'bg-surface-200 hover:bg-surface-300 dark:bg-surface-700 dark:hover:bg-surface-600': !context.highlighted },
|
||||
|
||||
// Conditional Appearance: Highlighted
|
||||
{ 'bg-primary-500 hover:bg-primary-600': context.highlighted }
|
||||
]
|
||||
}),
|
||||
mask: {
|
||||
class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black/90']
|
||||
},
|
||||
closebutton: {
|
||||
class: [
|
||||
// Positioning
|
||||
'!absolute top-0 right-0',
|
||||
|
||||
// Display & Flexbox
|
||||
'flex justify-center items-center overflow-hidden',
|
||||
|
||||
// Spacing
|
||||
'm-2',
|
||||
|
||||
// Appearance
|
||||
'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out',
|
||||
|
||||
// Hover Effect
|
||||
'hover:text-white hover:bg-surface-0/10',
|
||||
|
||||
// Focus Effects
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
|
||||
]
|
||||
},
|
||||
closeicon: {
|
||||
class: 'w-6 h-6'
|
||||
},
|
||||
previousitembutton: ({ parent }) => ({
|
||||
class: [
|
||||
// Display & Flexbox
|
||||
'inline-flex justify-center items-center overflow-hidden',
|
||||
|
||||
// Appearance
|
||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
|
||||
{
|
||||
'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
|
||||
},
|
||||
|
||||
// Spacing
|
||||
'mx-2',
|
||||
|
||||
// Positioning
|
||||
'top-1/2 mt-[-0.5rem] left-0',
|
||||
{
|
||||
'!absolute': parent.props.showItemNavigators,
|
||||
'!fixed': !parent.props.showItemNavigators
|
||||
},
|
||||
|
||||
// Hover Effect
|
||||
'hover:bg-surface-0/10 hover:text-white',
|
||||
|
||||
// Focus Effects
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
|
||||
]
|
||||
}),
|
||||
nextitembutton: ({ parent }) => ({
|
||||
class: [
|
||||
// Display & Flexbox
|
||||
'inline-flex justify-center items-center overflow-hidden',
|
||||
|
||||
// Appearance
|
||||
'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md',
|
||||
{
|
||||
'opacity-0 group-hover:opacity-100': parent.props.showItemNavigatorsOnHover
|
||||
},
|
||||
|
||||
// Spacing
|
||||
'mx-2',
|
||||
|
||||
// Positioning
|
||||
'top-1/2 mt-[-0.5rem] right-0',
|
||||
{
|
||||
'!absolute': parent.props.showItemNavigators,
|
||||
'!fixed': !parent.props.showItemNavigators
|
||||
},
|
||||
|
||||
// Hover Effect
|
||||
'hover:bg-surface-0/10 hover:text-white',
|
||||
|
||||
// Focus Effects
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50'
|
||||
]
|
||||
}),
|
||||
caption: {
|
||||
class: [
|
||||
// Positioning
|
||||
'absolute bottom-0 left-0 w-full',
|
||||
|
||||
// Appearance
|
||||
'bg-black/50 text-white p-4'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-150 ease-in-out',
|
||||
leaveActiveClass: 'transition-all duration-150 ease-in',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
}
|
||||
};
|
||||
77
resources/css/presets/aura/global.js
Normal file
77
resources/css/presets/aura/global.js
Normal file
@ -0,0 +1,77 @@
|
||||
export default {
|
||||
css: `
|
||||
*[data-pd-ripple="true"]{
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
span[data-p-ink-active="true"]{
|
||||
animation: ripple 0.4s linear;
|
||||
}
|
||||
@keyframes ripple {
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
|
||||
.progress-spinner-circle {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: 0;
|
||||
animation: p-progress-spinner-dash 1.5s ease-in-out infinite, p-progress-spinner-color 6s ease-in-out infinite;
|
||||
stroke-linecap: round;
|
||||
}
|
||||
|
||||
@keyframes p-progress-spinner-dash{
|
||||
0% {
|
||||
stroke-dasharray: 1, 200;
|
||||
stroke-dashoffset: 0;
|
||||
}
|
||||
|
||||
50% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -35px;
|
||||
}
|
||||
100% {
|
||||
stroke-dasharray: 89, 200;
|
||||
stroke-dashoffset: -124px;
|
||||
}
|
||||
}
|
||||
@keyframes p-progress-spinner-color {
|
||||
100%, 0% {
|
||||
stroke: #ff5757;
|
||||
}
|
||||
40% {
|
||||
stroke: #696cff;
|
||||
}
|
||||
66% {
|
||||
stroke: #1ea97c;
|
||||
}
|
||||
80%, 90% {
|
||||
stroke: #cc8925;
|
||||
}
|
||||
}
|
||||
|
||||
.progressbar-value-animate::after {
|
||||
will-change: left, right;
|
||||
animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
|
||||
}
|
||||
.progressbar-value-animate::before {
|
||||
will-change: left, right;
|
||||
animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
|
||||
}
|
||||
@keyframes p-progressbar-indeterminate-anim {
|
||||
0% {
|
||||
left: -35%;
|
||||
right: 100%;
|
||||
}
|
||||
60% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
`
|
||||
};
|
||||
22
resources/css/presets/aura/iconfield/index.js
Normal file
22
resources/css/presets/aura/iconfield/index.js
Normal file
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
'[&>input]:w-full',
|
||||
|
||||
'[&>*:first-child]:absolute',
|
||||
'[&>*:first-child]:top-1/2',
|
||||
'[&>*:first-child]:-mt-2',
|
||||
'[&>*:first-child]:leading-none',
|
||||
'[&>*:first-child]:text-surface-900/60 dark:[&>*:first-child]:text-white/60',
|
||||
{
|
||||
'[&>*:first-child]:right-3': props.iconPosition === 'right',
|
||||
'[&>*:first-child]:left-3': props.iconPosition === 'left'
|
||||
},
|
||||
{
|
||||
'[&>*:last-child]:pr-10': props.iconPosition === 'right',
|
||||
'[&>*:last-child]:pl-10': props.iconPosition === 'left'
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
206
resources/css/presets/aura/image/index.js
Normal file
206
resources/css/presets/aura/image/index.js
Normal file
@ -0,0 +1,206 @@
|
||||
export default {
|
||||
root: {
|
||||
class: 'relative inline-block'
|
||||
},
|
||||
button: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Positioning
|
||||
'absolute',
|
||||
|
||||
// Shape
|
||||
'inset-0 opacity-0 transition-opacity duration-300',
|
||||
|
||||
// Color
|
||||
'bg-transparent text-surface-100',
|
||||
|
||||
// States
|
||||
'hover:opacity-100 hover:cursor-pointer hover:bg-surface-900 hover:bg-opacity-50'
|
||||
]
|
||||
},
|
||||
mask: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Positioning
|
||||
'fixed top-0 left-0',
|
||||
|
||||
// Sizing
|
||||
'w-full h-full',
|
||||
|
||||
// Color
|
||||
'bg-surface-900/90'
|
||||
]
|
||||
},
|
||||
toolbar: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
|
||||
// Positioning
|
||||
'absolute top-0 right-0',
|
||||
|
||||
// Spacing
|
||||
'p-4'
|
||||
]
|
||||
},
|
||||
rotaterightbutton: {
|
||||
class: [
|
||||
'z-20',
|
||||
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center',
|
||||
|
||||
// Size
|
||||
'w-12 h-12',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Color
|
||||
'text-white bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-white hover:bg-surface-0/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
rotaterighticon: {
|
||||
class: 'w-6 h-6'
|
||||
},
|
||||
rotateleftbutton: {
|
||||
class: [
|
||||
'z-20',
|
||||
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center',
|
||||
|
||||
// Size
|
||||
'w-12 h-12',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Color
|
||||
'text-white bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-white hover:bg-surface-0/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
rotatelefticon: {
|
||||
class: 'w-6 h-6'
|
||||
},
|
||||
zoomoutbutton: {
|
||||
class: [
|
||||
'z-20',
|
||||
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center',
|
||||
|
||||
// Size
|
||||
'w-12 h-12',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Color
|
||||
'text-white bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-white hover:bg-surface-0/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
zoomouticon: {
|
||||
class: 'w-6 h-6'
|
||||
},
|
||||
zoominbutton: {
|
||||
class: [
|
||||
'z-20',
|
||||
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center',
|
||||
|
||||
// Size
|
||||
'w-12 h-12',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Color
|
||||
'text-white bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-white hover:bg-surface-0/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
zoominicon: {
|
||||
class: 'w-6 h-6'
|
||||
},
|
||||
closebutton: {
|
||||
class: [
|
||||
'z-20',
|
||||
|
||||
// Flexbox & Alignment
|
||||
'flex justify-center items-center',
|
||||
|
||||
// Size
|
||||
'w-12 h-12',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Color
|
||||
'text-white bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:text-white hover:bg-surface-0/10',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring focus:ring-primary-400/50 dark:focus:ring-primary-300/50',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out'
|
||||
]
|
||||
},
|
||||
closeicon: {
|
||||
class: 'w-6 h-6'
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-75',
|
||||
enterActiveClass: 'transition-all duration-150 ease-in-out',
|
||||
leaveActiveClass: 'transition-all duration-150 ease-in',
|
||||
leaveToClass: 'opacity-0 scale-75'
|
||||
}
|
||||
};
|
||||
181
resources/css/presets/aura/index.js
Normal file
181
resources/css/presets/aura/index.js
Normal file
@ -0,0 +1,181 @@
|
||||
import global from './global.js';
|
||||
import autocomplete from './autocomplete';
|
||||
import calendar from './calendar';
|
||||
import cascadeselect from './cascadeselect';
|
||||
import checkbox from './checkbox';
|
||||
import chips from './chips';
|
||||
import colorpicker from './colorpicker';
|
||||
import dropdown from './dropdown';
|
||||
import floatlabel from './floatlabel';
|
||||
import iconfield from './iconfield';
|
||||
import inputgroup from './inputgroup';
|
||||
import inputotp from './inputotp';
|
||||
import inputgroupaddon from './inputgroupaddon';
|
||||
import inputmask from './inputmask';
|
||||
import inputnumber from './inputnumber';
|
||||
import inputswitch from './inputswitch';
|
||||
import inputtext from './inputtext';
|
||||
import knob from './knob';
|
||||
import listbox from './listbox';
|
||||
import multiselect from './multiselect';
|
||||
import password from './password';
|
||||
import radiobutton from './radiobutton';
|
||||
import rating from './rating';
|
||||
import selectbutton from './selectbutton';
|
||||
import slider from './slider';
|
||||
import textarea from './textarea';
|
||||
import togglebutton from './togglebutton';
|
||||
import treeselect from './treeselect';
|
||||
import tristatecheckbox from './tristatecheckbox';
|
||||
import button from './button';
|
||||
import speeddial from './speeddial';
|
||||
import splitbutton from './splitbutton';
|
||||
import datatable from './datatable';
|
||||
import dataview from './dataview';
|
||||
import orderlist from './orderlist';
|
||||
import organizationchart from './organizationchart';
|
||||
import paginator from './paginator';
|
||||
import picklist from './picklist';
|
||||
import tree from './tree';
|
||||
import treetable from './treetable';
|
||||
import timeline from './timeline';
|
||||
import accordion from './accordion';
|
||||
import card from './card';
|
||||
import deferred from './deferred';
|
||||
import divider from './divider';
|
||||
import fieldset from './fieldset';
|
||||
import panel from './panel';
|
||||
import scrollpanel from './scrollpanel';
|
||||
import splitter from './splitter';
|
||||
import stepper from './stepper';
|
||||
import tabview from './tabview';
|
||||
import toolbar from './toolbar';
|
||||
import confirmpopup from './confirmpopup';
|
||||
import dialog from './dialog';
|
||||
import overlaypanel from './overlaypanel';
|
||||
import sidebar from './sidebar';
|
||||
import tooltip from './tooltip';
|
||||
import fileupload from './fileupload';
|
||||
import breadcrumb from './breadcrumb';
|
||||
import contextmenu from './contextmenu';
|
||||
import dock from './dock';
|
||||
import menu from './menu';
|
||||
import menubar from './menubar';
|
||||
import megamenu from './megamenu';
|
||||
import panelmenu from './panelmenu';
|
||||
import steps from './steps';
|
||||
import tabmenu from './tabmenu';
|
||||
import tieredmenu from './tieredmenu';
|
||||
import message from './message';
|
||||
import inlinemessage from './inlinemessage';
|
||||
import toast from './toast';
|
||||
import carousel from './carousel';
|
||||
import galleria from './galleria';
|
||||
import image from './image';
|
||||
import avatar from './avatar';
|
||||
import badge from './badge';
|
||||
import badgedirective from './badgedirective';
|
||||
import blockui from './blockui';
|
||||
import chip from './chip';
|
||||
import inplace from './inplace';
|
||||
import metergroup from './metergroup';
|
||||
import scrolltop from './scrolltop';
|
||||
import skeleton from './skeleton';
|
||||
import progressbar from './progressbar';
|
||||
import progressspinner from './progressspinner';
|
||||
import ripple from './ripple';
|
||||
import tag from './tag';
|
||||
import terminal from './terminal';
|
||||
|
||||
export default {
|
||||
global,
|
||||
directives: {
|
||||
tooltip,
|
||||
badgedirective,
|
||||
ripple
|
||||
},
|
||||
autocomplete,
|
||||
calendar,
|
||||
cascadeselect,
|
||||
checkbox,
|
||||
chips,
|
||||
colorpicker,
|
||||
dropdown,
|
||||
floatlabel,
|
||||
iconfield,
|
||||
inputgroup,
|
||||
inputotp,
|
||||
inputgroupaddon,
|
||||
inputmask,
|
||||
inputnumber,
|
||||
inputswitch,
|
||||
inputtext,
|
||||
knob,
|
||||
listbox,
|
||||
multiselect,
|
||||
password,
|
||||
radiobutton,
|
||||
rating,
|
||||
selectbutton,
|
||||
slider,
|
||||
textarea,
|
||||
togglebutton,
|
||||
treeselect,
|
||||
tristatecheckbox,
|
||||
button,
|
||||
speeddial,
|
||||
splitbutton,
|
||||
datatable,
|
||||
dataview,
|
||||
orderlist,
|
||||
organizationchart,
|
||||
paginator,
|
||||
picklist,
|
||||
tree,
|
||||
treetable,
|
||||
timeline,
|
||||
accordion,
|
||||
card,
|
||||
deferred,
|
||||
divider,
|
||||
fieldset,
|
||||
panel,
|
||||
scrollpanel,
|
||||
splitter,
|
||||
stepper,
|
||||
tabview,
|
||||
toolbar,
|
||||
confirmpopup,
|
||||
dialog,
|
||||
overlaypanel,
|
||||
sidebar,
|
||||
fileupload,
|
||||
breadcrumb,
|
||||
contextmenu,
|
||||
dock,
|
||||
menu,
|
||||
menubar,
|
||||
megamenu,
|
||||
panelmenu,
|
||||
steps,
|
||||
tabmenu,
|
||||
tieredmenu,
|
||||
message,
|
||||
inlinemessage,
|
||||
toast,
|
||||
carousel,
|
||||
galleria,
|
||||
image,
|
||||
avatar,
|
||||
badge,
|
||||
blockui,
|
||||
chip,
|
||||
inplace,
|
||||
metergroup,
|
||||
scrolltop,
|
||||
skeleton,
|
||||
progressbar,
|
||||
progressspinner,
|
||||
tag,
|
||||
terminal
|
||||
}
|
||||
29
resources/css/presets/aura/inlinemessage/index.js
Normal file
29
resources/css/presets/aura/inlinemessage/index.js
Normal file
@ -0,0 +1,29 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex items-center justify-center align-top gap-2',
|
||||
'py-2 px-3 m-0 rounded-md',
|
||||
'ring-1 ring-inset ring-surface-200 dark:ring-surface-700 ring-offset-0',
|
||||
{
|
||||
'text-blue-500 dark:text-blue-300': props.severity == 'info',
|
||||
'text-green-500 dark:text-green-300': props.severity == 'success',
|
||||
'text-orange-500 dark:text-orange-300': props.severity == 'warn',
|
||||
'text-red-500 dark:text-red-300': props.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
icon: {
|
||||
class: [
|
||||
// Sizing and Spacing
|
||||
'w-4 h-4',
|
||||
'shrink-0'
|
||||
]
|
||||
},
|
||||
text: {
|
||||
class: [
|
||||
// Font and Text
|
||||
'text-sm leading-none',
|
||||
'font-medium'
|
||||
]
|
||||
}
|
||||
};
|
||||
30
resources/css/presets/aura/inplace/index.js
Normal file
30
resources/css/presets/aura/inplace/index.js
Normal file
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
display: {
|
||||
class: [
|
||||
// Display
|
||||
'inline',
|
||||
|
||||
// Spacing
|
||||
'px-2.5 py-1.5',
|
||||
|
||||
// Size
|
||||
'text-sm',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/80',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-100 hover:text-surface-700 dark:hover:bg-surface-700/80 dark:hover:text-white/80',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}
|
||||
};
|
||||
5
resources/css/presets/aura/inputgroup/index.js
Normal file
5
resources/css/presets/aura/inputgroup/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
export default {
|
||||
root: {
|
||||
class: ['flex items-stretch', 'w-full']
|
||||
}
|
||||
};
|
||||
28
resources/css/presets/aura/inputgroupaddon/index.js
Normal file
28
resources/css/presets/aura/inputgroupaddon/index.js
Normal file
@ -0,0 +1,28 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flex
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'first:rounded-l-md',
|
||||
'last:rounded-r-md',
|
||||
'border-y',
|
||||
|
||||
'last:border-r',
|
||||
'border-l',
|
||||
'border-r-0',
|
||||
|
||||
// Space
|
||||
'p-1.5',
|
||||
|
||||
// Size
|
||||
'min-w-[3rem]',
|
||||
|
||||
// Color
|
||||
'bg-surface-50 dark:bg-surface-800',
|
||||
'text-surface-600 dark:text-surface-400',
|
||||
'border-surface-300 dark:border-surface-600'
|
||||
]
|
||||
}
|
||||
};
|
||||
32
resources/css/presets/aura/inputmask/index.js
Normal file
32
resources/css/presets/aura/inputmask/index.js
Normal file
@ -0,0 +1,32 @@
|
||||
export default {
|
||||
root: ({ context, props }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
|
||||
// Spacing
|
||||
'm-0 py-1.5 px-3 sm:text-sm',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-offset-0',
|
||||
'shadow-sm',
|
||||
{ 'ring-surface-300 dark:ring-surface-700': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'appearance-none',
|
||||
|
||||
// Interactions
|
||||
{
|
||||
'outline-none focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
159
resources/css/presets/aura/inputnumber/index.js
Normal file
159
resources/css/presets/aura/inputnumber/index.js
Normal file
@ -0,0 +1,159 @@
|
||||
export default {
|
||||
root: ({ props, parent }) => ({
|
||||
class: [
|
||||
// Flex
|
||||
'inline-flex',
|
||||
{ 'flex-col': props.showButtons && props.buttonLayout == 'vertical' },
|
||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
||||
|
||||
//Sizing
|
||||
{ '!w-16': props.showButtons && props.buttonLayout == 'vertical' },
|
||||
|
||||
// Shape
|
||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
||||
{ 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
||||
|
||||
{ 'ring-1 ring-surface-300 dark:ring-surface-700 ring-offset-0': parent.instance.$name !== 'InputGroup' },
|
||||
'shadow-sm',
|
||||
'rounded-md'
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
root: ({ parent, context }) => ({
|
||||
class: [
|
||||
// Display
|
||||
'flex flex-auto',
|
||||
|
||||
//Text
|
||||
'sm:text-sm',
|
||||
{ 'text-center': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-1.5 px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
{ 'rounded-tr-none rounded-br-none': parent.props.showButtons },
|
||||
{ 'rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
||||
{ 'rounded-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
{ 'border-r': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
||||
{ 'border-x': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
||||
{ 'border-y': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
{ 'border-surface-300 dark:border-surface-700': !parent.props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'border border-red-500 dark:border-red-400': parent.props.invalid },
|
||||
|
||||
// States
|
||||
'outline-none focus:ring-primary-600 dark:focus:ring-primary-500',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 dark:focus:ring-primary-500',
|
||||
|
||||
// Filled State *for FloatLabel
|
||||
{ filled: parent.instance?.$name == 'FloatLabel' && context.filled },
|
||||
|
||||
//Position
|
||||
{ 'order-2': parent.props.buttonLayout == 'horizontal' || parent.props.buttonLayout == 'vertical' }
|
||||
]
|
||||
})
|
||||
},
|
||||
|
||||
buttongroup: {
|
||||
class: ['flex', 'flex-col']
|
||||
},
|
||||
|
||||
incrementbutton: {
|
||||
root: ({ parent }) => ({
|
||||
class: [
|
||||
// Display
|
||||
'flex flex-auto',
|
||||
|
||||
// Alignment
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'text-center align-bottom',
|
||||
|
||||
//Position
|
||||
'relative',
|
||||
{ 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
||||
{ 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
//Color
|
||||
'text-surface-600 dark:text-surface-400',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
|
||||
// Sizing
|
||||
'w-[3rem]',
|
||||
{ 'px-2.5 py-1.5': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
|
||||
{ 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
||||
{ 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
{ 'rounded-tl-none rounded-br-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
||||
{ 'rounded-bl-none rounded-tl-none': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
||||
{ 'rounded-bl-none rounded-br-none': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
//States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 focus:dark:ring-primary-500',
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-700',
|
||||
|
||||
//Misc
|
||||
'cursor-pointer overflow-hidden select-none'
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: 'h-0 w-0'
|
||||
}
|
||||
},
|
||||
decrementbutton: {
|
||||
root: ({ parent }) => ({
|
||||
class: [
|
||||
// Display
|
||||
'flex flex-auto',
|
||||
|
||||
// Alignment
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'text-center align-bottom',
|
||||
|
||||
//Position
|
||||
'relative',
|
||||
{ 'order-1': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
||||
{ 'order-3': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
//Color
|
||||
'text-surface-600 dark:text-surface-400',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
|
||||
// Sizing
|
||||
'w-[3rem]',
|
||||
{ 'px-2.5 py-1.5': parent.props.showButtons && parent.props.buttonLayout !== 'stacked' },
|
||||
{ 'p-0': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
||||
{ 'w-full': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
{ 'rounded-tr-none rounded-tl-none rounded-bl-none': parent.props.showButtons && parent.props.buttonLayout == 'stacked' },
|
||||
{ 'rounded-tr-none rounded-br-none ': parent.props.showButtons && parent.props.buttonLayout == 'horizontal' },
|
||||
{ 'rounded-tr-none rounded-tl-none ': parent.props.showButtons && parent.props.buttonLayout == 'vertical' },
|
||||
|
||||
//States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-600 focus:dark:ring-primary-500',
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-700',
|
||||
|
||||
//Misc
|
||||
'cursor-pointer overflow-hidden select-none'
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: 'h-0 w-0'
|
||||
}
|
||||
}
|
||||
};
|
||||
58
resources/css/presets/aura/inputotp/index.js
Normal file
58
resources/css/presets/aura/inputotp/index.js
Normal file
@ -0,0 +1,58 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Alignment
|
||||
'flex items-center',
|
||||
'gap-2'
|
||||
]
|
||||
},
|
||||
input: {
|
||||
root: ({ props, context, parent }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
|
||||
// Flex & Alignment
|
||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
||||
'text-center',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
{
|
||||
'py-1.5 px-3 sm:text-sm': props.size == null
|
||||
},
|
||||
|
||||
// Size
|
||||
'w-8',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'shadow-sm',
|
||||
{ 'ring-1 ring-inset ring-offset-0': parent.instance.$name !== 'InputGroup' },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-700': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// Shape
|
||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
||||
{ 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' },
|
||||
{ 'first:ml-0 ml-[-1px]': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
||||
'appearance-none',
|
||||
|
||||
// Interactions
|
||||
{
|
||||
'outline-none focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
},
|
||||
|
||||
// Filled State *for FloatLabel
|
||||
{ filled: parent.instance?.$name == 'FloatLabel' && context.filled }
|
||||
]
|
||||
})
|
||||
}
|
||||
};
|
||||
93
resources/css/presets/aura/inputswitch/index.js
Normal file
93
resources/css/presets/aura/inputswitch/index.js
Normal file
@ -0,0 +1,93 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Alignments
|
||||
'inline-flex relative',
|
||||
'shrink-0',
|
||||
|
||||
// Shape
|
||||
'rounded-2xl',
|
||||
|
||||
// Size
|
||||
'h-5 w-9',
|
||||
|
||||
// States
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
slider: ({ props }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0 right-0 bottom-0',
|
||||
|
||||
// Shape
|
||||
'rounded-2xl',
|
||||
|
||||
// Before:
|
||||
'before:absolute before:top-1/2',
|
||||
'before:-mt-2',
|
||||
'before:h-4 before:w-4',
|
||||
'before:rounded-full',
|
||||
'before:duration-200 before:transition before:ease-in-out',
|
||||
'before:bg-surface-0 before:dark:bg-surface-900',
|
||||
'before:shadow',
|
||||
{ 'before:transform before:translate-x-4': props.modelValue == props.trueValue },
|
||||
|
||||
// Colors
|
||||
'border',
|
||||
{
|
||||
'bg-surface-200 dark:bg-surface-700': !(props.modelValue == props.trueValue),
|
||||
'bg-primary-500 dark:bg-primary-400': props.modelValue == props.trueValue
|
||||
},
|
||||
|
||||
{ 'border-transparent': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
{ 'peer-hover:bg-surface-300 dark:peer-hover:bg-surface-600 ': !(props.modelValue == props.trueValue) && !props.disabled },
|
||||
{ 'peer-hover:bg-primary-600 dark:peer-hover:bg-surface-300 ': props.modelValue == props.trueValue && !props.disabled },
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
'transition-colors duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
}
|
||||
};
|
||||
47
resources/css/presets/aura/inputtext/index.js
Normal file
47
resources/css/presets/aura/inputtext/index.js
Normal file
@ -0,0 +1,47 @@
|
||||
export default {
|
||||
root: ({ props, context, parent }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
|
||||
// Flex
|
||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
{
|
||||
'py-3 px-4 text-lg sm:text-md': props.size == 'large',
|
||||
'py-1 px-2 sm:text-sm': props.size == 'small',
|
||||
'py-1.5 px-3 sm:text-sm': props.size == null
|
||||
},
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'shadow-sm',
|
||||
{ 'ring-1 ring-inset ring-offset-0': parent.instance.$name !== 'InputGroup' },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-700': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// Shape
|
||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
||||
{ 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' },
|
||||
{ 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
||||
'appearance-none',
|
||||
|
||||
// Interactions
|
||||
{
|
||||
'outline-none focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
},
|
||||
|
||||
// Filled State *for FloatLabel
|
||||
{ filled: parent.instance?.$name == 'FloatLabel' && context.filled }
|
||||
]
|
||||
})
|
||||
};
|
||||
44
resources/css/presets/aura/knob/index.js
Normal file
44
resources/css/presets/aura/knob/index.js
Normal file
@ -0,0 +1,44 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Misc
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
range: {
|
||||
class: [
|
||||
// Stroke
|
||||
'stroke-current',
|
||||
|
||||
// Color
|
||||
'stroke-surface-200 dark:stroke-surface-700',
|
||||
|
||||
// Fill
|
||||
'fill-none',
|
||||
|
||||
// Transition
|
||||
'transition duration-100 ease-in'
|
||||
]
|
||||
},
|
||||
value: {
|
||||
class: [
|
||||
// Animation
|
||||
'animate-dash-frame',
|
||||
|
||||
// Color
|
||||
'stroke-primary-500 dark:stroke-primary-400',
|
||||
|
||||
// Fill
|
||||
'fill-none'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: [
|
||||
// Text Style
|
||||
'text-center text-xl',
|
||||
|
||||
// Color
|
||||
'fill-surface-600 dark:fill-surface-200'
|
||||
]
|
||||
}
|
||||
};
|
||||
147
resources/css/presets/aura/listbox/index.js
Normal file
147
resources/css/presets/aura/listbox/index.js
Normal file
@ -0,0 +1,147 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Sizing and Shape
|
||||
'min-w-[12rem]',
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'ring-1',
|
||||
{ 'ring-surface-200 dark:ring-surface-700': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid }
|
||||
]
|
||||
}),
|
||||
wrapper: {
|
||||
class: [
|
||||
// Overflow
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
{ 'font-normal': !context.selected, 'font-bold': context.selected },
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-none',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
|
||||
{ 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
|
||||
{ 'bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700': context.focused && context.selected },
|
||||
{ 'bg-surface-100 dark:bg-surface-300/10 text-primary-500 dark:text-primary-400': !context.focused && context.selected },
|
||||
|
||||
//States
|
||||
'hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700',
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: [
|
||||
//Font
|
||||
'font-bold',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-600/80',
|
||||
|
||||
// Misc
|
||||
'cursor-auto'
|
||||
]
|
||||
},
|
||||
header: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
//Shape
|
||||
'rounded-tl-md',
|
||||
'rounded-tr-md',
|
||||
'border-b border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-100 dark:bg-surface-800'
|
||||
]
|
||||
},
|
||||
filtercontainer: {
|
||||
class: 'relative'
|
||||
},
|
||||
filterinput: {
|
||||
class: [
|
||||
// Font
|
||||
'font-sans',
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Sizing
|
||||
'py-1.5 px-3',
|
||||
'pr-7',
|
||||
'-mr-7',
|
||||
'w-full',
|
||||
|
||||
//Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'placeholder:text-surface-400',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-tl-md',
|
||||
'rounded-tr-md',
|
||||
'appearance-none',
|
||||
|
||||
// States
|
||||
'focus:ring-2 focus:ring-inset focus:outline-none focus:outline-offset-0',
|
||||
'focus:ring-primary-600 dark:focus:ring-primary-500',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
filtericon: {
|
||||
class: ['absolute', 'top-1/2 right-3', '-mt-2']
|
||||
},
|
||||
emptymessage: {
|
||||
class: [
|
||||
// Font
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-transparent'
|
||||
]
|
||||
}
|
||||
};
|
||||
209
resources/css/presets/aura/megamenu/index.js
Normal file
209
resources/css/presets/aura/megamenu/index.js
Normal file
@ -0,0 +1,209 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
|
||||
// Spacing
|
||||
'min-h-[4rem]',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-surface-100 dark:ring-surface-800 ring-offset-0',
|
||||
|
||||
{ 'items-center px-2 sm:px-6': props.orientation == 'horizontal', 'flex-col justify-center sm:justify-start sm:w-48 px-2': props.orientation !== 'horizontal' }
|
||||
]
|
||||
}),
|
||||
menu: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'sm:flex sm:row-gap-2 sm:col-gap-4',
|
||||
'items-center',
|
||||
'flex-wrap',
|
||||
'flex-col sm:flex-row',
|
||||
{ hidden: !props?.mobileActive, flex: props?.mobileActive },
|
||||
|
||||
// Position
|
||||
'absolute sm:relative',
|
||||
'top-full left-0',
|
||||
'sm:top-auto sm:left-auto',
|
||||
|
||||
// Size
|
||||
'w-full sm:w-auto',
|
||||
|
||||
// Spacing
|
||||
'm-0 ',
|
||||
'py-2 px-1.5 sm:py-0 sm:p-0 sm:py-1.5',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-md sm:shadow-none',
|
||||
'border-0',
|
||||
'sm:rounded-none rounded-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
|
||||
|
||||
// Misc
|
||||
'outline-none'
|
||||
]
|
||||
}),
|
||||
menuitem: ({ props }) => ({
|
||||
class: [
|
||||
'sm:relative static',
|
||||
{
|
||||
'sm:w-auto w-full': props.horizontal,
|
||||
'w-full': !props.horizontal
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: ({ props, context }) => ({
|
||||
class: [
|
||||
// Shape
|
||||
{ 'rounded-md': props.level < 1 },
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
||||
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
|
||||
},
|
||||
|
||||
// Hover States
|
||||
{
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
|
||||
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'sm:text-sm font-medium',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2',
|
||||
'px-3',
|
||||
'my-1 sm:my-0',
|
||||
|
||||
// Misc
|
||||
'select-none',
|
||||
'cursor-pointer',
|
||||
'no-underline ',
|
||||
'overflow-hidden'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
submenuicon: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'ml-auto sm:ml-2': props.horizontal,
|
||||
'ml-auto': !props.horizontal
|
||||
}
|
||||
]
|
||||
}),
|
||||
panel: ({ props }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'w-auto',
|
||||
|
||||
// Spacing
|
||||
'py-1',
|
||||
'm-0 mx-2',
|
||||
|
||||
// Shape
|
||||
'shadow-none sm:shadow-md',
|
||||
'border-0',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
|
||||
// Position
|
||||
'static sm:absolute',
|
||||
'z-10',
|
||||
{
|
||||
'sm:left-full top-0': !props.horizontal
|
||||
}
|
||||
]
|
||||
}),
|
||||
grid: {
|
||||
class: 'flex flex-wrap sm:flex-nowrap'
|
||||
},
|
||||
column: {
|
||||
class: 'w-full sm:w-1/2'
|
||||
},
|
||||
submenu: {
|
||||
class: ['m-0 list-none', 'py-1 px-2 w-full sm:min-w-[14rem]']
|
||||
},
|
||||
submenuheader: {
|
||||
class: [
|
||||
'font-medium',
|
||||
'sm:text-md',
|
||||
|
||||
// Spacing
|
||||
'py-2.5 px-2',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'border-b border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-900'
|
||||
]
|
||||
},
|
||||
separator: {
|
||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
||||
},
|
||||
menubutton: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex sm:hidden',
|
||||
'items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-8',
|
||||
'h-8',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/80',
|
||||
|
||||
// States
|
||||
'hover:text-surface-600 dark:hover:text-white/60',
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0',
|
||||
'focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'no-underline'
|
||||
]
|
||||
},
|
||||
end: {
|
||||
class: 'ml-auto self-center'
|
||||
}
|
||||
};
|
||||
109
resources/css/presets/aura/menu/index.js
Normal file
109
resources/css/presets/aura/menu/index.js
Normal file
@ -0,0 +1,109 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Sizing and Shape
|
||||
'min-w-[12rem]',
|
||||
'rounded-md',
|
||||
// Spacing
|
||||
'p-1.5',
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'ring-1 ring-surface-200 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
menu: {
|
||||
class: [
|
||||
// Spacings and Shape
|
||||
'list-none',
|
||||
'm-0',
|
||||
'p-0',
|
||||
'outline-none'
|
||||
]
|
||||
},
|
||||
menuitem: {
|
||||
class: [
|
||||
// Space
|
||||
'first:mt-0 mt-1'
|
||||
]
|
||||
},
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
//Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-700 dark:text-surface-0': !context.focused,
|
||||
'bg-surface-100 text-primary-500 dark:bg-surface-300/10 dark:text-primary-400': context.focused
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-shadow',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'hover:text-primary-600 dark:hover:text-primary-400',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-400/10'
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-semibold',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2',
|
||||
'px-3',
|
||||
|
||||
// Misc
|
||||
'no-underline',
|
||||
'overflow-hidden',
|
||||
'cursor-pointer',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Spacing
|
||||
'mr-2',
|
||||
'leading-6',
|
||||
'text-sm'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: ['leading-6', 'text-sm']
|
||||
},
|
||||
submenuheader: {
|
||||
class: [
|
||||
// Font
|
||||
'font-semibold',
|
||||
'text-xs leading-6',
|
||||
|
||||
// Spacing
|
||||
'm-0 ',
|
||||
'py-1',
|
||||
'px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-tl-none',
|
||||
'rounded-tr-none',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'text-surface-600 dark:text-surface-0/60'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
183
resources/css/presets/aura/menubar/index.js
Normal file
183
resources/css/presets/aura/menubar/index.js
Normal file
@ -0,0 +1,183 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
'gap-6',
|
||||
|
||||
// Spacing
|
||||
'px-6',
|
||||
'min-h-[4rem]',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-surface-100 dark:ring-surface-800 ring-offset-0'
|
||||
]
|
||||
},
|
||||
menu: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'sm:flex sm:row-gap-2 sm:col-gap-4',
|
||||
'items-center',
|
||||
'flex-wrap',
|
||||
'flex-col sm:flex-row',
|
||||
{ hidden: !props?.mobileActive, flex: props?.mobileActive },
|
||||
|
||||
// Position
|
||||
'absolute sm:relative',
|
||||
'top-full left-0',
|
||||
'sm:top-auto sm:left-auto',
|
||||
|
||||
// Size
|
||||
'w-full sm:w-auto',
|
||||
|
||||
// Spacing
|
||||
'm-0 ',
|
||||
'py-2 px-1.5 sm:py-0 sm:p-0 sm:py-1.5',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-md sm:shadow-none',
|
||||
'border-0',
|
||||
'sm:rounded-none rounded-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900 sm:bg-transparent dark:sm:bg-transparent',
|
||||
|
||||
// Misc
|
||||
'outline-none'
|
||||
]
|
||||
}),
|
||||
menuitem: {
|
||||
class: 'sm:relative sm:w-auto w-full static'
|
||||
},
|
||||
content: ({ props, context }) => ({
|
||||
class: [
|
||||
// Shape
|
||||
{ 'rounded-md': props.root },
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
||||
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
|
||||
},
|
||||
|
||||
// Hover States
|
||||
{
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
|
||||
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
action: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'sm:text-sm font-medium',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2',
|
||||
'px-3',
|
||||
'my-1 sm:my-0',
|
||||
|
||||
// Size
|
||||
{
|
||||
'pl-5 sm:pl-3': context.level === 1,
|
||||
'pl-7 sm:pl-3': context.level === 2
|
||||
},
|
||||
|
||||
// Misc
|
||||
'select-none',
|
||||
'cursor-pointer',
|
||||
'no-underline ',
|
||||
'overflow-hidden'
|
||||
]
|
||||
}),
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
submenuicon: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
'ml-auto sm:ml-2': props.root,
|
||||
'ml-auto': !props.root
|
||||
}
|
||||
]
|
||||
}),
|
||||
submenu: ({ props }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'w-full sm:w-48',
|
||||
|
||||
// Spacing
|
||||
'py-1',
|
||||
'm-0 ',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-none sm:shadow-md',
|
||||
'border-0',
|
||||
|
||||
// Position
|
||||
'static sm:absolute',
|
||||
'z-10',
|
||||
{ 'sm:absolute sm:left-full sm:top-0': props.level > 1 },
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900'
|
||||
]
|
||||
}),
|
||||
separator: {
|
||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
||||
},
|
||||
button: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex sm:hidden',
|
||||
'items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-8',
|
||||
'h-8',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/80',
|
||||
|
||||
// States
|
||||
'hover:text-surface-600 dark:hover:text-white/60',
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0',
|
||||
'focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'no-underline'
|
||||
]
|
||||
},
|
||||
end: {
|
||||
class: 'ml-auto self-center'
|
||||
}
|
||||
};
|
||||
87
resources/css/presets/aura/message/index.js
Normal file
87
resources/css/presets/aura/message/index.js
Normal file
@ -0,0 +1,87 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Spacing and Shape
|
||||
'my-2 mx-0',
|
||||
'rounded-md',
|
||||
'ring-1 ring-inset ring-surface-200 dark:ring-surface-700 ring-offset-0',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
|
||||
{
|
||||
'text-blue-500 dark:text-blue-300': props.severity == 'info',
|
||||
'text-green-500 dark:text-green-300': props.severity == 'success',
|
||||
'text-orange-500 dark:text-orange-300': props.severity == 'warn',
|
||||
'text-red-500 dark:text-red-300': props.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
wrapper: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex items-center',
|
||||
|
||||
// Spacing
|
||||
'p-4'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Sizing and Spacing
|
||||
'w-5 h-5',
|
||||
'mr-3 shrink-0'
|
||||
]
|
||||
},
|
||||
text: {
|
||||
class: [
|
||||
// Font and Text
|
||||
'text-sm leading-none',
|
||||
'font-medium'
|
||||
]
|
||||
},
|
||||
button: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-6 h-6',
|
||||
|
||||
// Spacing and Misc
|
||||
'ml-auto relative',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
'bg-transparent',
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-700',
|
||||
'outline-none focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden'
|
||||
]
|
||||
}),
|
||||
closeicon: {
|
||||
class: [
|
||||
// Sizing and Spacing
|
||||
'w-3 h-3',
|
||||
'shrink-0'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-300',
|
||||
leaveFromClass: 'max-h-40',
|
||||
leaveActiveClass: 'overflow-hidden transition-all duration-300 ease-in',
|
||||
leaveToClass: 'max-h-0 opacity-0 !m-0'
|
||||
}
|
||||
};
|
||||
97
resources/css/presets/aura/metergroup/index.js
Normal file
97
resources/css/presets/aura/metergroup/index.js
Normal file
@ -0,0 +1,97 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex gap-4',
|
||||
|
||||
{ 'flex-col': props.orientation == 'horizontal', 'flex-row': props.orientation == 'vertical' }
|
||||
]
|
||||
}),
|
||||
metercontainer: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
|
||||
{ 'flex-col': props.orientation === 'vertical' },
|
||||
|
||||
// Sizing
|
||||
{ 'w-2 h-full': props.orientation === 'vertical' },
|
||||
{ 'h-2': props.orientation === 'horizontal' },
|
||||
|
||||
// Colors
|
||||
'bg-gray-200 dark:bg-gray-700',
|
||||
|
||||
// Border Radius
|
||||
'rounded-lg'
|
||||
]
|
||||
}),
|
||||
meter: ({ props }) => ({
|
||||
class: [
|
||||
// Shape
|
||||
'border-0',
|
||||
|
||||
// Rounded Corners - Horizontal
|
||||
{
|
||||
'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
|
||||
},
|
||||
|
||||
// Rounded Corners - Vertical
|
||||
{
|
||||
'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
|
||||
},
|
||||
|
||||
// Colors
|
||||
'bg-primary-500 dark:bg-primary-400'
|
||||
]
|
||||
}),
|
||||
labellist: ({ props }) => ({
|
||||
class: [
|
||||
// Display & Flexbox
|
||||
'flex flex-wrap',
|
||||
|
||||
{ 'gap-4': props.labelOrientation === 'horizontal' },
|
||||
|
||||
{ 'gap-2': props.labelOrientation === 'vertical' },
|
||||
|
||||
{ 'flex-col': props.labelOrientation === 'vertical' },
|
||||
|
||||
// Conditional Alignment - Horizontal
|
||||
{
|
||||
'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
|
||||
'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
|
||||
},
|
||||
|
||||
// Conditional Alignment - Vertical
|
||||
{
|
||||
'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
|
||||
'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
|
||||
},
|
||||
|
||||
// List Styling
|
||||
'm-0 p-0 list-none'
|
||||
]
|
||||
}),
|
||||
labellistitem: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex',
|
||||
'items-center',
|
||||
'gap-2'
|
||||
]
|
||||
},
|
||||
labellisttype: {
|
||||
class: [
|
||||
// Display
|
||||
'inline-flex',
|
||||
|
||||
// Background Color
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
|
||||
// Size
|
||||
'w-2 h-2',
|
||||
|
||||
// Rounded Shape
|
||||
'rounded-full'
|
||||
]
|
||||
}
|
||||
};
|
||||
581
resources/css/presets/aura/multiselect/index.js
Normal file
581
resources/css/presets/aura/multiselect/index.js
Normal file
@ -0,0 +1,581 @@
|
||||
export default {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-sm',
|
||||
|
||||
// Color and Background
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
|
||||
// States
|
||||
{ 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none',
|
||||
{ 'opacity-60': props.disabled, 'pointer-events-none': props.disabled }
|
||||
]
|
||||
}),
|
||||
labelContainer: {
|
||||
class: 'overflow-hidden flex flex-auto cursor-pointer'
|
||||
},
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'block leading-5',
|
||||
|
||||
props.display === 'chip' && props?.modelValue?.length > 0 ? 'py-1 px-3' : 'py-1.5 px-3',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-800 dark:text-white/80': props.modelValue?.length, 'text-surface-400 dark:text-surface-500': !props.modelValue?.length },
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
|
||||
]
|
||||
}),
|
||||
token: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex items-center',
|
||||
|
||||
// Spacing
|
||||
'py-0.5 px-3 mr-2',
|
||||
|
||||
// Shape
|
||||
'rounded-[1.14rem]',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/70',
|
||||
'bg-surface-200 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
removeTokenIcon: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-md leading-6',
|
||||
|
||||
// Spacing
|
||||
'ml-2',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
trigger: {
|
||||
class: [
|
||||
//Font
|
||||
'sm:text-sm',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'text-surface-500',
|
||||
|
||||
// Size
|
||||
'w-12',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-md',
|
||||
'rounded-br-md'
|
||||
]
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-2',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
header: {
|
||||
class: [
|
||||
'flex items-center justify-between',
|
||||
// Spacing
|
||||
'py-2 px-4',
|
||||
'm-0',
|
||||
|
||||
//Shape
|
||||
'border-b',
|
||||
'rounded-tl-md',
|
||||
'rounded-tr-md',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-50 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700'
|
||||
]
|
||||
},
|
||||
headerCheckboxContainer: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
headerCheckbox: ({ context, state }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context?.selected,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context?.selected
|
||||
},
|
||||
|
||||
{ 'outline-offset-0 ring-1 ring-primary-500 dark:ring-primary-400': state.focused }
|
||||
]
|
||||
}),
|
||||
headerCheckbox: {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: ({ props, context }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
|
||||
},
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
'text-white dark:text-surface-900',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
},
|
||||
itemCheckbox: {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: ({ props, context }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
|
||||
},
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
'text-white dark:text-surface-900',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
},
|
||||
closeButton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size and Spacing
|
||||
'mr-2',
|
||||
'last:mr-0',
|
||||
'w-6 h-6',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
'text-surface-500',
|
||||
'bg-transparent',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden'
|
||||
]
|
||||
},
|
||||
closeButtonIcon: {
|
||||
class: [
|
||||
// Display
|
||||
'inline-block',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: [
|
||||
// Sizing
|
||||
'max-h-[15rem]',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
{ 'font-normal': !context.selected, 'font-bold': context.selected },
|
||||
|
||||
// Flexbox
|
||||
'flex items-center',
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-none',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
|
||||
{ 'bg-surface-200 dark:bg-surface-600/60 text-surface-700 dark:text-white/80': context.focused && !context.selected },
|
||||
{ 'bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700': context.focused && context.selected },
|
||||
{ 'bg-transparent text-surface-700 dark:text-white/80': !context.focused && context.selected },
|
||||
|
||||
//States
|
||||
'hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
itemgroup: {
|
||||
class: [
|
||||
//Font
|
||||
'font-bold',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-600/80',
|
||||
|
||||
// Misc
|
||||
'cursor-auto'
|
||||
]
|
||||
},
|
||||
filtercontainer: {
|
||||
class: 'relative w-full mr-2'
|
||||
},
|
||||
filterinput: {
|
||||
class: [
|
||||
// Font
|
||||
'font-sans',
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Sizing
|
||||
'py-1.5 px-3',
|
||||
'pr-7',
|
||||
'-mr-7',
|
||||
'w-full',
|
||||
|
||||
//Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'placeholder:text-surface-400',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'appearance-none',
|
||||
|
||||
// States
|
||||
'focus:ring-2 focus:ring-inset focus:outline-none focus:outline-offset-0',
|
||||
'focus:ring-primary-600 dark:focus:ring-primary-500',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
filtericon: {
|
||||
class: ['absolute', 'top-1/2 right-3', '-mt-2']
|
||||
},
|
||||
clearicon: {
|
||||
class: [
|
||||
// Color
|
||||
'text-surface-500',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-1/2',
|
||||
'right-12',
|
||||
|
||||
// Spacing
|
||||
'-mt-2'
|
||||
]
|
||||
},
|
||||
emptymessage: {
|
||||
class: [
|
||||
// Font
|
||||
'leading-none',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-transparent'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
266
resources/css/presets/aura/orderlist/index.js
Normal file
266
resources/css/presets/aura/orderlist/index.js
Normal file
@ -0,0 +1,266 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex'
|
||||
]
|
||||
},
|
||||
controls: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex flex-col justify-center gap-2',
|
||||
|
||||
// Spacing
|
||||
'p-3'
|
||||
]
|
||||
},
|
||||
moveupbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
movedownbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
movetopbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
movebottombutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
container: {
|
||||
class: ['flex-auto']
|
||||
},
|
||||
header: {
|
||||
class: [
|
||||
'font-semibold',
|
||||
|
||||
// Shape
|
||||
'border-b rounded-t-md',
|
||||
|
||||
// Spacing
|
||||
'py-3.5 px-3',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700 border-b'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: [
|
||||
// Spacing
|
||||
'list-none m-0 p-0',
|
||||
|
||||
// Size
|
||||
'min-h-[12rem] max-h-[24rem]',
|
||||
|
||||
// Shape
|
||||
'rounded-b-md border-0',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Spacing
|
||||
'py-3 px-0',
|
||||
|
||||
// Focus & Outline
|
||||
'outline-none',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Spacing
|
||||
'py-3.5 px-3 m-0',
|
||||
|
||||
// Shape
|
||||
'border-b last:border-b-0',
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'border-surface-200 dark:border-surface-700',
|
||||
{ 'bg-surface-100 dark:bg-surface-600/30': context.active && !context.focused },
|
||||
{ 'bg-surface-200 dark:bg-surface-500/30': context.active && context.focused },
|
||||
{ 'bg-surface-50 dark:bg-surface-700/70': !context.active && context.focused },
|
||||
|
||||
// State
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-700',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden'
|
||||
]
|
||||
})
|
||||
};
|
||||
140
resources/css/presets/aura/organizationchart/index.js
Normal file
140
resources/css/presets/aura/organizationchart/index.js
Normal file
@ -0,0 +1,140 @@
|
||||
export default {
|
||||
table: {
|
||||
class: [
|
||||
// Spacing & Position
|
||||
'mx-auto my-0',
|
||||
|
||||
// Table Style
|
||||
'border-spacing-0 border-separate'
|
||||
]
|
||||
},
|
||||
cell: {
|
||||
class: [
|
||||
// Alignment
|
||||
'text-center align-top',
|
||||
|
||||
// Spacing
|
||||
'py-0 px-3'
|
||||
]
|
||||
},
|
||||
node: ({ context }) => ({
|
||||
class: [
|
||||
'relative inline-block',
|
||||
|
||||
// Font
|
||||
'text-sm leading-none',
|
||||
|
||||
// Spacing
|
||||
'px-5 py-3',
|
||||
|
||||
// Shape
|
||||
'border',
|
||||
'rounded',
|
||||
|
||||
// Color
|
||||
'border-surface-200 dark:border-surface-700',
|
||||
{
|
||||
'text-surface-600 dark:text-white/80': !context?.selected,
|
||||
'bg-surface-0 dark:bg-surface-800': !context?.selected,
|
||||
'text-surface-700 dark:text-surface-0': context?.selected,
|
||||
'bg-surface-50 dark:bg-surface-700': context?.selected
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-600/40': context?.selectable
|
||||
},
|
||||
|
||||
{ 'cursor-pointer': context?.selectable }
|
||||
]
|
||||
}),
|
||||
linecell: {
|
||||
class: [
|
||||
// Alignment
|
||||
'text-center align-top',
|
||||
|
||||
// Spacing
|
||||
'py-0 px-3'
|
||||
]
|
||||
},
|
||||
linedown: {
|
||||
class: [
|
||||
// Spacing
|
||||
'mx-auto my-0',
|
||||
|
||||
// Size
|
||||
'w-px h-[20px]',
|
||||
|
||||
// Color
|
||||
'bg-surface-200 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
lineleft: ({ context }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'text-center align-top',
|
||||
|
||||
// Spacing
|
||||
'py-0 px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-none border-r',
|
||||
{ 'border-t': context.lineTop },
|
||||
|
||||
// Color
|
||||
'border-surface-200 dark:border-surface-700'
|
||||
]
|
||||
}),
|
||||
lineright: ({ context }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'text-center align-top',
|
||||
|
||||
// Spacing
|
||||
'py-0 px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-none',
|
||||
|
||||
// Color
|
||||
{ 'border-t border-surface-200 dark:border-surface-700': context.lineTop }
|
||||
]
|
||||
}),
|
||||
nodecell: {
|
||||
class: 'text-center align-top py-0 px-3'
|
||||
},
|
||||
nodetoggler: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute bottom-[-0.75rem] left-2/4 -ml-3',
|
||||
'z-20',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-6 h-6',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Color
|
||||
'bg-inherit text-inherit',
|
||||
|
||||
// Focus
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer no-underline select-none'
|
||||
]
|
||||
},
|
||||
nodetogglericon: {
|
||||
class: [
|
||||
// Position
|
||||
'relative inline-block',
|
||||
|
||||
// Size
|
||||
'w-4 h-4'
|
||||
]
|
||||
}
|
||||
};
|
||||
41
resources/css/presets/aura/overlaypanel/index.js
Normal file
41
resources/css/presets/aura/overlaypanel/index.js
Normal file
@ -0,0 +1,41 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-lg',
|
||||
'shadow-xl',
|
||||
'border-0 dark:border',
|
||||
|
||||
// Position
|
||||
'absolute left-0 top-0 mt-2',
|
||||
'z-40 transform origin-center',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
'dark:border-surface-700',
|
||||
|
||||
// Before: Triangle
|
||||
'before:absolute before:-top-[9px] before:-ml-[9px] before:left-[calc(var(--overlayArrowLeft,0)+1.25rem)] z-0',
|
||||
'before:w-0 before:h-0 before:shadow-xl',
|
||||
'before:border-transparent before:border-solid',
|
||||
'before:border-x-[8px] before:border-[8px]',
|
||||
'before:border-t-0 before:border-b-surface-300/10 dark:before:border-b-surface-700',
|
||||
|
||||
'after:absolute after:-top-2 after:-ml-[8px] after:left-[calc(var(--overlayArrowLeft,0)+1.25rem)]',
|
||||
'after:w-0 after:h-0',
|
||||
'after:border-transparent after:border-solid',
|
||||
'after:border-x-[0.5rem] after:border-[0.5rem]',
|
||||
'after:border-t-0 after:border-b-surface-0 dark:after:border-b-surface-800'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: 'p-6 items-center flex'
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
552
resources/css/presets/aura/paginator/index.js
Normal file
552
resources/css/presets/aura/paginator/index.js
Normal file
@ -0,0 +1,552 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'flex items-center justify-center flex-wrap',
|
||||
|
||||
// Spacing
|
||||
'px-4',
|
||||
|
||||
// Shape
|
||||
'border-t',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-500 dark:text-white/60',
|
||||
'border-surface-200 dark:border-surface-700'
|
||||
]
|
||||
},
|
||||
paginatorwrapper: {
|
||||
class: '-mt-px'
|
||||
},
|
||||
firstpagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'text-sm font-medium',
|
||||
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-t-2 border-transparent',
|
||||
|
||||
// Size
|
||||
'min-w-[3rem] h-12 -mt-px',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/60',
|
||||
|
||||
// State
|
||||
{
|
||||
'hover:border-surface-300 dark:hover:border-surface-200/30': !context.disabled,
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
|
||||
},
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'user-none overflow-hidden',
|
||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
||||
]
|
||||
}),
|
||||
previouspagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'text-sm font-medium',
|
||||
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-t-2 border-transparent',
|
||||
|
||||
// Size
|
||||
'min-w-[3rem] h-12 -mt-px',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/60',
|
||||
|
||||
// State
|
||||
{
|
||||
'hover:border-surface-300 dark:hover:border-surface-200/30': !context.disabled,
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
|
||||
},
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'user-none overflow-hidden',
|
||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
||||
]
|
||||
}),
|
||||
nextpagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'text-sm font-medium',
|
||||
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-t-2 border-transparent',
|
||||
|
||||
// Size
|
||||
'min-w-[3rem] h-12 -mt-px',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/60',
|
||||
|
||||
// State
|
||||
{
|
||||
'hover:border-surface-300 dark:hover:border-surface-200/30': !context.disabled,
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
|
||||
},
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'user-none overflow-hidden',
|
||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
||||
]
|
||||
}),
|
||||
lastpagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'text-sm font-medium',
|
||||
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-t-2 border-transparent',
|
||||
|
||||
// Size
|
||||
'min-w-[3rem] h-12 -mt-px',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/60',
|
||||
|
||||
// State
|
||||
{
|
||||
'hover:border-surface-300 dark:hover:border-surface-200/30': !context.disabled,
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
|
||||
},
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'user-none overflow-hidden',
|
||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
||||
]
|
||||
}),
|
||||
pagebutton: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'text-sm font-medium',
|
||||
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-t-2',
|
||||
|
||||
// Size
|
||||
'min-w-[3rem] h-12 -mt-px',
|
||||
|
||||
// Color
|
||||
{
|
||||
'text-surface-500 dark:text-white/60 border-transparent': !context.active,
|
||||
'border-primary-500 dark:border-primary-400 text-primary-500 dark:text-surface-0': context.active
|
||||
},
|
||||
|
||||
// State
|
||||
{
|
||||
'hover:border-surface-300 dark:hover:border-surface-200/30': !context.disabled && !context.active,
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400': !context.disabled
|
||||
},
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'user-none overflow-hidden',
|
||||
{ 'cursor-default pointer-events-none opacity-60': context.disabled }
|
||||
]
|
||||
}),
|
||||
rowperpagedropdown: {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'h-8',
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
'mx-2',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
{ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500': !state.focused },
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'select-none',
|
||||
{ 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
//Font
|
||||
'font-sans',
|
||||
'leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Display
|
||||
'block',
|
||||
'flex-auto',
|
||||
'flex items-center',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'border-0',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
|
||||
// Sizing and Spacing
|
||||
'w-[1%]',
|
||||
'py-1.5 px-3 pr-0',
|
||||
|
||||
//Shape
|
||||
'rounded-none',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:shadow-none',
|
||||
|
||||
// Misc
|
||||
'relative',
|
||||
'cursor-pointer',
|
||||
'overflow-hidden overflow-ellipsis',
|
||||
'whitespace-nowrap',
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
trigger: {
|
||||
class: [
|
||||
//Font
|
||||
'sm:text-sm',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'text-surface-500',
|
||||
|
||||
// Size
|
||||
'w-12',
|
||||
'h-8',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-md',
|
||||
'rounded-br-md'
|
||||
]
|
||||
},
|
||||
dropdownicon: {
|
||||
class: ''
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-1',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: [
|
||||
// Sizing
|
||||
'max-h-[15rem]',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
{ 'font-normal': !context.selected, 'font-bold': context.selected },
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-none',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
|
||||
{ 'bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700': context.focused && context.selected },
|
||||
{ 'bg-transparent text-surface-700 dark:text-white/80': !context.focused && context.selected },
|
||||
|
||||
//States
|
||||
'hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
})
|
||||
},
|
||||
jumptopageinput: {
|
||||
root: {
|
||||
class: 'inline-flex mx-2'
|
||||
},
|
||||
input: {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
//Font
|
||||
'font-sans',
|
||||
'leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Display
|
||||
'block',
|
||||
'flex-auto',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'border-0',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700',
|
||||
// Sizing and Spacing
|
||||
'w-[1%] max-w-[3rem]',
|
||||
'py-1.5 px-3',
|
||||
|
||||
//Shape
|
||||
'rounded-md',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'hover:border-primary-500 dark:hover:border-primary-400',
|
||||
'focus-visible:outline-none focus-visible:shadow-none',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500',
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden overflow-ellipsis',
|
||||
'whitespace-nowrap',
|
||||
'appearance-none'
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
jumptopagedropdown: {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'h-8',
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
'mx-2',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
{ 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500': !state.focused },
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'select-none',
|
||||
{ 'opacity-60': props.disabled, 'pointer-events-none': props.disabled, 'cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
//Font
|
||||
'font-sans',
|
||||
'leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Display
|
||||
'block',
|
||||
'flex-auto',
|
||||
'flex items-center',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'border-0',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
|
||||
// Sizing and Spacing
|
||||
'w-[1%]',
|
||||
'py-1.5 px-3 pr-0',
|
||||
|
||||
//Shape
|
||||
'rounded-none',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-200',
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:shadow-none',
|
||||
|
||||
// Misc
|
||||
'relative',
|
||||
'cursor-pointer',
|
||||
'overflow-hidden overflow-ellipsis',
|
||||
'whitespace-nowrap',
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
trigger: {
|
||||
class: [
|
||||
//Font
|
||||
'sm:text-sm',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'text-surface-500',
|
||||
|
||||
// Size
|
||||
'w-12',
|
||||
'h-8',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-md',
|
||||
'rounded-br-md'
|
||||
]
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-1',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: [
|
||||
// Sizing
|
||||
'max-h-[15rem]',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
list: {
|
||||
class: 'py-1 list-none m-0'
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'sm:text-sm',
|
||||
'leading-none',
|
||||
{ 'font-normal': !context.selected, 'font-bold': context.selected },
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-none',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-2 px-4',
|
||||
|
||||
// Color
|
||||
{ 'text-surface-700 dark:text-white/80': !context.focused && !context.selected },
|
||||
{ 'bg-primary-500 dark:bg-primary-400 text-white dark:text-surface-700': context.focused && context.selected },
|
||||
{ 'bg-transparent text-surface-700 dark:text-white/80': !context.focused && context.selected },
|
||||
|
||||
//States
|
||||
'hover:bg-primary-500 dark:hover:bg-primary-400 hover:text-white dark:hover:text-surface-700',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'overflow-hidden',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
})
|
||||
},
|
||||
start: {
|
||||
class: 'mr-auto'
|
||||
},
|
||||
end: {
|
||||
class: 'ml-auto'
|
||||
}
|
||||
};
|
||||
90
resources/css/presets/aura/panel/index.js
Normal file
90
resources/css/presets/aura/panel/index.js
Normal file
@ -0,0 +1,90 @@
|
||||
export default {
|
||||
root: {
|
||||
class: 'shadow-md rounded-lg'
|
||||
},
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
// Alignments
|
||||
'flex items-center justify-between',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'border-b border-surface-200 dark:border-surface-800',
|
||||
|
||||
//Shape
|
||||
'rounded-tl-lg rounded-tr-lg',
|
||||
|
||||
// Conditional Spacing
|
||||
{ 'px-5 md:px-6 py-5': !props.toggleable, 'py-3 px-5 md:px-6': props.toggleable }
|
||||
]
|
||||
}),
|
||||
title: {
|
||||
class: 'leading-none font-medium'
|
||||
},
|
||||
toggler: {
|
||||
class: [
|
||||
// Alignments
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Sized
|
||||
'w-8 h-8',
|
||||
|
||||
//Shape
|
||||
'border-0 rounded-full',
|
||||
|
||||
//Color
|
||||
'bg-transparent',
|
||||
'text-surface-600 dark:text-surface-100/80',
|
||||
|
||||
// States
|
||||
'hover:text-surface-900 dark:hover:text-surface-0/80',
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800/50',
|
||||
'focus:outline-none focus:outline-offset-0 focus-visible:ring-2 focus-visible:ring-primary-600 focus-visible:ring-inset dark:focus-visible:ring-primary-500',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden relative no-underline'
|
||||
]
|
||||
},
|
||||
togglerIcon: {
|
||||
class: 'inline-block'
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Spacing
|
||||
'py-6 px-5 md:px-6',
|
||||
|
||||
// Shape
|
||||
'last:rounded-br-lg last:rounded-bl-lg',
|
||||
|
||||
//Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'text-surface-700 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
footer: {
|
||||
class: [
|
||||
// Spacing
|
||||
'py-6 px-5 md:px-6',
|
||||
|
||||
//Shape
|
||||
'rounded-bl-lg rounded-br-lg',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'text-surface-600 dark:text-surface-0/70',
|
||||
'border-t border-surface-200 dark:border-surface-800'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
||||
enterToClass: 'max-h-[1000px]',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
124
resources/css/presets/aura/panelmenu/index.js
Normal file
124
resources/css/presets/aura/panelmenu/index.js
Normal file
@ -0,0 +1,124 @@
|
||||
export default {
|
||||
panel: {
|
||||
class: 'mb-1'
|
||||
},
|
||||
header: {
|
||||
class: ['rounded-md', 'outline-none', 'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring focus-visible:ring-primary-400/50 dark:focus-visible:ring-primary-300/50']
|
||||
},
|
||||
headercontent: ({ context, instance }) => ({
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-t-md',
|
||||
{ 'rounded-br-md rounded-bl-md': !context.active || instance.activeItem?.items === undefined, 'rounded-br-0 rounded-bl-0': context.active && instance.activeItem?.items !== undefined },
|
||||
|
||||
// Color
|
||||
'border border-surface-200 dark:border-surface-700',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-600 dark:text-surface-0/80',
|
||||
{ 'text-surface-900 ark:text-surface-0': context.active },
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
'transition-shadow duration-200'
|
||||
]
|
||||
}),
|
||||
headeraction: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-semibold',
|
||||
'text-sm',
|
||||
'leading-none',
|
||||
|
||||
// Flex & Alignments
|
||||
'flex items-center',
|
||||
|
||||
// Spacing
|
||||
'px-3 py-2',
|
||||
|
||||
// Misc
|
||||
'select-none cursor-pointer no-underline'
|
||||
]
|
||||
},
|
||||
headerlabel: {
|
||||
class: 'leading-none'
|
||||
},
|
||||
headerIcon: {
|
||||
class: 'mr-2 text-sm'
|
||||
},
|
||||
submenuicon: {
|
||||
class: 'ml-auto order-last text-sm'
|
||||
},
|
||||
menucontent: {
|
||||
class: [
|
||||
// Spacing
|
||||
'py-1',
|
||||
|
||||
// Shape
|
||||
'border border-t-0',
|
||||
'rounded-t-none rounded-br-md rounded-bl-md',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700'
|
||||
]
|
||||
},
|
||||
menu: {
|
||||
class: ['outline-none', 'm-0 p-0 list-none']
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Shape
|
||||
'border-none rounded-none',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
|
||||
// Transition
|
||||
'transition-shadow duration-200'
|
||||
]
|
||||
},
|
||||
action: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'text-sm leading-none',
|
||||
|
||||
// Flex & Alignments
|
||||
'flex items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2 px-3',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-700/80 hover:text-surface-700 dark:hover:text-white/80',
|
||||
{
|
||||
'bg-surface-200 text-surface-700 dark:text-white/80 dark:bg-surface-600/90': context.focused
|
||||
},
|
||||
|
||||
// Misc
|
||||
'cursor-pointer no-underline',
|
||||
'select-none overflow-hidden'
|
||||
]
|
||||
}),
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
},
|
||||
submenu: {
|
||||
class: 'p-0 pl-4 m-0 list-none'
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
||||
enterToClass: 'max-h-[1000px]',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
||||
leaveToClass: 'max-h-0'
|
||||
}
|
||||
};
|
||||
117
resources/css/presets/aura/password/index.js
Normal file
117
resources/css/presets/aura/password/index.js
Normal file
@ -0,0 +1,117 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'inline-flex relative',
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
},
|
||||
{ '[&>input]:pr-10': props.toggleMask }
|
||||
]
|
||||
}),
|
||||
panel: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-3',
|
||||
|
||||
// Shape
|
||||
'border-0 dark:border',
|
||||
'shadow-md rounded-md',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'dark:border-surface-700'
|
||||
]
|
||||
},
|
||||
meter: {
|
||||
class: [
|
||||
// Position and Overflow
|
||||
'overflow-hidden',
|
||||
'relative',
|
||||
|
||||
// Shape and Size
|
||||
'border-0',
|
||||
'h-2',
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
'mb-2',
|
||||
|
||||
// Colors
|
||||
'bg-surface-100 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
meterlabel: ({ instance }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'h-full',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'bg-red-500 dark:bg-red-400/50': instance?.meter?.strength == 'weak',
|
||||
'bg-orange-500 dark:bg-orange-400/50': instance?.meter?.strength == 'medium',
|
||||
'bg-green-500 dark:bg-green-400/50': instance?.meter?.strength == 'strong'
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all duration-1000 ease-in-out'
|
||||
]
|
||||
}),
|
||||
showicon: {
|
||||
class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
|
||||
},
|
||||
hideicon: {
|
||||
class: ['absolute top-1/2 right-3 -mt-2 z-10', 'text-surface-600 dark:text-white/70']
|
||||
},
|
||||
input: {
|
||||
root: ({ props, context, parent }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
|
||||
// Flex
|
||||
{ 'flex-1 w-[1%]': parent.instance.$name == 'InputGroup' },
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
{
|
||||
'py-3 px-4 text-lg sm:text-md': props.size == 'large',
|
||||
'py-1 px-2 sm:text-sm': props.size == 'small',
|
||||
'py-1.5 px-3 sm:text-sm': props.size == null
|
||||
},
|
||||
'w-full',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'shadow-sm',
|
||||
{ 'ring-1 ring-inset ring-offset-0': parent.instance.$name !== 'InputGroup' },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-700': !parent.props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': parent.props.invalid },
|
||||
|
||||
// Shape
|
||||
{ 'rounded-md': parent.instance.$name !== 'InputGroup' },
|
||||
{ 'first:rounded-l-md rounded-none last:rounded-r-md': parent.instance.$name == 'InputGroup' },
|
||||
{ 'border-0 border-y border-l last:border-r border-surface-300 dark:border-surface-600': parent.instance.$name == 'InputGroup' },
|
||||
{ 'first:ml-0 -ml-px': parent.instance.$name == 'InputGroup' && !props.showButtons },
|
||||
'appearance-none',
|
||||
|
||||
// Interactions
|
||||
{
|
||||
'outline-none focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
}
|
||||
]
|
||||
})
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
675
resources/css/presets/aura/picklist/index.js
Normal file
675
resources/css/presets/aura/picklist/index.js
Normal file
@ -0,0 +1,675 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex lg:flex-row flex-col'
|
||||
]
|
||||
},
|
||||
sourcecontrols: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex lg:flex-col justify-center gap-2',
|
||||
|
||||
// Spacing
|
||||
'p-3'
|
||||
]
|
||||
},
|
||||
sourcemoveupbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
sourcemovetopbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
sourcemovedownbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
sourcemovebottombutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
sourcewrapper: {
|
||||
class: 'grow shrink basis-2/4'
|
||||
},
|
||||
sourceheader: {
|
||||
class: [
|
||||
'font-semibold',
|
||||
|
||||
// Shape
|
||||
'border-b rounded-t-md',
|
||||
|
||||
// Spacing
|
||||
'py-3.5 px-3',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700 border-b'
|
||||
]
|
||||
},
|
||||
sourcelist: {
|
||||
class: [
|
||||
// Spacing
|
||||
'list-none m-0 p-0',
|
||||
|
||||
// Size
|
||||
'min-h-[12rem] max-h-[24rem]',
|
||||
|
||||
// Shape
|
||||
'rounded-b-md border-0',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Spacing
|
||||
'py-3 px-0',
|
||||
|
||||
// Focus & Outline
|
||||
'outline-none',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
item: ({ context }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Spacing
|
||||
'py-3.5 px-3 m-0',
|
||||
|
||||
// Shape
|
||||
'border-b last:border-b-0',
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'border-surface-200 dark:border-surface-700',
|
||||
{ 'bg-surface-100 dark:bg-surface-600/30': context.active && !context.focused },
|
||||
{ 'bg-surface-200 dark:bg-surface-500/30': context.active && context.focused },
|
||||
{ 'bg-surface-50 dark:bg-surface-700/70': !context.active && context.focused },
|
||||
|
||||
// State
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-700',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden'
|
||||
]
|
||||
}),
|
||||
buttons: {
|
||||
class: 'flex lg:flex-col justify-center gap-2 p-3'
|
||||
},
|
||||
movetotargetbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
movealltotargetbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
movetosourcebutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
movealltosourcebutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
targetcontrols: {
|
||||
class: 'flex lg:flex-col justify-center gap-2 p-3'
|
||||
},
|
||||
targetmoveupbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
targetmovetopbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
targetmovedownbutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
targetmovebottombutton: {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'relative inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
'border border-primary-500 dark:border-primary-400',
|
||||
|
||||
// Spacing & Size
|
||||
'text-sm',
|
||||
'w-8',
|
||||
'm-0',
|
||||
'px-2.5 py-1.5 min-w-[2rem]',
|
||||
'shadow-sm',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// State
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300 hover:border-primary-600 dark:hover:border-primary-300',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2',
|
||||
'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: [
|
||||
// Flexbox
|
||||
'flex-initial',
|
||||
|
||||
// Size
|
||||
'w-0'
|
||||
]
|
||||
}
|
||||
},
|
||||
targetwrapper: {
|
||||
class: 'grow shrink basis-2/4'
|
||||
},
|
||||
targetheader: {
|
||||
class: [
|
||||
'font-semibold',
|
||||
|
||||
// Shape
|
||||
'border-b rounded-t-md',
|
||||
|
||||
// Spacing
|
||||
'py-3.5 px-3',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700 border-b'
|
||||
]
|
||||
},
|
||||
targetlist: {
|
||||
class: [
|
||||
// Spacing
|
||||
'list-none m-0 p-0',
|
||||
|
||||
// Size
|
||||
'min-h-[12rem] max-h-[24rem]',
|
||||
|
||||
// Shape
|
||||
'rounded-b-md border-0',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:text-white/80',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Spacing
|
||||
'py-3 px-0',
|
||||
|
||||
// Focus & Outline
|
||||
'outline-none',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: '!transition-none',
|
||||
enterActiveClass: '!transition-none',
|
||||
leaveActiveClass: '!transition-none',
|
||||
leaveToClass: '!transition-none'
|
||||
}
|
||||
};
|
||||
56
resources/css/presets/aura/progressbar/index.js
Normal file
56
resources/css/presets/aura/progressbar/index.js
Normal file
@ -0,0 +1,56 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Position and Overflow
|
||||
'relative overflow-hidden',
|
||||
|
||||
// Shape and Size
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
{ 'h-7 pt-5': props.mode !== 'indeterminate' && props.showValue },
|
||||
{ 'h-2 bg-surface-100 dark:bg-surface-700 ': props.mode == 'indeterminate' || !props.showValue },
|
||||
|
||||
// Before & After (!indeterminate)
|
||||
{ 'before:absolute before:w-full before:rounded-md before:h-2 before:top-[1.25rem] before:left-0 before:bottom-0 before:bg-surface-100 dark:before:bg-surface-700': props.mode !== 'indeterminate' }
|
||||
]
|
||||
}),
|
||||
value: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox & Overflow & Position
|
||||
{ 'absolute flex items-center justify-center': props.mode !== 'indeterminate' },
|
||||
|
||||
// Colors
|
||||
'bg-primary-500 dark:bg-primary-400',
|
||||
|
||||
// Spacing & Sizing
|
||||
'm-0',
|
||||
{ 'h-2 w-0': props.mode !== 'indeterminate' },
|
||||
|
||||
// Shape
|
||||
'border-0 rounded-md',
|
||||
|
||||
// Transitions
|
||||
{
|
||||
'transition-width duration-1000 ease-in-out': props.mode !== 'indeterminate',
|
||||
'progressbar-value-animate': props.mode == 'indeterminate'
|
||||
},
|
||||
|
||||
// Before & After (indeterminate)
|
||||
{
|
||||
'before:absolute before:top-0 before:left-0 before:bottom-0 before:bg-inherit ': props.mode == 'indeterminate',
|
||||
'after:absolute after:top-0 after:left-0 after:bottom-0 after:bg-inherit after:delay-1000': props.mode == 'indeterminate'
|
||||
}
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex justify-end',
|
||||
'absolute inset-0 mr-1 -top-[1.15rem]',
|
||||
|
||||
// Font and Text
|
||||
'text-sm text-surface-600 dark:text-surface-0/60',
|
||||
'leading-none'
|
||||
]
|
||||
}
|
||||
};
|
||||
51
resources/css/presets/aura/progressspinner/index.js
Normal file
51
resources/css/presets/aura/progressspinner/index.js
Normal file
@ -0,0 +1,51 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Position
|
||||
'relative',
|
||||
'mx-auto',
|
||||
|
||||
// Sizing
|
||||
'w-28',
|
||||
'h-28',
|
||||
|
||||
// Flexbox
|
||||
'inline-block',
|
||||
|
||||
// Pseudo-Elements
|
||||
'before:block',
|
||||
'before:pt-full'
|
||||
]
|
||||
},
|
||||
spinner: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0',
|
||||
'bottom-0',
|
||||
'left-0',
|
||||
'right-0',
|
||||
'm-auto',
|
||||
|
||||
// Sizing
|
||||
'w-full',
|
||||
'h-full',
|
||||
|
||||
// Transformations
|
||||
'transform',
|
||||
'origin-center',
|
||||
|
||||
// Animations
|
||||
'animate-spin'
|
||||
]
|
||||
},
|
||||
circle: {
|
||||
class: [
|
||||
// Colors
|
||||
'text-red-500',
|
||||
|
||||
// Misc
|
||||
'progress-spinner-circle'
|
||||
]
|
||||
}
|
||||
};
|
||||
86
resources/css/presets/aura/radiobutton/index.js
Normal file
86
resources/css/presets/aura/radiobutton/index.js
Normal file
@ -0,0 +1,86 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox & Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex justify-center items-center',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
'text-sm',
|
||||
'font-medium',
|
||||
|
||||
// Shape
|
||||
'border-2',
|
||||
'rounded-full',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-700 dark:text-white/80': props.value !== props.modelValue && props.value !== undefined,
|
||||
'bg-surface-0 dark:bg-surface-900': props.value !== props.modelValue && props.value !== undefined,
|
||||
'border-surface-300 dark:border-surface-700': props.value !== props.modelValue && props.value !== undefined && !props.invalid,
|
||||
'border-primary-500 dark:border-primary-400': props.value == props.modelValue && props.value !== undefined
|
||||
},
|
||||
|
||||
// Invalid State
|
||||
{ 'border-red-500 dark:border-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
{
|
||||
'outline-none outline-offset-0': !props.disabled,
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 dark:focus-visible:ring-offset-surface-800 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400':
|
||||
!props.disabled,
|
||||
'opacity-60 cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none',
|
||||
'cursor-default'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: 'hidden'
|
||||
}
|
||||
};
|
||||
83
resources/css/presets/aura/rating/index.js
Normal file
83
resources/css/presets/aura/rating/index.js
Normal file
@ -0,0 +1,83 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flex & Alignment
|
||||
'flex items-center',
|
||||
'gap-1',
|
||||
|
||||
// Misc
|
||||
{
|
||||
'opacity-60 select-none pointer-events-none cursor-default': props.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
cancelitem: ({ context }) => ({
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center',
|
||||
|
||||
//State
|
||||
{
|
||||
'outline-none ring-2 ring-primary-500 dark:ring-primary-400': context.focused
|
||||
},
|
||||
|
||||
// Misc
|
||||
'cursor-pointer'
|
||||
]
|
||||
}),
|
||||
cancelicon: {
|
||||
class: [
|
||||
// Size
|
||||
'w-5 h-5',
|
||||
|
||||
// Color
|
||||
'text-red-500 dark:text-red-400'
|
||||
]
|
||||
},
|
||||
item: ({ props, context }) => ({
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center',
|
||||
|
||||
// State
|
||||
{
|
||||
'outline-none ring-2 ring-primary-500 dark:ring-primary-400': context.focused
|
||||
},
|
||||
|
||||
// Misc
|
||||
{
|
||||
'cursor-pointer': !props.readonly,
|
||||
'cursor-default': props.readonly
|
||||
}
|
||||
]
|
||||
}),
|
||||
officon: ({ props }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'w-5 h-5',
|
||||
|
||||
// Color
|
||||
'text-surface-700 dark:text-surface-0/70',
|
||||
|
||||
// State
|
||||
{ 'hover:text-primary-500 dark:hover:text-primary-400': !props.readonly },
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in'
|
||||
]
|
||||
}),
|
||||
onicon: ({ props }) => ({
|
||||
class: [
|
||||
// Size
|
||||
'w-5 h-5',
|
||||
|
||||
// Color
|
||||
'text-primary-500 dark:text-primary-400',
|
||||
|
||||
// Transition
|
||||
'transition duration-200 ease-in'
|
||||
]
|
||||
})
|
||||
};
|
||||
6
resources/css/presets/aura/ripple/index.js
Normal file
6
resources/css/presets/aura/ripple/index.js
Normal file
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
root: {
|
||||
class: ['block absolute bg-surface-0/50 rounded-full pointer-events-none'],
|
||||
style: 'transform: scale(0)'
|
||||
}
|
||||
};
|
||||
77
resources/css/presets/aura/scrollpanel/index.js
Normal file
77
resources/css/presets/aura/scrollpanel/index.js
Normal file
@ -0,0 +1,77 @@
|
||||
export default {
|
||||
wrapper: {
|
||||
class: [
|
||||
// Size & Position
|
||||
'h-full w-full',
|
||||
|
||||
// Layering
|
||||
'z-[1]',
|
||||
|
||||
// Spacing
|
||||
'overflow-hidden',
|
||||
|
||||
// Misc
|
||||
'relative float-left'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Size & Spacing
|
||||
'h-[calc(100%+12px)] w-[calc(100%+12px)] pr-[12px] pb-[12px] pl-0 pt-0',
|
||||
|
||||
// Overflow & Scrollbar
|
||||
'overflow-scroll scrollbar-none',
|
||||
|
||||
// Box Model
|
||||
'box-border',
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Webkit Specific
|
||||
'[&::-webkit-scrollbar]:hidden'
|
||||
]
|
||||
},
|
||||
barX: {
|
||||
class: [
|
||||
// Size & Position
|
||||
'h-[6px] bottom-0',
|
||||
|
||||
// Appearance
|
||||
'bg-surface-100 dark:bg-surface-700 rounded',
|
||||
|
||||
// Interactivity
|
||||
'cursor-pointer',
|
||||
|
||||
// Visibility & Layering
|
||||
'invisible z-20',
|
||||
|
||||
// Transition
|
||||
'transition duration-[250ms] ease-linear',
|
||||
|
||||
// Misc
|
||||
'relative'
|
||||
]
|
||||
},
|
||||
barY: {
|
||||
class: [
|
||||
// Size & Position
|
||||
'w-[6px] top-0',
|
||||
|
||||
// Appearance
|
||||
'bg-surface-100 dark:bg-surface-700 rounded',
|
||||
|
||||
// Interactivity
|
||||
'cursor-pointer',
|
||||
|
||||
// Visibility & Layering
|
||||
'z-20',
|
||||
|
||||
// Transition
|
||||
'transition duration-[250ms] ease-linear',
|
||||
|
||||
// Misc
|
||||
'relative'
|
||||
]
|
||||
}
|
||||
};
|
||||
41
resources/css/presets/aura/scrolltop/index.js
Normal file
41
resources/css/presets/aura/scrolltop/index.js
Normal file
@ -0,0 +1,41 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Positioning
|
||||
{
|
||||
sticky: props.target === 'parent',
|
||||
fixed: props.target === 'window'
|
||||
},
|
||||
'bottom-[20px] right-[20px]',
|
||||
'ml-auto',
|
||||
|
||||
// Shape & Size
|
||||
{
|
||||
'rounded-md h-8 w-8': props.target === 'parent',
|
||||
'h-12 w-12 rounded-full shadow-md': props.target === 'window'
|
||||
},
|
||||
|
||||
// Color
|
||||
'text-white dark:text-surface-900',
|
||||
{
|
||||
'bg-primary-500 dark:bg-primary-400 hover:bg-primary-600 dark:hover:bg-primary-300': props.target === 'parent',
|
||||
'bg-surface-500 dark:bg-surface-400 hover:bg-surface-600 dark:hover:bg-surface-300': props.target === 'window'
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'hover:bg-primary-600 dark:hover:bg-primary-300': props.target === 'parent',
|
||||
'hover:bg-surface-600 dark:hover:bg-surface-300': props.target === 'window'
|
||||
}
|
||||
]
|
||||
}),
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0',
|
||||
enterActiveClass: 'transition-opacity duration-150',
|
||||
leaveActiveClass: 'transition-opacity duration-150',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
49
resources/css/presets/aura/selectbutton/index.js
Normal file
49
resources/css/presets/aura/selectbutton/index.js
Normal file
@ -0,0 +1,49 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: ['shadow-sm', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
|
||||
}),
|
||||
button: ({ context, props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
// Font
|
||||
'text-sm',
|
||||
'leading-none',
|
||||
|
||||
// Flex Alignment
|
||||
'inline-flex items-center align-bottom text-center',
|
||||
|
||||
// Spacing
|
||||
'px-2.5 py-1.5',
|
||||
|
||||
// Shape
|
||||
'ring-1',
|
||||
{ 'ring-surface-200 dark:ring-surface-700': !props.invalid },
|
||||
'first:rounded-l-md first:rounded-tr-none first:rounded-br-none',
|
||||
'last:rounded-tl-none last:rounded-bl-none last:rounded-r-md ',
|
||||
|
||||
// Color
|
||||
{
|
||||
'bg-surface-0 dark:bg-surface-900': !context.active,
|
||||
'text-surface-700 dark:text-white/80': !context.active,
|
||||
'bg-surface-100 dark:bg-surface-700': context.active
|
||||
},
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-primary-500 dark:focus:ring-primary-400 focus:z-10',
|
||||
'hover:bg-surface-200 dark:hover:bg-surface-600/80',
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': context.disabled },
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer select-none overflow-hidden'
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: 'font-semibold'
|
||||
}
|
||||
};
|
||||
149
resources/css/presets/aura/sidebar/index.js
Normal file
149
resources/css/presets/aura/sidebar/index.js
Normal file
@ -0,0 +1,149 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex flex-col',
|
||||
|
||||
// Position
|
||||
'relative',
|
||||
{ '!transition-none !transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': props.position == 'full' },
|
||||
|
||||
// Size
|
||||
{
|
||||
'h-full w-full max-w-[28rem]': props.position == 'left' || props.position == 'right',
|
||||
'h-auto w-full': props.position == 'top' || props.position == 'bottom'
|
||||
},
|
||||
|
||||
// Shape
|
||||
'border-0 dark:border',
|
||||
'shadow-xl',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'dark:border-surface-700',
|
||||
|
||||
// Transitions
|
||||
'transition-transform',
|
||||
'duration-300',
|
||||
|
||||
// Misc
|
||||
'pointer-events-auto'
|
||||
]
|
||||
}),
|
||||
header: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-between',
|
||||
'shrink-0',
|
||||
|
||||
// Spacing
|
||||
'px-6 pt-6',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
title: {
|
||||
class: ['font-semibold leading-6 text-base m-0']
|
||||
},
|
||||
icons: {
|
||||
class: ['flex items-center']
|
||||
},
|
||||
closeButton: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size and Spacing
|
||||
'mr-2',
|
||||
'last:mr-0',
|
||||
'w-6 h-6',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
'text-surface-500',
|
||||
'bg-transparent',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden'
|
||||
]
|
||||
},
|
||||
closeicon: {
|
||||
class: [
|
||||
// Display
|
||||
'inline-block',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Spacing and Size
|
||||
'px-6 pb-6',
|
||||
'mt-6',
|
||||
'h-full',
|
||||
'w-full',
|
||||
|
||||
// Growth and Overflow
|
||||
'grow',
|
||||
'overflow-y-auto'
|
||||
]
|
||||
},
|
||||
mask: ({ props }) => ({
|
||||
class: [
|
||||
// Transitions
|
||||
'transition',
|
||||
'duration-300',
|
||||
{ 'p-5': !props.position == 'full' },
|
||||
|
||||
// Background and Effects
|
||||
{ 'has-[.mask-active]:bg-transparent dark:has-[.mask-active]:bg-transparent bg-surface-500/70 dark:bg-surface-700/70': props.modal, 'has-[.mask-active]:backdrop-blur-none backdrop-blur-sm': props.modal }
|
||||
]
|
||||
}),
|
||||
transition: ({ props }) => {
|
||||
return props.position === 'top'
|
||||
? {
|
||||
enterFromClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active',
|
||||
leaveToClass: 'translate-x-0 -translate-y-full translate-z-0 mask-active'
|
||||
}
|
||||
: props.position === 'bottom'
|
||||
? {
|
||||
enterFromClass: 'translate-x-0 translate-y-full translate-z-0 mask-active',
|
||||
leaveToClass: 'translate-x-0 translate-y-full translate-z-0 mask-active'
|
||||
}
|
||||
: props.position === 'left'
|
||||
? {
|
||||
enterFromClass: '-translate-x-full translate-y-0 translate-z-0 mask-active',
|
||||
leaveToClass: '-translate-x-full translate-y-0 translate-z-0 mask-active'
|
||||
}
|
||||
: props.position === 'right'
|
||||
? {
|
||||
enterFromClass: 'translate-x-full translate-y-0 translate-z-0 mask-active',
|
||||
leaveToClass: 'translate-x-full translate-y-0 translate-z-0 mask-active'
|
||||
}
|
||||
: {
|
||||
enterFromClass: 'opacity-0 mask-active',
|
||||
enterActiveClass: 'transition-opacity duration-400 ease-in',
|
||||
leaveActiveClass: 'transition-opacity duration-400 ease-in',
|
||||
leaveToClass: 'opacity-0 mask-active'
|
||||
};
|
||||
}
|
||||
};
|
||||
16
resources/css/presets/aura/skeleton/index.js
Normal file
16
resources/css/presets/aura/skeleton/index.js
Normal file
@ -0,0 +1,16 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'overflow-hidden',
|
||||
{
|
||||
'animate-pulse': props.animation !== 'none'
|
||||
},
|
||||
|
||||
// Round
|
||||
{ 'rounded-full': props.shape === 'circle', 'rounded-md': props.shape !== 'circle' },
|
||||
|
||||
// Colors
|
||||
'bg-surface-200 dark:bg-surface-700'
|
||||
]
|
||||
})
|
||||
};
|
||||
126
resources/css/presets/aura/slider/index.js
Normal file
126
resources/css/presets/aura/slider/index.js
Normal file
@ -0,0 +1,126 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
'flex items-center',
|
||||
|
||||
// Size
|
||||
{ 'h-2 w-full min-w-[15rem]': props.orientation == 'horizontal', 'w-2 h-full min-h-[15rem]': props.orientation == 'vertical' },
|
||||
|
||||
// Shape
|
||||
'border-0 rounded-lg',
|
||||
|
||||
// Colors
|
||||
'bg-surface-100 dark:bg-surface-700',
|
||||
|
||||
// States
|
||||
{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
range: ({ props }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'block absolute',
|
||||
{
|
||||
'top-0 left-0': props.orientation == 'horizontal',
|
||||
'bottom-0 left-0': props.orientation == 'vertical'
|
||||
},
|
||||
|
||||
//Size
|
||||
{
|
||||
'h-full': props.orientation == 'horizontal',
|
||||
'w-full': props.orientation == 'vertical'
|
||||
},
|
||||
|
||||
//Shape
|
||||
'rounded-lg',
|
||||
|
||||
// Colors
|
||||
'bg-primary-500 dark:bg-primary-400'
|
||||
]
|
||||
}),
|
||||
handle: ({ props }) => ({
|
||||
class: [
|
||||
'block',
|
||||
|
||||
// Size
|
||||
'h-4',
|
||||
'w-4',
|
||||
{
|
||||
'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': props.orientation == 'horizontal',
|
||||
'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical'
|
||||
},
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
'ring-2',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-primary-500 dark:ring-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-grab',
|
||||
'touch-action-none'
|
||||
]
|
||||
}),
|
||||
starthandler: ({ props }) => ({
|
||||
class: [
|
||||
'block',
|
||||
|
||||
// Size
|
||||
'h-4',
|
||||
'w-4',
|
||||
{
|
||||
'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': props.orientation == 'horizontal',
|
||||
'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical'
|
||||
},
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
'ring-2',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-primary-500 dark:ring-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-grab',
|
||||
'touch-action-none'
|
||||
]
|
||||
}),
|
||||
endhandler: ({ props }) => ({
|
||||
class: [
|
||||
'block',
|
||||
|
||||
// Size
|
||||
'h-4',
|
||||
'w-4',
|
||||
{
|
||||
'top-[50%] mt-[-0.5rem] ml-[-0.5rem]': props.orientation == 'horizontal',
|
||||
'left-[50%] mb-[-0.5rem] ml-[-0.5rem]': props.orientation == 'vertical'
|
||||
},
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
'ring-2',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-primary-500 dark:ring-primary-400',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-grab',
|
||||
'touch-action-none'
|
||||
]
|
||||
})
|
||||
};
|
||||
284
resources/css/presets/aura/speeddial/index.js
Normal file
284
resources/css/presets/aura/speeddial/index.js
Normal file
@ -0,0 +1,284 @@
|
||||
export default {
|
||||
root: {
|
||||
class: 'absolute flex'
|
||||
},
|
||||
button: {
|
||||
root: ({ props, context, parent }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
'z-20',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom justify-center',
|
||||
|
||||
// Sizes & Spacing
|
||||
'leading-[normal]',
|
||||
'w-12 h-12 p-0 py-3',
|
||||
|
||||
// Shapes
|
||||
'rounded-full',
|
||||
'shadow-md',
|
||||
|
||||
// Link Button
|
||||
{ 'text-primary-600 bg-transparent ring-transparent': props.link },
|
||||
|
||||
// Plain Button
|
||||
{ 'text-white bg-gray-500 ring-1 ring-gray-500': props.plain && !props.outlined && !props.text },
|
||||
// Plain Text Button
|
||||
{ 'text-surface-500': props.plain && props.text },
|
||||
// Plain Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-gray-500': props.plain && props.outlined },
|
||||
|
||||
// Text Button
|
||||
{ 'bg-transparent ring-transparent': props.text && !props.plain },
|
||||
|
||||
// Outlined Button
|
||||
{ 'bg-transparent': props.outlined && !props.plain },
|
||||
|
||||
// --- Severity Buttons ---
|
||||
|
||||
// Primary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'bg-primary-500 dark:bg-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-primary-500 dark:ring-primary-400': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Primary Text Button
|
||||
{ 'text-primary-500 dark:text-primary-400': props.text && props.severity === null && !props.plain },
|
||||
// Primary Outlined Button
|
||||
{ 'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20': props.outlined && props.severity === null && !props.plain },
|
||||
|
||||
// Secondary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-surface-500 dark:bg-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-surface-500 dark:ring-surface-400': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Secondary Text Button
|
||||
{ 'text-surface-500 dark:text-surface-400': props.text && props.severity === 'secondary' && !props.plain },
|
||||
// Secondary Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20': props.outlined && props.severity === 'secondary' && !props.plain },
|
||||
|
||||
// Success Button
|
||||
{
|
||||
'text-white dark:text-green-900': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-green-500 dark:bg-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-green-500 dark:ring-green-400': props.severity === 'success' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Success Text Button
|
||||
{ 'text-green-500 dark:text-green-400': props.text && props.severity === 'success' && !props.plain },
|
||||
// Success Outlined Button
|
||||
{ 'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20': props.outlined && props.severity === 'success' && !props.plain },
|
||||
|
||||
// Info Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-blue-500 dark:bg-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-blue-500 dark:ring-blue-400': props.severity === 'info' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Info Text Button
|
||||
{ 'text-blue-500 dark:text-blue-400': props.text && props.severity === 'info' && !props.plain },
|
||||
// Info Outlined Button
|
||||
{ 'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ': props.outlined && props.severity === 'info' && !props.plain },
|
||||
|
||||
// Warning Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-orange-500 dark:bg-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-orange-500 dark:ring-orange-400': props.severity === 'warning' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Warning Text Button
|
||||
{ 'text-orange-500 dark:text-orange-400': props.text && props.severity === 'warning' && !props.plain },
|
||||
// Warning Outlined Button
|
||||
{ 'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20': props.outlined && props.severity === 'warning' && !props.plain },
|
||||
|
||||
// Help Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-purple-500 dark:bg-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-purple-500 dark:ring-purple-400': props.severity === 'help' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Help Text Button
|
||||
{ 'text-purple-500 dark:text-purple-400': props.text && props.severity === 'help' && !props.plain },
|
||||
// Help Outlined Button
|
||||
{ 'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20': props.outlined && props.severity === 'help' && !props.plain },
|
||||
|
||||
// Danger Button
|
||||
{
|
||||
'text-white dark:text-surface-900': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
||||
'bg-red-500 dark:bg-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain,
|
||||
'ring-1 ring-red-500 dark:ring-red-400': props.severity === 'danger' && !props.text && !props.outlined && !props.plain
|
||||
},
|
||||
// Danger Text Button
|
||||
{ 'text-red-500 dark:text-red-400': props.text && props.severity === 'danger' && !props.plain },
|
||||
// Danger Outlined Button
|
||||
{ 'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20': props.outlined && props.severity === 'danger' && !props.plain },
|
||||
|
||||
// --- Severity Button States ---
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
|
||||
{ 'focus:ring-offset-2': !props.link && !props.plain && !props.outlined && !props.text },
|
||||
|
||||
// Link
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': props.link },
|
||||
|
||||
// Plain
|
||||
{ 'hover:bg-gray-600 hover:ring-gray-600': props.plain && !props.outlined && !props.text },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': props.plain && (props.text || props.outlined) },
|
||||
|
||||
// Primary
|
||||
{ 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:ring-primary-600 dark:hover:ring-primary-300': !props.link && props.severity === null && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': props.severity === null },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-primary-300/20': (props.text || props.outlined) && props.severity === null && !props.plain },
|
||||
|
||||
// Secondary
|
||||
{ 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300': props.severity === 'secondary' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': props.severity === 'secondary' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': (props.text || props.outlined) && props.severity === 'secondary' && !props.plain },
|
||||
|
||||
// Success
|
||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:ring-green-600 dark:hover:ring-green-300': props.severity === 'success' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': props.severity === 'success' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-green-300/20': (props.text || props.outlined) && props.severity === 'success' && !props.plain },
|
||||
|
||||
// Info
|
||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:ring-blue-600 dark:hover:ring-blue-300': props.severity === 'info' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': props.severity === 'info' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-blue-300/20': (props.text || props.outlined) && props.severity === 'info' && !props.plain },
|
||||
|
||||
// Warning
|
||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:ring-orange-600 dark:hover:ring-orange-300': props.severity === 'warning' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': props.severity === 'warning' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-orange-300/20': (props.text || props.outlined) && props.severity === 'warning' && !props.plain },
|
||||
|
||||
// Help
|
||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:ring-purple-600 dark:hover:ring-purple-300': props.severity === 'help' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': props.severity === 'help' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-purple-300/20': (props.text || props.outlined) && props.severity === 'help' && !props.plain },
|
||||
|
||||
// Danger
|
||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:ring-red-600 dark:hover:ring-red-300': props.severity === 'danger' && !props.text && !props.outlined && !props.plain },
|
||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': props.severity === 'danger' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-red-300/20': (props.text || props.outlined) && props.severity === 'danger' && !props.plain },
|
||||
|
||||
// Disabled
|
||||
{ 'opacity-60 pointer-events-none cursor-default': context.disabled },
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
parent.state.d_visible ? 'rotate-45' : 'rotate-0',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden select-none'
|
||||
]
|
||||
}),
|
||||
label: ({ props }) => ({
|
||||
class: [
|
||||
'duration-200',
|
||||
'font-semibold',
|
||||
{
|
||||
'hover:underline': props.link
|
||||
},
|
||||
{ 'flex-1': props.label !== null, 'invisible w-0': props.label == null }
|
||||
]
|
||||
}),
|
||||
icon: ({ props }) => ({
|
||||
class: [
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
}
|
||||
]
|
||||
}),
|
||||
loadingicon: ({ props }) => ({
|
||||
class: [
|
||||
'h-3 w-3',
|
||||
'mx-0',
|
||||
{
|
||||
'mr-2': props.iconPos == 'left' && props.label != null,
|
||||
'ml-2 order-1': props.iconPos == 'right' && props.label != null,
|
||||
'mb-2': props.iconPos == 'top' && props.label != null,
|
||||
'mt-2': props.iconPos == 'bottom' && props.label != null
|
||||
},
|
||||
'animate-spin'
|
||||
]
|
||||
}),
|
||||
badge: ({ props }) => ({
|
||||
class: [{ 'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge }]
|
||||
})
|
||||
},
|
||||
menu: {
|
||||
class: [
|
||||
// Spacing
|
||||
'm-0 p-0',
|
||||
|
||||
// Layout & Flexbox
|
||||
'list-none flex items-center justify-center',
|
||||
|
||||
// Transitions
|
||||
'transition delay-200',
|
||||
|
||||
// Z-Index (Positioning)
|
||||
'z-20'
|
||||
]
|
||||
},
|
||||
menuitem: ({ props, context }) => ({
|
||||
class: [
|
||||
'transform transition-transform duration-200 ease-out transition-opacity duration-800',
|
||||
|
||||
// Conditional Appearance
|
||||
context.hidden ? 'opacity-0 scale-0' : 'opacity-100 scale-100',
|
||||
|
||||
// Conditional Spacing
|
||||
{
|
||||
'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
|
||||
'my-1 first:mt-2': props.direction == 'down' && props.type == 'linear',
|
||||
'mx-1 first:mr-2': props.direction == 'left' && props.type == 'linear',
|
||||
'mx-1 first:ml-2': props.direction == 'right' && props.type == 'linear'
|
||||
},
|
||||
|
||||
// Conditional Positioning
|
||||
{ absolute: props.type !== 'linear' }
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
// Flexbox & Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-12 h-12',
|
||||
|
||||
// Shape
|
||||
'rounded-full relative overflow-hidden',
|
||||
|
||||
// Appearance
|
||||
'bg-surface-600 dark:bg-surface-0/80 text-white dark:text-surface-900/80',
|
||||
|
||||
// Hover Effects
|
||||
'hover:bg-surface-700 dark:hover:bg-surface-200/80'
|
||||
]
|
||||
},
|
||||
mask: ({ state }) => ({
|
||||
class: [
|
||||
// Base Styles
|
||||
'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-surface-900/40 backdrop-blur-sm z-0',
|
||||
|
||||
// Conditional Appearance
|
||||
{
|
||||
'opacity-0 pointer-events-none': !state.d_visible,
|
||||
'opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
501
resources/css/presets/aura/splitbutton/index.js
Normal file
501
resources/css/presets/aura/splitbutton/index.js
Normal file
@ -0,0 +1,501 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
{ 'shadow-lg': props.raised }
|
||||
]
|
||||
}),
|
||||
button: {
|
||||
root: ({ parent }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom justify-center',
|
||||
|
||||
// Sizes & Spacing
|
||||
'text-sm',
|
||||
{
|
||||
'px-2.5 py-1.5 min-w-[2rem]': parent.props.size === null,
|
||||
'px-2 py-1': parent.props.size === 'small',
|
||||
'px-3 py-2': parent.props.size === 'large'
|
||||
},
|
||||
{
|
||||
'min-w-8 p-0 py-1.5': parent.props.label == null && parent.props.icon !== null
|
||||
},
|
||||
|
||||
// Shape
|
||||
'rounded-r-none',
|
||||
'border-r-0',
|
||||
{ 'rounded-l-full': parent.props.rounded },
|
||||
{ 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
|
||||
|
||||
// Link Button
|
||||
{ 'text-primary-600 bg-transparent ring-transparent': parent.props.link },
|
||||
|
||||
// Plain Button
|
||||
{ 'text-white bg-gray-500 ring-1 ring-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
||||
// Plain Text Button
|
||||
{ 'text-surface-500': parent.props.plain && parent.props.text },
|
||||
// Plain Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-gray-500': parent.props.plain && parent.props.outlined },
|
||||
|
||||
// Text Button
|
||||
{ 'bg-transparent ring-transparent': parent.props.text && !parent.props.plain },
|
||||
|
||||
// Outlined Button
|
||||
{ 'bg-transparent': parent.props.outlined && !parent.props.plain },
|
||||
|
||||
// --- Severity Buttons ---
|
||||
|
||||
// Primary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-primary-500 dark:bg-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-primary-500 dark:ring-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Primary Text Button
|
||||
{ 'text-primary-500 dark:text-primary-400': parent.props.text && parent.props.severity === null && !parent.props.plain },
|
||||
// Primary Outlined Button
|
||||
{ 'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
|
||||
|
||||
// Secondary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-surface-500 dark:ring-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Secondary Text Button
|
||||
{ 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
// Secondary Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
|
||||
// Success Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-green-500 dark:ring-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Success Text Button
|
||||
{ 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
// Success Outlined Button
|
||||
{ 'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
|
||||
|
||||
// Info Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-blue-500 dark:ring-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Info Text Button
|
||||
{ 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
|
||||
// Info Outlined Button
|
||||
{ 'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
|
||||
|
||||
// Warning Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-orange-500 dark:ring-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Warning Text Button
|
||||
{ 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
|
||||
// Warning Outlined Button
|
||||
{ 'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
|
||||
|
||||
// Help Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-purple-500 dark:ring-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Help Text Button
|
||||
{ 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
|
||||
// Help Outlined Button
|
||||
{ 'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
|
||||
|
||||
// Danger Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-red-500 dark:ring-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Danger Text Button
|
||||
{ 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
|
||||
// Danger Outlined Button
|
||||
{ 'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
|
||||
|
||||
// --- Severity Button States ---
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
|
||||
{ 'focus:ring-offset-2': !parent.props.link && !parent.props.plain && !parent.props.outlined && !parent.props.text },
|
||||
|
||||
// Link
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.link },
|
||||
|
||||
// Plain
|
||||
{ 'hover:bg-gray-600 hover:ring-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) },
|
||||
|
||||
// Primary
|
||||
{ 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:ring-primary-600 dark:hover:ring-primary-300': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.severity === null },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
|
||||
|
||||
// Secondary
|
||||
{ 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
|
||||
// Success
|
||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:ring-green-600 dark:hover:ring-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
|
||||
|
||||
// Info
|
||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:ring-blue-600 dark:hover:ring-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
|
||||
|
||||
// Warning
|
||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:ring-orange-600 dark:hover:ring-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
|
||||
|
||||
// Help
|
||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:ring-purple-600 dark:hover:ring-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
|
||||
|
||||
// Warning
|
||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:ring-red-600 dark:hover:ring-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden select-none'
|
||||
]
|
||||
}),
|
||||
icon: {
|
||||
class: [
|
||||
// Margins
|
||||
'mr-2'
|
||||
]
|
||||
}
|
||||
},
|
||||
menubutton: {
|
||||
root: ({ parent }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignments
|
||||
'items-center inline-flex text-center align-bottom justify-center',
|
||||
|
||||
// Sizes & Spacing
|
||||
'text-sm',
|
||||
{
|
||||
'px-2.5 py-1.5 min-w-[2rem]': parent.props.size === null,
|
||||
'px-2 py-1': parent.props.size === 'small',
|
||||
'px-3 py-2': parent.props.size === 'large'
|
||||
},
|
||||
{
|
||||
'min-w-8 p-0 py-1.5': parent.props.label == null && parent.props.icon !== null
|
||||
},
|
||||
'ml-px',
|
||||
|
||||
// Shape
|
||||
'rounded-l-none',
|
||||
{ 'rounded-l-full': parent.props.rounded },
|
||||
{ 'rounded-md': !parent.props.rounded, 'rounded-full': parent.props.rounded },
|
||||
|
||||
// Link Button
|
||||
{ 'text-primary-600 bg-transparent ring-transparent': parent.props.link },
|
||||
|
||||
// Plain Button
|
||||
{ 'text-white bg-gray-500 ring-1 ring-gray-500': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
||||
// Plain Text Button
|
||||
{ 'text-surface-500': parent.props.plain && parent.props.text },
|
||||
// Plain Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-gray-500': parent.props.plain && parent.props.outlined },
|
||||
|
||||
// Text Button
|
||||
{ 'bg-transparent ring-transparent': parent.props.text && !parent.props.plain },
|
||||
|
||||
// Outlined Button
|
||||
{ 'bg-transparent': parent.props.outlined && !parent.props.plain },
|
||||
|
||||
// --- Severity Buttons ---
|
||||
|
||||
// Primary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-primary-500 dark:bg-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-primary-500 dark:ring-primary-400': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Primary Text Button
|
||||
{ 'text-primary-500 dark:text-primary-400': parent.props.text && parent.props.severity === null && !parent.props.plain },
|
||||
// Primary Outlined Button
|
||||
{ 'text-primary-500 ring-1 ring-primary-500 hover:bg-primary-300/20': parent.props.outlined && parent.props.severity === null && !parent.props.plain },
|
||||
|
||||
// Secondary Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-surface-500 dark:bg-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-surface-500 dark:ring-surface-400': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Secondary Text Button
|
||||
{ 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
// Secondary Outlined Button
|
||||
{ 'text-surface-500 ring-1 ring-surface-500 hover:bg-surface-300/20': parent.props.outlined && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
|
||||
// Success Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-green-500 dark:bg-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-green-500 dark:ring-green-400': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Success Text Button
|
||||
{ 'text-surface-500 dark:text-surface-400': parent.props.text && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
// Success Outlined Button
|
||||
{ 'text-green-500 ring-1 ring-green-500 hover:bg-green-300/20': parent.props.outlined && parent.props.severity === 'success' && !parent.props.plain },
|
||||
|
||||
// Info Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-blue-500 dark:bg-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-blue-500 dark:ring-blue-400': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Info Text Button
|
||||
{ 'text-blue-500 dark:text-blue-400': parent.props.text && parent.props.severity === 'info' && !parent.props.plain },
|
||||
// Info Outlined Button
|
||||
{ 'text-blue-500 ring-1 ring-blue-500 hover:bg-blue-300/20 ': parent.props.outlined && parent.props.severity === 'info' && !parent.props.plain },
|
||||
|
||||
// Warning Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-orange-500 dark:bg-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-orange-500 dark:ring-orange-400': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Warning Text Button
|
||||
{ 'text-orange-500 dark:text-orange-400': parent.props.text && parent.props.severity === 'warning' && !parent.props.plain },
|
||||
// Warning Outlined Button
|
||||
{ 'text-orange-500 ring-1 ring-orange-500 hover:bg-orange-300/20': parent.props.outlined && parent.props.severity === 'warning' && !parent.props.plain },
|
||||
|
||||
// Help Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-purple-500 dark:bg-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-purple-500 dark:ring-purple-400': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Help Text Button
|
||||
{ 'text-purple-500 dark:text-purple-400': parent.props.text && parent.props.severity === 'help' && !parent.props.plain },
|
||||
// Help Outlined Button
|
||||
{ 'text-purple-500 ring-1 ring-purple-500 hover:bg-purple-300/20': parent.props.outlined && parent.props.severity === 'help' && !parent.props.plain },
|
||||
|
||||
// Danger Button
|
||||
{
|
||||
'text-white dark:text-surface-900': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'bg-red-500 dark:bg-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain,
|
||||
'ring-1 ring-red-500 dark:ring-red-400': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain
|
||||
},
|
||||
// Danger Text Button
|
||||
{ 'text-red-500 dark:text-red-400': parent.props.text && parent.props.severity === 'danger' && !parent.props.plain },
|
||||
// Danger Outlined Button
|
||||
{ 'text-red-500 ring-1 ring-red-500 hover:bg-red-300/20': parent.props.outlined && parent.props.severity === 'danger' && !parent.props.plain },
|
||||
|
||||
// --- Severity Button States ---
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-offset-current',
|
||||
{ 'focus:ring-offset-2': !parent.props.link && !parent.props.plain && !parent.props.outlined && !parent.props.text },
|
||||
|
||||
// Link
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.link },
|
||||
|
||||
// Plain
|
||||
{ 'hover:bg-gray-600 hover:ring-gray-600': parent.props.plain && !parent.props.outlined && !parent.props.text },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': parent.props.plain && (parent.props.text || parent.props.outlined) },
|
||||
|
||||
// Primary
|
||||
{ 'hover:bg-primary-600 dark:hover:bg-primary-300 hover:ring-primary-600 dark:hover:ring-primary-300': !parent.props.link && parent.props.severity === null && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-primary-500 dark:focus:ring-primary-400': parent.props.severity === null },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-primary-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === null && !parent.props.plain },
|
||||
|
||||
// Secondary
|
||||
{ 'hover:bg-surface-600 dark:hover:bg-surface-300 hover:ring-surface-600 dark:hover:ring-surface-300': parent.props.severity === 'secondary' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-surface-500 dark:focus:ring-surface-400': parent.props.severity === 'secondary' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-surface-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'secondary' && !parent.props.plain },
|
||||
|
||||
// Success
|
||||
{ 'hover:bg-green-600 dark:hover:bg-green-300 hover:ring-green-600 dark:hover:ring-green-300': parent.props.severity === 'success' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-green-500 dark:focus:ring-green-400': parent.props.severity === 'success' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-green-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'success' && !parent.props.plain },
|
||||
|
||||
// Info
|
||||
{ 'hover:bg-blue-600 dark:hover:bg-blue-300 hover:ring-blue-600 dark:hover:ring-blue-300': parent.props.severity === 'info' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-blue-500 dark:focus:ring-blue-400': parent.props.severity === 'info' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-blue-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'info' && !parent.props.plain },
|
||||
|
||||
// Warning
|
||||
{ 'hover:bg-orange-600 dark:hover:bg-orange-300 hover:ring-orange-600 dark:hover:ring-orange-300': parent.props.severity === 'warning' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-orange-500 dark:focus:ring-orange-400': parent.props.severity === 'warning' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-orange-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'warning' && !parent.props.plain },
|
||||
|
||||
// Help
|
||||
{ 'hover:bg-purple-600 dark:hover:bg-purple-300 hover:ring-purple-600 dark:hover:ring-purple-300': parent.props.severity === 'help' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-purple-500 dark:focus:ring-purple-400': parent.props.severity === 'help' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-purple-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'help' && !parent.props.plain },
|
||||
|
||||
// Warning
|
||||
{ 'hover:bg-red-600 dark:hover:bg-red-300 hover:ring-red-600 dark:hover:ring-red-300': parent.props.severity === 'danger' && !parent.props.text && !parent.props.outlined && !parent.props.plain },
|
||||
{ 'focus:ring-red-500 dark:focus:ring-red-400': parent.props.severity === 'danger' },
|
||||
// Text & Outlined Button
|
||||
{ 'hover:bg-red-300/20': (parent.props.text || parent.props.outlined) && parent.props.severity === 'danger' && !parent.props.plain },
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer overflow-hidden select-none'
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: ['hidden']
|
||||
}
|
||||
},
|
||||
menu: {
|
||||
root: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Size
|
||||
'min-w-[12rem]',
|
||||
'p-1.5',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'ring-1 ring-surface-200 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
menu: {
|
||||
class: [
|
||||
// Spacings and Shape
|
||||
'list-none',
|
||||
'm-0',
|
||||
'p-0',
|
||||
'outline-none'
|
||||
]
|
||||
},
|
||||
menuitem: {
|
||||
class: ['relative first:mt-0 mt-1']
|
||||
},
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
//Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
||||
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
|
||||
},
|
||||
|
||||
// Hover States
|
||||
{
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
|
||||
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-shadow',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-semibold',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2',
|
||||
'px-3',
|
||||
|
||||
// Misc
|
||||
'no-underline',
|
||||
'overflow-hidden',
|
||||
'cursor-pointer',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Spacing
|
||||
'mr-2',
|
||||
'leading-6',
|
||||
'text-sm'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: ['leading-none', 'text-sm']
|
||||
},
|
||||
submenuicon: {
|
||||
class: [
|
||||
// Position
|
||||
'ml-auto'
|
||||
]
|
||||
},
|
||||
submenu: {
|
||||
class: [
|
||||
// Size
|
||||
'w-full sm:w-48',
|
||||
|
||||
// Spacing
|
||||
'p-1.5',
|
||||
'm-0 mx-1.5',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-none sm:shadow-md',
|
||||
'border-0',
|
||||
|
||||
// Position
|
||||
'static sm:absolute',
|
||||
'z-10',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
separator: {
|
||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
||||
}
|
||||
}
|
||||
};
|
||||
61
resources/css/presets/aura/splitter/index.js
Normal file
61
resources/css/presets/aura/splitter/index.js
Normal file
@ -0,0 +1,61 @@
|
||||
export default {
|
||||
root: ({ context }) => ({
|
||||
class: [
|
||||
// Colors
|
||||
'bg-surface-0',
|
||||
'dark:bg-surface-900',
|
||||
'text-surface-700',
|
||||
'dark:text-surface-0/80',
|
||||
|
||||
// Shape
|
||||
'rounded-lg',
|
||||
|
||||
// Borders (Conditional)
|
||||
{ 'border border-solid border-surface-50 dark:border-surface-700': !context.nested },
|
||||
|
||||
// Nested
|
||||
{ 'flex grow border-0': context.nested }
|
||||
]
|
||||
}),
|
||||
|
||||
gutter: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Colors
|
||||
'bg-surface-50',
|
||||
'dark:bg-surface-800',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200',
|
||||
|
||||
// Misc
|
||||
{
|
||||
'cursor-col-resize': props.layout == 'horizontal',
|
||||
'cursor-row-resize': props.layout !== 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
gutterhandler: ({ props }) => ({
|
||||
class: [
|
||||
// Colors
|
||||
'bg-surface-100',
|
||||
'dark:bg-surface-600',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200',
|
||||
|
||||
// Sizing (Conditional)
|
||||
{
|
||||
'h-7': props.layout == 'horizontal',
|
||||
'w-7 h-2': props.layout !== 'horizontal'
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
158
resources/css/presets/aura/stepper/index.js
Normal file
158
resources/css/presets/aura/stepper/index.js
Normal file
@ -0,0 +1,158 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: ['flex-1', props.orientation === 'vertical' ? 'flex-col' : 'flex-row']
|
||||
}),
|
||||
nav: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
'justify-between',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'p-0',
|
||||
|
||||
// Positioning
|
||||
'relative',
|
||||
|
||||
// Lists
|
||||
'list-none',
|
||||
|
||||
// Overflow
|
||||
'overflow-x-auto'
|
||||
]
|
||||
},
|
||||
stepperpanel: {
|
||||
panel: ({ context, parent }) => ({
|
||||
class: [context.active ? 'flex-1' : '', parent.props.orientation === 'vertical' ? 'flex flex-col flex-initial' : '']
|
||||
}),
|
||||
header: ({ parent, context }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
context.last ? 'flex-initial' : 'flex-1',
|
||||
parent.props.orientation === 'vertical' ? 'flex-initial' : '',
|
||||
|
||||
// Spacing
|
||||
'p-2'
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
// Borders
|
||||
'border-0',
|
||||
'border-none',
|
||||
|
||||
// Flexbox
|
||||
'inline-flex',
|
||||
'items-center',
|
||||
|
||||
// Text
|
||||
'text-decoration-none',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'transition-shadow',
|
||||
'duration-200',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Backgrounds
|
||||
'bg-transparent',
|
||||
|
||||
// Focus
|
||||
'outline-none'
|
||||
]
|
||||
},
|
||||
number: ({ context }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Colors (Conditional)
|
||||
context.active ? 'bg-primary-500 dark:bg-primary-400 text-surface-0 dark:text-surface-900' : 'border border-surface-200 dark:border-surface-700 text-surface-900 dark:text-surface-0', // Adjust colors as needed
|
||||
|
||||
// Size and Shape
|
||||
'min-w-[2rem]',
|
||||
'h-[2rem]',
|
||||
'rounded-full',
|
||||
'leading-none',
|
||||
|
||||
// Borders
|
||||
context.active ? 'border-0 border-none' : 'border-solid border-2',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'transition-colors',
|
||||
'transition-shadow',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
title: ({ context }) => ({
|
||||
class: [
|
||||
// Layout
|
||||
'block',
|
||||
'whitespace-nowrap',
|
||||
'overflow-hidden',
|
||||
'text-ellipsis',
|
||||
'max-w-full',
|
||||
|
||||
// Spacing
|
||||
'ml-2',
|
||||
|
||||
// Text
|
||||
context.active ? 'text-surface-900 dark:text-surface-0' : 'text-surface-700 dark:text-surface-0/80',
|
||||
'font-semibold',
|
||||
|
||||
// Transitions
|
||||
'transition',
|
||||
'transition-colors',
|
||||
'transition-shadow',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
separator: ({ context, state, parent }) => ({
|
||||
class: [
|
||||
// Colors (Conditional for active step)
|
||||
state.d_activeStep <= context.index ? 'bg-surface-200 dark:bg-surface-700' : 'bg-primary-500 dark:bg-primary-400',
|
||||
|
||||
// Conditional for Vertical Orientation
|
||||
parent.props.orientation === 'vertical' ? ['flex-none', 'w-[2px]', 'h-auto', 'ml-[calc(1.29rem+2px)]'] : ['flex-1', 'w-full', 'h-[2px]', 'ml-4'],
|
||||
|
||||
// Transitions
|
||||
'transition-shadow',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
transition: {
|
||||
class: ['flex flex-1', 'bg-surface-0 dark:bg-surface-800', 'text-surface-900 dark:text-surface-0'],
|
||||
enterFromClass: 'max-h-0',
|
||||
enterActiveClass: 'overflow-hidden transition-[max-height] duration-1000 ease-[cubic-bezier(0.42,0,0.58,1)]',
|
||||
enterToClass: 'max-h-[1000px]',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: 'overflow-hidden transition-[max-height] duration-[450ms] ease-[cubic-bezier(0,1,0,1)]',
|
||||
leaveToClass: 'max-h-0'
|
||||
},
|
||||
content: ({ parent }) => ({
|
||||
class: [parent.props.orientation === 'vertical' ? 'w-full pl-4' : '']
|
||||
})
|
||||
},
|
||||
panelcontainer: {
|
||||
class: [
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
|
||||
// Spacing
|
||||
'p-4'
|
||||
]
|
||||
}
|
||||
};
|
||||
114
resources/css/presets/aura/steps/index.js
Normal file
114
resources/css/presets/aura/steps/index.js
Normal file
@ -0,0 +1,114 @@
|
||||
export default {
|
||||
root: {
|
||||
class: 'relative'
|
||||
},
|
||||
menu: {
|
||||
class: 'p-0 m-0 list-none flex justify-center'
|
||||
},
|
||||
menuitem: {
|
||||
class: [
|
||||
// Flexbox and Position
|
||||
'relative',
|
||||
'flex',
|
||||
'justify-center'
|
||||
]
|
||||
},
|
||||
action: ({ props, context, state }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'inline-flex items-start relative',
|
||||
'flex-col',
|
||||
|
||||
// Transitions and Shape
|
||||
'transition-shadow',
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
{ 'pr-4 min-[576px]:pr-32 md:pr-40': props.model.length !== context.index + 1 },
|
||||
|
||||
// Colors
|
||||
'bg-surface-0',
|
||||
'dark:bg-transparent',
|
||||
|
||||
// Misc
|
||||
{ 'cursor-pointer': !props.readonly },
|
||||
|
||||
// After
|
||||
'after:border-t-2',
|
||||
{ 'after:border-surface-200 after:dark:border-surface-700': state.d_activeStep <= context.index },
|
||||
{ 'after:border-primary-500 after:dark:border-primary-400': state.d_activeStep > context.index },
|
||||
'after:w-full',
|
||||
'after:absolute',
|
||||
'after:top-1/2',
|
||||
'after:left-0',
|
||||
'after:transform',
|
||||
'after:-mt-3',
|
||||
{ 'after:hidden': props.model.length == context.index + 1 }
|
||||
]
|
||||
}),
|
||||
step: ({ context, props, state }) => ({
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Position
|
||||
'z-40',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
'border-2',
|
||||
|
||||
// Size
|
||||
'w-[2rem]',
|
||||
'h-[2rem]',
|
||||
'text-sm',
|
||||
'leading-[2rem]',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-400 dark:text-white/60': !context.active && state.d_activeStep < context.index,
|
||||
'border-surface-100 dark:border-surface-700': !context.active && state.d_activeStep < context.index,
|
||||
'bg-surface-0 dark:bg-surface-800': state.d_activeStep <= context.index
|
||||
},
|
||||
{
|
||||
'border-primary-500 dark:border-primary-400': context.active,
|
||||
'text-primary-500 dark:text-primary-400': context.active
|
||||
},
|
||||
{
|
||||
'bg-primary-500 dark:bg-primary-400': state.d_activeStep > context.index,
|
||||
'text-surface-0 dark:text-surface-900': state.d_activeStep > context.index,
|
||||
'border-primary-500 dark:border-primary-400': state.d_activeStep > context.index
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'hover:border-surface-300 dark:hover:border-surface-500': !context.active && !props.readonly
|
||||
},
|
||||
|
||||
// Transition
|
||||
'transition-colors duration-200 ease-in-out'
|
||||
]
|
||||
}),
|
||||
label: ({ context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
// Font
|
||||
'text-sm leading-none',
|
||||
{ 'font-medium': context.active },
|
||||
|
||||
// Display
|
||||
'block',
|
||||
|
||||
// Spacing
|
||||
'mt-2',
|
||||
|
||||
// Colors
|
||||
{ 'text-surface-400 dark:text-white/60': !context.active, 'text-surface-800 dark:text-white/80': context.active },
|
||||
|
||||
// Text and Overflow
|
||||
'whitespace-nowrap',
|
||||
'overflow-ellipsis',
|
||||
'max-w-full'
|
||||
]
|
||||
})
|
||||
};
|
||||
75
resources/css/presets/aura/tabmenu/index.js
Normal file
75
resources/css/presets/aura/tabmenu/index.js
Normal file
@ -0,0 +1,75 @@
|
||||
export default {
|
||||
root: {
|
||||
class: 'overflow-x-auto'
|
||||
},
|
||||
menu: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex flex-1',
|
||||
|
||||
// Spacing
|
||||
'list-none',
|
||||
'p-0 m-0',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-b border-surface-200 dark:border-surface-700',
|
||||
'text-surface-900 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
menuitem: {
|
||||
class: 'mr-0'
|
||||
},
|
||||
action: ({ context, state }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-medium',
|
||||
'text-md',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center',
|
||||
|
||||
// Spacing
|
||||
'py-4 px-3',
|
||||
'-mb-px',
|
||||
|
||||
// Shape
|
||||
'border-b-2',
|
||||
'rounded-t-md',
|
||||
|
||||
// Colors and Conditions
|
||||
{
|
||||
'border-surface-200 dark:border-surface-700': state.d_activeIndex !== context.index,
|
||||
'bg-surface-0 dark:bg-surface-800': state.d_activeIndex !== context.index,
|
||||
'text-surface-700 dark:text-surface-0/80': state.d_activeIndex !== context.index,
|
||||
|
||||
'bg-surface-0 dark:bg-surface-800': state.d_activeIndex === context.index,
|
||||
'border-primary-500 dark:border-primary-400': state.d_activeIndex === context.index,
|
||||
'text-primary-500 dark:text-primary-400': state.d_activeIndex === context.index
|
||||
},
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset',
|
||||
'focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
{
|
||||
'hover:bg-surface-0 dark:hover:bg-surface-800/80': state.d_activeIndex !== context.index,
|
||||
'hover:border-surface-400 dark:hover:border-surface-600': state.d_activeIndex !== context.index,
|
||||
'hover:text-surface-900 dark:hover:text-surface-0': state.d_activeIndex !== context.index
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer select-none text-decoration-none',
|
||||
'overflow-hidden',
|
||||
'user-select-none',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
icon: {
|
||||
class: 'mr-2'
|
||||
}
|
||||
};
|
||||
158
resources/css/presets/aura/tabview/index.js
Normal file
158
resources/css/presets/aura/tabview/index.js
Normal file
@ -0,0 +1,158 @@
|
||||
export default {
|
||||
navContainer: ({ props }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'relative',
|
||||
|
||||
// Misc
|
||||
{ 'overflow-hidden': props.scrollable }
|
||||
]
|
||||
}),
|
||||
navContent: {
|
||||
class: [
|
||||
// Overflow and Scrolling
|
||||
'overflow-y-hidden overscroll-contain',
|
||||
'overscroll-auto',
|
||||
'scroll-smooth',
|
||||
'[&::-webkit-scrollbar]:hidden'
|
||||
]
|
||||
},
|
||||
previousButton: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Position
|
||||
'!absolute',
|
||||
'top-0 left-0',
|
||||
'z-20',
|
||||
|
||||
// Size and Shape
|
||||
'h-full w-12',
|
||||
'rounded-none',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-primary-500 dark:text-primary-400',
|
||||
'shadow-md'
|
||||
]
|
||||
},
|
||||
nextButton: {
|
||||
class: [
|
||||
// Flexbox and Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Position
|
||||
'!absolute',
|
||||
'top-0 right-0',
|
||||
'z-20',
|
||||
|
||||
// Size and Shape
|
||||
'h-full w-12',
|
||||
'rounded-none',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-primary-500 dark:text-primary-400',
|
||||
'shadow-md'
|
||||
]
|
||||
},
|
||||
nav: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex flex-1',
|
||||
|
||||
// Spacing
|
||||
'list-none',
|
||||
'p-0 m-0',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-b border-surface-200 dark:border-surface-700',
|
||||
'text-surface-900 dark:text-surface-0/80'
|
||||
]
|
||||
},
|
||||
tabpanel: {
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
// Spacing
|
||||
'mr-0',
|
||||
|
||||
// Misc
|
||||
{
|
||||
'opacity-60 cursor-default user-select-none select-none pointer-events-none': props?.disabled
|
||||
}
|
||||
]
|
||||
}),
|
||||
headerAction: ({ parent, context }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-medium',
|
||||
'text-md',
|
||||
|
||||
// Flexbox and Alignment
|
||||
'flex items-center',
|
||||
|
||||
// Spacing
|
||||
'py-4 px-3',
|
||||
'-mb-px',
|
||||
|
||||
// Shape
|
||||
'border-b-2',
|
||||
'rounded-t-md',
|
||||
|
||||
// Colors and Conditions
|
||||
{
|
||||
'border-surface-200 dark:border-surface-700': parent.state.d_activeIndex !== context.index,
|
||||
'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex !== context.index,
|
||||
'text-surface-700 dark:text-surface-0/80': parent.state.d_activeIndex !== context.index,
|
||||
|
||||
'bg-surface-0 dark:bg-surface-800': parent.state.d_activeIndex === context.index,
|
||||
'border-primary-500 dark:border-primary-400': parent.state.d_activeIndex === context.index,
|
||||
'text-primary-500 dark:text-primary-400': parent.state.d_activeIndex === context.index
|
||||
},
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset',
|
||||
'focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
{
|
||||
'hover:bg-surface-0 dark:hover:bg-surface-800/80': parent.state.d_activeIndex !== context.index,
|
||||
'hover:border-surface-400 dark:hover:border-surface-600': parent.state.d_activeIndex !== context.index,
|
||||
'hover:text-surface-900 dark:hover:text-surface-0': parent.state.d_activeIndex !== context.index
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer select-none text-decoration-none',
|
||||
'overflow-hidden',
|
||||
'user-select-none',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
}),
|
||||
headerTitle: {
|
||||
class: [
|
||||
// Text
|
||||
'leading-none',
|
||||
'whitespace-nowrap'
|
||||
]
|
||||
},
|
||||
content: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-6',
|
||||
|
||||
// Shape
|
||||
'rounded-b-md',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
'border-0'
|
||||
]
|
||||
}
|
||||
}
|
||||
};
|
||||
36
resources/css/presets/aura/tag/index.js
Normal file
36
resources/css/presets/aura/tag/index.js
Normal file
@ -0,0 +1,36 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
//Font
|
||||
'text-xs font-bold',
|
||||
|
||||
//Alignments
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
//Spacing
|
||||
'px-2 py-1',
|
||||
|
||||
//Shape
|
||||
{
|
||||
'rounded-md': !props.rounded,
|
||||
'rounded-full': props.rounded
|
||||
},
|
||||
|
||||
//Colors
|
||||
'text-white dark:text-surface-900',
|
||||
{
|
||||
'bg-primary-500 dark:bg-primary-400': props.severity == null || props.severity == 'primary',
|
||||
'bg-green-500 dark:bg-green-400': props.severity == 'success',
|
||||
'bg-blue-500 dark:bg-blue-400': props.severity == 'info',
|
||||
'bg-orange-500 dark:bg-orange-400': props.severity == 'warning',
|
||||
'bg-red-500 dark:bg-red-400': props.severity == 'danger'
|
||||
}
|
||||
]
|
||||
}),
|
||||
value: {
|
||||
class: 'leading-normal'
|
||||
},
|
||||
icon: {
|
||||
class: 'mr-1 text-sm'
|
||||
}
|
||||
};
|
||||
60
resources/css/presets/aura/terminal/index.js
Normal file
60
resources/css/presets/aura/terminal/index.js
Normal file
@ -0,0 +1,60 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Spacing
|
||||
'p-5',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-900 text-white',
|
||||
'border border-surface-700',
|
||||
|
||||
// Sizing & Overflow
|
||||
'h-72 overflow-auto'
|
||||
]
|
||||
},
|
||||
container: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex items-center'
|
||||
]
|
||||
},
|
||||
prompt: {
|
||||
class: [
|
||||
// Color
|
||||
'text-surface-400'
|
||||
]
|
||||
},
|
||||
response: {
|
||||
class: [
|
||||
// Color
|
||||
'text-primary-400'
|
||||
]
|
||||
},
|
||||
command: {
|
||||
class: [
|
||||
// Color
|
||||
'text-primary-400'
|
||||
]
|
||||
},
|
||||
commandtext: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex-1 shrink grow-0',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
|
||||
// Color
|
||||
'bg-transparent text-inherit',
|
||||
|
||||
// Outline
|
||||
'outline-none'
|
||||
]
|
||||
}
|
||||
};
|
||||
38
resources/css/presets/aura/textarea/index.js
Normal file
38
resources/css/presets/aura/textarea/index.js
Normal file
@ -0,0 +1,38 @@
|
||||
export default {
|
||||
root: ({ context, props }) => ({
|
||||
class: [
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-1.5 px-3',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'appearance-none',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-offset-0',
|
||||
'shadow-sm',
|
||||
{ ' ring-surface-300 dark:ring-surface-700': !props.invalid },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
{
|
||||
'outline-none focus:ring-primary-500 dark:focus:ring-primary-400': !context.disabled,
|
||||
'opacity-60 select-none pointer-events-none cursor-default': context.disabled
|
||||
},
|
||||
|
||||
// Misc
|
||||
'appearance-none',
|
||||
'transition-colors duration-200'
|
||||
]
|
||||
})
|
||||
};
|
||||
116
resources/css/presets/aura/tieredmenu/index.js
Normal file
116
resources/css/presets/aura/tieredmenu/index.js
Normal file
@ -0,0 +1,116 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Size
|
||||
'min-w-[12rem]',
|
||||
'p-1.5',
|
||||
|
||||
// Colors
|
||||
'bg-surface-0 dark:bg-surface-700',
|
||||
'ring-1 ring-surface-200 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
menu: {
|
||||
class: [
|
||||
// Spacings and Shape
|
||||
'list-none',
|
||||
'm-0',
|
||||
'p-0',
|
||||
'outline-none'
|
||||
]
|
||||
},
|
||||
menuitem: {
|
||||
class: ['relative first:mt-0 mt-1']
|
||||
},
|
||||
content: ({ context }) => ({
|
||||
class: [
|
||||
//Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-surface-500 dark:text-white/70': !context.focused && !context.active,
|
||||
'text-surface-500 dark:text-white/70 bg-surface-200 dark:bg-black/70': context.focused && !context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': context.focused && context.active,
|
||||
'text-surface-900 dark:text-surface-0/80 bg-surface-50 dark:bg-black/70': !context.focused && context.active
|
||||
},
|
||||
|
||||
// Hover States
|
||||
{
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-800': !context.active,
|
||||
'hover:bg-surface-100 dark:hover:bg-black/40 text-surface-900 dark:text-surface-0/80': context.active
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-shadow',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
action: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-semibold',
|
||||
|
||||
// Flexbox
|
||||
'flex',
|
||||
'items-center',
|
||||
|
||||
// Spacing
|
||||
'py-2',
|
||||
'px-3',
|
||||
|
||||
// Misc
|
||||
'no-underline',
|
||||
'overflow-hidden',
|
||||
'cursor-pointer',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Spacing
|
||||
'mr-2',
|
||||
'leading-6',
|
||||
'text-sm'
|
||||
]
|
||||
},
|
||||
label: {
|
||||
class: ['leading-none', 'text-sm']
|
||||
},
|
||||
submenuicon: {
|
||||
class: [
|
||||
// Position
|
||||
'ml-auto'
|
||||
]
|
||||
},
|
||||
submenu: {
|
||||
class: [
|
||||
// Size
|
||||
'w-full sm:w-48',
|
||||
|
||||
// Spacing
|
||||
'p-1.5',
|
||||
'm-0 mx-1.5',
|
||||
'list-none',
|
||||
|
||||
// Shape
|
||||
'shadow-none sm:shadow-md',
|
||||
'border-0',
|
||||
|
||||
// Position
|
||||
'static sm:absolute',
|
||||
'z-10',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-700'
|
||||
]
|
||||
},
|
||||
separator: {
|
||||
class: 'border-t border-surface-200 dark:border-surface-600 my-1'
|
||||
}
|
||||
};
|
||||
81
resources/css/presets/aura/timeline/index.js
Normal file
81
resources/css/presets/aura/timeline/index.js
Normal file
@ -0,0 +1,81 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'flex grow',
|
||||
{
|
||||
'flex-col': props.layout === 'vertical',
|
||||
'flex-row flex-1': props.layout === 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
event: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex relative min-h-[70px]',
|
||||
{
|
||||
'flex-row-reverse': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1),
|
||||
'flex-col flex-1': props.layout === 'horizontal',
|
||||
'flex-col-reverse ': props.align === 'bottom' || (props.layout === 'horizontal' && props.align === 'alternate' && context.index % 2 === 1)
|
||||
}
|
||||
]
|
||||
}),
|
||||
opposite: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
{
|
||||
'px-4': props.layout === 'vertical',
|
||||
'py-4': props.layout === 'horizontal'
|
||||
},
|
||||
{
|
||||
'text-right': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
|
||||
'text-left': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
|
||||
}
|
||||
]
|
||||
}),
|
||||
separator: ({ props }) => ({
|
||||
class: [
|
||||
'flex items-center flex-initial',
|
||||
{
|
||||
'flex-col': props.layout === 'vertical',
|
||||
'flex-row': props.layout === 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
marker: {
|
||||
class: [
|
||||
// Display & Flexbox
|
||||
'flex self-baseline',
|
||||
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Appearance
|
||||
'rounded-full border-2 border-primary-500 bg-surface-0 dark:border-primary-300 dark:bg-surface-900/40'
|
||||
]
|
||||
},
|
||||
connector: ({ props }) => ({
|
||||
class: [
|
||||
'grow bg-surface-300 dark:bg-surface-700',
|
||||
{
|
||||
'w-[2px]': props.layout === 'vertical',
|
||||
'w-full h-[2px]': props.layout === 'horizontal'
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: ({ props, context }) => ({
|
||||
class: [
|
||||
'flex-1',
|
||||
{
|
||||
'px-4': props.layout === 'vertical',
|
||||
'py-4': props.layout === 'horizontal'
|
||||
},
|
||||
{
|
||||
'text-left': props.align === 'left' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 0),
|
||||
'text-right': props.align === 'right' || (props.layout === 'vertical' && props.align === 'alternate' && context.index % 2 === 1)
|
||||
},
|
||||
{
|
||||
'min-h-0': props.layout === 'vertical' && context.index === context.count,
|
||||
'grow-0': props.layout === 'horizontal' && context.index === context.count
|
||||
}
|
||||
]
|
||||
})
|
||||
};
|
||||
105
resources/css/presets/aura/toast/index.js
Normal file
105
resources/css/presets/aura/toast/index.js
Normal file
@ -0,0 +1,105 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
//Size and Shape
|
||||
'w-96 rounded-md',
|
||||
|
||||
// Positioning
|
||||
{ '-translate-x-2/4': props.position == 'top-center' || props.position == 'bottom-center' }
|
||||
]
|
||||
}),
|
||||
container: ({ props }) => ({
|
||||
class: [
|
||||
'my-4 rounded-md w-full',
|
||||
|
||||
'shadow-lg',
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'ring-1 ring-inset ring-surface-200 dark:ring-surface-700 ring-offset-0',
|
||||
// Colors
|
||||
{
|
||||
'text-blue-500 dark:text-blue-300': props.message.severity == 'info',
|
||||
'text-green-500 dark:text-green-300': props.message.severity == 'success',
|
||||
'text-orange-500 dark:text-orange-300': props.message.severity == 'warn',
|
||||
'text-red-500 dark:text-red-300': props.message.severity == 'error'
|
||||
}
|
||||
]
|
||||
}),
|
||||
content: ({ props }) => ({
|
||||
class: [
|
||||
'flex p-4',
|
||||
{
|
||||
'items-start': props.message.summary,
|
||||
'items-center': !props.message.summary,
|
||||
},
|
||||
],
|
||||
}),
|
||||
icon: {
|
||||
class: [
|
||||
// Sizing and Spacing
|
||||
'w-5 h-5',
|
||||
'mr-2 shrink-0'
|
||||
]
|
||||
},
|
||||
text: {
|
||||
class: [
|
||||
// Font and Text
|
||||
'text-sm leading-none',
|
||||
'ml-2',
|
||||
'flex-1'
|
||||
]
|
||||
},
|
||||
summary: {
|
||||
class: 'font-medium block'
|
||||
},
|
||||
detail: ({ props }) => ({
|
||||
class: [
|
||||
'block',
|
||||
'text-surface-600 dark:text-surface-0/70',
|
||||
{ 'mt-1.5': props.message.summary },
|
||||
],
|
||||
}),
|
||||
closebutton: {
|
||||
class: [
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-6 h-6',
|
||||
|
||||
// Spacing and Misc
|
||||
'ml-auto relative',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Colors
|
||||
'bg-transparent',
|
||||
'text-surface-700 dark:text-surface-0/80',
|
||||
|
||||
// Transitions
|
||||
'transition duration-200 ease-in-out',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-700',
|
||||
'outline-none focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden'
|
||||
]
|
||||
},
|
||||
closeicon: {
|
||||
class: [
|
||||
// Sizing and Spacing
|
||||
'w-3 h-3',
|
||||
'shrink-0'
|
||||
]
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 translate-y-2/4',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-300',
|
||||
leaveFromClass: 'max-h-[1000px]',
|
||||
leaveActiveClass: '!transition-[max-height_.45s_cubic-bezier(0,1,0,1),opacity_.3s,margin-bottom_.3s] overflow-hidden',
|
||||
leaveToClass: 'max-h-0 opacity-0 mb-0'
|
||||
}
|
||||
};
|
||||
86
resources/css/presets/aura/togglebutton/index.js
Normal file
86
resources/css/presets/aura/togglebutton/index.js
Normal file
@ -0,0 +1,86 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: ({ props }) => ({
|
||||
class: [
|
||||
// Alignments
|
||||
'items-center inline-flex flex-1 text-center align-bottom justify-center',
|
||||
|
||||
// Sizes & Spacing
|
||||
'px-2.5 py-1.5',
|
||||
'text-sm',
|
||||
|
||||
// Shapes
|
||||
'rounded-md shadow-sm',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'ring-1',
|
||||
{ 'ring-surface-200 dark:ring-surface-700': !props.invalid },
|
||||
{
|
||||
'bg-surface-0 dark:bg-surface-900 ': !props.modelValue,
|
||||
'bg-surface-100 dark:bg-surface-700': props.modelValue
|
||||
},
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
'peer-hover:bg-surface-200 dark:peer-hover:bg-surface-600/80',
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-inset peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all duration-200',
|
||||
|
||||
// Misc
|
||||
{ 'cursor-pointer': !props.disabled, 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
|
||||
]
|
||||
}),
|
||||
label: {
|
||||
class: 'font-semibold text-center w-full'
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border border-surface-200 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none',
|
||||
'cursor-pointer'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [' mr-2', 'text-surface-700 dark:text-white/80']
|
||||
}
|
||||
};
|
||||
30
resources/css/presets/aura/toolbar/index.js
Normal file
30
resources/css/presets/aura/toolbar/index.js
Normal file
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'flex items-center justify-between flex-wrap',
|
||||
'gap-6',
|
||||
|
||||
// Spacing
|
||||
'px-6 py-2',
|
||||
'min-h-[4rem]',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-surface-100 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
start: {
|
||||
class: 'flex items-center'
|
||||
},
|
||||
center: {
|
||||
class: 'flex items-center'
|
||||
},
|
||||
end: {
|
||||
class: 'flex items-center'
|
||||
}
|
||||
};
|
||||
37
resources/css/presets/aura/tooltip/index.js
Normal file
37
resources/css/presets/aura/tooltip/index.js
Normal file
@ -0,0 +1,37 @@
|
||||
export default {
|
||||
root: ({ context, props }) => ({
|
||||
class: [
|
||||
// Position
|
||||
'absolute',
|
||||
// Spacing
|
||||
{
|
||||
'px-1.5': context?.right || context?.left || (!context?.right && !context?.left && !context?.top && !context?.bottom),
|
||||
'py-1.5': context?.top || context?.bottom
|
||||
}
|
||||
]
|
||||
}),
|
||||
arrow: {
|
||||
class: 'hidden'
|
||||
},
|
||||
text: {
|
||||
class: [
|
||||
// Size
|
||||
'text-xs leading-none',
|
||||
|
||||
// Spacing
|
||||
'p-2',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'text-surface-900 dark:text-surface-0/80',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-surface-200 dark:ring-surface-800 ring-offset-0',
|
||||
|
||||
// Misc
|
||||
'whitespace-pre-line',
|
||||
'break-words'
|
||||
]
|
||||
}
|
||||
};
|
||||
280
resources/css/presets/aura/tree/index.js
Normal file
280
resources/css/presets/aura/tree/index.js
Normal file
@ -0,0 +1,280 @@
|
||||
export default {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Space
|
||||
'p-1.5',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-700 dark:text-white/80',
|
||||
'ring-1 ring-surface-200 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: ['overflow-auto']
|
||||
},
|
||||
container: {
|
||||
class: [
|
||||
// Spacing
|
||||
'm-0 p-0',
|
||||
|
||||
// Misc
|
||||
'list-none overflow-auto'
|
||||
]
|
||||
},
|
||||
node: {
|
||||
class: ['p-[2px]', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400']
|
||||
},
|
||||
content: ({ context, props }) => ({
|
||||
class: [
|
||||
// Flex and Alignment
|
||||
'flex items-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
'p-2',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-surface-0',
|
||||
{ 'bg-surface-100 text-primary-500 dark:bg-surface-300/10 dark:text-primary-400': context.selected },
|
||||
|
||||
// States
|
||||
{ 'hover:bg-surface-200 dark:hover:bg-surface-400/10': props.selectionMode == 'single' || props.selectionMode == 'multiple' },
|
||||
|
||||
// Transition
|
||||
'transition-shadow duration-200',
|
||||
|
||||
{ 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
|
||||
]
|
||||
}),
|
||||
toggler: ({ context }) => ({
|
||||
class: [
|
||||
// Flex and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-0 rounded-full',
|
||||
|
||||
// Size and Spacing
|
||||
'mr-2',
|
||||
'w-6 h-6',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Colors
|
||||
'text-surface-500',
|
||||
'bg-transparent',
|
||||
{
|
||||
invisible: context.leaf
|
||||
},
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer select-none'
|
||||
]
|
||||
}),
|
||||
togglericon: {
|
||||
class: [
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/70'
|
||||
]
|
||||
},
|
||||
nodeCheckbox: ({ props, context, instance }) => ({
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: {
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
|
||||
},
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-white dark:text-surface-900': !instance.partialChecked,
|
||||
'text-gray dark:text-white': instance.partialChecked
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
}),
|
||||
nodeicon: {
|
||||
class: [
|
||||
// Space
|
||||
'mr-2',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:text-white/70'
|
||||
]
|
||||
},
|
||||
subgroup: {
|
||||
class: ['m-0 list-none p-0 pl-2 mt-1']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: [
|
||||
'relative block',
|
||||
|
||||
// Space
|
||||
'mb-2',
|
||||
|
||||
// Size
|
||||
'w-full'
|
||||
]
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-1.5 px-3 pr-10',
|
||||
|
||||
// Size
|
||||
'w-full',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700 ring-offset-0',
|
||||
|
||||
// States
|
||||
'hover:border-primary-500 dark:hover:border-primary-400',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Transition & Misc
|
||||
'appearance-none',
|
||||
'transition-colors duration-200'
|
||||
]
|
||||
},
|
||||
loadingicon: {
|
||||
class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
|
||||
},
|
||||
searchicon: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-1/2 -mt-2 right-3',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:hover:text-white/70'
|
||||
]
|
||||
}
|
||||
};
|
||||
374
resources/css/presets/aura/treeselect/index.js
Normal file
374
resources/css/presets/aura/treeselect/index.js
Normal file
@ -0,0 +1,374 @@
|
||||
export default {
|
||||
root: ({ props, state }) => ({
|
||||
class: [
|
||||
// Display and Position
|
||||
'inline-flex',
|
||||
'relative',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
'shadow-sm',
|
||||
|
||||
// Color and Background
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
|
||||
// States
|
||||
{ 'ring-1 ring-inset': !state.focused, 'ring-2 ring-inset ring-primary-500 dark:ring-primary-400': state.focused },
|
||||
|
||||
{ 'ring-surface-300 dark:ring-surface-600': !props.invalid && !state.focused },
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-red-500 dark:ring-red-400': props.invalid && !state.focused },
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none',
|
||||
{ 'opacity-60': props.disabled, 'pointer-events-none': props.disabled }
|
||||
]
|
||||
}),
|
||||
labelContainer: {
|
||||
class: ['overflow-hidden flex flex-auto cursor-pointer']
|
||||
},
|
||||
label: {
|
||||
class: [
|
||||
'block leading-5',
|
||||
|
||||
// Space
|
||||
'py-1.5 px-3',
|
||||
|
||||
// Color
|
||||
'text-surface-800 dark:text-white/80',
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis'
|
||||
]
|
||||
},
|
||||
trigger: {
|
||||
class: [
|
||||
//Font
|
||||
'sm:text-sm',
|
||||
|
||||
// Flexbox
|
||||
'flex items-center justify-center',
|
||||
'shrink-0',
|
||||
|
||||
// Color and Background
|
||||
'bg-transparent',
|
||||
'text-surface-500',
|
||||
|
||||
// Size
|
||||
'w-12',
|
||||
|
||||
// Shape
|
||||
'rounded-tr-md',
|
||||
'rounded-br-md'
|
||||
]
|
||||
},
|
||||
panel: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-0 left-0',
|
||||
'mt-2',
|
||||
|
||||
// Shape
|
||||
'border-0',
|
||||
'rounded-md',
|
||||
'shadow-md',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'text-surface-800 dark:text-white/80',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: [
|
||||
// Sizing
|
||||
'max-h-[200px]',
|
||||
|
||||
// Misc
|
||||
'overflow-auto'
|
||||
]
|
||||
},
|
||||
tree: {
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Space
|
||||
'p-1.5'
|
||||
]
|
||||
},
|
||||
wrapper: {
|
||||
class: ['overflow-auto']
|
||||
},
|
||||
container: {
|
||||
class: [
|
||||
// Spacing
|
||||
'm-0 p-0',
|
||||
|
||||
// Misc
|
||||
'list-none overflow-auto'
|
||||
]
|
||||
},
|
||||
node: {
|
||||
class: ['p-[2px]', 'rounded-md', 'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400']
|
||||
},
|
||||
content: ({ context, props }) => ({
|
||||
class: [
|
||||
// Flex and Alignment
|
||||
'flex items-center',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Spacing
|
||||
'p-2',
|
||||
|
||||
// Colors
|
||||
'text-surface-700 dark:text-surface-0',
|
||||
{ 'bg-surface-100 text-primary-500 dark:bg-surface-300/10 dark:text-primary-400': context.selected },
|
||||
|
||||
// States
|
||||
{ 'hover:bg-surface-200 dark:hover:bg-surface-400/10': props.selectionMode == 'single' || props.selectionMode == 'multiple' },
|
||||
|
||||
// Transition
|
||||
'transition-shadow duration-200',
|
||||
|
||||
{ 'cursor-pointer select-none': props.selectionMode == 'single' || props.selectionMode == 'multiple' }
|
||||
]
|
||||
}),
|
||||
toggler: ({ context }) => ({
|
||||
class: [
|
||||
// Flex and Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
|
||||
// Shape
|
||||
'border-0 rounded-full',
|
||||
|
||||
// Size and Spacing
|
||||
'mr-2',
|
||||
'w-6 h-6',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Colors
|
||||
'text-surface-500',
|
||||
'bg-transparent',
|
||||
{
|
||||
invisible: context.leaf
|
||||
},
|
||||
|
||||
// States
|
||||
'hover:text-surface-700 dark:hover:text-white/80',
|
||||
'hover:bg-surface-100 dark:hover:bg-surface-800/80',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-1 focus:ring-inset',
|
||||
'focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'cursor-pointer select-none'
|
||||
]
|
||||
}),
|
||||
togglericon: {
|
||||
class: [
|
||||
// Size
|
||||
'w-4 h-4',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/70'
|
||||
]
|
||||
},
|
||||
nodeCheckbox: ({ props, context, instance }) => ({
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-bottom',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: {
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
|
||||
},
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-white dark:text-surface-900': !instance.partialChecked,
|
||||
'text-gray dark:text-white': instance.partialChecked
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
}),
|
||||
nodeicon: {
|
||||
class: [
|
||||
// Space
|
||||
'mr-2',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:text-white/70'
|
||||
]
|
||||
},
|
||||
subgroup: {
|
||||
class: ['m-0 list-none p-0 pl-2 mt-1']
|
||||
},
|
||||
filtercontainer: {
|
||||
class: [
|
||||
'relative block',
|
||||
|
||||
// Space
|
||||
'mb-2',
|
||||
|
||||
// Size
|
||||
'w-full'
|
||||
]
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Font
|
||||
'font-sans leading-6',
|
||||
'sm:text-sm',
|
||||
|
||||
// Spacing
|
||||
'm-0',
|
||||
'py-1.5 px-3 pr-10',
|
||||
|
||||
// Size
|
||||
'w-full',
|
||||
|
||||
// Shape
|
||||
'rounded-md',
|
||||
|
||||
// Colors
|
||||
'text-surface-900 dark:text-surface-0',
|
||||
'placeholder:text-surface-400 dark:placeholder:text-surface-500',
|
||||
'bg-surface-0 dark:bg-surface-900',
|
||||
'ring-1 ring-inset ring-surface-300 dark:ring-surface-700 ring-offset-0',
|
||||
|
||||
// States
|
||||
'hover:border-primary-500 dark:hover:border-primary-400',
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-inset focus:ring-primary-500 dark:focus:ring-primary-400',
|
||||
|
||||
// Transition & Misc
|
||||
'appearance-none',
|
||||
'transition-colors duration-200'
|
||||
]
|
||||
},
|
||||
loadingicon: {
|
||||
class: ['text-surface-500 dark:text-surface-0/70', 'absolute top-[50%] right-[50%] -mt-2 -mr-2 animate-spin']
|
||||
},
|
||||
searchicon: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute top-1/2 -mt-2 right-3',
|
||||
|
||||
// Color
|
||||
'text-surface-600 dark:hover:text-white/70'
|
||||
]
|
||||
}
|
||||
},
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
};
|
||||
445
resources/css/presets/aura/treetable/index.js
Normal file
445
resources/css/presets/aura/treetable/index.js
Normal file
@ -0,0 +1,445 @@
|
||||
export default {
|
||||
root: ({ props }) => ({
|
||||
class: [
|
||||
'relative',
|
||||
{
|
||||
'flex flex-col h-full': props.scrollHeight === 'flex'
|
||||
},
|
||||
|
||||
// Shape
|
||||
'border-spacing-0 border-separate'
|
||||
]
|
||||
}),
|
||||
loadingoverlay: {
|
||||
class: [
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-20',
|
||||
|
||||
// Flex & Alignment
|
||||
'flex items-center justify-center',
|
||||
|
||||
// Size
|
||||
'w-full h-full',
|
||||
|
||||
// Color
|
||||
'bg-surface-100/40 dark:bg-surface-800/40',
|
||||
|
||||
// Transition
|
||||
'transition duration-200'
|
||||
]
|
||||
},
|
||||
loadingicon: {
|
||||
class: 'w-8 h-8 animate-spin'
|
||||
},
|
||||
wrapper: ({ props }) => ({
|
||||
class: [
|
||||
// Overflow
|
||||
{
|
||||
'relative overflow-auto': props.scrollable,
|
||||
'overflow-x-auto': props.resizableColumns
|
||||
}
|
||||
]
|
||||
}),
|
||||
header: ({ props }) => ({
|
||||
class: [
|
||||
'font-semibold',
|
||||
|
||||
// Shape
|
||||
props.showGridlines ? 'border-b' : 'border-b border-x-0',
|
||||
|
||||
// Spacing
|
||||
'py-3.5 px-3',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-300 dark:border-surface-600',
|
||||
'text-surface-700 dark:text-white/80'
|
||||
]
|
||||
}),
|
||||
footer: {
|
||||
class: [
|
||||
'font-semibold',
|
||||
|
||||
// Shape
|
||||
'border-t-0 border-t border-x-0',
|
||||
|
||||
// Spacing
|
||||
'p-4',
|
||||
|
||||
// Color
|
||||
'bg-surface-0 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700',
|
||||
'text-surface-700 dark:text-white/80'
|
||||
]
|
||||
},
|
||||
table: {
|
||||
class: [
|
||||
// Table & Width
|
||||
'border-collapse table-fixed w-full '
|
||||
]
|
||||
},
|
||||
thead: ({ props }) => ({
|
||||
class: [
|
||||
// Position & Z-index
|
||||
{
|
||||
'top-0 z-40 sticky': props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
tbody: ({ props }) => ({
|
||||
class: [
|
||||
{
|
||||
block: props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
tfoot: ({ props }) => ({
|
||||
class: [
|
||||
// Block Display
|
||||
{
|
||||
block: props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
headerrow: ({ props }) => ({
|
||||
class: [
|
||||
// Flexbox & Width
|
||||
{
|
||||
'flex flex-nowrap w-full': props.scrollable
|
||||
}
|
||||
]
|
||||
}),
|
||||
row: ({ context, props }) => ({
|
||||
class: [
|
||||
// Flex
|
||||
{ 'flex flex-nowrap w-full': context.scrollable },
|
||||
|
||||
// Color
|
||||
'dark:text-white/80',
|
||||
{ 'bg-surface-50 dark:bg-surface-500/30': context.selected },
|
||||
{ 'bg-surface-0 text-surface-600 dark:bg-surface-800': !context.selected },
|
||||
|
||||
// Hover & Flexbox
|
||||
{
|
||||
'hover:bg-surface-300/20 hover:text-surface-600': context.selectable && !context.selected
|
||||
},
|
||||
'focus:outline-none focus:outline-offset-0 focus:ring-2 focus:ring-primary-500 ring-inset dark:focus:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
{ 'transition duration-200': (props.selectionMode && !context.selected) || props.rowHover }
|
||||
]
|
||||
}),
|
||||
headercell: ({ context, props }) => ({
|
||||
class: [
|
||||
'font-semibold',
|
||||
'text-sm',
|
||||
|
||||
// Position
|
||||
{ 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
|
||||
|
||||
// Flex & Alignment
|
||||
{
|
||||
'flex flex-1 items-center': context.scrollable,
|
||||
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
|
||||
},
|
||||
'text-left',
|
||||
|
||||
// Shape
|
||||
{ 'border-r last:border-r-0': context?.showGridlines },
|
||||
'border-0 border-b border-solid',
|
||||
|
||||
// Spacing
|
||||
context?.size === 'small' ? 'py-2.5 px-2' : context?.size === 'large' ? 'py-5 px-4' : 'py-3.5 px-3',
|
||||
|
||||
// Color
|
||||
(props.sortable === '' || props.sortable) && context.sorted ? 'text-primary-500' : 'bg-surface-0 text-surface-700',
|
||||
(props.sortable === '' || props.sortable) && context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700 ',
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
{ 'transition duration-200': props.sortable === '' || props.sortable },
|
||||
|
||||
// Misc
|
||||
{
|
||||
'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
|
||||
}
|
||||
]
|
||||
}),
|
||||
column: {
|
||||
headercell: ({ context, props }) => ({
|
||||
class: [
|
||||
'font-semibold',
|
||||
'text-sm',
|
||||
|
||||
// Position
|
||||
{ 'sticky z-40': context.scrollable && context.scrollDirection === 'both' && context.frozen },
|
||||
|
||||
// Flex & Alignment
|
||||
{
|
||||
'flex flex-1 items-center': context.scrollable,
|
||||
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
|
||||
},
|
||||
'text-left',
|
||||
|
||||
// Shape
|
||||
{ 'border-r last:border-r-0': context?.showGridlines },
|
||||
'border-0 border-b border-solid',
|
||||
|
||||
// Spacing
|
||||
context?.size === 'small' ? 'py-2.5 px-2' : context?.size === 'large' ? 'py-5 px-4' : 'py-3.5 px-3',
|
||||
|
||||
// Color
|
||||
(props.sortable === '' || props.sortable) && context.sorted ? 'text-primary-500' : 'bg-surface-0 text-surface-700',
|
||||
(props.sortable === '' || props.sortable) && context.sorted ? 'dark:text-primary-400' : 'dark:text-white/80 dark:bg-surface-800',
|
||||
'border-surface-200 dark:border-surface-700 ',
|
||||
|
||||
// States
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
{ 'transition duration-200': props.sortable === '' || props.sortable },
|
||||
|
||||
// Misc
|
||||
{
|
||||
'overflow-hidden relative bg-clip-padding': context.resizable && !context.frozen
|
||||
}
|
||||
]
|
||||
}),
|
||||
bodycell: ({ context }) => ({
|
||||
class: [
|
||||
// Position
|
||||
{
|
||||
sticky: context.scrollable && context.scrollDirection === 'both' && context.frozen
|
||||
},
|
||||
|
||||
// Font
|
||||
'text-sm',
|
||||
|
||||
// Flex & Alignment
|
||||
{
|
||||
'flex flex-1 items-center': context.scrollable,
|
||||
'flex-initial shrink-0': context.scrollable && context.scrollDirection === 'both' && !context.frozen
|
||||
},
|
||||
'text-left',
|
||||
|
||||
// Shape
|
||||
'border-0 border-b border-solid',
|
||||
{ 'last:border-r-0 border-r border-b': context?.showGridlines },
|
||||
|
||||
// Color
|
||||
'border-surface-200 dark:border-surface-700',
|
||||
{ 'bg-surface-0 dark:bg-surface-800': !context.selected },
|
||||
|
||||
// Spacing
|
||||
context?.size === 'small' ? 'py-2.5 px-2' : context?.size === 'large' ? 'py-5 px-4' : 'py-3.5 px-3',
|
||||
|
||||
// Misc
|
||||
'space-nowrap',
|
||||
{
|
||||
'cursor-pointer': context.selectable
|
||||
}
|
||||
]
|
||||
}),
|
||||
rowtoggler: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center',
|
||||
'text-left align-middle',
|
||||
|
||||
// Spacing
|
||||
'm-0 mr-2 p-0',
|
||||
|
||||
// Size
|
||||
'w-8 h-8',
|
||||
|
||||
// Shape
|
||||
'border-0 rounded-full',
|
||||
|
||||
// Color
|
||||
'text-surface-500 dark:text-white/70',
|
||||
'bg-transparent',
|
||||
|
||||
// States
|
||||
'hover:bg-surface-50 dark:hover:bg-surface-700',
|
||||
'focus-visible:outline-none focus-visible:outline-offset-0',
|
||||
'focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400',
|
||||
|
||||
// Transition
|
||||
'transition duration-200',
|
||||
|
||||
// Misc
|
||||
'overflow-hidden',
|
||||
'cursor-pointer select-none'
|
||||
]
|
||||
},
|
||||
sorticon: ({ context }) => ({
|
||||
class: ['ml-2 inline-block', context.sorted ? 'fill-primary-700 dark:fill-white/80' : 'fill-surface-700 dark:fill-white/70']
|
||||
}),
|
||||
sortbadge: {
|
||||
class: [
|
||||
// Flex & Alignment
|
||||
'inline-flex items-center justify-center align-middle',
|
||||
|
||||
// Shape
|
||||
'rounded-full',
|
||||
|
||||
// Size
|
||||
'w-[1.143rem] leading-[1.143rem]',
|
||||
|
||||
// Spacing
|
||||
'ml-2',
|
||||
|
||||
// Color
|
||||
'text-primary-700 dark:text-white',
|
||||
'bg-primary-50 dark:bg-primary-400/30'
|
||||
]
|
||||
},
|
||||
columnresizer: {
|
||||
class: [
|
||||
'block',
|
||||
|
||||
// Position
|
||||
'absolute top-0 right-0',
|
||||
|
||||
// Sizing
|
||||
'w-2 h-full',
|
||||
|
||||
// Spacing
|
||||
'm-0 p-0',
|
||||
|
||||
// Color
|
||||
'border border-transparent',
|
||||
|
||||
// Misc
|
||||
'cursor-col-resize'
|
||||
]
|
||||
},
|
||||
rowCheckbox: ({ props, context, instance }) => ({
|
||||
root: {
|
||||
class: [
|
||||
'relative',
|
||||
|
||||
// Alignment
|
||||
'inline-flex',
|
||||
'align-middle',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Spacing
|
||||
'mr-2',
|
||||
|
||||
// Misc
|
||||
'cursor-default',
|
||||
'select-none'
|
||||
]
|
||||
},
|
||||
box: {
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.checked,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.checked
|
||||
},
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
},
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
icon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
{
|
||||
'text-white dark:text-surface-900': !instance.partialChecked,
|
||||
'text-gray dark:text-white': instance.partialChecked
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
}),
|
||||
transition: {
|
||||
enterFromClass: 'opacity-0 scale-y-[0.8]',
|
||||
enterActiveClass: 'transition-[transform,opacity] duration-[120ms] ease-[cubic-bezier(0,0,0.2,1)]',
|
||||
leaveActiveClass: 'transition-opacity duration-100 ease-linear',
|
||||
leaveToClass: 'opacity-0'
|
||||
}
|
||||
},
|
||||
resizehelper: {
|
||||
class: 'absolute hidden w-[2px] z-20 bg-primary-500 dark:bg-primary-400'
|
||||
}
|
||||
};
|
||||
111
resources/css/presets/aura/tristatecheckbox/index.js
Normal file
111
resources/css/presets/aura/tristatecheckbox/index.js
Normal file
@ -0,0 +1,111 @@
|
||||
export default {
|
||||
root: {
|
||||
class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-4 h-4']
|
||||
},
|
||||
box: ({ props, context }) => ({
|
||||
class: [
|
||||
// Alignment
|
||||
'flex',
|
||||
'items-center',
|
||||
'justify-center',
|
||||
|
||||
// Size
|
||||
'w-4',
|
||||
'h-4',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Colors
|
||||
'text-surface-600',
|
||||
{
|
||||
'border-surface-300 bg-surface-0 dark:border-surface-700 dark:bg-surface-900': !context.active && !props.invalid,
|
||||
'border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400': context.active
|
||||
},
|
||||
|
||||
{
|
||||
'ring-2 ring-primary-500 dark:ring-primary-400': !props.disabled && context.focused,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Invalid State
|
||||
{ 'ring-1 ring-red-500 dark:ring-red-400': props.invalid },
|
||||
|
||||
// States
|
||||
{
|
||||
'peer-focus-visible:ring-2 peer-focus-visible:ring-primary-500 dark:peer-focus-visible:ring-primary-400': !props.disabled,
|
||||
'cursor-default opacity-60': props.disabled
|
||||
},
|
||||
|
||||
// Transitions
|
||||
'transition-colors',
|
||||
'duration-200'
|
||||
]
|
||||
}),
|
||||
input: {
|
||||
class: [
|
||||
'peer',
|
||||
|
||||
// Size
|
||||
'w-full ',
|
||||
'h-full',
|
||||
|
||||
// Position
|
||||
'absolute',
|
||||
'top-0 left-0',
|
||||
'z-10',
|
||||
|
||||
// Spacing
|
||||
'p-0',
|
||||
'm-0',
|
||||
|
||||
// Shape
|
||||
'rounded',
|
||||
'border',
|
||||
|
||||
// Shape
|
||||
'opacity-0',
|
||||
'rounded-md',
|
||||
'outline-none',
|
||||
'border-2 border-surface-300 dark:border-surface-700',
|
||||
|
||||
// Misc
|
||||
'appearance-none'
|
||||
]
|
||||
},
|
||||
checkicon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
'text-white dark:text-surface-900',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
},
|
||||
uncheckicon: {
|
||||
class: [
|
||||
// Font
|
||||
'text-normal',
|
||||
|
||||
// Size
|
||||
'w-3',
|
||||
'h-3',
|
||||
|
||||
// Colors
|
||||
'text-white dark:text-surface-900',
|
||||
|
||||
// Transitions
|
||||
'transition-all',
|
||||
'duration-200'
|
||||
]
|
||||
}
|
||||
};
|
||||
Reference in New Issue
Block a user