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

An open source set of React components that implement Ambassador's Design and UX patterns.

'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 {
    display: 'inline-block',
    '> *': {
      margin: 0
    },
    '.trigger': {
      position: 'relative'
    },
    '.dropdown-wrapper': {
      backgroundColor: _colors2.default.white,
      borderRadius: '3px',
      boxShadow: '0 1px 2px 1px rgba(0, 0, 0, 0.2)',
      boxSizing: 'border-box',
      height: 'auto',
      minWidth: '128px',
      marginTop: '7px',
      opacity: isOpened ? 1 : 0,
      overflow: listItems ? 'hidden' : 'unset',
      padding: listItems ? 0 : '10px',
      position: 'absolute',
      right: isOpened && alignment === 'right' ? 'calc(100% - ' + triggerRect.width + 'px)' : 'unset',
      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,
      width: '100%',
      '> span': {
        fontSize: '16px',
        fontWeight: 200,
        color: _colors2.default.navy_text,
        marginLeft: '10px',
        marginTop: '10px',
        display: 'block'
      },
      '.button-wrapper': {
        boxSizing: 'border-box',
        display: 'flex',
        justifyContent: 'space-between',
        padding: '10px 10px 10px 0',
        width: '100%',
        button: {
          margin: 0
        }
      }
    }
  };
};

exports.default = styles;