@hperchec/scorpion-ui-template-default/src/plugins/vue-tailwind/options/TDropdownButton.js

Scorpion UI - Default template

// Vue-tailwind component
import { TButton } from 'vue-tailwind/dist/components'

export default {
  component: TButton,
  props: {
    fixedClasses: `
      transition duration-100 ease-in-out
      active:shadow-inner
      border border-transparent
    `,
    classes: `
      w-full
    `,
    variants: {
      /**
       * Common variants
       */
      primary: `
        text-left
        px-4 py-1
        @light:text-white
        @light:bg-@light-primary
        @light:hover:bg-@light-primary-400
        @light:hover:text-white
        @dark:text-@dark-text-primary
        @dark:bg-@dark-primary
        @dark:hover:bg-@dark-primary-400
        @dark:hover:text-@dark-text-primary
      `,
      tertiary: `
        text-white
        bg-@light-tertiary
        hover:bg-@light-primary
      `,
      error: `
        text-white
        bg-error
        hover:bg-error-700
      `,
      success: `
        text-white
        bg-green-500
        hover:bg-green-600
      `,
      transparent: `
        bg-transparent
        hover:bg-transparent
      `,
      /**
       * 'light' theme variants
       */
      alabaster: `
        text-left
        px-4 py-1
        text-@light-text-primary
        bg-@light-alabaster
        hover:bg-@light-primary
        hover:text-white
      `,
      'white-smoke': `
        text-left
        px-4 py-1
        text-@light-text-primary
        bg-@light-white-smoke
        hover:bg-@light-primary
        hover:text-white
      `,
      /**
       * 'dark' theme variants
       */
      tuna: `
        text-left
        px-4 py-1
        text-@dark-text-primary
        bg-@dark-tuna
        hover:bg-@dark-primary
      `,
      'dark-jungle': `
        text-left
        px-4 py-1
        text-@dark-text-primary
        bg-@dark-dark-jungle
        hover:bg-@dark-primary
      `
    }
  }
}