@helpscout/hsds-react/components/Popover/Popover.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.HeadingUI = exports.HeaderUI = exports.PopoverUI = exports.ArrowPopoverUI = exports.config = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _color = require("../../styles/utilities/color");

var _depth = require("../../styles/mixins/depth.css");

var _Tooltip = require("../Tooltip/Tooltip.css");

var _Heading = _interopRequireDefault(require("../Heading"));

var config = {
  borderColor: (0, _color.getColor)('grey.600'),
  padding: '15px',
  background: 'white'
};
/** Make the border color slightly darker than the popover's
 * border to account for aliasing that makes the arrow color appear
 * lighter
 */

exports.config = config;
var ArrowPopoverUI = (0, _styledComponents.default)(_Tooltip.ArrowUI).withConfig({
  displayName: "Popovercss__ArrowPopoverUI",
  componentId: "sc-1nsatjh-0"
})(["&:before{background:", ";border:1px solid #acb7c0;}&:after{content:'';background:", ";position:absolute;transform:rotate(45deg);height:calc(", "px - 4px);width:calc(", "px - 4px);margin:2px;border-color:transparent;box-shadow:none;left:0;}"], config.background, config.background, function (_ref) {
  var arrowSize = _ref.arrowSize;
  return arrowSize;
}, function (_ref2) {
  var arrowSize = _ref2.arrowSize;
  return arrowSize;
});
exports.ArrowPopoverUI = ArrowPopoverUI;
var PopoverUI = (0, _styledComponents.default)(_Tooltip.TooltipUI).withConfig({
  displayName: "Popovercss__PopoverUI",
  componentId: "sc-1nsatjh-1"
})(["", " color:inherit;font-size:inherit;padding:", ";&[data-placement^='top'] ", "{&:before{bottom:-2px;}&:after{bottom:-1px;}}&[data-placement^='bottom'] ", "{&:before{top:-2px;}&:after{top:-1px;}}&[data-placement^='left'] ", "{&:before{left:2px;}&:after{left:1px;}}&[data-placement^='right'] ", "{&:before{left:-2px;}&:after{left:-1px;}}"], _depth.d500, config.padding, ArrowPopoverUI, ArrowPopoverUI, ArrowPopoverUI, ArrowPopoverUI);
exports.PopoverUI = PopoverUI;
var HeaderUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "Popovercss__HeaderUI",
  componentId: "sc-1nsatjh-2"
})(["border-bottom:1px solid ", ";margin-bottom:", ";margin-left:calc(", " * -1);margin-right:calc(", " * -1);margin-top:calc(", " * -1);padding:10px ", ";"], config.borderColor, config.padding, config.padding, config.padding, config.padding, config.padding);
exports.HeaderUI = HeaderUI;
var HeadingUI = (0, _styledComponents.default)(_Heading.default).withConfig({
  displayName: "Popovercss__HeadingUI",
  componentId: "sc-1nsatjh-3"
})(["color:", ";"], (0, _color.getColor)('charcoal.300'));
exports.HeadingUI = HeadingUI;
HeadingUI.defaultProps = {
  size: 'h4',
  weight: 400
};