infogo-tree/src/styles/variables.less

A vue tree component using virtual list.

@ctree-prefix: ~"ctree";

// Colors
// Thanks to iviewui
// https://www.iviewui.com/components/color
@ctree-color-primary: #536ce6;
@ctree-color-light-primary: #7589eb;
@ctree-color-dark-primary: #2b85e4;

@ctree-color-info: #2db7f5;
@ctree-color-success: #29CC88;
@ctree-color-warning: #F9C858;
@ctree-color-error: #FF4D4D;
@ctree-color-disabled: #B3B6C1;

@ctree-color-title: #3C404D;
@ctree-color-title-2: #686e84;
@ctree-color-content: #B3B6C1;
@ctree-color-sub: #808695;
@ctree-color-border-disabled: #D9DAE0;
@ctree-color-border: #B3B6C1;
@ctree-color-divider: #ededf1;
@ctree-color-background: #f8f8f9;

@ctree-color-input-border: #536ce6;
@ctree-color-input-background-disabled: #f3f3f3;
@ctree-color-input-disabled: #f6f6f8;
@ctree-color-input-placeholder: #B3B6C1;
@ctree-color-input-default-border: #E2E2E6;

// Animations
@keyframes ctree-animation-spin {
  from {
    // 使用 translate3d 强行启用 GPU 加速，缓解 CPU 计算 SVG 的压力
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

@keyframes ctree-animation-svg-circle-spin {
  0% {
    stroke-dasharray: 1 130;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90 130;
    stroke-dashoffset: -30;
  }
  100% {
    stroke-dasharray: 90 130;
    stroke-dashoffset: -124;
  }
}