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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"CheckboxIndicator.module.cjs","names":[],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.module.css"],"sourcesContent":[".indicator {\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  position: relative;\n  border: 1px solid transparent;\n  width: var(--checkbox-size);\n  min-width: var(--checkbox-size);\n  height: var(--checkbox-size);\n  min-height: var(--checkbox-size);\n  border-radius: var(--checkbox-radius, var(--mantine-radius-default));\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  display: flex;\n  align-items: center;\n  justify-content: center;\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  &[data-indeterminate],\n  &[data-checked] {\n    background-color: var(--checkbox-color);\n    border-color: var(--checkbox-color);\n\n    & > .icon {\n      opacity: 1;\n      transform: none;\n      color: var(--checkbox-icon-color);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    border-color: var(--mantine-color-disabled-border);\n    background-color: var(--mantine-color-disabled);\n\n    &[data-checked] > .icon {\n      @mixin light {\n        color: var(--mantine-color-gray-5);\n      }\n\n      @mixin dark {\n        color: var(--mantine-color-dark-3);\n      }\n    }\n  }\n}\n\n.indicator--outline {\n  &[data-indeterminate]:not([data-disabled]),\n  &[data-checked]:not([data-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  display: block;\n  width: 60%;\n  color: transparent;\n  pointer-events: none;\n  transform: translateY(rem(5px)) scale(0.5);\n  opacity: 1;\n  transition:\n    transform 100ms ease,\n    opacity 100ms ease;\n}\n"],"mappings":""}