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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Scroller.module.cjs","names":[],"sources":["../../../src/components/Scroller/Scroller.module.css"],"sourcesContent":[".root {\n  --scroller-control-size: 50px;\n  --scroller-background-color: var(--mantine-color-body);\n\n  display: flex;\n  align-items: center;\n  position: relative;\n  overflow: hidden;\n  max-width: 100%;\n}\n\n.container {\n  flex: 1;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  user-select: none;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &[data-draggable] {\n    cursor: grab;\n  }\n}\n\n.content {\n  display: inline-flex;\n  white-space: nowrap;\n}\n\n.chevron {\n  width: var(--scroller-control-size);\n  height: var(--scroller-control-size);\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--scroller-control-size);\n  z-index: 1;\n  color: var(--mantine-color-dimmed);\n  opacity: 1;\n  pointer-events: auto;\n  transition:\n    opacity 200ms ease,\n    color 150ms ease;\n\n  &:hover {\n    color: var(--mantine-color-text);\n  }\n\n  &:where([data-position='start']) {\n    inset-inline-start: 0;\n    background: linear-gradient(to right, var(--scroller-background-color) 40%, transparent);\n    justify-content: flex-start;\n\n    & .chevron {\n      transform: rotate(90deg);\n    }\n  }\n\n  &:where([data-position='end']) {\n    inset-inline-end: 0;\n    background: linear-gradient(to left, var(--scroller-background-color) 40%, transparent);\n    justify-content: flex-end;\n\n    & .chevron {\n      transform: rotate(-90deg);\n    }\n  }\n\n  &:where([data-hidden]) {\n    opacity: 0;\n    pointer-events: none;\n  }\n}\n"],"mappings":""}