36 lines
1.0 KiB
JavaScript
36 lines
1.0 KiB
JavaScript
|
import styled from "styled-components";
|
||
|
import Base from "../../themes/base";
|
||
|
|
||
|
const StyledButton = styled.div`
|
||
|
display: inline-block;
|
||
|
background: ${(props) => props.theme.selectorAddButton.background};
|
||
|
border: ${(props) => props.theme.selectorAddButton.border};
|
||
|
box-sizing: ${(props) => props.theme.selectorAddButton.boxSizing};
|
||
|
border-radius: ${(props) => props.theme.selectorAddButton.boxSizing};
|
||
|
height: ${(props) => props.theme.selectorAddButton.height};
|
||
|
width: ${(props) => props.theme.selectorAddButton.width};
|
||
|
padding: ${(props) => props.theme.selectorAddButton.padding};
|
||
|
|
||
|
cursor: ${(props) => (!props.isDisabled ? "pointer" : "default")};
|
||
|
|
||
|
&:hover {
|
||
|
path {
|
||
|
${(props) =>
|
||
|
!props.isDisabled &&
|
||
|
`
|
||
|
fill: ${props.theme.selectorAddButton.color};
|
||
|
`}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
&:active {
|
||
|
${(props) =>
|
||
|
!props.isDisabled &&
|
||
|
`background-color: ${props.theme.selectorAddButton.activeBackground};`}
|
||
|
}
|
||
|
`;
|
||
|
|
||
|
StyledButton.defaultProps = { theme: Base };
|
||
|
|
||
|
export default StyledButton;
|