|
import styled from 'styled-components'; |
|
import { DarkTheme } from '../../theme'; |
|
import { store } from '../../store'; |
|
|
|
const theme = DarkTheme; |
|
|
|
interface Props { |
|
width?: string; |
|
height?: string; |
|
size: string; |
|
variant: string; |
|
} |
|
|
|
const styles: any = { |
|
size: { |
|
sm: 'padding: 0.20rem 0.75rem; font-size: ${theme.label.sm};', |
|
md: 'padding: 0.5rem 1rem; font-size: ${theme.label.md};', |
|
lg: 'padding: 0.75rem 1.5rem; font-size: ${theme.label.lg};', |
|
}, |
|
variant: { |
|
outline: `background: inherit; border: 2px solid ${theme.color.purple}; color: ${theme.color.pink};`, |
|
pill: `background: ${theme.color.purple}; outline: none; color: ${theme.color.foreground}; border-radius: 8rem; box-shadow: ${theme.shadow.textshadow};`, |
|
plain: `background: ${theme.color.pink}; outline: none; color: ${theme.color.foreground};`, |
|
disabled: `background: ${theme.color.disabled}; border: 2px solid ${theme.color.disabled}; color: ${theme.color.background}; text-shadow: none;`, |
|
link: `transition: .1s; background: none; outline: none; color: ${theme.color.foreground}; border: none;`, |
|
stylized: `text-align: right; transition: .2s; font-size: .9rem !important; |
|
font-weight: 400; font-style: italic; font-family: ${theme.font.face.serif}; background: none; outline: none; color: ${theme.color.foreground}; border: none;`, |
|
}, |
|
hover: { |
|
plain: `background: ${theme.color.pink}80; ${theme.shadow.textshadow};`, |
|
outline: `background: none; ${theme.shadow.textshadow};`, |
|
pill: `background: ${theme.color.purple}80; ${theme.shadow.textshadow};`, |
|
disabled: `background: ${theme.color.disabled}; ${theme.shadow.textshadow}; cursor: not-allowed;`, |
|
link: `color: ${theme.color.pink};`, |
|
}, |
|
focus: { |
|
plain: `outline: 2px solid ${theme.color.pink}; outline-offset: 2px; border-right-color: ${theme.color.purple}; border-top-color: ${theme.color.purple};`, |
|
outline: `outline: 2px solid ${theme.color.purple}; outline-offset: 2px;}`, |
|
pill: `outline: 2px solid ${theme.color.purple}; outline-offset: 2px; border-right-color: ${theme.color.pink}; border-top-color: ${theme.color.pink};`, |
|
disabled: `outline: 2px solid ${theme.color.disabled};`, |
|
link: `outline: 1px solid ${theme.color.pink}; outline-offset: 0px;`, |
|
}, |
|
}; |
|
|
|
export const Button = styled.button<Props>` |
|
cursor: pointer; |
|
height: ${props => props.height || 'fit-content'}; |
|
width: ${props => props.width || '100%'}; |
|
font-family: ${props => props.theme.font.face.sans}; |
|
margin: 2px; |
|
border: none; |
|
border-top: 1px solid #c0c0c0; |
|
border-right: 0.5px solid #c0c0c0; |
|
transition: 0.3s all ease-out; |
|
border-radius: 0.15rem; |
|
font-weight: 600; |
|
text-shadow: ${props => props.theme.shadow.textshadow}; |
|
white-space: nowrap; |
|
${props => styles.size[props.size] || styles.size.md} |
|
${props => styles.variant[props.variant] || styles.variant.plain}; |
|
&:hover { |
|
${props => styles.hover[props.variant] || styles.hover.plain}; |
|
} |
|
&:focus { |
|
${props => styles.focus[props.variant] || styles.focus.plain}; |
|
} |
|
&:hover > .tooltip { |
|
display: flex; |
|
} |
|
`; |
