saagie-ui/src/react/core/atoms/formControlSelect/themes/FormControlSelectThemeDefault.js

Saagie UI from Saagie Design System

/* eslint no-nested-ternary: 0 */

export const FormControlSelectThemeDefault = {
  container: (styles) => ({
    ...styles,
    pointerEvents: 'auto',
    minWidth: '3rem',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    fontFamily: '"Luengo", "Helvetica Neue", Helvetica, Arial, sans-serif !default',
  }),
  control: (styles, { isDisabled, isFocused }) => ({
    ...styles,
    color: '#263d5c',
    border: isFocused
      ? '0.0625rem solid #0070f3'
      : isDisabled
        ? '0.0625rem solid #cacdd8'
        : '0.0625rem solid #d9dbe3',
    boxShadow: isFocused
      ? '0 0 0 0.125rem rgba(0, 112, 243, 0.25)'
      : '',
    backgroundColor: isDisabled
      ? '#e7eff9'
      : '#fafbfe',
    cursor: isDisabled
      ? 'not-allowed'
      : 'text',
    ':hover': {
      border: isDisabled
        ? '0.0625rem solid #cacdd8'
        : '0.0625rem solid #cacdd8',
    },
  }),
  placeholder: (styles) => ({
    ...styles,
    color: '#5A789E',
  }),
  indicatorsContainer: (styles) => ({
    ...styles,
  }),
  indicatorSeparator: () => ({
    display: 'none',
  }),
  clearIndicator: (styles) => ({
    ...styles,
    color: '#ccc',
    padding: 0,
    cursor: 'pointer',
  }),
  dropdownIndicator: (styles, { isDisabled }) => ({
    ...styles,
    color: isDisabled ? 'rgba(0, 0, 0, .1)' : 'inherit',
    ':hover': {
      color: isDisabled ? 'rgba(0, 0, 0, .1)' : 'inherit',
    },
  }),
  singleValue: (styles, { data, isDisabled }) => ({
    ...styles,
    pointerEvents: isDisabled
      ? 'none'
      : 'auto',
    color: isDisabled
      ? '#263d5c'
      : data.color,
  }),
  multiValue: (styles, { isDisabled }) => ({
    ...styles,
    backgroundColor: '#0070f3',
    border: '0.0625rem solid #0064da',
    borderRadius: '0.25rem',
    padding: '0.125rem 0.375rem',
    pointerEvents: isDisabled
      ? 'none'
      : 'auto',
    opacity: isDisabled
      ? 0.6
      : 1,
    filter: isDisabled
      ? 'grayscale(60%)'
      : '',
  }),
  multiValueLabel: (styles) => ({
    ...styles,
    padding: 0,
    paddingLeft: 0,
    fontSize: '0.75rem',
    color: 'white',
    wordBreak: 'break-all',
    fontWeight: 'bold',
  }),
  multiValueRemove: (styles) => ({
    ...styles,
    color: 'white',
    borderLeft: '0.0625rem solid #0058c0',
    marginLeft: '0.3125rem',
    marginRight: '-0.3125rem',
    opacity: '0.75',
    cursor: 'pointer',
    ':hover': {
      opacity: '1',
    },
  }),
  menu: (styles) => ({
    ...styles,
    paddingTop: 0,
    zIndex: 999,
    boxShadow: '0 8px 10px 1px rgba(0,0,0,0.10), 0 3px 10px 0px rgba(0,0,0,0.08), 0 5px 5px -3px rgba(0,0,0,0.05), 0 0 0 1px rgba(0, 0, 0, 0.05)',
  }),
  menuList: (styles) => ({
    ...styles,
    padding: '0.5rem',
  }),
  menuPortal: (styles) => ({
    ...styles,
    zIndex: 999,
  }),
  option: (styles, {
    data,
    isDisabled,
    isFocused,
    isSelected,
  }) => ({
    ...styles,
    borderRadius: '0.25rem',
    fontSize: '0.875rem',
    lineHeight: '1rem',
    padding: '0.5rem',
    marginBottom: '0.25rem',
    transition: '0.3s',
    cursor: isDisabled
      ? 'not-allowed'
      : 'pointer',
    backgroundColor: isDisabled
      ? null
      : isSelected
        ? '#0070f3'
        : isFocused
          ? '#e7eff9'
          : data.color,
    ':hover': {
      backgroundColor: isDisabled
        ? null
        : isSelected
          ? '#0070f3'
          : isFocused
            ? '#e7eff9'
            : data.color,
    },
    ':last-child': {
      marginBottom: 0,
    },
  }),
  group: (styles) => ({
    ...styles,
    ':first-child': {
      paddingTop: 0,
    },
    ':last-child': {
      paddingBottom: 0,
    },
  }),
  groupHeading: (styles) => ({
    ...styles,
    paddingLeft: '0.25rem',
    paddingRight: '0.25rem',
    marginBottom: '0.5rem',
  }),
};

export const groupTitleStyles = {
  color: '#8098B7',
  fontSize: '0.625rem',
  fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif',
  paddingLeft: '0',
};

export const groupStyles = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'space-between',
};

export const groupBadgeStyles = {
  backgroundColor: '#E7EFF9',
  borderRadius: '2rem',
  color: '#263d5c',
  display: 'inline-block',
  fontSize: '0.625rem',
  fontWeight: 'normal',
  lineHeight: '0.75rem',
  minWidth: 1,
  padding: '0.125rem 0.5rem',
  textAlign: 'center',
};