@hperchec/scorpion-ui-template-default
Version:
Scorpion UI - Default template
101 lines (99 loc) • 2.12 kB
JavaScript
// Vue-tailwind component
import { TModal } from 'vue-tailwind/dist/components'
export default {
component: TModal,
props: {
fixedClasses: {
overlay: '', // No classes for overlay -> see Modal component
wrapper: `
relative
mx-auto
max-w-lg
px-3 py-12
`,
modal: `
relative
rounded
overflow-visible
`,
body: `
p-6
`,
header: `
p-6
border-b
rounded-t
`,
footer: '',
close: `
flex items-center justify-center
absolute
right-0
top-0
h-8 w-8
-m-3
rounded-full
transition duration-100 ease-in-out
focus:ring-2
focus:ring-blue-500
focus:outline-none
focus:ring-opacity-50
`
},
classes: {
overlay: `
bg-black
`,
wrapper: '',
modal: `
@light:bg-@light-alabaster
@light:text-@light-text-primary
@dark:bg-@dark-tuna
@dark:text-@dark-text-primary
shadow
`,
header: `
border-gray-100
`,
footer: `
pb-6 px-6
rounded-b
`,
close: `
@light:bg-@light-white-smoke
@light:hover:bg-@light-white-smoke-400
@dark:bg-@dark-dark-jungle
@dark:hover:bg-@dark-dark-jungle-400
`,
closeIcon: `
h-4 w-4
fill-current
`,
overlayEnterClass: `
opacity-0
`,
overlayEnterActiveClass: `
transition ease-out duration-100
`,
overlayEnterToClass: `
opacity-100
`,
overlayLeaveClass: `
opacity-100
`,
overlayLeaveActiveClass: `
transition ease-in duration-75
`,
overlayLeaveToClass: `
opacity-0
`,
enterClass: '',
enterActiveClass: '',
enterToClass: '',
leaveClass: '',
leaveActiveClass: '',
leaveToClass: ''
},
variants: {}
}
}