admin-bro/lib/frontend/styles/select-styles.js

Admin panel for apps written in node.js

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.filterStyles = void 0;

/* eslint-disable @typescript-eslint/explicit-function-return-type */
const selectStyles = theme => ({
  control: (provided, state) => ({ ...provided,
    border: state.isFocused ? `1px solid ${theme.colors.primary}` : `1px solid ${theme.colors.border}`,
    borderRadius: '0px',
    background: theme.colors.inputBck,
    color: theme.colors.defaultText
  }),
  menu: provided => ({ ...provided,
    borderRadius: '0px',
    borderColor: theme.colors.border,
    background: theme.colors.bck
  }),
  input: () => ({
    color: theme.colors.defaultText,
    background: theme.colors.inputBck
  }),
  singleValue: () => ({
    color: theme.colors.defaultText
  }),
  option: (provided, state) => ({ ...provided,
    color: state.isSelected ? theme.colors.defaultText : theme.colors.lightText,
    background: state.isFocused ? theme.colors.primary : 'transparent'
  })
});

const filterStyles = theme => ({
  control: (provided, state) => ({ ...provided,
    border: state.isFocused ? `1px solid ${theme.colors.primary}` : `1px solid ${theme.colors.borderOnDark}`,
    borderRadius: '0px',
    background: 'transparent',
    color: theme.colors.lightText
  }),
  input: () => ({
    color: '#fff'
  }),
  singleValue: () => ({
    color: theme.colors.lightText
  }),
  option: (provided, state) => ({ ...provided,
    color: state.isSelected ? theme.colors.filterDefaultText : theme.colors.lightText,
    background: state.isFocused ? 'rgba(32,39,62,0.25)' : 'transparent'
  }),
  menu: provided => ({ ...provided,
    borderRadius: '0px',
    borderColor: theme.colors.border,
    background: theme.colors.darkBck,
    zIndex: 5
  })
});

exports.filterStyles = filterStyles;
var _default = selectStyles;
exports.default = _default;