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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Timeline.module.cjs","names":[],"sources":["../../../src/components/Timeline/Timeline.module.css"],"sourcesContent":[".root {\n  --offset: calc(var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2);\n  --tl-bullet-size: 20px;\n  --tl-line-width: 4px;\n  --tl-radius: 1000px;\n  --tl-color: var(--mantine-primary-color-filled);\n\n  &:where([data-align='left']) {\n    padding-inline-start: var(--offset);\n  }\n\n  &:where([data-align='right']) {\n    padding-inline-end: var(--offset);\n  }\n}\n\n.itemTitle {\n  font-weight: var(--mantine-font-weight-medium);\n  line-height: 1;\n  margin-bottom: calc(var(--mantine-spacing-xs) / 2);\n}\n\n.item {\n  --item-border: var(--tl-line-width) var(--tli-border-style, solid) var(--item-border-color);\n\n  position: relative;\n  color: var(--mantine-color-text);\n\n  &::before {\n    content: '';\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: var(--timeline-line-left, 0);\n    right: var(--timeline-line-right, 0);\n    bottom: calc(var(--mantine-spacing-xl) * -1);\n    border-inline-start: var(--item-border);\n    display: var(--timeline-line-display, none);\n\n    .root[data-align='left'] & {\n      --timeline-line-left: calc(var(--tl-line-width) * -1);\n      --timeline-line-right: auto;\n\n      @mixin rtl {\n        --timeline-line-left: auto;\n        --timeline-line-right: calc(var(--tl-line-width) * -1);\n      }\n    }\n\n    .root[data-align='right'] & {\n      --timeline-line-left: auto;\n      --timeline-line-right: calc(var(--tl-line-width) * -1);\n\n      @mixin rtl {\n        --timeline-line-left: calc(var(--tl-line-width) * -1);\n        --timeline-line-right: auto;\n      }\n    }\n  }\n\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: left;\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: right;\n  }\n\n  @mixin where-light {\n    --item-border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    --item-border-color: var(--mantine-color-dark-4);\n  }\n\n  &:where([data-line-active]) {\n    &::before {\n      border-color: var(--tli-color, var(--tl-color));\n    }\n  }\n\n  &:where(:not(:last-of-type)) {\n    --timeline-line-display: block;\n  }\n\n  &:where(:not(:first-of-type)) {\n    margin-top: var(--mantine-spacing-xl);\n  }\n}\n\n.itemBullet {\n  width: var(--tl-bullet-size);\n  height: var(--tl-bullet-size);\n  border-radius: var(--tli-radius, var(--tl-radius));\n  border: var(--tl-line-width) solid;\n  background-color: var(--mantine-color-body);\n  position: absolute;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mantine-color-text);\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-3);\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n  }\n\n  .root:where([data-align='left']) & {\n    left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    right: auto;\n\n    @mixin where-rtl {\n      left: auto;\n      right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n    }\n  }\n\n  .root:where([data-align='right']) & {\n    left: auto;\n    right: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n\n    @mixin where-rtl {\n      left: calc((var(--tl-bullet-size) / 2 + var(--tl-line-width) / 2) * -1);\n      right: auto;\n    }\n  }\n\n  &:where([data-with-child]) {\n    border-width: var(--tl-line-width);\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  &:where([data-active]) {\n    border-color: var(--tli-color, var(--tl-color));\n    background-color: var(--mantine-color-white);\n    color: var(--tl-icon-color, var(--mantine-color-white));\n\n    &:where([data-with-child]) {\n      background-color: var(--tli-color, var(--tl-color));\n      color: var(--tl-icon-color, var(--mantine-color-white));\n    }\n  }\n}\n\n.itemBody {\n  .root:where([data-align='left']) & {\n    padding-inline-start: var(--offset);\n    text-align: left;\n\n    @mixin where-rtl {\n      text-align: right;\n    }\n  }\n\n  .root:where([data-align='right']) & {\n    padding-inline-end: var(--offset);\n    text-align: right;\n\n    @mixin where-rtl {\n      text-align: left;\n    }\n  }\n}\n"],"mappings":""}