@mantine/core/cjs/components/Radio/RadioIndicator/RadioIndicator.module.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"RadioIndicator.module.cjs","names":[],"sources":["../../../../src/components/Radio/RadioIndicator/RadioIndicator.module.css"],"sourcesContent":[".indicator {\n  --radio-size-xs: 16px;\n  --radio-size-sm: 20px;\n  --radio-size-md: 24px;\n  --radio-size-lg: 30px;\n  --radio-size-xl: 36px;\n\n  --radio-icon-size-xs: 6px;\n  --radio-icon-size-sm: 8px;\n  --radio-icon-size-md: 10px;\n  --radio-icon-size-lg: 14px;\n  --radio-icon-size-xl: 16px;\n\n  --radio-icon-size: var(--radio-icon-size-sm);\n  --radio-size: var(--radio-size-sm);\n  --radio-color: var(--mantine-primary-color-filled);\n  --radio-icon-color: var(--mantine-color-white);\n\n  position: relative;\n  border: 1px solid transparent;\n  width: var(--radio-size);\n  min-width: var(--radio-size);\n  height: var(--radio-size);\n  min-height: var(--radio-size);\n  border-radius: var(--radio-radius, 10000px);\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-checked] {\n    background-color: var(--radio-color);\n    border-color: var(--radio-color);\n\n    & > .icon {\n      opacity: 1;\n      transform: none;\n      color: var(--radio-icon-color);\n    }\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: var(--mantine-color-disabled);\n    border-color: var(--mantine-color-disabled-border);\n\n    &[data-checked] > .icon {\n      color: var(--mantine-color-disabled-color);\n    }\n  }\n}\n\n.indicator--outline {\n  &[data-checked]:not([data-disabled]) {\n    background-color: transparent;\n    border-color: var(--radio-color);\n\n    & > .icon {\n      color: var(--radio-color);\n      opacity: 1;\n      transform: none;\n    }\n  }\n}\n\n.icon {\n  display: block;\n  width: var(--radio-icon-size);\n  height: var(--radio-icon-size);\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":""}