vue-tree-polyfill/src/styles/variables.less

A vue tree component using virtual list.

@vtree-prefix: ~'vtree';

// Colors
// Thanks to iviewui
// https://www.iviewui.com/components/color
@vtree-color-primary: #2d8cf0;
@vtree-color-light-primary: #5cadff;
@vtree-color-dark-primary: #2b85e4;

@vtree-color-info: #2db7f5;
@vtree-color-success: #19be6b;
@vtree-color-warning: #ff9900;
@vtree-color-error: #ed4014;

@vtree-color-title: #17233d;
@vtree-color-content: #515a6e;
@vtree-color-sub: #808695;
@vtree-color-disabled: #c5c8ce;
@vtree-color-border: #dcdee2;
@vtree-color-divider: #e8eaec;
@vtree-color-background: #f8f8f9;

@vtree-color-input-border: #57a3f3;
@vtree-color-input-background-disabled: #f3f3f3;
@vtree-color-input-disabled: #ccc;
@vtree-color-input-placeholder: #c5c8ce;

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

@keyframes vtree-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;
  }
}