@catho/quantum
Version:
Catho react components
31 lines (30 loc) • 1.87 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _shared = require("../shared");
var ARROW_SIZE = '16px';
var SIDE_POSITION_X = -8;
var CENTER_POSITION = '50%';
var placementPosition = function placementPosition(_ref) {
var shadowColor = _ref.neutral[700];
return {
top: "\n content: '\u25BC\uFE0E';\n left: ".concat(CENTER_POSITION, ";\n text-shadow: 0px 8px 4px ").concat((0, _shared.hexToRgba)(shadowColor, 0.2), ";\n bottom: 0;\n transform: translateX(-").concat(CENTER_POSITION, ");\n "),
bottom: "\n top: -4px;\n content: '\u25B2\uFE0E';\n left: ".concat(CENTER_POSITION, ";\n text-shadow: 0px -3px 4px ").concat((0, _shared.hexToRgba)(shadowColor, 0.2), ";\n transform: translateX(-").concat(CENTER_POSITION, ");\n "),
right: "\n bottom: ".concat(CENTER_POSITION, ";\n content: '\u25C0\uFE0E';\n left: ").concat(SIDE_POSITION_X, "px;\n text-shadow: -4px 1px 4px ").concat((0, _shared.hexToRgba)(shadowColor, 0.2), ";\n "),
left: "\n bottom: ".concat(CENTER_POSITION, ";\n content: '\u25B6\uFE0E';\n right: ").concat(SIDE_POSITION_X, "px;\n text-shadow: 4px 1px 4px ").concat((0, _shared.hexToRgba)(shadowColor, 0.2), ";\n ")
};
};
var getArrow = function getArrow(_ref2) {
var placement = _ref2.placement,
skin = _ref2.skin,
_ref2$theme = _ref2.theme,
_ref2$theme$component = _ref2$theme.components.popover.skins[skin],
background = _ref2$theme$component.background,
text = _ref2$theme$component.text,
colors = _ref2$theme.colors,
inverted = _ref2.inverted;
return " color: ".concat(inverted ? text : background, ";\n font-size: ").concat(ARROW_SIZE, ";\n position: absolute;\n\n ").concat(placementPosition(colors)[placement], "\n");
};
var _default = exports["default"] = getArrow;