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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Indicator.module.cjs","names":[],"sources":["../../../src/components/Indicator/Indicator.module.css"],"sourcesContent":["@keyframes processing {\n  0% {\n    opacity: 0.6;\n    transform: scale(0);\n  }\n\n  100% {\n    opacity: 0;\n    transform: scale(2.8);\n  }\n}\n\n.root {\n  --indicator-size: 10px;\n  --indicator-color: var(--mantine-primary-color-filled);\n\n  position: relative;\n  display: block;\n\n  &:where([data-inline]) {\n    display: inline-block;\n  }\n}\n\n.indicator {\n  position: absolute;\n  top: var(--indicator-top);\n  left: var(--indicator-left);\n  right: var(--indicator-right);\n  bottom: var(--indicator-bottom);\n  transform: translate(var(--indicator-translate-x), var(--indicator-translate-y));\n  min-width: var(--indicator-size);\n  height: var(--indicator-size);\n  border-radius: var(--indicator-radius, 1000rem);\n  z-index: var(--indicator-z-index, 200);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--mantine-font-size-xs);\n  background-color: var(--indicator-color);\n  color: var(--indicator-text-color, var(--mantine-color-white));\n  white-space: nowrap;\n\n  &::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background-color: var(--indicator-color);\n    border-radius: var(--indicator-radius, 1000rem);\n    z-index: -1;\n  }\n\n  &:where([data-with-label]) {\n    padding-inline: calc(var(--mantine-spacing-xs) / 2);\n  }\n\n  &:where([data-with-border]) {\n    border: 2px solid var(--mantine-color-body);\n  }\n\n  &[data-processing] {\n    &::before {\n      animation: processing 1000ms linear infinite;\n    }\n  }\n}\n"],"mappings":""}