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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ScrollArea.module.cjs","names":[],"sources":["../../../src/components/ScrollArea/ScrollArea.module.css"],"sourcesContent":[".root {\n  --scrollarea-scrollbar-size: 12px;\n\n  position: relative;\n  overflow: hidden;\n\n  &:where([data-autosize]) .content {\n    min-width: min-content;\n  }\n}\n\n.viewport {\n  scrollbar-width: none;\n  overscroll-behavior: var(--scrollarea-over-scroll-behavior);\n  -ms-overflow-style: none;\n  -webkit-overflow-scrolling: touch;\n  width: 100%;\n  height: 100%;\n\n  &::-webkit-scrollbar {\n    display: none;\n  }\n\n  &:where([data-scrollbars='xy'], [data-scrollbars='y']) {\n    &:where(\n      [data-offset-scrollbars='xy'],\n      [data-offset-scrollbars='y'],\n      [data-offset-scrollbars='present']\n    ) {\n      &:where([data-vertical-hidden]) {\n        padding-inline-end: 0;\n        padding-inline-start: 0;\n      }\n\n      &:not([data-vertical-hidden]) {\n        padding-inline-end: var(--scrollarea-scrollbar-size);\n        padding-inline-start: unset;\n      }\n    }\n  }\n\n  &:where([data-scrollbars='xy'], [data-scrollbars='x']) {\n    &:where(\n      [data-offset-scrollbars='xy'],\n      [data-offset-scrollbars='x'],\n      [data-offset-scrollbars='present']\n    ) {\n      &:where([data-horizontal-hidden]) {\n        padding-bottom: 0;\n      }\n\n      &:not([data-horizontal-hidden]) {\n        padding-bottom: var(--scrollarea-scrollbar-size);\n      }\n    }\n  }\n}\n\n.viewportInner {\n  min-width: 100%;\n  display: table;\n}\n\n.scrollbar {\n  user-select: none;\n  touch-action: none;\n  box-sizing: border-box;\n  transition:\n    background-color 150ms ease,\n    opacity 150ms ease;\n\n  padding: calc(var(--scrollarea-scrollbar-size) / 5);\n  display: flex;\n  background-color: transparent;\n  flex-direction: row;\n\n  @mixin hover {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-0);\n\n      & > .thumb {\n        background-color: rgba(0, 0, 0, 0.5);\n      }\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-8);\n\n      & > .thumb {\n        background-color: rgba(255, 255, 255, 0.5);\n      }\n    }\n  }\n\n  &:where([data-hidden], [data-state='hidden']) {\n    display: none;\n  }\n\n  &:where([data-orientation='vertical']) {\n    width: var(--scrollarea-scrollbar-size);\n    top: 0;\n    bottom: var(--sa-corner-width);\n    inset-inline-end: 0;\n  }\n\n  &:where([data-orientation='horizontal']) {\n    height: var(--scrollarea-scrollbar-size);\n    flex-direction: column;\n    bottom: 0;\n    inset-inline-start: 0;\n    inset-inline-end: var(--sa-corner-width);\n  }\n}\n\n.thumb {\n  flex: 1;\n  border-radius: var(--scrollarea-scrollbar-size);\n  position: relative;\n  transition: background-color 150ms ease;\n  overflow: hidden;\n  opacity: var(--thumb-opacity);\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 100%;\n    height: 100%;\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  @mixin where-light {\n    background-color: rgba(0, 0, 0, 0.4);\n  }\n\n  @mixin where-dark {\n    background-color: rgba(255, 255, 255, 0.4);\n  }\n}\n\n.corner {\n  position: absolute;\n  opacity: 0;\n  transition: opacity 150ms ease;\n  display: block;\n  inset-inline-end: 0;\n  bottom: 0;\n\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-8);\n  }\n\n  &:where([data-hovered]) {\n    opacity: 1;\n  }\n\n  &:where([data-hidden]) {\n    display: none;\n  }\n}\n\n.content {\n  min-width: 100%;\n}\n"],"mappings":""}