jobiqo-cl/lib/src/components/02-atoms/16-popover/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var styled = require('styled-components');
var styled__default = _interopDefault(styled);
var index_esm$2 = require('../../../../node_modules/@styled-system/color/dist/index.esm.js');
var index_esm$9 = require('../../../../node_modules/@styled-system/space/dist/index.esm.js');
require('../../../../node_modules/styled-system/dist/index.esm.js');

const PopoverContent = styled__default.div `
  position: absolute;
  z-index: 10;
  min-width: ${props => props.theme.popover.minWidth};
  padding: ${props => props.theme.popover.p};
  background-color: ${props => props.theme.popover.background};
  box-shadow: ${props => props.theme.popover.boxShadow};
  border-radius: ${props => props.theme.popover.borderRadius};
  ${index_esm$9.space}
  ${index_esm$2.color}

  ${props => props.maxHeight
    ? `
  max-height: ${props.maxHeight};
  overflow-y:auto;
  `
    : null}

  ${props => props.position === 'right'
    ? `
    top: 0;
    left: 100%;
    margin-left: ${props.theme.popover.margin};
  `
    : ``}

  ${props => props.position === 'left'
    ? `
    top: 0;
    right: 100%;
    margin-right: ${props.theme.popover.margin};
  `
    : ``}

${props => props.position === 'top'
    ? `
    bottom: 100%;
    margin-bottom: ${props.theme.popover.margin};
    transform: translateX(-25%);
  `
    : ``}

${props => props.position === 'bottom'
    ? `
    top: 100%;
    margin-top: ${props.theme.popover.margin};
    transform: translateX(-25%);
    `
    : ``}
`;
const PopoverWrapper = styled__default.div `
    position: relative;
    display: block;
    box-sizing: border-box;

  ${props => props.position === 'right'
    ? `
    flex-flow: row-reverse nowrap;`
    : ``}

  ${props => props.position === 'left'
    ? `
    flex-flow: row nowrap;`
    : ``}

${props => props.position === 'top'
    ? `
    flex-flow: column-reverse nowrap;
    align-items:center;`
    : ``}

${props => props.position === 'bottom'
    ? `
    flex-flow: column nowrap;
    align-items:center;`
    : ``}
`;

exports.PopoverContent = PopoverContent;
exports.PopoverWrapper = PopoverWrapper;