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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Slider.module.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n  --slider-size-xs: 4px;\n  --slider-size-sm: 6px;\n  --slider-size-md: 8px;\n  --slider-size-lg: 10px;\n  --slider-size-xl: 12px;\n\n  --slider-size: var(--slider-size-md);\n  --slider-radius: 1000px;\n  --slider-color: var(--mantine-primary-color-filled);\n  --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n  height: calc(var(--slider-size) * 2);\n  padding-inline: var(--slider-size);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  touch-action: none;\n  position: relative;\n\n  @mixin light {\n    --slider-track-bg: var(--mantine-color-gray-2);\n  }\n\n  @mixin dark {\n    --slider-track-bg: var(--mantine-color-dark-4);\n  }\n\n  &[data-orientation='vertical'] {\n    width: calc(var(--slider-size) * 2);\n    height: 200px;\n    padding-inline: 0;\n    padding-block: var(--slider-size);\n  }\n}\n\n.label {\n  position: absolute;\n  top: -36px;\n  font-size: var(--mantine-font-size-xs);\n  color: var(--mantine-color-white);\n  padding: calc(var(--mantine-spacing-xs) / 2);\n  border-radius: var(--mantine-radius-sm);\n  white-space: nowrap;\n  pointer-events: none;\n  user-select: none;\n  touch-action: none;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-9);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-4);\n  }\n\n  :where([data-orientation='vertical']) & {\n    top: auto;\n    inset-inline-start: calc(100% + 8px);\n  }\n}\n\n.thumb {\n  position: absolute;\n  display: flex;\n  height: var(--slider-thumb-size);\n  width: var(--slider-thumb-size);\n  border: 4px solid;\n  transform: translate(-50%, -50%);\n  top: 50%;\n  cursor: pointer;\n  border-radius: var(--slider-radius);\n  align-items: center;\n  justify-content: center;\n  transition:\n    box-shadow 100ms ease,\n    transform 100ms ease;\n  z-index: 3;\n  user-select: none;\n  touch-action: none;\n  outline-offset: 2px;\n  left: var(--slider-thumb-offset);\n\n  @mixin where-rtl {\n    left: auto;\n    right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n  }\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    display: none;\n  }\n\n  &:where([data-dragging]) {\n    transform: translate(-50%, -50%) scale(1.05);\n    box-shadow: var(--mantine-shadow-sm);\n  }\n\n  @mixin where-light {\n    color: var(--slider-color);\n    border-color: var(--slider-color);\n    background-color: var(--mantine-color-white);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-white);\n    border-color: var(--mantine-color-white);\n    background-color: var(--slider-color);\n  }\n\n  :where([data-orientation='vertical']) & {\n    left: 50%;\n    top: auto;\n    right: auto;\n    bottom: var(--slider-thumb-offset);\n    transform: translate(-50%, 50%);\n\n    &:where([data-dragging]) {\n      transform: translate(-50%, 50%) scale(1.05);\n    }\n\n    @mixin where-rtl {\n      left: 50%;\n      right: auto;\n    }\n  }\n}\n\n.trackContainer {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: calc(var(--slider-size) * 2);\n  cursor: pointer;\n\n  fieldset:disabled &,\n  &:where([data-disabled]) {\n    cursor: not-allowed;\n  }\n\n  :where([data-orientation='vertical']) & {\n    flex-direction: column;\n    width: calc(var(--slider-size) * 2);\n    height: 100%;\n  }\n}\n\n.track {\n  position: relative;\n  width: 100%;\n  height: var(--slider-size);\n\n  &:where([data-inverted]:not([data-disabled])) {\n    --track-bg: var(--slider-color);\n  }\n\n  fieldset:disabled &:where([data-inverted]),\n  &:where([data-inverted][data-disabled]) {\n    --track-bg: var(--slider-track-disabled-bg);\n  }\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    border-radius: var(--slider-radius);\n    inset-inline: calc(var(--slider-size) * -1);\n    background-color: var(--track-bg, var(--slider-track-bg));\n    z-index: 0;\n  }\n\n  :where([data-orientation='vertical']) & {\n    width: var(--slider-size);\n    height: 100%;\n\n    &::before {\n      inset-inline: 0;\n      top: calc(var(--slider-size) * -1);\n      bottom: calc(var(--slider-size) * -1);\n    }\n  }\n}\n\n.bar {\n  position: absolute;\n  z-index: 1;\n  top: 0;\n  bottom: 0;\n  background-color: var(--slider-color);\n  border-radius: var(--slider-radius);\n  width: var(--slider-bar-width);\n  inset-inline-start: var(--slider-bar-offset);\n\n  &:where([data-inverted]) {\n    background-color: var(--slider-track-bg);\n  }\n\n  fieldset:disabled &:where(:not([data-inverted])),\n  &:where([data-disabled]:not([data-inverted])) {\n    background-color: var(--mantine-color-disabled-color);\n  }\n\n  :where([data-orientation='vertical']) & {\n    top: auto;\n    bottom: var(--slider-bar-offset);\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--slider-bar-width);\n  }\n}\n\n.markWrapper {\n  position: absolute;\n  inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n  top: 0;\n  z-index: 2;\n  height: 0;\n  pointer-events: none;\n\n  :where([data-orientation='vertical']) & {\n    inset-inline-start: 0;\n    top: auto;\n    bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n    height: 0;\n    width: 0;\n  }\n}\n\n.mark {\n  border: 2px solid;\n  height: var(--slider-size);\n  width: var(--slider-size);\n  border-radius: 1000px;\n  background-color: var(--mantine-color-white);\n  pointer-events: none;\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-filled]) {\n    border-color: var(--slider-color);\n\n    &:where([data-disabled]) {\n      border-color: var(--mantine-color-disabled-border);\n    }\n  }\n}\n\n.markLabel {\n  transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n  font-size: var(--mantine-font-size-sm);\n  white-space: nowrap;\n  cursor: pointer;\n  user-select: none;\n\n  @mixin where-light {\n    color: var(--mantine-color-gray-6);\n  }\n\n  @mixin where-dark {\n    color: var(--mantine-color-dark-2);\n  }\n\n  :where([data-orientation='vertical']) & {\n    transform: translate(\n      calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n      calc(-50% - var(--slider-size) / 2)\n    );\n  }\n}\n"],"mappings":""}