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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"NavLink.module.cjs","names":[],"sources":["../../../src/components/NavLink/NavLink.module.css"],"sourcesContent":[".root {\n  --nl-bg: var(--mantine-primary-color-light);\n  --nl-hover: var(--mantine-primary-color-light-hover);\n  --nl-color: var(--mantine-primary-color-light-color);\n\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 8px var(--mantine-spacing-sm);\n  user-select: none;\n\n  @mixin hover {\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  &:where([data-disabled]) {\n    opacity: 0.4;\n    pointer-events: none;\n  }\n\n  &:where([data-active], [aria-current='page']) {\n    background-color: var(--nl-bg);\n    color: var(--nl-color);\n\n    @mixin hover {\n      background-color: var(--nl-hover);\n    }\n\n    .description {\n      --description-opacity: 0.9;\n      --description-color: var(--nl-color);\n    }\n  }\n}\n\n.section {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 150ms ease;\n\n  & > svg {\n    display: block;\n  }\n\n  &:where([data-position='left']) {\n    margin-inline-end: var(--mantine-spacing-sm);\n  }\n\n  &:where([data-position='right']) {\n    margin-inline-start: var(--mantine-spacing-sm);\n  }\n\n  &:where([data-rotate]) {\n    transform: rotate(90deg);\n  }\n}\n\n.label {\n  font-size: var(--mantine-font-size-sm);\n}\n\n.body {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &:where([data-no-wrap]) {\n    white-space: nowrap;\n  }\n}\n\n.description {\n  display: block;\n  font-size: var(--mantine-font-size-xs);\n  opacity: var(--description-opacity, 1);\n  color: var(--description-color, var(--mantine-color-dimmed));\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  :where([data-no-wrap]) & {\n    white-space: nowrap;\n  }\n}\n\n.children {\n  padding-inline-start: var(--nl-offset, var(--mantine-spacing-lg));\n}\n\n.chevron {\n  transform: rotate(-90deg);\n}\n"],"mappings":""}