calcite-react/Tooltip/Tooltip-styled.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StyledTooltipArrow = exports.StyledTooltip = exports.StyledTargetWrapper = void 0;

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

var _helpers = require("../utils/helpers");

var _CalciteThemeProvider = require("../CalciteThemeProvider");

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

// Copyright 2019 Esri
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
// http://www.apache.org/licenses/LICENSE-2.0
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.​
// styled-components
// Utils, common elements
// Calcite theme and Esri colors
// Calcite components
// Icons
// Third party libraries
var StyledTargetWrapper = _styledComponents.default.div.withConfig({
  displayName: "StyledTargetWrapper",
  componentId: "a2ziyz-0"
})(["display:inline-block;"]);

exports.StyledTargetWrapper = StyledTargetWrapper;
StyledTargetWrapper.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTooltip = _styledComponents.default.div.withConfig({
  displayName: "StyledTooltip",
  componentId: "a2ziyz-1"
})(["padding:", " ", ";", ";color:", ";text-align:center;background:", ";border-radius:", ";max-width:400px;opacity:0;transition:opacity ", "ms cubic-bezier(0.4,0,0.2,1);pointer-events:none;z-index:2000;&[data-placement^='top']{margin-bottom:8px;}&[data-placement^='bottom']{margin-top:8px;}&[data-placement^='right']{margin-left:8px;}&[data-placement^='left']{margin-right:8px;}&[data-x-out-of-boundaries]{display:none;}", ";", ";iframe{border:none;}"], function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 3, '/');
}, function (props) {
  return (0, _helpers.unitCalc)(props.theme.baseline, 2, '/');
}, (0, _helpers.fontSize)(-2), function (props) {
  return props.theme.palette.white;
}, function (props) {
  return props.theme.tooltipBackgroundColor;
}, function (props) {
  return props.theme.tooltipBorderRadius;
}, function (props) {
  return props.transitionDuration;
}, function (props) {
  return props.transitionState === 'entering' && (0, _styledComponents.css)(["opacity:0;"]);
}, function (props) {
  return props.transitionState === 'entered' && (0, _styledComponents.css)(["opacity:1;"]);
});

exports.StyledTooltip = StyledTooltip;
StyledTooltip.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};

var StyledTooltipArrow = _styledComponents.default.div.withConfig({
  displayName: "StyledTooltipArrow",
  componentId: "a2ziyz-2"
})(["width:0;height:0;border-style:solid;position:absolute;margin:0;&[data-placement^='top']{border-width:5px 5px 0 5px;border-color:", " transparent transparent transparent;bottom:-5px;}&[data-placement^='bottom']{border-width:0 5px 5px 5px;border-color:transparent transparent ", " transparent;top:-5px;}&[data-placement^='right']{border-width:5px 5px 5px 0;border-color:transparent ", " transparent transparent;left:-5px;}&[data-placement^='left']{border-width:5px 0 5px 5px;border-color:transparent transparent transparent ", ";right:-5px;}"], function (props) {
  return props.theme.tooltipBackgroundColor;
}, function (props) {
  return props.theme.tooltipBackgroundColor;
}, function (props) {
  return props.theme.tooltipBackgroundColor;
}, function (props) {
  return props.theme.tooltipBackgroundColor;
});

exports.StyledTooltipArrow = StyledTooltipArrow;
StyledTooltipArrow.defaultProps = {
  theme: _CalciteThemeProvider.CalciteTheme
};