@hperchec/scorpion-ui-template-default
Version:
Scorpion UI - Default template
77 lines (75 loc) • 2.17 kB
JavaScript
// Vue-tailwind component
import { TInput } from 'vue-tailwind/dist/components'
export default {
component: TInput,
props: {
fixedClasses: `
w-full
mb-2
transition duration-200 ease-in-out
focus:outline-none
disabled:pointer-events-none
`,
classes: `
bg--tertiary text-white border-2 border-transparent px-3 py-2 rounded hover:border-primary focus:border-primary disabled:text-gray
`,
variants: {
// 'tuna' variant
tuna: `
border-2 border-transparent
px-3 py-2
rounded
disabled:text-gray
:bg--secondary
:text--text-primary
:hover:border--primary
:focus:border--primary
:bg--tuna
:text--text-primary
:hover:border--primary
:focus:border--primary
`,
// 'tuna-error' variant
'tuna-error': `
border-2
px-3 py-2
rounded
disabled:text-gray
:bg--secondary
:text--text-primary
:border--error
:bg--tuna
:text--text-primary
:border--error
`,
// 'tertiary' variant
tertiary: `
border-2 border-transparent
px-3 py-2
rounded
disabled:text-gray
:bg--tertiary
:text--text-primary
:hover:border--primary
:focus:border--primary
:bg--tertiary
:text--text-primary
:hover:border--primary
:focus:border--primary
`,
// 'tertiary' variant
'tertiary-error': `
border-2
px-3 py-2
rounded
disabled:text-gray
:bg--tertiary
:text--text-primary
:border--error
:bg--tertiary
:text--text-primary
:border--error
`
}
}
}