@mantine/core/esm/components/EmptyState/EmptyState.module.mjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"EmptyState.module.mjs","names":[],"sources":["../../../src/components/EmptyState/EmptyState.module.css"],"sourcesContent":[".root {\n  --empty-state-indicator-size-xs: 32px;\n  --empty-state-indicator-size-sm: 40px;\n  --empty-state-indicator-size-md: 48px;\n  --empty-state-indicator-size-lg: 60px;\n  --empty-state-indicator-size-xl: 72px;\n\n  --empty-state-gap-xs: 6px;\n  --empty-state-gap-sm: 8px;\n  --empty-state-gap-md: 10px;\n  --empty-state-gap-lg: 12px;\n  --empty-state-gap-xl: 16px;\n\n  --empty-state-title-fz-xs: var(--mantine-font-size-sm);\n  --empty-state-title-fz-sm: var(--mantine-font-size-md);\n  --empty-state-title-fz-md: var(--mantine-font-size-lg);\n  --empty-state-title-fz-lg: var(--mantine-font-size-xl);\n  --empty-state-title-fz-xl: calc(var(--mantine-font-size-xl) * 1.2);\n\n  --empty-state-description-fz-xs: var(--mantine-font-size-xs);\n  --empty-state-description-fz-sm: var(--mantine-font-size-sm);\n  --empty-state-description-fz-md: var(--mantine-font-size-sm);\n  --empty-state-description-fz-lg: var(--mantine-font-size-md);\n  --empty-state-description-fz-xl: var(--mantine-font-size-lg);\n\n  display: flex;\n  gap: var(--empty-state-gap, var(--empty-state-gap-md));\n\n  &[data-align='center'] {\n    flex-direction: column;\n    align-items: center;\n  }\n\n  &[data-align='left'] {\n    flex-direction: row;\n    align-items: flex-start;\n  }\n\n  &[data-align='right'] {\n    flex-direction: row-reverse;\n    align-items: flex-start;\n  }\n}\n\n.body {\n  display: flex;\n  flex-direction: column;\n  gap: var(--empty-state-gap, var(--empty-state-gap-md));\n  min-width: 0;\n\n  [data-align='center'] > & {\n    align-items: center;\n    text-align: center;\n  }\n\n  [data-align='left'] > & {\n    align-items: flex-start;\n    text-align: left;\n  }\n\n  [data-align='right'] > & {\n    align-items: flex-end;\n    text-align: right;\n  }\n}\n\n.indicator {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  color: var(--empty-state-indicator-color, var(--mantine-color-dimmed));\n  font-size: var(--empty-state-indicator-size, var(--empty-state-indicator-size-md));\n  line-height: 1;\n\n  & > svg {\n    width: 1em;\n    height: 1em;\n  }\n\n  &[data-with-background] {\n    @mixin light {\n      --empty-state-indicator-default-bg: var(--mantine-color-gray-1);\n    }\n\n    @mixin dark {\n      --empty-state-indicator-default-bg: var(--mantine-color-dark-6);\n    }\n\n    width: 2em;\n    height: 2em;\n    border-radius: 1000px;\n    background-color: var(--empty-state-indicator-bg, var(--empty-state-indicator-default-bg));\n  }\n}\n\n.title {\n  font-size: var(--empty-state-title-fz, var(--empty-state-title-fz-md));\n  font-weight: 600;\n  line-height: 1.3;\n  color: var(--mantine-color-bright);\n  margin: 0;\n  text-wrap: balance;\n}\n\n.description {\n  font-size: var(--empty-state-description-fz, var(--empty-state-description-fz-md));\n  line-height: 1.55;\n  color: var(--mantine-color-dimmed);\n  margin: 0;\n  max-width: 32rem;\n  text-wrap: pretty;\n}\n\n.actions {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: var(--mantine-spacing-sm);\n}\n"],"mappings":""}