design-system-simplefi/build/src/components/Tooltip/TooltipPopup.js

Design System for SimpleFi Applications

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
var _a;
import styled, { css } from 'styled-components';
import { PortalPlacements } from '../../hooks/useCalculatePortalPlacements.enums';
import { createPaddingSpacing, getBorderRadius, getColor, getFontFamily, getFontSize, getLineHeight, } from '../../utils';
var bottomPlacement = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &::before {\n    transform: translate(-50%);\n    top: -8px;\n    left: 50%;\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent ", " transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    top: -4px;\n    left: 50%;\n    border-width: 0 4px 4px 4px;\n    border-color: transparent transparent ", " transparent;\n  }\n"], ["\n  &::before {\n    transform: translate(-50%);\n    top: -8px;\n    left: 50%;\n    border-width: 0 5px 5px 5px;\n    border-color: transparent transparent ", " transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    top: -4px;\n    left: 50%;\n    border-width: 0 4px 4px 4px;\n    border-color: transparent transparent ", " transparent;\n  }\n"])), getColor('midPurple'), getColor('white'));
var topPlacement = css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  &::before {\n    transform: translate(-50%);\n    bottom: -8px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    bottom: -5px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n"], ["\n  &::before {\n    transform: translate(-50%);\n    bottom: -8px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n\n  &::after {\n    transform: translate(-50%);\n    bottom: -5px;\n    left: 50%;\n    border-width: 5px 5px 0 5px;\n    border-color: ", " transparent transparent transparent;\n  }\n"])), getColor('midPurple'), getColor('white'));
var leftPlacement = css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -8px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -5px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n"], ["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -8px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    right: -5px;\n    border-width: 5px 0 5px 5px;\n    border-color: transparent transparent transparent ", ";\n  }\n"])), getColor('midPurple'), getColor('white'));
var rightPlacement = css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -8px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent ", " transparent transparent;\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -5px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #fff transparent transparent;\n  }\n"], ["\n  transform: translateY(50%);\n\n  &::before {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -8px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent ", " transparent transparent;\n  }\n\n  &::after {\n    transform: translateY(-50%);\n    top: 50%;\n    left: -5px;\n    border-width: 5px 5px 5px 0;\n    border-color: transparent #fff transparent transparent;\n  }\n"])), getColor('midPurple'));
var tooltipPlacements = (_a = {},
    _a[PortalPlacements.bottom] = bottomPlacement,
    _a[PortalPlacements.top] = topPlacement,
    _a[PortalPlacements.left] = leftPlacement,
    _a[PortalPlacements.right] = rightPlacement,
    _a);
var TooltipPopup = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: absolute;\n  ", ";\n  z-index: 5;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));\n  border-radius: ", ";\n  border: solid;\n  border-width: 3px;\n  border-color: ", ";\n  text-align: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  ", ";\n"], ["\n  position: absolute;\n  ", ";\n  z-index: 5;\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  line-height: ", ";\n  filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.25));\n  border-radius: ", ";\n  border: solid;\n  border-width: 3px;\n  border-color: ", ";\n  text-align: center;\n\n  &::before {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-style: solid;\n    transform: translate(-50%);\n  }\n\n  ", ";\n"])), createPaddingSpacing(0.5), getColor('white'), getColor('black'), getFontFamily('base'), getFontSize('md'), getLineHeight('md'), getBorderRadius, getColor('midPurple'), function (_a) {
    var $placement = _a.$placement;
    return tooltipPlacements[$placement];
});
export default TooltipPopup;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
//# sourceMappingURL=TooltipPopup.js.map