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

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

const root = {
  display: 'inline-block',
  position: 'relative',
  minWidth: 160,
  height: 32,
  font: 'inherit',
  cursor: 'pointer'
};
const disabled = {
  cursor: 'not-allowed'
};

const select = theme => ({
  outline: 'none',
  font: 'inherit',
  width: '100%',
  height: '100%',
  cursor: 'pointer',
  borderRadius: 2,
  border: '2px solid',
  paddingLeft: 12,
  paddingRight: 32,
  display: 'flex',
  alignItems: 'center',
  borderColor: theme.colors.standard.default,
  transition: theme.transitions.input,
  '&:hover': {
    borderColor: theme.colors.standard.dark1
  },
  '&:active, &:focus': {
    borderColor: theme.colors.primary.default
  }
});

const selectDisabled = theme => ({
  color: theme.colors.standard.dark2,
  backgroundColor: theme.colors.standard.light1,
  cursor: 'not-allowed',
  '&:hover, &:active, &:focus': {
    borderColor: theme.colors.standard.default
  }
});

const icon = theme => ({
  width: 32,
  height: '100%',
  position: 'absolute',
  right: 0,
  top: 0,
  fontSize: 12,
  display: 'inline-flex',
  justifyContent: 'center',
  alignItems: 'center',
  // disabledIcon false
  color: theme.colors.standard.dark3,
  cursor: 'pointer'
});

const disabledIcon = theme => ({
  color: theme.colors.standard.dark2,
  cursor: 'not-allowed'
});

export const styles = theme => ({
  root,
  disabled,
  select: select(theme),
  selectDisabled: selectDisabled(theme),
  icon: icon(theme),
  disabledIcon: disabledIcon(theme)
});