strapi-plugin-content-manager/admin/src/components/SelectWrapper/utils/styles.js

A powerful UI to easily manage your data.

/* eslint-disable indent */
/* eslint-disable no-nested-ternary */

const styles = {
  container: base => ({ ...base, background: '#ffffff' }),
  control: (base, state) => {
    const borderRadiusStyle = state.selectProps.menuIsOpen
      ? {
          borderBottomLeftRadius: '0 !important',
          borderBottomRightRadius: '0 !important',
        }
      : {};

    const {
      selectProps: { error, value },
    } = state;

    let border;
    let borderBottom;
    let backgroundColor;

    if (state.isFocused) {
      border = '1px solid #78caff !important';
    } else if (error && !value.length) {
      border = '1px solid #f64d0a !important';
    } else {
      border = '1px solid #e3e9f3 !important';
    }

    if (state.menuIsOpen === true) {
      borderBottom = '1px solid #e3e9f3 !important';
    }

    if (state.isDisabled) {
      backgroundColor = '#fafafb !important';
    }

    return {
      ...base,
      fontSize: 13,
      height: 34,
      minHeight: 34,
      border,
      outline: 0,
      boxShadow: 0,
      borderRadius: '2px !important',
      ...borderRadiusStyle,
      borderBottom,
      backgroundColor,
    };
  },
  input: base => ({ ...base, marginLeft: 10 }),
  menu: base => {
    return {
      ...base,
      width: '100%',
      margin: '0',
      paddingTop: 0,
      borderRadius: '2px !important',
      borderTopLeftRadius: '0 !important',
      borderTopRightRadius: '0 !important',
      border: '1px solid #78caff !important',
      boxShadow: 0,
      borderTop: '0 !important',
      fontSize: '13px',
    };
  },
  menuList: base => ({
    ...base,
    maxHeight: '112px',
    paddingTop: 2,
  }),
  option: (base, state) => {
    return {
      ...base,
      height: 36,
      backgroundColor: state.isFocused ? '#f6f6f6' : '#fff',
      ':active': {
        ...base[':active'],
        backgroundColor: '#f6f6f6',
      },
      color: '#333740',
      fontWeight: state.isFocused ? '600' : '400',
      cursor: 'pointer',
      WebkitFontSmoothing: 'antialiased',
    };
  },
  placeholder: base => ({
    ...base,
    marginTop: 0,
    marginLeft: 10,
    color: '#aaa',
    overflow: 'hidden',
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    maxWidth: 'calc(100% - 32px)',
  }),
  valueContainer: base => ({
    ...base,
    padding: '2px 0px 4px 0px',
    lineHeight: '18px',
  }),
};

export default styles;