wetrade-design/lib/stgy-graph/style/node.less

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

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

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

.@{stgy-graph-node-prefix-cls} {
  position: relative;
  border-radius: @stgy-graph-node-border-radius;
  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-graph-node-prefix-cls}-wrap,
    .@{stgy-graph-node-prefix-cls}-tools {
      border: @stgy-graph-node-light-border-radius solid @charts-sunset-sunset;
    }
  }

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

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

  &.start-node-mini {
    //
  }

  &.dragging-node {
    opacity: 0.5;
  }

  &-dragging {
    background-color: @trade-buy-buy;
    border-radius: @stgy-graph-node-dragging-border-radius;
    z-index: 2;
  }

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

    .icon-delete {
      width: @stgy-graph-delete-size;
      height: @stgy-graph-delete-size;
      font-size: @stgy-graph-delete-size;
      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;
    }
    &-error {
      border: 1px solid @fluctuation-rise-rise;
    }
  }

  &-wrap-header {
    height: @stgy-graph-node-header-height;
    padding: @stgy-graph-node-header-padding;
    // margin-bottom: 4px;
    color: @text-white;
    font-size: @stgy-graph-node-header-font-size;
    line-height: @stgy-graph-node-header-line-height;
    background-color: @trade-buy-buy;
    pointer-events: none;
    white-space: nowrap;
  }

  &-wrap-bottom {
    min-height: @stgy-graph-node-bottom-min-height;
    padding: @stgy-graph-node-bottom-padding;
    color: @text-secondary;
    font-size: @stgy-graph-node-bottom-font-size;
    pointer-events: none;
  }

  &.isSelect {
    z-index: 2;
  }

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

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

  .icon-plus {
    width: @stgy-graph-btn-size;
    height: @stgy-graph-btn-size;
    font-size: @stgy-graph-btn-size;
  }

  &-append,
  &-insert {
    cursor: pointer;
    text-align: center;
    width: @stgy-graph-btn-size;
    height: @stgy-graph-btn-size;
    line-height: @stgy-graph-btn-line-height;
    font-size: @stgy-graph-btn-size;
    background-color: @bg-page;
  }

  &-append {
    color: @charts-heliotrope-heliotrope;

    &.@{dropdown-prefix-cls} {
      &-open {
        color: @charts-heliotrope-text;
      }
    }
  }

  &-insert {
    color: @brand-primary;

    &.@{dropdown-prefix-cls} {
      &-open {
        color: @brand-active;
      }
    }
  }

  &-shrink {
    cursor: pointer;
    position: relative;
    height: @stgy-graph-btn-size;
    border-radius: @stgy-graph-btn-size;
    background-color: @bg-page;
    color: @brand-primary;
    font-size: @stgy-graph-btn-size;
    z-index: 1;
    line-height: @stgy-graph-btn-line-height;

    &__icon {
      color: @trade-selling-sellinging;
      font-size: @stgy-graph-btn-size;
    }

    &__text {
      font-size: @stgy-graph-shrink-text;
    }

    &__expand {
      display: flex;
      justify-content: center;
      align-items: center;
      width: @stgy-graph-btn-size;
      height: @stgy-graph-btn-size;
      border-radius: @stgy-graph-shrink-expand;
      border: @stgy-graph-shrink-expand-border-radius solid @trade-selling-sellinging;
      color: @trade-selling-sellinging;
      position: relative;
      font-size: @stgy-graph-shrink-expand-text-font-size;

      .@{stgy-graph-node-prefix-cls} {
        &-shrink__icon {
          font-size: @stgy-graph-shrink-expand-icon-font-size;
        }
      }
    }

    &__disabled {
      color: @brand-disable;
      cursor: not-allowed;

      .@{stgy-graph-node-prefix-cls} {
        &-shrink__expand,
        &-shrink__icon {
          pointer-events: none;
          color: @btn-warning-disable-bg;
          border-color: @btn-warning-disable-bg;
        }
      }
    }
  }
}