59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
export const clickmapStyles = {
|
|
overlayStyle: ({ height, width, scale }: { height: string, width: string, scale: number }) => ({
|
|
transform: `scale(${scale})`,
|
|
position: 'absolute',
|
|
top: '0px',
|
|
left: '0px',
|
|
width: width,
|
|
height: height,
|
|
background: 'rgba(0,0,0, 0.15)',
|
|
zIndex: 9 * 10e3,
|
|
transformOrigin: 'left top',
|
|
}),
|
|
totalClicks: {
|
|
fontSize: '16px',
|
|
fontWeight: '600',
|
|
},
|
|
bubbleContainer: ({ top, left }: { top: number; left: number }) => ({
|
|
position: 'absolute',
|
|
top: top + 'px',
|
|
left: left + 'px',
|
|
padding: '10px',
|
|
borderRadius: '6px',
|
|
background: 'white',
|
|
border: '1px solid rgba(0, 0, 0, 0.12)',
|
|
boxShadow: '0px 2px 10px 2px rgba(0,0,0,0.5)',
|
|
transform: `translate(-25%, -110%)`,
|
|
textAlign: 'center',
|
|
visibility: 'hidden',
|
|
}),
|
|
highlight: ({
|
|
width,
|
|
height,
|
|
top,
|
|
left,
|
|
}: {
|
|
width: number;
|
|
height: number;
|
|
top: number;
|
|
left: number;
|
|
}) => ({
|
|
width: width + 'px',
|
|
height: height + 'px',
|
|
border: '2px dotted red',
|
|
cursor: 'pointer',
|
|
top: top + 'px',
|
|
left: left + 'px',
|
|
position: 'absolute',
|
|
}),
|
|
clicks: {
|
|
top: 0,
|
|
left: 0,
|
|
position: 'absolute',
|
|
borderRadius: '999px',
|
|
padding: '6px',
|
|
background: 'white',
|
|
lineHeight: '0.5',
|
|
transform: 'translate(-70%, -70%)',
|
|
},
|
|
};
|