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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Typography.module.cjs","names":[],"sources":["../../../src/components/Typography/Typography.module.css"],"sourcesContent":[".root {\n  & :first-child {\n    margin-top: 0;\n  }\n\n  & :last-child {\n    margin-bottom: 0;\n  }\n\n  & :where(h1, h2, h3, h4, h5, h6) {\n    margin-bottom: var(--mantine-spacing-xs);\n    text-wrap: var(--mantine-heading-text-wrap);\n    font-family: var(--mantine-font-family-headings);\n  }\n\n  & :where(h1) {\n    margin-top: calc(1.5 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h1-font-size);\n    line-height: var(--mantine-h1-line-height);\n    font-weight: var(--mantine-h1-font-weight);\n  }\n\n  & :where(h2) {\n    margin-top: var(--mantine-spacing-xl);\n    font-size: var(--mantine-h2-font-size);\n    line-height: var(--mantine-h2-line-height);\n    font-weight: var(--mantine-h2-font-weight);\n  }\n\n  & :where(h3) {\n    margin-top: calc(0.8 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h3-font-size);\n    line-height: var(--mantine-h3-line-height);\n    font-weight: var(--mantine-h3-font-weight);\n  }\n\n  & :where(h4) {\n    margin-top: calc(0.8 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h4-font-size);\n    line-height: var(--mantine-h4-line-height);\n    font-weight: var(--mantine-h4-font-weight);\n  }\n\n  & :where(h5) {\n    margin-top: calc(0.5 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h5-font-size);\n    line-height: var(--mantine-h5-line-height);\n    font-weight: var(--mantine-h5-font-weight);\n  }\n\n  & :where(h6) {\n    margin-top: calc(0.5 * var(--mantine-spacing-xl));\n    font-size: var(--mantine-h6-font-size);\n    line-height: var(--mantine-h6-line-height);\n    font-weight: var(--mantine-h6-font-weight);\n  }\n\n  & :where(img) {\n    max-width: 100%;\n    margin-bottom: var(--mantine-spacing-xs);\n  }\n\n  & :where(p) {\n    margin-top: 0;\n    margin-bottom: var(--mantine-spacing-lg);\n  }\n\n  & :where(mark) {\n    @mixin where-light {\n      background-color: var(--mantine-color-yellow-2);\n      color: inherit;\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-yellow-5);\n      color: var(--mantine-color-black);\n    }\n  }\n\n  & :where(a) {\n    color: var(--mantine-color-anchor);\n    text-decoration: none;\n\n    @mixin hover {\n      text-decoration: underline;\n    }\n  }\n\n  & :where(hr) {\n    margin-top: var(--mantine-spacing-md);\n    margin-bottom: var(--mantine-spacing-md);\n    border: 0;\n    border-top: 1px solid;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-3);\n    }\n  }\n\n  & :where(pre) {\n    padding: var(--mantine-spacing-xs);\n    line-height: var(--mantine-line-height);\n    margin: 0;\n    margin-top: var(--mantine-spacing-md);\n    margin-bottom: var(--mantine-spacing-md);\n    overflow-x: auto;\n    font-family: var(--mantine-font-family-monospace);\n    font-size: var(--mantine-font-size-xs);\n    border-radius: var(--mantine-radius-sm);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n    }\n\n    & :where(code) {\n      background-color: transparent;\n      padding: 0;\n      border-radius: 0;\n      color: inherit;\n      border: 0;\n    }\n  }\n\n  & :where(kbd) {\n    --kbd-fz: 12px;\n    --kbd-padding: 3px 5px;\n\n    font-family: var(--mantine-font-family-monospace);\n    line-height: var(--mantine-line-height);\n    font-weight: var(--mantine-font-weight-bold);\n    padding: var(--kbd-padding);\n    font-size: var(--kbd-fz);\n    border-radius: var(--mantine-radius-sm);\n    border: 1px solid;\n    border-bottom-width: 3px;\n\n    @mixin where-light {\n      border-color: var(--mantine-color-gray-3);\n      color: var(--mantine-color-gray-7);\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      border-color: var(--mantine-color-dark-3);\n      color: var(--mantine-color-dark-0);\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  & :where(code) {\n    line-height: var(--mantine-line-height);\n    padding: 1px 5px;\n    border-radius: var(--mantine-radius-sm);\n    font-family: var(--mantine-font-family-monospace);\n    font-size: var(--mantine-font-size-xs);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n      color: var(--mantine-color-black);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n      color: var(--mantine-color-white);\n    }\n  }\n\n  & :where(ul, ol):not([data-type='taskList']) {\n    margin-bottom: var(--mantine-spacing-md);\n    padding-inline-start: var(--mantine-spacing-xl);\n    list-style-position: outside;\n  }\n\n  & :where(table) {\n    width: 100%;\n    border-collapse: collapse;\n    caption-side: bottom;\n    margin-bottom: var(--mantine-spacing-md);\n\n    @mixin where-light {\n      --table-border-color: var(--mantine-color-gray-3);\n    }\n\n    @mixin where-dark {\n      --table-border-color: var(--mantine-color-dark-4);\n    }\n\n    & :where(caption) {\n      margin-top: var(--mantine-spacing-xs);\n      font-size: var(--mantine-font-size-sm);\n      color: var(--mantine-color-dimmed);\n    }\n\n    & :where(th) {\n      text-align: left;\n      font-weight: bold;\n      font-size: var(--mantine-font-size-sm);\n      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n    }\n\n    & :where(thead th) {\n      border-bottom: 1px solid;\n      border-color: var(--table-border-color);\n    }\n\n    & :where(tfoot th) {\n      border-top: 1px solid;\n      border-color: var(--table-border-color);\n    }\n\n    & :where(td) {\n      padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n      border-bottom: 1px solid;\n      border-color: var(--table-border-color);\n      font-size: var(--mantine-font-size-sm);\n    }\n\n    & :where(tr:last-of-type td) {\n      border-bottom: 0;\n    }\n  }\n\n  & :where(blockquote) {\n    font-size: var(--mantine-font-size-lg);\n    line-height: var(--mantine-line-height);\n    margin: var(--mantine-spacing-md) 0;\n    border-radius: var(--mantine-radius-sm);\n    padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n    }\n  }\n}\n"],"mappings":""}