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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Tree.module.cjs","names":[],"sources":["../../../src/components/Tree/Tree.module.css"],"sourcesContent":[".root {\n  --level-offset: var(--mantine-spacing-lg);\n  --tree-line-width: rem(1px);\n  --tree-line-color: var(--mantine-color-default-border);\n  margin: 0;\n  padding: 0;\n  user-select: none;\n}\n\n.subtree {\n  margin: 0;\n  padding: 0;\n}\n\n.node {\n  cursor: pointer;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: 0;\n\n  &:focus-visible {\n    > .label {\n      outline: 2px solid var(--mantine-primary-color-filled);\n      outline-offset: 2px;\n    }\n  }\n}\n\n.label {\n  position: relative;\n  padding-inline-start: var(--label-offset);\n\n  &:where([data-selected]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.4;\n  }\n\n  &:where([data-drag-over='before'])::before {\n    content: '';\n    position: absolute;\n    top: -1px;\n    inset-inline-start: var(--label-offset, 0);\n    inset-inline-end: 0;\n    height: 2px;\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='after'])::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    inset-inline-start: var(--label-offset, 0);\n    inset-inline-end: 0;\n    height: 2px;\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='inside']) {\n    background-color: var(--mantine-primary-color-light);\n  }\n}\n\n:where([data-with-lines]) {\n  .node {\n    position: relative;\n  }\n\n  .subtree > .node {\n    &::before {\n      content: '';\n      position: absolute;\n      top: rem(12px);\n      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n      width: calc(var(--level-offset) / 2);\n      height: 0;\n      border-top: var(--tree-line-width) solid var(--tree-line-color);\n      pointer-events: none;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n      width: 0;\n      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);\n      pointer-events: none;\n    }\n\n    &:last-child::after {\n      bottom: auto;\n      height: rem(12px);\n    }\n  }\n}\n"],"mappings":""}