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

51 lines
1.0 KiB
JavaScript

import { css } from 'styled-components';
import color from '../../utils/color';
export default ({ theme, disabled }) => css`
display: flex;
flex-shrink: 0;
> [data-selected],
> [data-selected]:hover {
background-color: ${theme.base04};
color: ${theme.base00};
}
> button {
outline: none;
box-sizing: border-box;
flex-shrink: 0;
-webkit-font-smoothing: antialiased;
min-height: 30px;
border: 1px solid ${color(theme.base03, 'alpha', 0.4)};
border-left-width: 0;
padding: 5px 10px;
${disabled
? `
cursor: not-allowed;
opacity: 0.6;
`
: `
cursor: pointer;
color: ${theme.base05};
background-color: ${theme.base01};
&:hover, &:focus {
background-color: ${theme.base02};
color: ${theme.base07};
}
`}
&:first-child {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-left-width: 1px;
}
&:last-child {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
}
`;