sc-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,
      _ref$position = _ref.position,
      position = _ref$position === undefined ? 'bottom' : _ref$position,
      _ref$parent = _ref.parent,
      parent = _ref$parent === undefined ? { width: 0, height: 0 } : _ref$parent,
      _ref$width = _ref.width,
      width = _ref$width === undefined ? '300px' : _ref$width;

  var caretOffset = '-10px';
  var caretCenter = 'calc(50% - 10px)';
  var popoverOffset = Math.ceil(position === 'left' || position === 'right' ? parent.width : parent.height) + 20 + 'px';
  var popoverTransform = position === 'left' || position === 'right' ? 'translateY(calc(-50% + ' + parent.height / 2 + 'px))' : '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 }
  };
  var popoverPos = {
    left: { right: popoverOffset, transform: popoverTransform },
    right: { left: popoverOffset, transform: popoverTransform },
    top: { bottom: popoverOffset, transform: popoverTransform },
    bottom: { top: popoverOffset, transform: popoverTransform }
  };

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

      '&: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'
      }
    }
  };
};

exports.default = styles;