acud/lib/timeline/style/index.css

acg react 组件库

/* color */
/* 默认颜色 */
/* 通用-icon */
/* 标签 */
/* 默认颜色 */
/* 其他颜色 */
/* 通用 */
/* 水平 */
/* 垂直 */
/* 序号水平 */
/* 序号垂直 */
.theme .is-default {
  background-color: #E8E9EB;
}
.theme .dot-default {
  color: #E8E9EB;
}
.theme .is-success {
  background-color: #30BF13;
}
.theme .dot-success {
  color: #30BF13;
}
.theme .is-error {
  background-color: #F33E3E;
}
.theme .dot-error {
  color: #F33E3E;
}
.theme .is-warning {
  background-color: #FF9326;
  color: #FF9326;
}
.theme .dot-warning {
  color: #FF9326;
}
.theme .is-waiting {
  background-color: #E8E9EB;
}
.theme .dot-waiting {
  color: #E8E9EB;
}
.theme .is-pending {
  background-color: transparent;
  border-top: 1px solid #2468F2;
  border-right: 1px solid #2468F2;
  border-bottom: 1px solid #2468F2;
  border-left: 1px solid transparent;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.theme .dot-pending {
  animation: breath 1.5s linear infinite;
  color: #2468F2;
}
@keyframes breath {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.common {
  margin-bottom: 2px;
  /* 查看详情按钮 */
}
.common.is-dot > .acud-timeline-item-line {
  top: 20px !important;
  bottom: 10px !important;
  left: 4px;
  height: calc(100% - 21px);
}
.common-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #E8E9EB;
  border-color: transparent;
}
.common-head:hover {
  background-color: #E8E9EB;
}
.common-head:focus,
.common-head:active {
  background-color: #E8E9EB;
}
.common-head[disabled],
.common-head[aria-disabled="true"],
.common-head[disabled]:hover,
.common-head[aria-disabled="true"]:hover,
.common-head[disabled]:focus,
.common-head[aria-disabled="true"]:focus,
.common-head[disabled]:active,
.common-head[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.common-head:hover {
  border-color: transparent;
}
.common-head:focus,
.common-head:active {
  border-color: transparent;
}
.common-head[disabled],
.common-head[aria-disabled="true"],
.common-head[disabled]:hover,
.common-head[aria-disabled="true"]:hover,
.common-head[disabled]:focus,
.common-head[aria-disabled="true"]:focus,
.common-head[disabled]:active,
.common-head[aria-disabled="true"]:active {
  border-color: transparent;
}
.common-head.is-dot {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.common-content {
  position: relative;
  top: -14px;
  margin-left: 16px;
}
.common-content.with-dot {
  top: -18px;
  margin-left: calc(16px + 4px * 2 + 3px);
}
.common-content-label {
  color: #84868C;
  font-size: 12px;
}
.common-content-title {
  color: #151B26;
  font-size: 12px;
  line-height: 20px;
}
.common-content a {
  color: #2468F2;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.common-content-link {
  display: flex;
  align-items: center;
  width: 40px;
  margin-top: 4px;
  font-size: 12px;
  transition: opacity 0.2s linear;
}
.common-content-link-label {
  flex-shrink: 0;
  margin-right: 4px;
}
.common-content-link:hover {
  opacity: 0.8;
}
.common-content-inner {
  max-width: 300px;
  overflow: hidden;
  font-size: 12px;
  transition: all 0.3s;
}
.common-content-inner.is-hidden {
  max-height: 0;
  opacity: 0;
}
.common-content-inner.is-shadow {
  box-sizing: border-box;
  max-height: auto;
  margin: 4px 0;
  padding: 8px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px #F2F2F4, 0 0 6px #F2F2F4;
  opacity: 1;
}
.common-render {
  line-height: 16px;
}
.common-render:hover .acud-timeline-item-render-dtlbtn {
  opacity: 1;
}
.common-render-dtlbtn {
  margin-left: 16px;
  opacity: 0;
  transition: opacity 0.2s linear;
  word-wrap: none;
}
.vertical .acud-timeline-item {
  position: relative;
  min-height: 50px;
}
.vertical .acud-timeline-item-line {
  position: absolute;
  top: 14px;
  bottom: 4px;
  width: 2px;
  transform: translateX(2.8px);
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.vertical .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.vertical .acud-timeline-item-line:focus,
.vertical .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.vertical .acud-timeline-item-line[disabled],
.vertical .acud-timeline-item-line[aria-disabled="true"],
.vertical .acud-timeline-item-line[disabled]:hover,
.vertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.vertical .acud-timeline-item-line[disabled]:focus,
.vertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.vertical .acud-timeline-item-line[disabled]:active,
.vertical .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.vertical .acud-timeline-item-line:hover {
  border-color: transparent;
}
.vertical .acud-timeline-item-line:focus,
.vertical .acud-timeline-item-line:active {
  border-color: transparent;
}
.vertical .acud-timeline-item-line[disabled],
.vertical .acud-timeline-item-line[aria-disabled="true"],
.vertical .acud-timeline-item-line[disabled]:hover,
.vertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.vertical .acud-timeline-item-line[disabled]:focus,
.vertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.vertical .acud-timeline-item-line[disabled]:active,
.vertical .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.vertical .acud-timeline-item:last-child::before {
  display: none;
}
.vertical .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.vertical .acud-timeline-item-content-inner {
  min-height: 8px;
}
.vertical .acud-timeline-item-content-append {
  min-height: 40px;
}
.vertical .acud-timeline-item-content-label {
  margin-bottom: 4px;
}
.vertical .acud-timeline-item-content-title button {
  min-width: auto;
}
.horizontal {
  display: flex;
}
.horizontal .acud-timeline-item {
  position: relative;
  min-width: 130px;
}
.horizontal .acud-timeline-item-line {
  position: absolute;
  top: calc(10px / 2 - 2px);
  right: 4px;
  left: calc(10px + 2px);
  width: auto;
  height: 2px;
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.horizontal .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.horizontal .acud-timeline-item-line:focus,
.horizontal .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.horizontal .acud-timeline-item-line[disabled],
.horizontal .acud-timeline-item-line[aria-disabled="true"],
.horizontal .acud-timeline-item-line[disabled]:hover,
.horizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.horizontal .acud-timeline-item-line[disabled]:focus,
.horizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.horizontal .acud-timeline-item-line[disabled]:active,
.horizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.horizontal .acud-timeline-item-line:hover {
  border-color: transparent;
}
.horizontal .acud-timeline-item-line:focus,
.horizontal .acud-timeline-item-line:active {
  border-color: transparent;
}
.horizontal .acud-timeline-item-line[disabled],
.horizontal .acud-timeline-item-line[aria-disabled="true"],
.horizontal .acud-timeline-item-line[disabled]:hover,
.horizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.horizontal .acud-timeline-item-line[disabled]:focus,
.horizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.horizontal .acud-timeline-item-line[disabled]:active,
.horizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.horizontal .acud-timeline-item:last-child::before {
  display: none;
}
.horizontal .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.horizontal .acud-timeline-item-content {
  position: relative;
  left: -16px;
  margin-top: 22px;
}
.numberVertical {
  counter-reset: number;
}
.numberVertical .acud-timeline-item-head {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #2468F2;
}
.numberVertical .acud-timeline-item-head::before {
  position: relative;
  color: #FFFFFF;
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  line-height: 24px;
  content: counter(number);
  counter-increment: number;
}
.numberVertical .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.numberVertical .acud-timeline-item-line {
  position: absolute;
  top: 29px;
  bottom: 2px;
  left: calc((4px * 5) / 2 - 1.9px);
  width: 2px;
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.numberVertical .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.numberVertical .acud-timeline-item-line:focus,
.numberVertical .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.numberVertical .acud-timeline-item-line[disabled],
.numberVertical .acud-timeline-item-line[aria-disabled="true"],
.numberVertical .acud-timeline-item-line[disabled]:hover,
.numberVertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.numberVertical .acud-timeline-item-line[disabled]:focus,
.numberVertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.numberVertical .acud-timeline-item-line[disabled]:active,
.numberVertical .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.numberVertical .acud-timeline-item-line:hover {
  border-color: transparent;
}
.numberVertical .acud-timeline-item-line:focus,
.numberVertical .acud-timeline-item-line:active {
  border-color: transparent;
}
.numberVertical .acud-timeline-item-line[disabled],
.numberVertical .acud-timeline-item-line[aria-disabled="true"],
.numberVertical .acud-timeline-item-line[disabled]:hover,
.numberVertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.numberVertical .acud-timeline-item-line[disabled]:focus,
.numberVertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.numberVertical .acud-timeline-item-line[disabled]:active,
.numberVertical .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.numberVertical .acud-timeline-item-content {
  top: calc(-22px + 3px);
  margin-left: 36px;
  font-size: 12px;
  line-height: 16px;
}
.numberHorizontal {
  counter-reset: number;
}
.numberHorizontal .acud-timeline-item {
  position: relative;
  min-width: 130px;
}
.numberHorizontal .acud-timeline-item-head {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #2468F2;
}
.numberHorizontal .acud-timeline-item-head::before {
  color: #FFFFFF;
  content: counter(number);
  counter-increment: number;
}
.numberHorizontal .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.numberHorizontal .acud-timeline-item-line {
  position: absolute;
  top: calc(20px / 2 - 1px);
  right: 2px;
  left: calc(20px + 2px);
  width: auto;
  height: 2px;
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.numberHorizontal .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.numberHorizontal .acud-timeline-item-line:focus,
.numberHorizontal .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.numberHorizontal .acud-timeline-item-line[disabled],
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"],
.numberHorizontal .acud-timeline-item-line[disabled]:hover,
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.numberHorizontal .acud-timeline-item-line[disabled]:focus,
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.numberHorizontal .acud-timeline-item-line[disabled]:active,
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.numberHorizontal .acud-timeline-item-line:hover {
  border-color: transparent;
}
.numberHorizontal .acud-timeline-item-line:focus,
.numberHorizontal .acud-timeline-item-line:active {
  border-color: transparent;
}
.numberHorizontal .acud-timeline-item-line[disabled],
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"],
.numberHorizontal .acud-timeline-item-line[disabled]:hover,
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.numberHorizontal .acud-timeline-item-line[disabled]:focus,
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.numberHorizontal .acud-timeline-item-line[disabled]:active,
.numberHorizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.numberHorizontal .acud-timeline-item-content {
  margin-top: 18px;
  font-size: 12px;
}
.acud-timeline {
  padding: 10px 0;
}
.acud-timeline .is-default {
  background-color: #E8E9EB;
}
.acud-timeline .dot-default {
  color: #E8E9EB;
}
.acud-timeline .is-success {
  background-color: #30BF13;
}
.acud-timeline .dot-success {
  color: #30BF13;
}
.acud-timeline .is-error {
  background-color: #F33E3E;
}
.acud-timeline .dot-error {
  color: #F33E3E;
}
.acud-timeline .is-warning {
  background-color: #FF9326;
  color: #FF9326;
}
.acud-timeline .dot-warning {
  color: #FF9326;
}
.acud-timeline .is-waiting {
  background-color: #E8E9EB;
}
.acud-timeline .dot-waiting {
  color: #E8E9EB;
}
.acud-timeline .is-pending {
  background-color: transparent;
  border-top: 1px solid #2468F2;
  border-right: 1px solid #2468F2;
  border-bottom: 1px solid #2468F2;
  border-left: 1px solid transparent;
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.acud-timeline .dot-pending {
  animation: breath 1.5s linear infinite;
  color: #2468F2;
}
@keyframes breath {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.acud-timeline-item {
  margin-bottom: 2px;
  /* 查看详情按钮 */
}
.acud-timeline-item.is-dot > .acud-timeline-item-line {
  top: 20px !important;
  bottom: 10px !important;
  left: 4px;
  height: calc(100% - 21px);
}
.acud-timeline-item-head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #E8E9EB;
  border-color: transparent;
}
.acud-timeline-item-head:hover {
  background-color: #E8E9EB;
}
.acud-timeline-item-head:focus,
.acud-timeline-item-head:active {
  background-color: #E8E9EB;
}
.acud-timeline-item-head[disabled],
.acud-timeline-item-head[aria-disabled="true"],
.acud-timeline-item-head[disabled]:hover,
.acud-timeline-item-head[aria-disabled="true"]:hover,
.acud-timeline-item-head[disabled]:focus,
.acud-timeline-item-head[aria-disabled="true"]:focus,
.acud-timeline-item-head[disabled]:active,
.acud-timeline-item-head[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.acud-timeline-item-head:hover {
  border-color: transparent;
}
.acud-timeline-item-head:focus,
.acud-timeline-item-head:active {
  border-color: transparent;
}
.acud-timeline-item-head[disabled],
.acud-timeline-item-head[aria-disabled="true"],
.acud-timeline-item-head[disabled]:hover,
.acud-timeline-item-head[aria-disabled="true"]:hover,
.acud-timeline-item-head[disabled]:focus,
.acud-timeline-item-head[aria-disabled="true"]:focus,
.acud-timeline-item-head[disabled]:active,
.acud-timeline-item-head[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-timeline-item-head.is-dot {
  width: 16px;
  height: 16px;
  background-color: transparent;
}
.acud-timeline-item-content {
  position: relative;
  top: -14px;
  margin-left: 16px;
}
.acud-timeline-item-content.with-dot {
  top: -18px;
  margin-left: calc(16px + 4px * 2 + 3px);
}
.acud-timeline-item-content-label {
  color: #84868C;
  font-size: 12px;
}
.acud-timeline-item-content-title {
  color: #151B26;
  font-size: 12px;
  line-height: 20px;
}
.acud-timeline-item-content a {
  color: #2468F2;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.acud-timeline-item-content-link {
  display: flex;
  align-items: center;
  width: 40px;
  margin-top: 4px;
  font-size: 12px;
  transition: opacity 0.2s linear;
}
.acud-timeline-item-content-link-label {
  flex-shrink: 0;
  margin-right: 4px;
}
.acud-timeline-item-content-link:hover {
  opacity: 0.8;
}
.acud-timeline-item-content-inner {
  max-width: 300px;
  overflow: hidden;
  font-size: 12px;
  transition: all 0.3s;
}
.acud-timeline-item-content-inner.is-hidden {
  max-height: 0;
  opacity: 0;
}
.acud-timeline-item-content-inner.is-shadow {
  box-sizing: border-box;
  max-height: auto;
  margin: 4px 0;
  padding: 8px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px #F2F2F4, 0 0 6px #F2F2F4;
  opacity: 1;
}
.acud-timeline-item-render {
  line-height: 16px;
}
.acud-timeline-item-render:hover .acud-timeline-item-render-dtlbtn {
  opacity: 1;
}
.acud-timeline-item-render-dtlbtn {
  margin-left: 16px;
  opacity: 0;
  transition: opacity 0.2s linear;
  word-wrap: none;
}
.acud-timeline.is-vertical .acud-timeline-item {
  position: relative;
  min-height: 50px;
}
.acud-timeline.is-vertical .acud-timeline-item-line {
  position: absolute;
  top: 14px;
  bottom: 4px;
  width: 2px;
  transform: translateX(2.8px);
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.acud-timeline.is-vertical .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.acud-timeline.is-vertical .acud-timeline-item-line:focus,
.acud-timeline.is-vertical .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.acud-timeline.is-vertical .acud-timeline-item-line[disabled],
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.is-vertical .acud-timeline-item-line[disabled]:hover,
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.is-vertical .acud-timeline-item-line[disabled]:focus,
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.is-vertical .acud-timeline-item-line[disabled]:active,
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.acud-timeline.is-vertical .acud-timeline-item-line:hover {
  border-color: transparent;
}
.acud-timeline.is-vertical .acud-timeline-item-line:focus,
.acud-timeline.is-vertical .acud-timeline-item-line:active {
  border-color: transparent;
}
.acud-timeline.is-vertical .acud-timeline-item-line[disabled],
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.is-vertical .acud-timeline-item-line[disabled]:hover,
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.is-vertical .acud-timeline-item-line[disabled]:focus,
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.is-vertical .acud-timeline-item-line[disabled]:active,
.acud-timeline.is-vertical .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-timeline.is-vertical .acud-timeline-item:last-child::before {
  display: none;
}
.acud-timeline.is-vertical .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.acud-timeline.is-vertical .acud-timeline-item-content-inner {
  min-height: 8px;
}
.acud-timeline.is-vertical .acud-timeline-item-content-append {
  min-height: 40px;
}
.acud-timeline.is-vertical .acud-timeline-item-content-label {
  margin-bottom: 4px;
}
.acud-timeline.is-vertical .acud-timeline-item-content-title button {
  min-width: auto;
}
.acud-timeline.is-horizontal {
  display: flex;
}
.acud-timeline.is-horizontal .acud-timeline-item {
  position: relative;
  min-width: 130px;
}
.acud-timeline.is-horizontal .acud-timeline-item-line {
  position: absolute;
  top: calc(10px / 2 - 2px);
  right: 4px;
  left: calc(10px + 2px);
  width: auto;
  height: 2px;
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.acud-timeline.is-horizontal .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.acud-timeline.is-horizontal .acud-timeline-item-line:focus,
.acud-timeline.is-horizontal .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled],
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled]:hover,
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled]:focus,
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled]:active,
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.acud-timeline.is-horizontal .acud-timeline-item-line:hover {
  border-color: transparent;
}
.acud-timeline.is-horizontal .acud-timeline-item-line:focus,
.acud-timeline.is-horizontal .acud-timeline-item-line:active {
  border-color: transparent;
}
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled],
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled]:hover,
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled]:focus,
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.is-horizontal .acud-timeline-item-line[disabled]:active,
.acud-timeline.is-horizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-timeline.is-horizontal .acud-timeline-item:last-child::before {
  display: none;
}
.acud-timeline.is-horizontal .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.acud-timeline.is-horizontal .acud-timeline-item-content {
  position: relative;
  left: -16px;
  margin-top: 22px;
}
.acud-timeline.number-vertical {
  counter-reset: number;
}
.acud-timeline.number-vertical .acud-timeline-item-head {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: #2468F2;
}
.acud-timeline.number-vertical .acud-timeline-item-head::before {
  position: relative;
  color: #FFFFFF;
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  line-height: 24px;
  content: counter(number);
  counter-increment: number;
}
.acud-timeline.number-vertical .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.acud-timeline.number-vertical .acud-timeline-item-line {
  position: absolute;
  top: 29px;
  bottom: 2px;
  left: calc((4px * 5) / 2 - 1.9px);
  width: 2px;
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.acud-timeline.number-vertical .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.acud-timeline.number-vertical .acud-timeline-item-line:focus,
.acud-timeline.number-vertical .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.acud-timeline.number-vertical .acud-timeline-item-line[disabled],
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.number-vertical .acud-timeline-item-line[disabled]:hover,
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.number-vertical .acud-timeline-item-line[disabled]:focus,
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.number-vertical .acud-timeline-item-line[disabled]:active,
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.acud-timeline.number-vertical .acud-timeline-item-line:hover {
  border-color: transparent;
}
.acud-timeline.number-vertical .acud-timeline-item-line:focus,
.acud-timeline.number-vertical .acud-timeline-item-line:active {
  border-color: transparent;
}
.acud-timeline.number-vertical .acud-timeline-item-line[disabled],
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.number-vertical .acud-timeline-item-line[disabled]:hover,
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.number-vertical .acud-timeline-item-line[disabled]:focus,
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.number-vertical .acud-timeline-item-line[disabled]:active,
.acud-timeline.number-vertical .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-timeline.number-vertical .acud-timeline-item-content {
  top: calc(-22px + 3px);
  margin-left: 36px;
  font-size: 12px;
  line-height: 16px;
}
.acud-timeline.number-horizontal {
  counter-reset: number;
}
.acud-timeline.number-horizontal .acud-timeline-item {
  position: relative;
  min-width: 130px;
}
.acud-timeline.number-horizontal .acud-timeline-item-head {
  position: relative;
  width: 20px;
  height: 20px;
  background-color: #2468F2;
}
.acud-timeline.number-horizontal .acud-timeline-item-head::before {
  color: #FFFFFF;
  content: counter(number);
  counter-increment: number;
}
.acud-timeline.number-horizontal .acud-timeline-item:last-child .acud-timeline-item-line {
  display: none;
}
.acud-timeline.number-horizontal .acud-timeline-item-line {
  position: absolute;
  top: calc(20px / 2 - 1px);
  right: 2px;
  left: calc(20px + 2px);
  width: auto;
  height: 2px;
  content: '';
  background-color: #E8E9EB;
  border-color: transparent;
}
.acud-timeline.number-horizontal .acud-timeline-item-line:hover {
  background-color: #E8E9EB;
}
.acud-timeline.number-horizontal .acud-timeline-item-line:focus,
.acud-timeline.number-horizontal .acud-timeline-item-line:active {
  background-color: #E8E9EB;
}
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled],
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled]:hover,
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled]:focus,
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled]:active,
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  background-color: #E8E9EB;
}
.acud-timeline.number-horizontal .acud-timeline-item-line:hover {
  border-color: transparent;
}
.acud-timeline.number-horizontal .acud-timeline-item-line:focus,
.acud-timeline.number-horizontal .acud-timeline-item-line:active {
  border-color: transparent;
}
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled],
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"],
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled]:hover,
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"]:hover,
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled]:focus,
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"]:focus,
.acud-timeline.number-horizontal .acud-timeline-item-line[disabled]:active,
.acud-timeline.number-horizontal .acud-timeline-item-line[aria-disabled="true"]:active {
  border-color: transparent;
}
.acud-timeline.number-horizontal .acud-timeline-item-content {
  margin-top: 18px;
  font-size: 12px;
}