wetrade-design/es/stgy-flow/style/node.less

一款多语言支持Vue3的UI框架

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

@stgy-flow-node-prefix-cls: ~'@{wd-prefix}-stgy-flow-node';
@dropdown-prefix-cls: ~'@{wd-prefix}-dropdown';

.@{stgy-flow-node-prefix-cls} {
  position: absolute;
  // border: 1px solid transparent;
  border-radius: 8px;
  z-index: 1;
  outline: none;
  user-select: none;

  &.can-move {
    cursor: move;
  }

  &.last-node.merge-node:not(.start-node) {
    cursor: pointer;

    &.hidden-node {
      width: 0;
      height: 0;
    }
  }

  &.selected-node,
  &.lighten-node {
    .@{stgy-flow-node-prefix-cls}-wrap,
    .@{stgy-flow-node-prefix-cls}-tools {
      border: 2px solid @charts-sunset-sunset;
    }
  }

  &.lighten-node {
    .node-shrink-line {
      border-color: @charts-sunset-sunset;

      &::before,
      &::after {
        background-color: @charts-sunset-sunset;
      }
    }
  }

  &.dragging-node {
    opacity: 0.5;
  }

  &-dragging {
    background-color: @trade-buy-buy;
    border-radius: 4px;
    position: absolute;
    z-index: 2;
  }

  &-wrap {
    display: flex;
    flex-direction: column;
    background-color: @bg-dropdown;
    border: 2px solid @line-table;
    border-radius: 8px;
    box-shadow: @shadow-100-canvas;
    overflow: hidden;

    .icon-delete {
      width: 18px;
      height: 18px;
      font-size: 18px;
      color: @icon-white;
      cursor: pointer;
    }

    &:hover {
      cursor: pointer;
    }

    &:hover &-header {
      background-color: @trade-buy-hover;
    }

    &-buy:hover &-header {
      background-color: @fluctuation-rise-hover;
    }

    &-buy &-header {
      background-color: @fluctuation-rise-rise;
    }

    &-sell:hover &-header {
      background-color: @fluctuation-fall-hover;
    }

    &-sell &-header {
      background-color: @fluctuation-fall-fall;
    }
  }

  &-wrap-header {
    height: 32px;
    padding: 7px 12px;
    // margin-bottom: 4px;
    color: @text-white;
    font-size: 12px;
    line-height: 18px;
    background-color: @trade-buy-buy;
    pointer-events: none;
  }

  &-wrap-bottom {
    min-height: 28px;
    line-height: 28px;
    padding: 4px 12px;
    color: @text-secondary;
    font-size: 12px;
    pointer-events: none;
  }

  &.isSelect {
    z-index: 2;
  }

  .node-insert,
  .node-shrink {
    cursor: pointer;
    position: relative;
    height: 20px;
    border-radius: 20px;
    background-color: @bg-page;
    color: @brand-primary;
    &.@{dropdown-prefix-cls} {
      &-open {
        color: @brand-active;
      }
    }

    &-line {
      display: block;
      cursor: auto;
      // content: '';
      position: absolute;
      border-top: 1px solid @fluctuation-flat-hover;
      height: 1px;
      width: 38px;
      top: 50%;
      transform: translateY(-50%);
      right: 20px;

      &::after,
      &::before {
        position: absolute;
        content: '';
        display: block;
        pointer-events: none;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background-color: @fluctuation-flat-hover;
        top: -4px;
      }

      &::after {
        left: 0;
      }

      &::before {
        right: 0;
      }

      &__merge {
        &::after {
          display: none;
        }
      }
    }

    &-icon {
      color: @trade-selling-sellinging;
      font-size: 20px;
    }

    &-expand {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      height: 20px;
      border-radius: 10px;
      border: 2px solid @trade-selling-sellinging;
      color: @trade-selling-sellinging;
      position: relative;

      .node-shrink-icon {
        font-size: 16px;
      }

      .node-shrink-text {
        font-size: 12px;
      }
    }
  }

  .node-shrink {
    &-line {
      width: 24px;

      &::after {
        left: 0;
      }
      &::before {
        right: 0;
      }
    }
  }

  .node-shrink.node-shrink-collaspe {
    .node-shrink-line {
      width: 38px;
      right: 20px;
    }
  }

  .node-shrink.node-shrink-merge-collaspe {
    .node-shrink-line {
      &::after {
        display: none;
      }
    }
  }

  .node-shrink.node-shrink-disabled {
    color: @brand-disable;
    cursor: not-allowed;

    .node-shrink-expand,
    .node-shrink-icon {
      color: @btn-warning-disable-bg;
      border-color: @btn-warning-disable-bg;
    }
  }

  .node-insert,
  .node-delete,
  .node-shrink {
    z-index: 3;
  }

  .icon-tools-delete {
    color: @icon-tertiary;
  }

  .icon-plus {
    width: 20px;
    height: 20px;
    font-size: 20px;
  }
}