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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"AngleSlider.module.cjs","names":[],"sources":["../../../src/components/AngleSlider/AngleSlider.module.css"],"sourcesContent":[".root {\n  width: var(--slider-size);\n  height: var(--slider-size);\n  position: relative;\n  border-radius: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  user-select: none;\n\n  &:focus-within {\n    outline: 2px solid var(--mantine-primary-color-filled);\n    outline-offset: 2px;\n  }\n\n  --slider-size: 60px;\n  --thumb-size: calc(var(--slider-size) / 5);\n\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.marks {\n  position: absolute;\n  inset: 1px;\n  border-radius: var(--slider-size);\n  pointer-events: none;\n}\n\n.mark {\n  width: 2px;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: calc(50% - 1px);\n  transform: rotate(var(--angle));\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: calc(var(--thumb-size) / 3);\n    left: 0.5px;\n    width: 1px;\n    height: calc(var(--thumb-size) / 1.5);\n    transform: translate(-50%, -50%);\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-4);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-3);\n    }\n  }\n\n  &[data-label]::after {\n    min-width: 18px;\n    text-align: center;\n    content: attr(data-label);\n    position: absolute;\n    top: -24px;\n    left: -7px;\n    transform: rotate(calc(360deg - var(--angle)));\n    font-size: var(--mantine-font-size-xs);\n  }\n}\n\n.thumb {\n  position: absolute;\n  inset-block: 0;\n  inset-inline-start: calc(50% - 1.5px);\n  inset-inline-end: 0;\n  height: 100%;\n  width: 3px;\n  outline: none;\n  pointer-events: none;\n\n  &::before {\n    content: '';\n    position: absolute;\n    right: 0;\n    top: 0;\n    height: min(var(--thumb-size), calc(var(--slider-size) / 2));\n    width: 3px;\n\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-7);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-1);\n    }\n  }\n}\n\n.label {\n  font-size: var(--mantine-font-size-xs);\n}\n"],"mappings":""}