UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

62 lines (57 loc) 1.98 kB
'use strict'; 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