2021-04-29 06:51:16 -07:00
|
|
|
import styled from '@emotion/styled'
|
|
|
|
import tw from 'twin.macro'
|
|
|
|
|
2021-07-14 13:10:53 -07:00
|
|
|
const idleGradient = 'bg-gradient-to-r from-secondary-2-light to-primary-light'
|
|
|
|
const activeGradient =
|
|
|
|
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
|
|
|
|
|
2021-07-14 13:12:47 -07:00
|
|
|
const Button = styled.button`
|
2021-07-14 13:10:53 -07:00
|
|
|
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
|
|
|
|
|
2021-04-29 06:51:16 -07:00
|
|
|
:before {
|
2021-07-14 13:10:53 -07:00
|
|
|
${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500 ${activeGradient}`}
|
2021-04-29 06:51:16 -07:00
|
|
|
border-radius: inherit;
|
|
|
|
content: '';
|
|
|
|
z-index: -10;
|
|
|
|
}
|
|
|
|
|
|
|
|
:hover {
|
2021-07-14 13:10:53 -07:00
|
|
|
:before {
|
|
|
|
${tw`opacity-100`}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
focus {
|
|
|
|
${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
|
|
|
|
}
|
|
|
|
|
|
|
|
:active {
|
|
|
|
:before {
|
|
|
|
${tw`ring-2 ring-secondary-2-light ring-opacity-40`}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
:disabled {
|
|
|
|
${tw`cursor-not-allowed opacity-60`}
|
|
|
|
:before {
|
|
|
|
${tw`hidden`}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
`
|
|
|
|
|
2021-04-26 07:22:30 -07:00
|
|
|
export default Button
|