@fluentui/react-northstar/dist/commonjs/themes/teams/getPointerStyles.js

A themable React component library.

"use strict";

exports.__esModule = true;
exports.getPointerStyles = exports.getContainerStyles = void 0;
var getContainerStyles = function getContainerStyles(options) {
  var padding = options.padding,
    placement = options.placement;
  return Object.assign({}, placement === 'bottom' && {
    paddingTop: padding
  }, placement === 'top' && {
    paddingBottom: padding
  }, placement === 'left' && {
    paddingRight: padding
  }, placement === 'right' && {
    paddingLeft: padding
  });
};
exports.getContainerStyles = getContainerStyles;
var getPointerStyles = function getPointerStyles(options) {
  var backgroundColor = options.backgroundColor,
    borderColor = options.borderColor,
    rtl = options.rtl,
    borderSize = options.borderSize,
    gap = options.gap,
    height = options.height,
    padding = options.padding,
    placement = options.placement,
    svg = options.svg,
    width = options.width;
  return Object.assign({
    display: 'block',
    position: 'absolute',
    zIndex: 1
  }, (placement === 'bottom' || placement === 'top') && {
    paddingLeft: gap,
    paddingRight: gap,
    height: height,
    width: "calc(" + width + " + (" + gap + " * 2))"
  }, (placement === 'left' || placement === 'right') && {
    paddingBottom: gap,
    paddingTop: gap,
    height: "calc(" + width + " + (" + gap + " * 2))",
    width: height
  }, placement === 'bottom' && {
    top: "calc(" + padding + " - " + height + " + (" + borderSize + " * 2))"
  }, placement === 'top' && {
    bottom: "calc(" + padding + " - " + height + " + " + borderSize + ")"
  }, placement === 'left' && {
    right: "calc(" + padding + " - " + height + " + " + borderSize + ")"
  }, placement === 'right' && {
    left: "calc(" + padding + " - " + height + " + " + borderSize + ")"
  }, {
    '::before': Object.assign({
      content: '" "',
      display: 'block',
      height: height,
      position: 'relative',
      transformOrigin: 'center top',
      borderBottomColor: 'transparent',
      borderLeftColor: 'transparent',
      borderRightColor: 'transparent',
      borderTopColor: 'transparent',
      borderStyle: 'solid',
      left: 0,
      top: 0
    }, placement === 'bottom' && {
      borderBottomColor: backgroundColor,
      borderWidth: "0 " + height + " " + height
    }, placement === 'top' && {
      borderTopColor: backgroundColor,
      borderWidth: height + " " + height + " 0",
      top: "calc(" + borderSize + " * -1)"
    }, placement === 'left' && {
      borderLeftColor: backgroundColor,
      borderWidth: height + " 0 " + height + " " + height
    }, placement === 'right' && {
      borderRightColor: backgroundColor,
      borderWidth: height + " " + height + " " + height + " 0"
    }),
    '::after': Object.assign({
      content: '" "',
      display: 'block',
      height: height,
      position: 'relative',
      transformOrigin: 'center top',
      zIndex: -1,
      borderBottomColor: 'transparent',
      borderLeftColor: 'transparent',
      borderRightColor: 'transparent',
      borderTopColor: 'transparent',
      borderStyle: 'solid'
    }, placement === 'bottom' && {
      borderBottomColor: borderColor,
      borderWidth: "0 " + height + " " + height,
      left: 0,
      bottom: "calc(" + height + " + 1px)"
    }, placement === 'top' && {
      borderTopColor: borderColor,
      borderWidth: height + " " + height + " 0",
      left: 0,
      bottom: height
    }, placement === 'left' && {
      borderLeftColor: borderColor,
      borderWidth: height + " 0 " + height + " " + height,
      left: borderSize,
      bottom: width
    }, placement === 'right' && {
      borderRightColor: borderColor,
      borderWidth: height + " " + height + " " + height + " 0",
      right: borderSize,
      bottom: width
    })
  }, svg && {
    // :before & :after are used to draw CSS triangles, not valid for SVG
    '::before': Object.assign({
      content: '" "',
      backgroundImage: svg,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      display: 'block',
      position: 'relative'
    }, placement === 'bottom' && {
      height: "calc(" + width + " + (" + gap + " * 2))",
      width: height,
      left: gap,
      bottom: "calc(" + width + " - " + height + " + " + borderSize + ")",
      transform: 'rotate(90deg) /* @noflip */'
    }, placement === 'top' && {
      height: "calc(" + width + " + (" + gap + " * 2))",
      width: height,
      left: gap,
      bottom: "calc(" + gap + " + " + height + " - " + borderSize + ")",
      transform: 'rotate(-90deg) /* @noflip */'
    }, placement === 'left' && {
      height: width,
      width: height,
      left: 0,
      transform: rtl ? 'rotate(0) /* @noflip */' : 'rotate(180deg) /* @noflip */'
    }, placement === 'right' && {
      height: width,
      width: height,
      right: 0,
      transform: rtl ? 'rotate(180deg) /* @noflip */' : 'rotate(0) /* @noflip */'
    }),
    '::after': undefined
  });
};
exports.getPointerStyles = getPointerStyles;
//# sourceMappingURL=getPointerStyles.js.map