|
@@ -5,7 +5,7 @@ import { omit } from 'radash'
|
|
|
interface ComponentProps {
|
|
|
block?: boolean
|
|
|
color?: string
|
|
|
- size?: 'lg'
|
|
|
+ size?: 'lg' | 'md' | 'sm'
|
|
|
}
|
|
|
const props = withDefaults(
|
|
|
defineProps<{ customClass?: string; skew?: boolean } & ComponentProps>(),
|
|
@@ -19,16 +19,19 @@ const buttonProps = computed(() => omit(props, ['color']))
|
|
|
const btnClass = computed(
|
|
|
() => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
|
|
|
)
|
|
|
-const height = computed(() => ({ lg: '2.75rem' })[props.size] || '2.75rem')
|
|
|
+const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] || '2.75rem')
|
|
|
</script>
|
|
|
<template>
|
|
|
<button
|
|
|
class="left-skew relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
|
|
|
- :class="`${btnClass}`"
|
|
|
+ :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''}`"
|
|
|
:style="{ '--color': color, '--evo-btn-height': height }"
|
|
|
:block="block"
|
|
|
>
|
|
|
- <div class="w-full h-full flex items-center justify-center relative z-1 c-white">
|
|
|
+ <div
|
|
|
+ class="w-full h-full flex items-center justify-center relative z-1 c-white"
|
|
|
+ :class="`${{ md: 'text-sm' }[size] || ''}`"
|
|
|
+ >
|
|
|
<slot></slot>
|
|
|
</div>
|
|
|
</button>
|