@ifed/component/es/flow/style/index.less

@ifed/component

@import '~antd/es/style/themes/index';
@import '~antd/es/style/mixins/index';

@flow-prefix-cls: ~'@{ant-prefix}-flow';
@flow-primary-color: @primary-color;
@flow-node-icon-width: 24px; //
@flow-node-icon-height: 24px; //
@flow-node-title-height: 22px; // 标题高度
@flow-line-width: 1px; // 连线粗细
@flow-node-width: 160px; // 单元节点宽度
@flow-node-height: @flow-node-icon-height + @flow-node-title-height; // 单元节点高度
@flow-branch-node-width: 160px; // 单元(小)节点宽度

@flow-lg-node-icon-width: 32px;
@flow-lg-node-icon-height: 32px;
@flow-lg-node-height: @flow-lg-node-icon-height + @flow-node-title-height;

.@{flow-prefix-cls} {
  margin: 0 auto;
  padding: 10px 0;
  position: relative;
  &-container {
    padding-bottom: 24px;
    overflow-x: auto;
  }

  &-nodes {
    margin: 0;
    padding: 0;
    width: max-content;
    display: inline-block;
  }

  &-node {
    list-style-type: none;
    color: white;
    width: @flow-node-width;
    text-align: center;
    float: left;
    position: relative;
    height: @flow-node-height;

    .@{flow-prefix-cls}-triangle {
      position: absolute;
      top: (@flow-node-icon-height / 2) - 3px;
      left: calc(50% - 23px);
      z-index: 2;
    }

    &:after {
      content: '';
      width: 100%;
      height: 0;
      border-top: @flow-line-width solid rgba(0, 0, 0, 0.16);
      position: absolute;
      left: -50%;
      top: (@flow-node-icon-height / 2);
      z-index: 1;
    }

    &:first-child:after {
      /*不显示第一个节点左侧的连线*/
      content: none;
    }
    &:first-child .@{flow-prefix-cls}-triangle {
      display: none;
    }

    .area {
      position: absolute;
      width: 100%;
      left: 50%;
      display: flex;
      justify-content: center;
      gap: 4px;
      z-index: 2;
    }
    &-up-area {
      .area;
      top: -10px;
    }
    &-down-area {
      .area;
      top: 18px;
    }
    &-icon {
      width: @flow-node-icon-width;
      height: @flow-node-icon-height;
      line-height: @flow-node-icon-height;
      display: block;
      color: #333;
      background: white;
      border-radius: 50%;
      margin: 0 auto 1px auto;
      position: relative;
      z-index: 2;
      // outline: 6px solid #fff;
      // box-shadow: 0 0 0 6px #fff;
      font-size: 12px;
    }

    &-title {
      color: #333;
      font-size: @font-size-base;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      background: #fff;
      padding: 0 4px;
      height: @flow-node-title-height;
      line-height: @flow-node-title-height;
    }

    &-wait {
      .@{flow-prefix-cls}-node-icon {
        background-color: #d9d9d9;
        // border: 2px solid #b6b6b6;
        color: #6f6f6f;
        font-size: 10px;
      }
      .@{flow-prefix-cls}-node-title {
        color: #999;
      }
    }

    &-process {
      .@{flow-prefix-cls}-node-icon {
        // background: linear-gradient(52deg, #acde41 0%, #8fc31f 100%);
        // // border: 2px solid @flow-primary-color;
        // cursor: pointer;
        // color: #fff;
        // font-size: 14px;
        width: 30px;
        height: 30px;
      }
      .@{flow-prefix-cls}-node-title {
        // color: @heading-color;
        cursor: pointer;
      }
    }

    &-finish {
      .@{flow-prefix-cls}-node-icon {
        background: linear-gradient(228deg, #0085d0 0%, #30aef6 100%);
        // border: 2px solid @flow-primary-color;
        color: #fff;
        cursor: pointer;
      }
      .@{flow-prefix-cls}-node-title {
        // color: @heading-color;
        cursor: pointer;
      }
    }

    &-finish,
    &-error,
    &-suspend,
    &-timeout {
      &:after,
      & + div:after {
        border-color: @flow-primary-color;
      }
      & .@{flow-prefix-cls}-triangle,
      & + div > .@{flow-prefix-cls}-triangle {
        border-left-color: @flow-primary-color;
      }
    }
    &-error,
    &-suspend {
      .@{flow-prefix-cls}-node-icon {
        background: linear-gradient(228deg, #ff5ab0 0%, #e40077 100%);
        color: #fff;
      }
    }

    &-timeout {
      .@{flow-prefix-cls}-node-icon {
        background: linear-gradient(228deg, #faaf0c 0%, #ffcb5a 100%);
        color: #fff;
      }
    }
  }

  &-branch {
    position: relative;
    // display: inline-block;
    width: min-content;
    line-height: 100%;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      width: 0;
      // bottom: @flow-node-title-height + (@flow-node-icon-height / 2);
      bottom: 0;
      z-index: 2;
      border-left: @flow-line-width solid rgba(0, 0, 0, 0.06);
    }

    &-mask {
      background: #fff;
      position: absolute;
      width: 1px;
      top: -(@flow-node-title-height + (@flow-node-icon-height / 2) + 1px);
      bottom: 0;
      z-index: 2;
    }
    &-active:before {
      border-color: @flow-primary-color;
    }

    .@{flow-prefix-cls}-nodes {
      padding-top: 24px;
      // margin-top: 12px;
      .@{flow-prefix-cls}-node {
        width: @flow-branch-node-width;

        &:first-child:after {
          left: 0;
          content: '';
          width: 50%;
        }
        &:first-child .@{flow-prefix-cls}-triangle {
          display: block;
        }
      }
    }

    .@{flow-prefix-cls}-braces + .@{flow-prefix-cls}-nodes {
      padding-top: 0;
    }
  }

  // 最后一个branch
  & > &-branch-corner:before,
  & &-branch &-branch-corner:before {
    bottom: @flow-node-title-height + (@flow-node-icon-height / 2);
  }

  &-braces {
    height: 66px;
    position: relative;
  }

  &-brace {
    position: absolute;
    bottom: 0;
    height: 32px;
    &::before,
    &::after,
    & ::before,
    & ::after {
      content: '';
      display: block;
      position: absolute;
      width: calc(50% - 16px);
      height: 16px;
      border-style: solid;
      border-color: @flow-primary-color;
      border-width: 0;
    }
    & ::before,
    & ::after {
      top: 16px;
      border-top-width: 1px;
    }
    &::before,
    &::after {
      top: 1px;
      border-bottom-width: 1px;
    }
    & ::before {
      left: 0;
      border-top-left-radius: 16px;
    }
    & ::after {
      right: 0;
      border-top-right-radius: 16px;
    }
    &::before {
      left: 16px;
      border-bottom-right-radius: 16px;
    }
    &::after {
      right: 16px;
      border-bottom-left-radius: 16px;
    }
    &-main {
      margin-top: -32px;
      text-align: center;
    }
    &-title {
      margin-right: 4px;
    }
    &-content {
      line-height: 30px;
      background: #ffffff;
      box-shadow: 0px 1px 2px 0px rgba(0, 28, 56, 0.08);
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #f0f0f0;
      color: @flow-primary-color;
      display: inline-block;
      padding: 0 16px;
      width: max-content;
    }
  }
  &-red {
    color: #fd7a7a;
  }
  &-badge {
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 12px;
    color: #fff;
    &.red {
      background: #e40077;
    }
    &.yellow {
      background: #faaf0c;
    }
    &.pink {
      background: #ff7ab2;
    }
  }
  &-label {
    font-size: 12px;
    line-height: 18px;
    height: 18px;
    padding: 0 4px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #333333;
    color: #333;
    &.red {
      border-color: #e40077;
      color: #e40077;
    }
    &.blue {
      border-color: @flow-primary-color;
      color: @flow-primary-color;
    }
  }

  &-triangle {
    width: 0;
    height: 0;
    border-left: 8px solid #d9d9d9;
    border-right: 8px solid #fff;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
  }

  &&-lg {
    .@{flow-prefix-cls}-node {
      height: @flow-lg-node-height;

      .@{flow-prefix-cls}-triangle {
        top: (@flow-lg-node-icon-height / 2) - 3px;
      }

      &:after {
        top: (@flow-lg-node-icon-height / 2);
      }
      &-process {
        .@{flow-prefix-cls}-node-icon {
          width: 32px;
          height: 32px;
          > .flow-icon-process {
            width: 32px;
            height: 32px;
          }
        }
      }
      &-icon {
        width: @flow-lg-node-icon-width;
        height: @flow-lg-node-icon-height;
        line-height: @flow-lg-node-icon-height;

        & > img,
        & > svg {
          width: @flow-lg-node-icon-width;
          height: @flow-lg-node-icon-height;
        }
      }
    }

    .@{flow-prefix-cls}-branch {
      &-mask {
        background: #fff;
        position: absolute;
        width: 1px;
        top: -(@flow-node-title-height + (@flow-lg-node-icon-height / 2) + 1px);
        bottom: 0;
        z-index: 2;
      }
    }

    & > .@{flow-prefix-cls}-branch-corner:before,
    & .@{flow-prefix-cls}-branch .@{flow-prefix-cls}-branch-corner:before {
      bottom: @flow-node-title-height + (@flow-lg-node-icon-height / 2);
    }
  }
}

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0px);
  }
}
.anticon-environment {
  animation: jump 0.8s linear infinite;
}