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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Table.module.cjs","names":[],"sources":["../../../src/components/Table/Table.module.css"],"sourcesContent":[".table {\n  width: 100%;\n  border-collapse: collapse;\n  border-spacing: 0;\n  line-height: var(--mantine-line-height);\n  font-size: var(--mantine-font-size-sm);\n  table-layout: var(--table-layout, auto);\n  caption-side: var(--table-caption-side, bottom);\n  border: none;\n\n  @mixin where-light {\n    --table-hover-color: var(--mantine-color-gray-1);\n    --table-striped-color: var(--mantine-color-gray-0);\n    --table-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --table-hover-color: var(--mantine-color-dark-5);\n    --table-striped-color: var(--mantine-color-dark-6);\n    --table-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-with-table-border]) {\n    border: rem(1px) solid var(--table-border-color);\n  }\n\n  &:where([data-tabular-nums]) {\n    font-variant-numeric: tabular-nums;\n  }\n\n  &:where([data-variant='vertical']) :where(.th) {\n    font-weight: var(--mantine-font-weight-medium);\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-6);\n    }\n  }\n}\n\n.th {\n  text-align: left;\n\n  @mixin where-rtl {\n    text-align: right;\n  }\n}\n\n.tr {\n  border-bottom: none;\n  background-color: transparent;\n\n  @mixin hover {\n    &:where([data-hover]) {\n      background-color: var(--tr-hover-bg);\n    }\n  }\n\n  &:where([data-with-row-border]) {\n    border-bottom: rem(1px) solid var(--table-border-color);\n  }\n}\n\n.td,\n.th {\n  padding: var(--table-vertical-spacing) var(--table-horizontal-spacing, var(--mantine-spacing-xs));\n\n  &:where([data-with-column-border]:not(:first-child)) {\n    border-inline-start: rem(1px) solid var(--table-border-color);\n  }\n\n  &:where([data-with-column-border]:not(:last-child)) {\n    border-inline-end: rem(1px) solid var(--table-border-color);\n  }\n}\n\n.tbody {\n  & > :where(tr) {\n    &:where([data-with-row-border]:last-of-type) {\n      border-bottom: none;\n    }\n\n    &:where([data-striped='odd']:nth-of-type(odd)) {\n      background-color: var(--table-striped-color);\n    }\n\n    &:where([data-striped='even']:nth-of-type(even)) {\n      background-color: var(--table-striped-color);\n    }\n\n    &[data-hover] {\n      --tr-hover-bg: var(--table-highlight-on-hover-color, var(--table-hover-color));\n    }\n  }\n}\n\n.thead {\n  top: var(--table-sticky-header-offset, 0);\n  z-index: 3;\n\n  &:where([data-sticky]) {\n    position: sticky;\n\n    & :where(.th) {\n      position: sticky;\n      top: var(--table-sticky-header-offset, 0);\n      background-color: var(--mantine-color-body);\n    }\n  }\n}\n\n:where([data-with-table-border]) .thead[data-sticky] {\n  position: sticky;\n  top: var(--table-sticky-header-offset, 0);\n  z-index: 4;\n  border-top: none;\n}\n\n:where([data-with-table-border]) .thead[data-sticky]::before {\n  content: '';\n  display: block;\n  position: absolute;\n  left: 0;\n  top: -0.5px;\n  width: 100%;\n  height: 1px;\n  background-color: var(--table-border-color);\n  z-index: 5;\n}\n\n:where([data-with-table-border]) .thead[data-sticky] .th:first-child {\n  border-top: none;\n}\n\n.caption {\n  color: var(--mantine-color-dimmed);\n\n  &:where([data-side='top']) {\n    margin-bottom: var(--mantine-spacing-xs);\n  }\n\n  &:where([data-side='bottom']) {\n    margin-top: var(--mantine-spacing-xs);\n  }\n}\n\n.scrollContainer {\n  overflow-x: var(--table-overflow);\n}\n\n.scrollContainerInner {\n  min-width: var(--table-min-width);\n  max-height: var(--table-max-height);\n}\n"],"mappings":""}