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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Splitter.module.cjs","names":[],"sources":["../../../src/components/Splitter/Splitter.module.css"],"sourcesContent":[".root {\n  display: flex;\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n}\n\n.pane {\n  flex-grow: 0;\n  flex-shrink: 1;\n  overflow: auto;\n}\n\n.handle {\n  flex: 0 0 var(--splitter-line-size, rem(2px));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  touch-action: none;\n  outline: none;\n  background-color: var(--splitter-handle-color, var(--mantine-color-body));\n\n  &:where([data-orientation='horizontal']) {\n    cursor: col-resize;\n  }\n\n  &:where([data-orientation='vertical']) {\n    cursor: row-resize;\n  }\n}\n\n.thumb {\n  position: absolute;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 1000px;\n  color: var(--mantine-color-dimmed);\n  transition: color 100ms ease;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border: rem(1px) solid var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border: rem(1px) solid var(--mantine-color-dark-4);\n  }\n\n  &:where([data-orientation='horizontal']) {\n    width: rem(12px);\n    height: rem(60px);\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: rem(60px);\n    height: rem(12px);\n  }\n\n  & > svg {\n    width: 100%;\n    height: 100%;\n  }\n\n  .handle:focus-visible & {\n    box-shadow: 0 0 0 rem(2px) var(--mantine-primary-color-filled);\n  }\n}\n"],"mappings":""}