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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Avatar.module.cjs","names":[],"sources":["../../../src/components/Avatar/Avatar.module.css"],"sourcesContent":["/* Avatar.Group root element */\n.group {\n  --ag-spacing: var(--mantine-spacing-sm);\n  --ag-offset: calc(var(--ag-spacing) * -1);\n\n  display: flex;\n  padding-inline-start: var(--ag-spacing);\n}\n\n/* Avatar root element */\n.root {\n  --avatar-size-xs: 16px;\n  --avatar-size-sm: 26px;\n  --avatar-size-md: 38px;\n  --avatar-size-lg: 56px;\n  --avatar-size-xl: 84px;\n\n  --avatar-size: var(--avatar-size-md);\n  --avatar-radius: 1000px;\n  --avatar-bg: var(--mantine-color-gray-light);\n  --avatar-bd: 1px solid transparent;\n  --avatar-color: var(--mantine-color-gray-light-color);\n  --avatar-placeholder-fz: calc(var(--avatar-size) / 2.5);\n\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  display: block;\n  user-select: none;\n  overflow: hidden;\n  border-radius: var(--avatar-radius);\n  text-decoration: none;\n  padding: 0;\n  width: var(--avatar-size);\n  height: var(--avatar-size);\n  min-width: var(--avatar-size);\n\n  &:where([data-within-group]) {\n    margin-inline-start: var(--ag-offset);\n    border: 2px solid var(--mantine-color-body);\n    background: var(--mantine-color-body);\n  }\n}\n\n.image {\n  object-fit: cover;\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.placeholder {\n  font-weight: var(--mantine-font-weight-bold);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  user-select: none;\n  border-radius: var(--avatar-radius);\n  font-size: var(--avatar-placeholder-fz);\n  background: var(--avatar-bg);\n  border: var(--avatar-bd);\n  color: var(--avatar-color);\n\n  & > [data-avatar-placeholder-icon] {\n    width: 70%;\n    height: 70%;\n  }\n}\n"],"mappings":""}