Separate less variables

Author: leezng

src/assets/less/checkbox.less

@@ -1,56 +1,61 @@
-.vjs-checkbox {
+@import "./var.less";
+
+.@{css-prefix}-checkbox {
+  position: absolute;
+  left: -@selectabl-span;
   color: #1f2d3d;
   user-select: none;
-  .vjs-checkbox__input {
-    outline: 0;
-    line-height: 1;
-    vertical-align: middle;
-    cursor: pointer;
-    display: inline-block;
-    position: relative;
-    white-space: nowrap;
-    &.is-checked .vjs-checkbox__inner {
-      background-color: #20a0ff;
-      border-color: #0190fe;
-      &:after {
-        transform: rotate(45deg) scaleY(1);
-      }
+
+  &.is-checked .@{css-prefix}-checkbox__inner {
+    background-color: @color-primary;
+    border-color: darken(@color-primary, 10%);
+
+    &:after {
+      transform: rotate(45deg) scaleY(1);
     }
   }
-  .vjs-checkbox__inner {
+
+  .@{css-prefix}-checkbox__inner {
     display: inline-block;
     position: relative;
-    border: 1px solid #bfcbd9;
-    border-radius: 4px;
+    border: 1px solid @border-color;
+    border-radius: 2px;
+    vertical-align: middle;
     box-sizing: border-box;
-    width: 18px;
-    height: 18px;
+    width: 16px;
+    height: 16px;
     background-color: #fff;
     z-index: 1;
-    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
+    cursor: pointer;
+    transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46),
+                background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
+                
     &:after {
       box-sizing: content-box;
       content: "";
       border: 2px solid #fff;
       border-left: 0;
       border-top: 0;
       height: 8px;
-      left: 5px;
+      left: 4px;
       position: absolute;
       top: 1px;
       transform: rotate(45deg) scaleY(0);
       width: 4px;
-      transition: transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;
+      transition: transform .15s cubic-bezier(.71, -.46, .88, .6) .05s;
       transform-origin: center;
     }
   }
-  .vjs-checkbox__original {
+
+  .@{css-prefix}-checkbox__original {
     opacity: 0;
-    outline: 0;
+    outline: none;
     position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
     margin: 0;
-    width: 0;
-    height: 0;
-    left: -999px;
   }
 }

src/assets/less/tree.less

@@ -1,30 +1,53 @@
-@content-padding: 1em; /* 树内容区域缩进2个英文字符, 此处1em为1个中文字符=2个英文字符 */
+@import "./var.less";
 
-.vjs__tree {
+/* 树内容区域缩进2个英文字符, 此处1em为1个中文字符=2个英文字符 */
+@content-padding: 1em;
+
+.mixin-value-style(@color) {
+  color: @color;
+}
+
+.@{css-prefix}-tree {
   font-family: "Monaco", "Menlo", "Consolas", "Bitstream Vera Sans Mono", monospace;
   font-size: 14px;
-  .vjs__tree__content {
+
+  &.is-root {
+    position: relative;
+
+    &.has-selectable-control {
+      margin-left: @selectabl-span;
+    }
+  }
+
+  &.is-mouseover {
+    background-color: @highlight-bg-color;
+  }
+
+  .@{css-prefix}-tree__content {
     padding-left: @content-padding;
-    border-left: 1px dotted #ccc;
+    border-left: 1px dotted @border-color;
   }
-  .vjs__tree__node {
+
+  .@{css-prefix}-tree__brackets {
     cursor: pointer;
     &:hover {
-      color: #20a0ff;
+      color: @color-primary;
     }
   }
-  .vjs-checkbox {
-    position: absolute;
-    left: -30px;
+
+  .@{css-prefix}-value__null {
+    .mixin-value-style(@color-null);
   }
-  .vjs__value__null {
-    color: #ff4949;
+
+  .@{css-prefix}-value__number {
+    .mixin-value-style(@color-number);
   }
-  .vjs__value__number,
-  .vjs__value__boolean {
-    color: #1d8ce0;
+
+  .@{css-prefix}-value__boolean {
+    .mixin-value-style(@color-boolean);
   }
-  .vjs__value__string {
-    color: #13ce66;
+
+  .@{css-prefix}-value__string {
+    .mixin-value-style(@color-string);
   }
 }

src/assets/less/var.less

@@ -0,0 +1,23 @@
+/* css scope */
+@css-prefix: vjs;
+
+/* theme color */
+@color-primary: #20a0ff;
+@color-info: #1d8ce0;
+@color-error: #ff4949;
+@color-success: #13ce66;
+
+/* field values color */
+@color-string: @color-success;
+@color-number: @color-info;
+@color-boolean: @color-info;
+@color-null: @color-error;
+
+/* highlight */
+@highlight-bg-color: #eee;
+
+/* common border-color */
+@border-color: #bfcbd9;
+
+/* 左侧可选区域占用空间 */
+@selectabl-span: 30px;