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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Skeleton.module.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.module.css"],"sourcesContent":["@keyframes skeleton-fade {\n  0%,\n  100% {\n    opacity: 0.4;\n  }\n\n  50% {\n    opacity: 1;\n  }\n}\n\n.root {\n  height: var(--skeleton-height, auto);\n  width: var(--skeleton-width, 100%);\n  border-radius: var(--skeleton-radius, var(--mantine-radius-default));\n  position: relative;\n  transform: translateZ(0);\n  -webkit-transform: translateZ(0);\n\n  &:where([data-animate])::after {\n    animation: skeleton-fade 1500ms linear infinite;\n  }\n\n  &:where([data-visible]) {\n    overflow: hidden;\n\n    &::before {\n      position: absolute;\n      content: '';\n      inset: 0;\n      z-index: 10;\n      background-color: var(--mantine-color-body);\n    }\n\n    &::after {\n      position: absolute;\n      content: '';\n      inset: 0;\n      z-index: 11;\n\n      @mixin where-light {\n        background-color: var(--mantine-color-gray-3);\n      }\n\n      @mixin where-dark {\n        background-color: var(--mantine-color-dark-4);\n      }\n    }\n  }\n}\n"],"mappings":""}