@mantine/core/esm/components/Modal/Modal.styles.js

React components library focused on usability, accessibility and developer experience

import { createMemoStyles } from '../../theme/create-memo-styles.js';
import { getSizeValue } from '../../theme/utils/get-size-value/get-size-value.js';

const sizes = {
  xs: 320,
  sm: 380,
  md: 440,
  lg: 620,
  xl: 780,
  full: "100%"
};
var useStyles = createMemoStyles({
  root: {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },
  inner: ({ theme }) => ({
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    overflowY: "auto",
    padding: [theme.spacing.xl * 2, theme.spacing.md],
    display: "flex",
    justifyContent: "center",
    alignItems: "flex-start"
  }),
  title: ({ theme }) => ({
    marginRight: theme.spacing.md,
    textOverflow: "ellipsis",
    display: "block",
    wordBreak: "break-word"
  }),
  modal: ({ theme, size }) => ({
    width: getSizeValue({ sizes, size }),
    padding: theme.spacing.lg,
    outline: 0,
    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white
  }),
  header: ({ theme }) => ({
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    marginBottom: theme.spacing.md,
    marginRight: -9
  }),
  body: ({ overflow }) => ({
    maxHeight: overflow === "inside" && "calc(100vh - 185px)",
    overflowY: overflow === "inside" && "auto",
    wordBreak: "break-word"
  })
});

export default useStyles;
export { sizes };
//# sourceMappingURL=Modal.styles.js.map