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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.TooltipAnimationUI = exports.TooltipUI = exports.ArrowUI = exports.TooltipTriggerUI = void 0;

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

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

var _KeyboardBadge = require("../KeyboardBadge/KeyboardBadge.css");

var TooltipTriggerUI = _styledComponents.default.span.withConfig({
  displayName: "Tooltipcss__TooltipTriggerUI",
  componentId: "cy3drn-0"
})(["display:", ";&:focus{outline:0;box-shadow:0 0 0 2px ", ";border-radius:3px;}"], function (_ref) {
  var display = _ref.display;
  return display ? display : 'inline-block';
}, (0, _color.getColor)('blue.500'));

exports.TooltipTriggerUI = TooltipTriggerUI;

var ArrowUI = _styledComponents.default.span.withConfig({
  displayName: "Tooltipcss__ArrowUI",
  componentId: "cy3drn-1"
})(["position:absolute;height:", "px;width:", "px;pointer-events:none;&:before{content:'';background-color:var(--TooltipBgColor);position:absolute;transform:rotate(45deg);height:calc(", "px - 4px);width:calc(", "px - 4px);margin:2px;left:0;}&.is-hidden{visibility:hidden;}"], function (_ref2) {
  var arrowSize = _ref2.arrowSize;
  return arrowSize;
}, function (_ref3) {
  var arrowSize = _ref3.arrowSize;
  return arrowSize;
}, function (_ref4) {
  var arrowSize = _ref4.arrowSize;
  return arrowSize;
}, function (_ref5) {
  var arrowSize = _ref5.arrowSize;
  return arrowSize;
});

exports.ArrowUI = ArrowUI;

var TooltipUI = _styledComponents.default.div.withConfig({
  displayName: "Tooltipcss__TooltipUI",
  componentId: "cy3drn-2"
})(["--TooltipBgColor:", ";box-sizing:border-box;font-family:var(--HSDSGlobalFontFamily);width:max-content;background-color:var(--TooltipBgColor);border-radius:4px;color:white;display:block;font-size:13px;padding:6px 8px;transition-property:transform,visibility,opacity;transition-duration:", "ms;transition-timing-function:ease-in-out;opacity:0;line-height:1.3;word-break:break-word;white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word;max-width:", "px;min-width:", "px;&.with-plain-title{padding:0;}.c-Tooltip__title{display:inline-block;padding:6px 8px;}&[data-placement^='top']{", "{bottom:calc((", "px / 2) * -1);}}&[data-placement^='bottom']{", "{top:calc((", "px / 2) * -1);}}&[data-placement^='left']{", "{right:calc((", "px / 2) * -1);}}&[data-placement^='right']{", "{left:calc((", "px / 2) * -1);}}&.with-badge{padding-left:10px;padding-right:6px;display:flex;align-items:center;text-align:left;", "{margin-left:8px;flex:0 0 auto;}}"], (0, _color.getColor)('charcoal.800'), function (_ref6) {
  var animationDuration = _ref6.animationDuration;
  return animationDuration;
}, function (_ref7) {
  var maxWidth = _ref7.maxWidth;
  return maxWidth || 300;
}, function (_ref8) {
  var minWidth = _ref8.minWidth;
  return minWidth || 20;
}, ArrowUI, function (_ref9) {
  var arrowSize = _ref9.arrowSize;
  return arrowSize;
}, ArrowUI, function (_ref10) {
  var arrowSize = _ref10.arrowSize;
  return arrowSize;
}, ArrowUI, function (_ref11) {
  var arrowSize = _ref11.arrowSize;
  return arrowSize;
}, ArrowUI, function (_ref12) {
  var arrowSize = _ref12.arrowSize;
  return arrowSize;
}, _KeyboardBadge.KeyboardBadgeUI);

exports.TooltipUI = TooltipUI;

var TooltipAnimationUI = _styledComponents.default.div.withConfig({
  displayName: "Tooltipcss__TooltipAnimationUI",
  componentId: "cy3drn-3"
})(["[data-placement^='top']{transform:translateY(12px);}[data-placement^='bottom']{transform:translateY(-12px);}[data-placement^='left']{transform:translateX(12px);}[data-placement^='right']{transform:translateX(-12px);}[data-entered='true']{transform:translate(0);opacity:1;}"]);

exports.TooltipAnimationUI = TooltipAnimationUI;