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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Pagination.module.cjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".root {\n  --pagination-control-size-xs: 22px;\n  --pagination-control-size-sm: 26px;\n  --pagination-control-size-md: 32px;\n  --pagination-control-size-lg: 38px;\n  --pagination-control-size-xl: 44px;\n\n  --pagination-control-size-input-xs: 30px;\n  --pagination-control-size-input-sm: 36px;\n  --pagination-control-size-input-md: 42px;\n  --pagination-control-size-input-lg: 50px;\n  --pagination-control-size-input-xl: 60px;\n\n  --pagination-control-size: var(--pagination-control-size-md);\n  --pagination-control-fz: var(--mantine-font-size-md);\n  --pagination-active-bg: var(--mantine-primary-color-filled);\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid;\n  cursor: pointer;\n  color: var(--mantine-color-text);\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  line-height: 1;\n  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));\n\n  &:where([data-with-padding]) {\n    padding: calc(var(--pagination-control-size) / 4);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n    background-color: var(--mantine-color-white);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-gray-0);\n      }\n    }\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    background-color: var(--mantine-color-dark-6);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--pagination-active-bg);\n    border-color: var(--pagination-active-bg);\n    color: var(--pagination-active-color, var(--mantine-color-white));\n\n    @mixin hover {\n      background-color: var(--pagination-active-bg);\n    }\n  }\n}\n\n.dots {\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n"],"mappings":""}