@hperchec/scorpion-ui-template-default
Version:
Scorpion UI - Default template
150 lines (148 loc) • 3.79 kB
JavaScript
// Vue-tailwind component
import { TButton } from 'vue-tailwind/dist/components'
export default {
component: TButton,
props: {
// Fixed
fixedClasses: `
transition duration-200 ease-in-out
focus:outline-none
disabled:pointer-events-none
`,
// Default
classes: `
text-white
bg--tertiary
border border-transparent
rounded-full
px-4 md:px-8 py-2
hover:bg--tertiary-400
hover:shadow
focus:shadow
disabled:text-gray-200
disabled:bg--tertiary-
`,
// Variants
variants: {
/**
* Common variants
*/
// 'tertiary' variant
tertiary: `
border border-transparent
px-8 py-2
rounded-full
hover:shadow
focus:shadow
disabled:text-gray-200
:bg--action
:text--text-primary
:hover:bg--action-400
:bg--tertiary
:text--text-primary
:hover:bg--tertiary-400
`,
// 'action' variant
action: `
border border-transparent
px-8 py-2
rounded-full
hover:shadow
focus:shadow
disabled:text-gray-400
:bg--action
:text-white
:hover:bg--action-400
:bg--action
:text-white
:hover:bg--action-400
`,
// 'action-litle' variant
'action-litle': `
text-sm
text-white
bg--action
border border-transparent
rounded-full
px-4 py-1
hover:bg--action-400
hover:shadow
focus:shadow
disabled:text-gray-200
disabled:bg--tertiary-
`,
// 'error' variant
error: `
text-white
:bg--error
:bg--error
border border-transparent
rounded-full
px-4 md:px-8 py-2
hover:bg--error-400
hover:shadow
focus:shadow
disabled:text-gray-200
disabled:bg--tertiary-
`,
/**
* 'light' theme variants
*/
// 'alabaster' variant
alabaster: `
border border-transparent
px-8 py-2
rounded-full
bg--alabaster
text--text-primary
disabled:text-gray-200
hover:shadow
hover:bg--alabaster-400
focus:shadow
focus:bg--alabaster-400
`,
// 'white-smoke' variant
'white-smoke': `
border border-transparent
px-8 py-2
rounded-full
bg--white-smoke
text--text-primary
disabled:text-gray-200
hover:shadow
hover:bg--white-smoke-400
focus:shadow
focus:bg--white-smoke-400
`,
/**
* 'dark' theme variants
*/
// 'tuna' variant
tuna: `
border border-transparent
px-8 py-2
rounded-full
bg--tuna
text--text-primary
disabled:text-gray-200
hover:shadow
hover:bg--tuna-400
focus:shadow
focus:bg--tuna-400
`,
// 'dark-jungle' variant
'dark-jungle': `
border border-transparent
px-8 py-2
rounded-full
bg--dark-jungle
text--text-primary
disabled:text-gray-200
hover:shadow
hover:bg--dark-jungle-400
focus:shadow
focus:bg--dark-jungle-400
`
}
}
}