36 lines
926 B
TypeScript
36 lines
926 B
TypeScript
import styled from 'styled-components';
|
|
|
|
export const Button = styled.button`
|
|
padding: 1rem;
|
|
width: 100%;
|
|
display: block;
|
|
background-color: transparent;
|
|
border: 2px solid ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
|
|
color: ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
|
|
font-size: 1rem;
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: ${({ theme }) => theme.colors.secondary};
|
|
}
|
|
&.small {
|
|
width: inherit;
|
|
display: inline;
|
|
}
|
|
|
|
&.primary {
|
|
color: ${({theme}) => theme.colors.white};
|
|
background-color: ${({theme, disabled}) => !disabled ? theme.colors.primary : theme.colors.lightGray};
|
|
&:hover {
|
|
background-color: ${({ theme }) => theme.colors.secondary};
|
|
color: ${({theme}) => theme.colors.primary};
|
|
}
|
|
}
|
|
|
|
&.thin {
|
|
padding: 1px;
|
|
display: block;
|
|
}
|
|
`;
|