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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"NumberInput.module.cjs","names":[],"sources":["../../../src/components/NumberInput/NumberInput.module.css"],"sourcesContent":[".root {\n  --ni-right-section-width-xs: 17px;\n  --ni-right-section-width-sm: 24px;\n  --ni-right-section-width-md: 27px;\n  --ni-right-section-width-lg: 31px;\n  --ni-right-section-width-xl: 34px;\n}\n\n.controls {\n  --ni-chevron-size-xs: 10px;\n  --ni-chevron-size-sm: 14px;\n  --ni-chevron-size-md: 16px;\n  --ni-chevron-size-lg: 18px;\n  --ni-chevron-size-xl: 20px;\n  --ni-chevron-size: var(--ni-chevron-size-sm);\n\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: calc(var(--input-height) - rem(2px));\n  max-width: calc(var(--ni-chevron-size) * 1.7);\n  margin-inline-start: auto;\n}\n\n.control {\n  --control-border: 1px solid var(--input-bd);\n  --control-radius: calc(var(--input-radius) - rem(1px));\n\n  flex: 0 0 50%;\n  width: 100%;\n  padding: 0;\n  height: calc(var(--input-height) / 2 - rem(1px));\n  border-inline-start: var(--control-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mantine-color-text);\n  background-color: transparent;\n  cursor: pointer;\n\n  &:where(:disabled) {\n    background-color: transparent;\n    cursor: not-allowed;\n    opacity: 0.6;\n    color: var(--mantine-color-disabled-color);\n  }\n\n  .root[data-error] :where(&) {\n    color: var(--mantine-color-error);\n  }\n\n  @mixin hover {\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-4);\n    }\n  }\n\n  &:where(:first-of-type) {\n    border-radius: 0;\n    border-start-end-radius: var(--control-radius);\n  }\n\n  &:last-of-type {\n    border-radius: 0;\n    border-end-end-radius: var(--control-radius);\n  }\n}\n"],"mappings":""}