iep-ui/lib/iep-timeline/style/index.less

An enterprise-class UI design language and Vue-based implementation

@import '../../style/themes/index';
@import '../../style/mixins/index';

@timeline-prefix-cls: ~'@{ant-prefix}-iep-timeline';
@timeline-item-prefix-cls: ~'@{ant-prefix}-iep-timeline-item';

// .iep-icon {
//   line-height: 1;
// }

.@{timeline-prefix-cls} {
  .reset-component;
}

.@{timeline-item-prefix-cls} {
  .reset-component;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  &-bottom-20 {
    padding-bottom: 20px
  }
  &-bottom-30 {
    padding-bottom: 30px
  }
  &-bottom-40 {
    padding-bottom: 40px
  }
  &-bottom-56 {
    padding-bottom: 56px
  }
  &-left {
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 10px;
    position: absolute;
    top: 0;
    &-date-time {
      font-weight: 400;
      font-size: 14px;
      color: #999;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    &-time {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .iep-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        svg {
          width: 16px;
          height: 16px;
          fill: @primary-color
        }
      }
    }
  }
  &-dot {
    width: 32px;
    height: 32px;
    background: @primary-color;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 130px;
    top: 0;
    &-pl {
      left: 0;
    }
  }
  &-tail {
    position: absolute;
    top: 10px;
    left: 146px;
    width: 1px;
    height: calc(100% - 10px);
    border-left: 2px solid @primary-color;
    &-pl {
      left: 16px;
    }
  }
  &-wrapper {
    margin-left: 170px;
    display: flex;
    justify-content: flex-start;
    &-title {
      font-weight: bold;
      font-size: 16px;
      text-align: left;
      color: #333;
      width: 80px;
      height: 32px;
      line-height: 32px;
    }
    &-info {
      flex: 1;
    }
    &-pl {
      margin-left: 40px;
    }
  }
  &:last-child {
    .@{timeline-item-prefix-cls}-tail {
      display: none;
    }
  }
}