@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
87 lines (84 loc) • 2.23 kB
JavaScript
import { motion } from 'motion/react';
import styled, { css } from 'styled-components';
import { PopupAlignment } from '../../../types/popup';
export const StyledMotionPopupContentWrapper = styled(motion.div)`
background-color: ${_ref => {
let {
theme
} = _ref;
return theme['000'];
}};
border-radius: 3px;
box-shadow: 1px 3px 8px rgb(0 0 0 / 30%);
color: ${_ref2 => {
let {
theme
} = _ref2;
return theme.text;
}};
z-index: 100;
position: ${_ref3 => {
let {
$shouldScrollWithContent
} = _ref3;
return $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;
${_ref4 => {
let {
$position,
$offset
} = _ref4;
switch ($position) {
case PopupAlignment.TopLeft:
return css`
bottom: -7px;
right: ${13 + $offset}px;
transform: rotate(45deg);
`;
case PopupAlignment.BottomLeft:
return css`
top: -7px;
right: ${13 + $offset}px;
transform: rotate(225deg);
`;
case PopupAlignment.TopRight:
return css`
transform: rotate(45deg);
bottom: -7px;
left: ${13 + $offset}px;
`;
case PopupAlignment.BottomRight:
return 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