@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
62 lines (57 loc) • 1.98 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var createMemoStyles = require('../../theme/create-memo-styles.js');
var getSizeValue = require('../../theme/utils/get-size-value/get-size-value.js');
var useStyles = createMemoStyles.createMemoStyles({
title: {},
root: {
position: "relative",
display: "inline-block"
},
wrapper: {
background: "transparent",
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
pointerEvents: "none"
},
popover: ({ theme, radius }) => ({
position: "absolute",
background: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
pointerEvents: "all",
borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius })
}),
arrow: ({ theme }) => ({
border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
background: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
zIndex: 1
}),
body: ({ theme, radius, shadow }) => ({
border: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[2]}`,
boxShadow: shadow in theme.shadows ? theme.shadows[shadow] : shadow,
borderRadius: getSizeValue.getSizeValue({ size: radius, sizes: theme.radius })
}),
inner: ({ theme, spacing }) => ({
padding: getSizeValue.getSizeValue({ size: spacing, sizes: theme.spacing })
}),
header: ({ theme, spacing }) => ({
borderBottom: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.colors.gray[2]}`,
padding: [theme.spacing.xs / 1.5, getSizeValue.getSizeValue({ size: spacing, sizes: theme.spacing })],
display: "flex",
alignItems: "center",
justifyContent: "space-between"
}),
target: {
zIndex: 1
},
close: {
position: "absolute",
top: 7,
zIndex: 2,
right: 10
}
});
exports.default = useStyles;
//# sourceMappingURL=Popover.styles.js.map