react-ions/lib/components/Dropdown/styles.css.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _colors = require('../../styles/common/colors.css');

var _colors2 = _interopRequireDefault(_colors);

var _functions = require('../../styles/common/functions.css');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

// TODO: Write test(s) for any logic contained herein
var styles = function styles(_ref) {
  var listItems = _ref.listItems,
      alignment = _ref.alignment,
      optClass = _ref.optClass,
      isOpened = _ref.isOpened,
      _ref$triggerRect = _ref.triggerRect,
      triggerRect = _ref$triggerRect === undefined ? { width: 0 } : _ref$triggerRect;

  return {
    position: 'relative',

    '> *': {
      margin: 0
    },
    '.trigger': {
      cursor: 'pointer'
    },
    '> .dropdown-wrapper': {
      backfaceVisibility: 'hidden',
      backgroundColor: _colors2.default.white,
      borderRadius: '3px',
      boxShadow: '0 1px 2px 1px rgba(0, 0, 0, 0.2)',
      boxSizing: 'border-box',
      height: 'auto',
      marginTop: '7px',
      opacity: isOpened ? 1 : 0,
      overflow: listItems ? 'hidden' : 'unset',
      padding: listItems ? 0 : '10px',
      position: 'absolute',
      transform: isOpened && alignment === 'right' ? 'translateX(calc(-100% + ' + triggerRect.width + 'px))' : 'inherit',
      display: isOpened ? 'block' : 'none',
      zIndex: _functions.zLayers.dropdown
    },
    '.list-wrapper': {
      margin: 0,
      minWidth: '110px',
      padding: 0,
      lineHeight: 'initial',
      li: {
        boxSizing: 'border-box',
        color: _colors2.default.primary_4,
        cursor: 'pointer',
        display: 'block',
        minHeight: '18px',
        padding: '10px',
        textDecoration: 'none',
        width: '100%',
        '&:hover': {
          backgroundColor: _colors2.default.primary_1,
          color: _colors2.default.white
        }
      }
    },
    '.overlay': {
      backgroundColor: _colors2.default.white,
      minWidth: '128px',
      width: '100%',
      '> span': {
        fontSize: '16px',
        fontWeight: 200,
        color: _colors2.default.navy_text,
        margin: '10px 10px 0',
        textAlign: 'left',
        display: 'block'
      },
      '.button-wrapper': {
        boxSizing: 'border-box',
        display: 'flex',
        justifyContent: 'flex-end',
        padding: '10px',
        width: '100%',
        button: {
          margin: 0,
          '&:first-child': {
            marginRight: '12px !important'
          }
        }
      }
    }
  };
};

exports.default = styles;