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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"RollingNumber.module.cjs","names":[],"sources":["../../../src/components/RollingNumber/RollingNumber.module.css"],"sourcesContent":[".root {\n  display: inline-flex;\n  align-items: baseline;\n  overflow: hidden;\n\n  &[data-tabular-numbers] {\n    font-variant-numeric: tabular-nums;\n  }\n}\n\n.digit {\n  display: inline-block;\n  width: 1ch;\n  height: 1em;\n  overflow: hidden;\n  line-height: 1;\n  transition:\n    width var(--rn-duration) var(--rn-timing-function),\n    opacity var(--rn-duration) var(--rn-timing-function);\n\n  &[data-empty] {\n    width: 0;\n    opacity: 0;\n  }\n}\n\n.digitColumn {\n  display: flex;\n  flex-direction: column;\n  animation: mantine-rolling-number-roll var(--rn-duration) var(--rn-timing-function);\n\n  & > span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 1em;\n  }\n}\n\n.char {\n  display: inline-block;\n  overflow: hidden;\n  white-space: pre;\n  transition: opacity var(--rn-duration) var(--rn-timing-function);\n\n  &[data-empty] {\n    width: 0;\n    opacity: 0;\n  }\n}\n\n@keyframes mantine-rolling-number-roll {\n  from {\n    transform: var(--rn-roll-from);\n  }\n\n  to {\n    transform: var(--rn-roll-to);\n  }\n}\n"],"mappings":""}