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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Checkbox.module.cjs","names":[],"sources":["../../../src/components/Checkbox/Checkbox.module.css"],"sourcesContent":[".root {\n  --checkbox-size-xs: 16px;\n  --checkbox-size-sm: 20px;\n  --checkbox-size-md: 24px;\n  --checkbox-size-lg: 30px;\n  --checkbox-size-xl: 36px;\n\n  --checkbox-size: var(--checkbox-size-sm);\n  --checkbox-color: var(--mantine-primary-color-filled);\n\n  &:where([data-variant='filled']) {\n    --checkbox-icon-color: var(--mantine-color-white);\n  }\n\n  &:where([data-variant='outline']) {\n    --checkbox-icon-color: var(--checkbox-color);\n  }\n}\n\n.inner {\n  position: relative;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  order: 1;\n\n  &:where([data-label-position='left']) {\n    order: 2;\n  }\n}\n\n.input {\n  appearance: none;\n  border: 1px solid transparent;\n  width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  border-radius: var(--checkbox-radius, var(--mantine-radius-default));\n  padding: 0;\n  display: block;\n  margin: 0;\n  transition:\n    border-color 100ms ease,\n    background-color 100ms ease;\n  cursor: var(--mantine-cursor-type);\n  -webkit-tap-highlight-color: transparent;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-white);\n    border-color: var(--mantine-color-gray-4);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-6);\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-with-error-styles][data-error]) {\n    border-color: var(--mantine-color-error);\n  }\n\n  &[data-indeterminate],\n  &:checked {\n    background-color: var(--checkbox-color);\n    border-color: var(--checkbox-color);\n\n    & + .icon {\n      opacity: 1;\n      transform: none;\n    }\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: var(--mantine-color-disabled-border);\n    background-color: var(--mantine-color-disabled);\n\n    & + .icon {\n      color: var(--mantine-color-disabled-color);\n    }\n  }\n}\n\n.input--outline {\n  & + .icon {\n    color: var(--checkbox-color);\n  }\n\n  &[data-indeterminate]:not(:disabled),\n  &:checked:not(:disabled) {\n    background-color: transparent;\n    border-color: var(--checkbox-color);\n\n    & + .icon {\n      color: var(--checkbox-icon-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  position: absolute;\n  inset: 0;\n  width: 60%;\n  margin: auto;\n  color: var(--checkbox-icon-color);\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 0;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}