@fluent-windows/core/es/Checkbox/Checkbox.styled.js

React components that inspired by Microsoft's Fluent Design System.

const root = theme => ({
  width: 20,
  height: 20,
  display: 'inline-block',
  position: 'relative',
  cursor: 'pointer',
  borderRadius: 2,
  border: '2px solid',
  overflow: 'hidden',
  transition: theme.transitions.checkbox,
  color: theme.colors.black.default,
  backgroundColor: theme.colors.white.default,
  borderColor: theme.colors.standard.default,
  '&:hover, &:focus': {
    borderColor: theme.colors.standard.dark1
  },
  '&:active': {
    color: theme.colors.white.default,
    backgroundColor: theme.colors.primary.default,
    borderColor: theme.colors.primary.default
  },
  '& > input': {
    width: '100%',
    height: '100%',
    cursor: 'pointer',
    opacity: 0,
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    zIndex: 1
  }
});

const checked = theme => ({
  color: theme.colors.white.default,
  backgroundColor: theme.colors.primary.default,
  borderColor: theme.colors.primary.default,
  '&:hover, &:focus': {
    borderColor: theme.colors.primary.default
  },
  '&:active': {
    backgroundColor: theme.colors.primary.dark3,
    borderColor: theme.colors.primary.dark3
  }
});

const disabled = theme => ({
  color: theme.colors.standard.dark2,
  backgroundColor: theme.colors.standard.light1,
  borderColor: theme.colors.standard.default,
  pointerEvents: 'none',
  cursor: 'not-allowed'
});

export const styles = theme => ({
  root: root(theme),
  checked: checked(theme),
  disabled: disabled(theme)
});