@mantine/core/cjs/components/Modal/Modal.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Modal.module.cjs","names":[],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":[".root {\n  --modal-size-xs: 320px;\n  --modal-size-sm: 380px;\n  --modal-size-md: 440px;\n  --modal-size-lg: 620px;\n  --modal-size-xl: 780px;\n  --modal-size: var(--modal-size-md);\n\n  --modal-y-offset: 5dvh;\n  --modal-x-offset: 5vw;\n\n  &[data-full-screen] {\n    --modal-border-radius: 0 !important;\n\n    .content {\n      --modal-content-flex: 0 0 100%;\n      --modal-content-max-height: auto;\n      --modal-content-height: 100dvh;\n    }\n\n    .inner {\n      --modal-inner-y-offset: 0;\n      --modal-inner-x-offset: 0;\n    }\n  }\n\n  &[data-centered] {\n    .inner {\n      --modal-inner-align: center;\n    }\n  }\n}\n\n.header {\n  border-start-start-radius: var(--modal-radius, var(--mantine-radius-default));\n  border-start-end-radius: var(--modal-radius, var(--mantine-radius-default));\n}\n\n.content {\n  flex: var(--modal-content-flex, 0 0 var(--modal-size));\n  max-width: 100%;\n  max-height: var(--modal-content-max-height, calc(100dvh - var(--modal-y-offset) * 2));\n  height: var(--modal-content-height, auto);\n  overflow-y: auto;\n\n  &[data-full-screen] {\n    border-radius: 0;\n  }\n\n  &[data-hidden] {\n    opacity: 0 !important;\n    pointer-events: none;\n  }\n}\n\n.inner {\n  display: flex;\n  justify-content: center;\n  align-items: var(--modal-inner-align, flex-start);\n  padding-top: var(--modal-inner-y-offset, var(--modal-y-offset));\n  padding-bottom: var(--modal-inner-y-offset, var(--modal-y-offset));\n  padding-inline: var(--modal-inner-x-offset, var(--modal-x-offset));\n}\n"],"mappings":""}