tdesign-react/esm/common/style/web/components/timeline/_index.less

TDesign Component for React

@import "../../base.less";

@import "./_var.less";

@import "../../mixins/_reset.less";

.@{prefix}-timeline {
  .reset;

  display: flex;
  flex-direction: column;

  &-item {
    min-height: 72px;
    display: flex;
    flex-direction: row;
    position: relative;

    &__label&__label--alternate {
      position: absolute;
    }

    &__wrapper {
      width: @timeline-wrapper-width-size;
      position: relative;

      .@{prefix}-timeline-item {
        &__dot {
          box-sizing: unset;
          position: absolute;
          width: @timeline-wrapper-item-dot-size;
          height: @timeline-wrapper-item-dot-size;
          border: 2px solid transparent;
          border-radius: 50%;
          top: @timeline-wrapper-top;

          &--primary {
            border-color: @timeline-primary-color;
          }

          &--default {
            border-color: @timeline-default-color;
          }

          &--success {
            border-color: @timeline-success-color;
          }

          &--warning {
            border-color: @timeline-warning-color;
          }

          &--error {
            border-color: @timeline-error-color;
          }

          &--custom {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            top: 4px;
            border: 0;
            .@{prefix}-timeline-item__dot-content {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 0;
            }
          }
        }

        &__tail {
          position: absolute;
          border-left: 2px solid transparent;
          left: 50%;
          height: @timeline-wrapper-tail-height;
          bottom: 0;
          transform: translateX(-50%);
          padding-bottom: @timeline-wrapper-tail-padding-bottom;
          border-color: @timeline-default-color;
          box-sizing: border-box;

          &--theme {
            &-dot {
              border-style: dashed;
              border-right: 0;
            }
          }
        }
      }
    }

    &__label {
      color: @timeline-label-font-color;
      font-size: @timeline-label-font;
    }

    &__content {
      flex: 1;
      padding-left: @timeline-content-padding-left;
      font-size: @timeline-content-font;
    }

    &--last {
      .@{prefix}-timeline-item__tail {
        display: none;
      }
    }
  }

  &-label&-label--alternate {
    &.@{prefix}-timeline {
      &-left {
        .@{prefix}-timeline-item {
          &__label {
            text-align: right;
            left: 0;
          }

          &__wrapper {
            margin-left: 100px;
          }
        }
      }

      &-right {
        .@{prefix}-timeline-item {
          &__label {
            text-align: left;
            right: 0;
          }

          &__wrapper {
            margin-right: 100px;
          }
        }
      }
    }
  }

  &-right {
    .@{prefix}-timeline-item {
      flex-direction: row-reverse;

      &__content {
        text-align: right;
        padding-left: 0;
        padding-right: @timeline-content-padding-right;
      }
    }
  }

  &-alternate {
    .@{prefix}-timeline-item {
      &-left {
        margin-left: @timeline-item-alternate-margin;
      }

      &-right {
        text-align: right;
        flex-direction: row-reverse;
        margin-right: @timeline-item-alternate-margin;
        .@{prefix}-timeline-item__content {
          padding-right: @timeline-content-padding-right;
          padding-left: 0;
        }
      }
    }
  }

  &-label&-alternate {

    .@{prefix}-timeline-item {
      &__label {
        width: 100%;
      }

      &-left {
        .@{prefix}-timeline-item {
          &__label {
            &--alternate {
              left: 0;
              transform: translateX(-100%);
              text-align: right;
              padding-right: @timeline-content-padding-right;
            }
          }
        }
      }

      &-right {
        .@{prefix}-timeline-item {
          &__label {
            &--alternate {
              right: 0;
              transform: translateX(100%);
              text-align: left;
              padding-left: @timeline-content-padding-left;
            }
          }
        }
      }
    }
  }

  &-horizontal {
    min-height: 200px;
    flex-direction: row;
    align-items: center;

    .@{prefix}-timeline {
      &-item {
        flex-direction: column;
        padding-right: @timeline-horizontal-item-padding;
        min-width: 160px;

        &__wrapper {
          width: 100%;
          height: @timeline-horizontal-wrapper-height-size;
          .@{prefix}-timeline-item {
            &__dot {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: unset;
              width: @timeline-horizontal-wrapper-item-dot-size;
              height: @timeline-horizontal-wrapper-item-dot-size;
              border-radius: 50%;

              &--custom {
                position: relative;
                top: 50%;
                transform: translateY(-50%);
                border: 0;
                .@{prefix}-timeline-item__dot-content {
                  position: absolute;
                  left: 0;
                  transform: translateY(-50%);
                  top: 50%;
                }
              }
            }

            &__tail {
              left: @timeline-horizontal-wrapper-left;
              top: 50%;
              transform: translateY(-50%);
              width: @timeline-horizontal-wrapper-tail-width-size;
              border: 0;
              border-top: 2px solid transparent;
              padding-bottom: 0;
              border-color: @timeline-default-color;

              &--theme {
                &-dot {
                  border-style: dashed;
                  border-right: 0;
                }
              }
            }
          }
        }

        &__content {
          padding-left: unset;
          padding-top: @timeline-horizontal-content-padding;
          flex: unset;
        }
      }
    }
  }

  &-vertical {
    .@{prefix}-timeline-item__content {
      padding-bottom: @timeline-content-padding-bottom;
    }
  }

  &-label&-horizontal&-top {
    .@{prefix}-timeline-item {
      &__label {
        &--alternate {
          top: 0;
          width: 100%;
          transform: translateY(-100%);
          padding-bottom: 0;
        }
      }
    }
  }

  &-label&-horizontal&-bottom {
    .@{prefix}-timeline-item {
      flex-direction: column-reverse;

      &__wrapper {
        padding-top: 0;
      }

      &__label {
        &--alternate {
          padding-top: @timeline-horizontal-content-padding;
          bottom: 0;
          width: 100%;
          transform: translateY(100%);
        }
      }

      &__content {
        padding-top: 0;
        padding-bottom: @timeline-horizontal-content-padding;
      }
    }
  }

  &-label&-horizontal&-alternate {
    .@{prefix}-timeline-item {
      &-top {
        .@{prefix}-timeline-item {
          &__label {
            &--alternate {
              top: 0;
              width: 100%;
              transform: translateY(-100%);
              padding-bottom: @timeline-horizontal-content-padding;
            }
          }
        }
      }

      &-bottom {
        flex-direction: column-reverse;
        position: relative;
        transform: translateY(calc(-100% + @timeline-horizontal-wrapper-height-size));

        .@{prefix}-timeline-item {
          &__content {
            padding-bottom: @timeline-horizontal-content-padding;
            padding-top: unset;
          }

          &__label {
            &--alternate {
              bottom: 0;
              transform: translateY(100%);
              padding-top: @timeline-horizontal-content-padding;
            }
          }
        }
      }
    }
  }
}