89 lines
1.8 KiB
JavaScript
89 lines
1.8 KiB
JavaScript
import React from 'react';
|
|
import styled from '@emotion/styled';
|
|
import { rgba } from 'utils/css-utils';
|
|
import { Flex } from 'reflexbox';
|
|
|
|
import Icon from 'components/Icon';
|
|
import { getThemeColor } from 'utils/css-utils';
|
|
|
|
const Button = styled.button`
|
|
color: ${(p) => p.theme.colors[p.color || 'button']};
|
|
border: ${(p) =>
|
|
p.type === 'ghost'
|
|
? '1px solid rgba(0,0,0,0)'
|
|
: `1px solid ${p.theme.colors[p.color || 'button']}`};
|
|
background: ${(p) =>
|
|
p.active
|
|
? rgba(p.color ? p.theme.colors[p.color] : p.theme.colors.button, 0.2)
|
|
: 'none'};
|
|
padding: ${(p) => (p.type === 'big' ? '12px 20px' : '8px 16px')};
|
|
border-radius: 25px;
|
|
outline: none;
|
|
cursor: pointer;
|
|
font-size: ${(p) => p.theme.fontSizesPx[1]};
|
|
letter-spacing: 0.5px;
|
|
line-height: 1;
|
|
transition: 0.075s all ease-in-out;
|
|
|
|
svg {
|
|
width: 100%;
|
|
}
|
|
|
|
&:visited,
|
|
&:focus,
|
|
&:active {
|
|
color: ${(p) => p.theme.colors[p.color || 'button']};
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
color: ${getThemeColor('background')};
|
|
background-color: ${getThemeColor('button')};
|
|
|
|
svg {
|
|
path,
|
|
circle,
|
|
rect,
|
|
line,
|
|
polyline {
|
|
stroke: ${getThemeColor('background')};
|
|
}
|
|
}
|
|
|
|
svg {
|
|
.nostroke {
|
|
stroke: none;
|
|
fill: ${getThemeColor('background')};
|
|
}
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
`;
|
|
|
|
export default ({
|
|
icon,
|
|
color = 'button',
|
|
children,
|
|
type = 'normal',
|
|
iconWidth = '20px',
|
|
...props
|
|
}) => (
|
|
<Button color={color} type={type} {...props}>
|
|
<Flex alignItems="center" justifyContent="center">
|
|
{icon && (
|
|
<Icon
|
|
strokeColor={color}
|
|
name={icon}
|
|
colorizeStroke
|
|
width={iconWidth}
|
|
mr={1}
|
|
/>
|
|
)}
|
|
{children}
|
|
</Flex>
|
|
</Button>
|
|
);
|