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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"TreeSelect.module.cjs","names":[],"sources":["../../../src/components/TreeSelect/TreeSelect.module.css"],"sourcesContent":[".optionsWrapper {\n  --ts-level-offset: 20px;\n  --ts-line-width: rem(1px);\n  --ts-line-color: var(--mantine-color-default-border);\n  --ts-option-padding-y: 4px;\n  --ts-option-padding-x: 8px;\n}\n\n.option {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  position: relative;\n  padding: var(--ts-option-padding-y) var(--ts-option-padding-x);\n  padding-inline-start: var(--ts-option-padding-x);\n}\n\n.expandIcon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  --_ts-expand-icon-size: calc(1.45 * var(--combobox-option-fz, var(--mantine-font-size-sm)));\n  width: var(--_ts-expand-icon-size);\n  min-width: var(--_ts-expand-icon-size);\n  height: var(--_ts-expand-icon-size);\n  border-radius: var(--mantine-radius-sm);\n  cursor: pointer;\n  color: var(--mantine-color-dimmed);\n  transform: rotate(-90deg);\n\n  :where([data-combobox-selected]) & {\n    color: var(--mantine-color-white);\n  }\n\n  @mixin where-rtl {\n    transform: rotate(90deg);\n  }\n\n  &:where([data-expanded]) {\n    transform: rotate(0deg);\n  }\n\n  @mixin hover {\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\n.checkIcon {\n  opacity: 0.4;\n  width: 0.8em;\n  min-width: 0.8em;\n  height: 0.8em;\n  margin-inline-start: auto;\n\n  :where([data-combobox-selected]) & {\n    opacity: 1;\n  }\n}\n\n.label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Tree lines */\n.guideLine {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);\n  pointer-events: none;\n}\n\n.branchVertical {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 0;\n  border-inline-start: var(--ts-line-width) solid var(--ts-line-color);\n  pointer-events: none;\n\n  &:where([data-last]) {\n    bottom: auto;\n    height: 50%;\n  }\n}\n\n.branchHorizontal {\n  position: absolute;\n  top: 50%;\n  height: 0;\n  border-top: var(--ts-line-width) solid var(--ts-line-color);\n  pointer-events: none;\n}\n"],"mappings":""}