react-ions/lib/components/Popover/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 _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 }; }

var styles = function styles(_ref) {
  var showing = _ref.showing,
      position = _ref.position,
      _ref$parent = _ref.parent,
      parent = _ref$parent === undefined ? { width: 0, height: 0 } : _ref$parent,
      _ref$child = _ref.child,
      child = _ref$child === undefined ? { width: 0, height: 0 } : _ref$child,
      _ref$width = _ref.width,
      width = _ref$width === undefined ? '300px' : _ref$width;

  var caretCenter = position === 'top' || position === 'bottom' || position === 'right' || position === 'left' ? 'calc(50% - 10px)' : child.width / 2 - 10 + 'px';
  var caretOffset = '-10px';
  var popoverOffset = Math.ceil(position === 'left' || position === 'right' ? parent.width : parent.height) + 20 + 'px';

  var popoverTransform = void 0;
  if (position === 'left' || position === 'right') {
    popoverTransform = 'translateY(calc(-50% + ' + parent.height / 2 + 'px))';
  } else if (position === 'top' || position === 'bottom') {
    popoverTransform = 'translateX(calc(-50% + ' + parent.width / 2 + 'px))';
  }

  var caretPos = {
    left: { right: caretOffset, bottom: caretCenter },
    right: { left: caretOffset, bottom: caretCenter },
    top: { left: caretCenter, bottom: caretOffset },
    bottom: { left: caretCenter, top: caretOffset },
    topLeft: { right: caretCenter, bottom: caretOffset },
    topRight: { left: caretCenter, bottom: caretOffset },
    bottomLeft: { right: caretCenter, top: caretOffset },
    bottomRight: { left: caretCenter, top: caretOffset }
  };
  var popoverPos = {
    left: { right: popoverOffset, transform: popoverTransform },
    right: { left: popoverOffset, transform: popoverTransform },
    top: { bottom: popoverOffset, transform: popoverTransform },
    bottom: { top: popoverOffset, transform: popoverTransform },
    topLeft: { bottom: popoverOffset, right: 0 },
    topRight: { bottom: popoverOffset, left: 0 },
    bottomLeft: { top: popoverOffset, right: 0 },
    bottomRight: { top: popoverOffset, left: 0 }
  };

  return {
    display: 'inline-flex',
    position: 'relative',
    '> .popoverInner': _extends({
      backgroundColor: _colors2.default.white,
      borderRadius: '3px',
      boxShadow: '0 8px 24px 0 rgba(27,37,47,0.16)',
      width: width,
      boxSizing: 'border-box',
      padding: '16px',
      position: 'absolute'
    }, popoverPos[position], {
      transition: 'opacity .25s ease',
      visibility: showing ? 'visible' : 'hidden',
      opacity: showing ? 1 : 0,
      zIndex: _functions.zLayers.popover,

      '&:before': _extends({
        backgroundColor: _colors2.default.white,
        borderRadius: '3px',
        content: '" "',
        height: '20px',
        position: 'absolute',
        transform: 'rotate(45deg)',
        width: '20px'
      }, caretPos[position])
    }),
    '.popoverContent': {
      overflowWrap: 'break-word',
      wordWrap: 'break-word',
      zIndex: 1,

      // Center the text on the popover-content buttons,
      // since we can't easily apply the `fill` class to each one
      // eg: buttons are implemented in a child component
      'button em': {
        display: 'block'
      },

      // Handle this automatically, to allow header to flow better      
      'h1, h2': {
        margin: '0 0 16px'
      }
    }
  };
};

exports.default = styles;