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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Progress.module.cjs","names":[],"sources":["../../../src/components/Progress/Progress.module.css"],"sourcesContent":["@keyframes stripes-animation {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 40px 0;\n  }\n}\n\n@keyframes stripes-animation-vertical {\n  0% {\n    background-position: 0 0;\n  }\n\n  100% {\n    background-position: 0 40px;\n  }\n}\n\n.root {\n  --progress-radius: var(--mantine-radius-default);\n  --progress-size: var(--progress-size-md);\n\n  --progress-size-xs: 3px;\n  --progress-size-sm: 5px;\n  --progress-size-md: 8px;\n  --progress-size-lg: 12px;\n  --progress-size-xl: 16px;\n\n  position: relative;\n  height: var(--progress-size);\n  border-radius: var(--progress-radius);\n  overflow: hidden;\n  display: flex;\n\n  @mixin where-light {\n    background-color: var(--mantine-color-gray-2);\n  }\n\n  @mixin where-dark {\n    background-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-orientation='vertical']) {\n    height: auto;\n    width: var(--progress-size);\n    flex-direction: column-reverse;\n  }\n}\n\n.section {\n  background-color: var(--progress-section-color);\n  height: 100%;\n  width: var(--progress-section-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden;\n  background-size: 20px 20px;\n  transition: width var(--progress-transition-duration, 100ms) ease;\n\n  &:where([data-striped]) {\n    background-image: linear-gradient(\n      45deg,\n      rgba(255, 255, 255, 0.15) 25%,\n      transparent 25%,\n      transparent 50%,\n      rgba(255, 255, 255, 0.15) 50%,\n      rgba(255, 255, 255, 0.15) 75%,\n      transparent 75%,\n      transparent\n    );\n  }\n\n  &:where([data-animated]) {\n    animation: stripes-animation 1s linear infinite;\n  }\n\n  &:where(:last-of-type) {\n    border-radius: 0;\n    border-start-end-radius: var(--progress-radius);\n    border-end-end-radius: var(--progress-radius);\n  }\n\n  &:where(:first-of-type) {\n    border-radius: 0;\n    border-start-start-radius: var(--progress-radius);\n    border-end-start-radius: var(--progress-radius);\n  }\n\n  .root:where([data-orientation='vertical']) & {\n    width: 100%;\n    height: var(--progress-section-size);\n    transition: height var(--progress-transition-duration, 100ms) ease;\n\n    &:where([data-striped]) {\n      background-image: linear-gradient(\n        135deg,\n        rgba(255, 255, 255, 0.15) 25%,\n        transparent 25%,\n        transparent 50%,\n        rgba(255, 255, 255, 0.15) 50%,\n        rgba(255, 255, 255, 0.15) 75%,\n        transparent 75%,\n        transparent\n      );\n    }\n\n    &:where([data-animated]) {\n      animation: stripes-animation-vertical 1s linear infinite;\n    }\n\n    &:where(:last-of-type) {\n      border-radius: 0;\n      border-start-start-radius: var(--progress-radius);\n      border-start-end-radius: var(--progress-radius);\n    }\n\n    &:where(:first-of-type) {\n      border-radius: 0;\n      border-end-start-radius: var(--progress-radius);\n      border-end-end-radius: var(--progress-radius);\n    }\n  }\n}\n\n.label {\n  color: var(--progress-label-color, var(--mantine-color-white));\n  font-weight: bold;\n  user-select: none;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: min(calc(var(--progress-size) * 0.65), rem(18px));\n  line-height: 1;\n  padding-inline: 4px;\n\n  .root:where([data-orientation='vertical']) & {\n    writing-mode: vertical-rl;\n  }\n}\n"],"mappings":""}