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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Marquee.module.cjs","names":[],"sources":["../../../src/components/Marquee/Marquee.module.css"],"sourcesContent":["@keyframes marquee-horizontal {\n  from {\n    transform: translateX(0);\n  }\n\n  to {\n    transform: translateX(\n      calc(\n        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /\n          var(--marquee-repeat, 4)\n      )\n    );\n  }\n}\n\n@keyframes marquee-vertical {\n  from {\n    transform: translateY(0);\n  }\n\n  to {\n    transform: translateY(\n      calc(\n        -100% / var(--marquee-repeat, 4) - var(--marquee-gap, var(--mantine-spacing-md)) /\n          var(--marquee-repeat, 4)\n      )\n    );\n  }\n}\n\n.root {\n  --_fade-color: var(--marquee-fade-color, var(--mantine-color-body));\n  --_fade-size: var(--marquee-fade-size, 5%);\n\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  max-height: 100%;\n  max-width: 100%;\n\n  &:where([data-orientation='horizontal']) {\n    flex-direction: row;\n  }\n\n  &:where([data-orientation='vertical']) {\n    flex-direction: column;\n  }\n\n  /* Fade edges using pseudo-elements */\n  &[data-fade-edges]::before,\n  &[data-fade-edges]::after {\n    content: '';\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n  }\n\n  /* Horizontal fade edges */\n  &[data-orientation='horizontal'][data-fade-edges]::before,\n  &[data-orientation='horizontal'][data-fade-edges]::after {\n    top: 0;\n    bottom: 0;\n    width: var(--_fade-size);\n  }\n\n  &[data-orientation='horizontal'][data-fade-edges]::before {\n    left: 0;\n    background: linear-gradient(to right, var(--_fade-color), transparent);\n  }\n\n  &[data-orientation='horizontal'][data-fade-edges]::after {\n    right: 0;\n    background: linear-gradient(to left, var(--_fade-color), transparent);\n  }\n\n  /* Vertical fade edges */\n  &[data-orientation='vertical'][data-fade-edges]::before,\n  &[data-orientation='vertical'][data-fade-edges]::after {\n    left: 0;\n    right: 0;\n    height: var(--_fade-size);\n  }\n\n  &[data-orientation='vertical'][data-fade-edges]::before {\n    top: 0;\n    background: linear-gradient(to bottom, var(--_fade-color), transparent);\n  }\n\n  &[data-orientation='vertical'][data-fade-edges]::after {\n    bottom: 0;\n    background: linear-gradient(to top, var(--_fade-color), transparent);\n  }\n}\n\n.content {\n  display: flex;\n  gap: var(--marquee-gap, var(--mantine-spacing-md));\n  animation-duration: var(--marquee-duration, 40000ms);\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n\n  .root[data-orientation='horizontal'] > & {\n    flex-direction: row;\n    animation-name: marquee-horizontal;\n  }\n\n  .root[data-orientation='vertical'] > & {\n    flex-direction: column;\n    animation-name: marquee-vertical;\n  }\n\n  .root[data-reverse] > & {\n    animation-direction: reverse;\n  }\n\n  .root[data-pause-on-hover]:hover > & {\n    animation-play-state: paused;\n  }\n}\n\n.group {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--marquee-gap, var(--mantine-spacing-md));\n\n  .root[data-orientation='horizontal'] & {\n    flex-direction: row;\n  }\n\n  .root[data-orientation='vertical'] & {\n    flex-direction: column;\n  }\n}\n"],"mappings":""}