@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
84 lines (80 loc) • 3.04 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.StyledMotionPopupContentWrapper = void 0;
var _react = require("motion/react");
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _popup = require("../../../types/popup");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const StyledMotionPopupContentWrapper = exports.StyledMotionPopupContentWrapper = (0, _styledComponents.default)(_react.motion.div)`
background-color: ${({
theme
}) => theme['000']};
border-radius: 3px;
box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
color: ${({
theme
}) => theme.text};
z-index: 100;
position: ${({
$shouldScrollWithContent
}) => $shouldScrollWithContent ? 'absolute' : 'fixed'};
pointer-events: all;
&::after {
background-color: inherit;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
border-right: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 2px 2px 8px rgb(4 3 4 / 10%);
content: '';
height: 14px;
position: absolute;
width: 14px;
z-index: -2;
${({
$position,
$offset
}) => {
switch ($position) {
case _popup.PopupAlignment.TopLeft:
return (0, _styledComponents.css)`
bottom: -7px;
right: ${13 + $offset}px;
transform: rotate(45deg);
`;
case _popup.PopupAlignment.BottomLeft:
return (0, _styledComponents.css)`
top: -7px;
right: ${13 + $offset}px;
transform: rotate(225deg);
`;
case _popup.PopupAlignment.TopRight:
return (0, _styledComponents.css)`
transform: rotate(45deg);
bottom: -7px;
left: ${13 + $offset}px;
`;
case _popup.PopupAlignment.BottomRight:
return (0, _styledComponents.css)`
transform: rotate(225deg);
top: -7px;
left: ${13 + $offset}px;
`;
default:
return undefined;
}
}}
}
&::before {
background-color: inherit;
border-radius: 3px;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: -1;
}
`;
//# sourceMappingURL=PopupContentWrapper.styles.js.map