naive-ui/styles/Timeline.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@mixin timeline-type-mixin ($type) {
  @include m($type + '-type') {
    @include b(timeline-item-timeline) {
      @include e(circle) {
        border-color: map-get($--timeline-item-circle-border-color, $type);
      }
    }
  }
}

@include themes-mixin {
  @include b(timeline) {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    @include b(timeline-item) {
      position: relative;
      @include timeline-type-mixin('default');
      @include timeline-type-mixin('success');
      @include timeline-type-mixin('info');
      @include timeline-type-mixin('warning');
      @include timeline-type-mixin('error');
      &:last-child {
        @include b(timeline-item-timeline) {
          @include e(line) {
            display: none;
          }
        }
      }
      @include b(timeline-item-content) {
        @include e(title) {
          transition: color .3s $default-cubic-bezier;
          font-size: 14px;
          font-weight: 700;
          color: $--timeline-item-title-color;
          margin-left: 26px;
          margin-bottom: 6px;
        }
        @include e(content) {
          transition: color .3s $default-cubic-bezier;
          font-size: 14px;
          color: $--timeline-item-content-color;
          margin-left: 26px;
        }
        @include e(meta) {
          transition: color .3s $default-cubic-bezier;
          font-size: 12px;
          color: $--timeline-item-meta-color;
          margin-top: 6px;
          margin-left: 26px;
          margin-bottom: 20px;
        }
      }
      @include b(timeline-item-timeline) {
        width: 26px;
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 0;
        height: 100%;
        @include e(circle) {
          transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;;
          width: 14px;
          height: 14px;
          border-radius: 7px;
          box-sizing: border-box;
          border-style: solid;
          border-width: 2px;
        }
        @include e(line) {
          transition: background-color .3s $default-cubic-bezier;
          position: absolute;
          top: 14px;
          left: 6px;
          bottom: 0px;
          width: 2px;
          background-color: $--timeline-line-background-color;
        }
      }
    }
  }
}