redux-devtools/packages/devui/src/Button/styles/default.js
2019-01-10 20:51:14 +02:00

52 lines
960 B
JavaScript

import { css } from 'styled-components';
export const style = ({ theme, primary, disabled }) => css`
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
outline: none;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all 0.5s;
margin: auto 0;
border: 1px solid ${theme.base02};
border-radius: 4px;
${
primary
? `
background-color: ${theme.base05};
color: ${theme.base00};
`
: `
background-color: ${theme.base01};
color: ${theme.base05};
`
}
${
disabled
? `
cursor: not-allowed;
opacity: 0.6;
`
: `
cursor: pointer;
`
}
${!disabled &&
`
&:hover,
&:focus {
background-color: ${primary ? theme.base07 : theme.base02};
box-shadow: 1px 1px 2px ${theme.base03};
}
`}
&:focus {
border: 1px solid ${theme.base0D};
}
&:active {
border: 1px solid ${theme.base03};
box-shadow: 1px 1px 2px ${theme.base04};
}
`;