|
|
|
@ -37,13 +37,8 @@ const sizeStyles = {
|
|
|
|
|
|
|
|
|
|
const textAnimationTW = ` |
|
|
|
|
relative |
|
|
|
|
after:( |
|
|
|
|
absolute h-0.5 w-0 bottom-0 duration-300 |
|
|
|
|
left-1/2 // starting point for the animation
|
|
|
|
|
) |
|
|
|
|
hover:( |
|
|
|
|
after:(w-full left-0) |
|
|
|
|
) |
|
|
|
|
after:(absolute h-0.5 w-0 bottom-0 duration-200 left-1/2) |
|
|
|
|
canhover:hover:after:(w-full left-0) |
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
const solidCommon = 'shadow-lg'; |
|
|
|
@ -54,12 +49,12 @@ const variantStyles = {
|
|
|
|
|
primary: { |
|
|
|
|
solid: { |
|
|
|
|
common: tw`text-white ${solidCommon}`, |
|
|
|
|
enabled: tw`bg-blue-400 hover:(bg-blue-500)`, |
|
|
|
|
enabled: [tw`bg-blue-400 canhover:hover:bg-blue-500`], |
|
|
|
|
disabled: tw`bg-blue-300`, |
|
|
|
|
}, |
|
|
|
|
border: { |
|
|
|
|
common: tw`${borderCommon}`, |
|
|
|
|
enabled: tw`text-blue-400 border-blue-400 hover:(text-white bg-blue-400)`, |
|
|
|
|
enabled: tw`text-blue-400 border-blue-400 canhover:hover:(text-white bg-blue-400)`, |
|
|
|
|
disabled: tw`text-blue-300 border-blue-400/40`, |
|
|
|
|
}, |
|
|
|
|
text: { |
|
|
|
@ -67,10 +62,7 @@ const variantStyles = {
|
|
|
|
|
enabled: [ |
|
|
|
|
tw`text-blue-400
|
|
|
|
|
${textAnimationTW} |
|
|
|
|
after:( |
|
|
|
|
background: bg-blue-400 |
|
|
|
|
) |
|
|
|
|
`,
|
|
|
|
|
after:(background: bg-blue-400)`,
|
|
|
|
|
], |
|
|
|
|
disabled: tw`text-blue-300 ${textCommon}`, |
|
|
|
|
}, |
|
|
|
@ -78,12 +70,12 @@ const variantStyles = {
|
|
|
|
|
secondary: { |
|
|
|
|
solid: { |
|
|
|
|
common: tw`text-white ${solidCommon}`, |
|
|
|
|
enabled: tw`bg-gray-400 hover:(bg-gray-500)`, |
|
|
|
|
enabled: tw`bg-gray-400 canhover:hover:bg-gray-500`, |
|
|
|
|
disabled: tw`bg-gray-300`, |
|
|
|
|
}, |
|
|
|
|
border: { |
|
|
|
|
common: tw`${borderCommon}`, |
|
|
|
|
enabled: tw`text-gray-400 border-gray-400 hover:(text-white bg-gray-400)`, |
|
|
|
|
enabled: tw`text-gray-400 border-gray-400 canhover:hover:(text-white bg-gray-400)`, |
|
|
|
|
disabled: tw`text-gray-300 border-gray-400/40`, |
|
|
|
|
}, |
|
|
|
|
text: { |
|
|
|
@ -91,10 +83,7 @@ const variantStyles = {
|
|
|
|
|
enabled: [ |
|
|
|
|
tw`text-gray-400
|
|
|
|
|
${textAnimationTW} |
|
|
|
|
after:( |
|
|
|
|
background: bg-gray-400 |
|
|
|
|
) |
|
|
|
|
`,
|
|
|
|
|
after:(background: bg-gray-400)`,
|
|
|
|
|
], |
|
|
|
|
disabled: tw`text-gray-300`, |
|
|
|
|
}, |
|
|
|
@ -102,12 +91,12 @@ const variantStyles = {
|
|
|
|
|
danger: { |
|
|
|
|
solid: { |
|
|
|
|
common: tw`text-white ${solidCommon}`, |
|
|
|
|
enabled: tw`bg-red-400 hover:(bg-red-500)`, |
|
|
|
|
enabled: tw`bg-red-400 canhover:hover:bg-red-500`, |
|
|
|
|
disabled: tw`bg-red-300`, |
|
|
|
|
}, |
|
|
|
|
border: { |
|
|
|
|
common: tw`${borderCommon}`, |
|
|
|
|
enabled: tw`text-red-400 border-red-400 hover:(text-white bg-red-400)`, |
|
|
|
|
enabled: tw`text-red-400 border-red-400 canhover:hover:(text-white bg-red-400)`, |
|
|
|
|
disabled: tw`text-red-300 border-red-400/40`, |
|
|
|
|
}, |
|
|
|
|
text: { |
|
|
|
@ -115,10 +104,7 @@ const variantStyles = {
|
|
|
|
|
enabled: [ |
|
|
|
|
tw`text-red-400
|
|
|
|
|
${textAnimationTW} |
|
|
|
|
after:( |
|
|
|
|
background: bg-red-400 |
|
|
|
|
) |
|
|
|
|
`,
|
|
|
|
|
after:(background: bg-red-400)`,
|
|
|
|
|
], |
|
|
|
|
disabled: tw`text-red-300`, |
|
|
|
|
}, |
|
|
|
@ -133,7 +119,7 @@ const Button = styled.button(
|
|
|
|
|
disabled = false, |
|
|
|
|
}: ButtonProps) => [ |
|
|
|
|
// common
|
|
|
|
|
tw`rounded-sm border-0 font-normal cursor-pointer inline-block uppercase duration-500`, |
|
|
|
|
tw`rounded-sm border-0 font-normal cursor-pointer inline-block uppercase duration-200`, |
|
|
|
|
|
|
|
|
|
// sizes
|
|
|
|
|
sizeStyles[size], |
|
|
|
@ -145,6 +131,9 @@ const Button = styled.button(
|
|
|
|
|
|
|
|
|
|
// common disabled style
|
|
|
|
|
disabled && tw`bg-opacity-40 cursor-not-allowed`, |
|
|
|
|
|
|
|
|
|
// not sure about this one yet
|
|
|
|
|
// fill === 'text' && size === 'xs' && tw`after:(h-px)`,
|
|
|
|
|
] |
|
|
|
|
); |
|
|
|
|
|
|
|
|
|