主题变量抽取

build/Tree.css

@@ -5,15 +5,33 @@
 /*  Navlayout  */
 .u-checkbox {
   display: inline-block;
-  position: relative; }
+  position: relative;
+  margin: 0 5px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
   .u-checkbox.disabled .u-checkbox-label {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    display: none;
+    position: absolute;
-    cursor: pointer; }
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
   .u-checkbox input[disabled] {
     cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: rgb(30,136,229); }
   .u-checkbox.is-checked .u-checkbox-label:before {
     -moz-box-shadow: inset 0 0 0 10px rgb(30,136,229);
     -webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229);
@@ -44,7 +62,7 @@
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
     .u-checkbox .u-checkbox-label:after {
@@ -54,7 +72,7 @@
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
 
@@ -65,8 +83,8 @@
   font-size: 14px; }
 
 .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
-  box-shadow: inset 0 0 0 10px #1e88e5;
+  box-shadow: inset 0 0 0 10px rgb(30,136,229);
-  border-color: #1e88e5; }
+  border-color: rgb(30,136,229); }
 
 .u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(76,175,80);
@@ -74,30 +92,45 @@
   box-shadow: inset 0 0 0 10px rgb(76,175,80);
   border-color: rgb(76,175,80); }
 
+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(255,152,0);
   -webkit-box-shadow: inset 0 0 0 10px rgb(255,152,0);
   box-shadow: inset 0 0 0 10px rgb(255,152,0);
   border-color: rgb(255,152,0); }
 
+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(244,67,54);
   -webkit-box-shadow: inset 0 0 0 10px rgb(244,67,54);
   box-shadow: inset 0 0 0 10px rgb(244,67,54);
   border-color: rgb(244,67,54); }
 
+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(97,97,97);
   -webkit-box-shadow: inset 0 0 0 10px rgb(97,97,97);
   box-shadow: inset 0 0 0 10px rgb(97,97,97);
   border-color: rgb(97,97,97); }
 
+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
   -moz-box-shadow: inset 0 0 0 10px rgb(0,188,212);
   -webkit-box-shadow: inset 0 0 0 10px rgb(0,188,212);
   box-shadow: inset 0 0 0 10px rgb(0,188,212);
   border-color: rgb(0,188,212); }
 
+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 .u-tree {
   margin: 0;
   padding: 5px;
@@ -111,8 +144,8 @@
     position: relative;
     vertical-align: middle; }
   .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
-    background-color: #108ee9;
+    background-color: rgb(30,136,229);
-    border-color: #108ee9; }
+    border-color: rgb(30,136,229); }
   .u-tree .u-tree-checkbox-inner {
     position: relative;
     top: 0;
@@ -126,8 +159,8 @@
     -webkit-transition: all .3s;
     transition: all .3s; }
   .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
-    background-color: #108ee9;
+    background-color: rgb(30,136,229);
-    border-color: #108ee9; }
+    border-color: rgb(30,136,229); }
   .u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
     border-color: #d9d9d9;
     background-color: #f3f3f3; }
@@ -224,9 +257,11 @@
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease; }
   .u-tree li a:hover {
-    background-color: #e7f4fd; }
+    background-color: rgb(227,242,253); }
   .u-tree li a.u-tree-node-selected {
-    background-color: #cfe8fb; }
+    background-color: rgb(227,242,253); }
+    .u-tree li a.u-tree-node-selected .u-tree-title {
+      color: rgb(30,136,229); }
   .u-tree li span.u-checkbox {
     margin: 2px 4px 0 0; }
   .u-tree li span.u-tree-switcher,

demo/demolist/Demo1.js

@@ -61,7 +61,7 @@ class Demo1 extends Component {
 	            <TreeNode title="leaf" key="0-0-0-1" icon={<Icon type="uf-list-s-o" />}/>
 	          </TreeNode>
 	          <TreeNode title="parent 1-1" key="0-0-1" icon={<Icon type="uf-treefolder" />}>
-	            <TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" icon={<Icon type="uf-list-s-o" />}/>
+	            <TreeNode title={<span>sss</span>} key="0-0-1-0" icon={<Icon type="uf-list-s-o" />}/>
 	          </TreeNode>
 	        </TreeNode>
 	      </Tree>

dist/demo.css

@@ -2418,9 +2418,6 @@ i.uf {
 /*
  * 选择时删除文本阴影，及设置默认选中颜色
  */
-::-moz-selection {
-  background: rgb(187,222,251);
-  text-shadow: none; }
 ::selection {
   background: rgb(187,222,251);
   text-shadow: none; }
@@ -3478,6 +3475,60 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
 .uf-treeline-copy:before {
   content: "\e994"; }
 
+.uf-listwithdots:before {
+  content: "\e9cd"; }
+
+.uf-gridlogo:before {
+  content: "\e900"; }
+
+.uf-magnifyingglass:before {
+  content: "\e9ce"; }
+
+.uf-anglearrowdown:before {
+  content: "\e9cf"; }
+
+.uf-yongyouyunchnen:before {
+  content: "\e98d"; }
+
+.uf-yycloud:before {
+  content: "\e68f"; }
+
+.uf-funnel-o:before {
+  content: "\e63c"; }
+
+.uf-filter:before {
+  content: "\e9d0"; }
+
+.uf-filterno:before {
+  content: "\e9d1"; }
+
+.uf-clean:before {
+  content: "\e9d2"; }
+
+.uf-save:before {
+  content: "\e9d3"; }
+
+.uf-export:before {
+  content: "\e9d4"; }
+
+.uf-import:before {
+  content: "\e9d5"; }
+
+.uf-stop-c:before {
+  content: "\e9d6"; }
+
+.uf-rubber:before {
+  content: "\e9d7"; }
+
+.uf-bediting:before {
+  content: "\e9d8"; }
+
+.uf-maxmize:before {
+  content: "\e9d9"; }
+
+.uf-minimize:before {
+  content: "\e9da"; }
+
 /* FormGroup */
 /*  Navlayout  */
 .vertical-align {
@@ -5208,15 +5259,33 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
 /*  Navlayout  */
 .u-checkbox {
   display: inline-block;
-  position: relative; }
+  position: relative;
+  margin: 0 5px;
+  height: 18px;
+  line-height: 18px;
+  font-size: 14px;
+  white-space: nowrap;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  line-height: 1;
+  vertical-align: middle; }
   .u-checkbox.disabled .u-checkbox-label {
     cursor: not-allowed;
     opacity: 0.5; }
   .u-checkbox input[type='checkbox'] {
-    display: none;
+    position: absolute;
-    cursor: pointer; }
+    z-index: 3;
+    cursor: pointer;
+    opacity: 0;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    height: 100%; }
   .u-checkbox input[disabled] {
     cursor: not-allowed; }
+  .u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
+    border-color: rgb(30,136,229); }
   .u-checkbox.is-checked .u-checkbox-label:before {
     box-shadow: inset 0 0 0 10px rgb(30,136,229);
     border-color: rgb(30,136,229); }
@@ -5240,7 +5309,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
     .u-checkbox .u-checkbox-label:after {
@@ -5250,7 +5319,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
       width: 18px;
       height: 18px;
       left: 0;
-      top: 4px;
+      top: 0;
       text-align: center;
       position: absolute; }
 
@@ -5261,29 +5330,44 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   font-size: 14px; }
 
 .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
-  box-shadow: inset 0 0 0 10px #1e88e5;
+  box-shadow: inset 0 0 0 10px rgb(30,136,229);
-  border-color: #1e88e5; }
+  border-color: rgb(30,136,229); }
 
 .u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(76,175,80);
   border-color: rgb(76,175,80); }
 
+.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(76,175,80); }
+
 .u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(255,152,0);
   border-color: rgb(255,152,0); }
 
+.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(255,152,0); }
+
 .u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(244,67,54);
   border-color: rgb(244,67,54); }
 
+.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(244,67,54); }
+
 .u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(97,97,97);
   border-color: rgb(97,97,97); }
 
+.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(97,97,97); }
+
 .u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
   box-shadow: inset 0 0 0 10px rgb(0,188,212);
   border-color: rgb(0,188,212); }
 
+.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
+  border-color: rgb(0,188,212); }
+
 .u-tree {
   margin: 0;
   padding: 5px;
@@ -5297,8 +5381,8 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
     position: relative;
     vertical-align: middle; }
   .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
-    background-color: #108ee9;
+    background-color: rgb(30,136,229);
-    border-color: #108ee9; }
+    border-color: rgb(30,136,229); }
   .u-tree .u-tree-checkbox-inner {
     position: relative;
     top: 0;
@@ -5311,8 +5395,8 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
     background-color: #fff;
     transition: all .3s; }
   .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
-    background-color: #108ee9;
+    background-color: rgb(30,136,229);
-    border-color: #108ee9; }
+    border-color: rgb(30,136,229); }
   .u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
     border-color: #d9d9d9;
     background-color: #f3f3f3; }
@@ -5398,9 +5482,11 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
     color: #666;
     transition: all 0.3s ease; }
   .u-tree li a:hover {
-    background-color: #e7f4fd; }
+    background-color: rgb(227,242,253); }
   .u-tree li a.u-tree-node-selected {
-    background-color: #cfe8fb; }
+    background-color: rgb(227,242,253); }
+    .u-tree li a.u-tree-node-selected .u-tree-title {
+      color: rgb(30,136,229); }
   .u-tree li span.u-checkbox {
     margin: 2px 4px 0 0; }
   .u-tree li span.u-tree-switcher,
@@ -5612,6 +5698,18 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-panel .u-panel-body {
     padding: 15px 15px;
     position: relative; }
+    .u-panel .u-panel-body .u-panel-copy {
+      position: absolute;
+      right: 25px;
+      top: 30px;
+      color: #fff;
+      font-size: 20px;
+      padding: 2px 8px;
+      margin: 8px;
+      border-radius: 4px;
+      cursor: pointer; }
+      .u-panel .u-panel-body .u-panel-copy:hover {
+        color: #a8a7a7; }
 
 .u-panel-default {
   border-color: #ddd; }
@@ -6265,7 +6363,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
 /*  Navlayout  */
 .u-button {
   background: rgb(224,224,224);
-  border: none;
+  border: 1px solid rgb(224,224,224);
   border-radius: 4px;
   color: rgb(0,0,0);
   position: relative;
@@ -6288,13 +6386,16 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
   .u-button::-moz-focus-inner {
     border: 0; }
   .u-button:hover {
-    background-color: rgb(238,238,238); }
+    background-color: rgb(238,238,238);
+    border-color: rgb(238,238,238); }
   .u-button:active {
-    background-color: rgb(189,189,189); }
+    background-color: rgb(189,189,189);
+    border-color: rgb(189,189,189); }
   .u-button.colored {
     color: rgb(30,136,229); }
     .u-button.colored:focus:not(:active) {
-      background-color: rgb(189,189,189); }
+      background-color: rgb(238,238,238);
+      border-color: rgb(189,189,189); }
   .u-button.disable {
     -webkit-box-shadow: none;
     filter: alpha(opacity=65);
@@ -6314,7 +6415,7 @@ input.u-button[type="submit"] {
   width: 38px;
   padding: 0;
   line-height: normal;
-  border: 1px solid rgb(224,224,224); }
+  border: 1px solid rgb(189,189,189); }
   .u-button-floating.colored {
     background: rgb(67,160,71);
     color: rgb(255,255,255);
@@ -6340,63 +6441,114 @@ input.u-button[type="submit"] {
     background-color: #e6e6e6;
     border-color: #adadad; }
 
-.u-button-primary {
+.u-button-border {
+  color: rgb(30,136,229);
+  border: 1px solid rgb(189,189,189);
+  background: rgb(255,255,255); }
+  .u-button-border:hover {
+    color: rgb(30,136,229);
+    background-color: rgb(238,238,238);
+    border-color: rgb(189,189,189); }
+  .u-button-border:active {
+    color: rgb(30,136,229);
+    background-color: rgb(189,189,189);
+    border-color: rgb(189,189,189); }
+  .u-button-border:focus:not(:active) {
+    color: rgb(30,136,229);
+    background-color: rgb(238,238,238);
+    border-color: rgb(189,189,189); }
+
+.u-button.u-button-primary {
   color: rgb(255,255,255);
   background-color: rgb(30,136,229);
   border: 1px rgb(30,136,229) solid; }
-  .u-button-primary.focus, .u-button-primary:focus, .u-button-primary:hover {
+  .u-button.u-button-primary.focus, .u-button.u-button-primary:focus, .u-button.u-button-primary:hover {
     background-color: rgb(66,165,245);
     border-color: rgb(66,165,245); }
-  .u-button-primary.active, .u-button-primary:active {
+  .u-button.u-button-primary.active, .u-button.u-button-primary:active {
     background-color: rgb(21,101,192);
     border-color: rgb(21,101,192); }
 
-.u-button-danger {
+.u-button.u-button-secondary {
+  color: rgb(0,0,0);
+  background-color: rgb(224,224,224);
+  border: 1px rgb(224,224,224) solid; }
+  .u-button.u-button-secondary.focus, .u-button.u-button-secondary:focus, .u-button.u-button-secondary:hover {
+    background-color: rgb(238,238,238);
+    border-color: rgb(238,238,238); }
+  .u-button.u-button-secondary.active, .u-button.u-button-secondary:active {
+    background-color: rgb(189,189,189);
+    border-color: rgb(189,189,189); }
+
+.u-button.u-button-danger {
   color: rgb(255,255,255);
   background-color: rgb(244,67,54);
   border: 1px rgb(244,67,54) solid; }
-  .u-button-danger.focus, .u-button-danger:focus, .u-button-danger:hover {
+  .u-button.u-button-danger.focus, .u-button.u-button-danger:focus, .u-button.u-button-danger:hover {
     background-color: rgb(229,115,115);
     border-color: rgb(229,115,115); }
-  .u-button-danger.active, .u-button-danger:active {
+  .u-button.u-button-danger.active, .u-button.u-button-danger:active {
     background-color: rgb(211,47,47);
     border-color: rgb(211,47,47); }
 
-.u-button-info {
+.u-button.u-button-info {
   color: rgb(255,255,255);
   background-color: rgb(0,188,212);
   border: 1px rgb(0,188,212) solid; }
-  .u-button-info.focus, .u-button-info:focus, .u-button-info:hover {
+  .u-button.u-button-info.focus, .u-button.u-button-info:focus, .u-button.u-button-info:hover {
     background-color: rgb(77,208,225);
     border-color: rgb(77,208,225); }
-  .u-button-info.active, .u-button-info:active {
+  .u-button.u-button-info.active, .u-button.u-button-info:active {
     background-color: rgb(0,151,167);
     border-color: rgb(0,151,167); }
 
-.u-button-warning {
+.u-button.u-button-warning {
   color: rgb(255,255,255);
   background-color: rgb(255,152,0);
   border: 1px rgb(255,152,0) solid; }
-  .u-button-warning.focus, .u-button-warning:focus, .u-button-warning:hover {
+  .u-button.u-button-warning.focus, .u-button.u-button-warning:focus, .u-button.u-button-warning:hover {
     background-color: rgb(255,183,77);
     border-color: rgb(255,183,77); }
-  .u-button-warning.active, .u-button-warning:active {
+  .u-button.u-button-warning.active, .u-button.u-button-warning:active {
     background-color: rgb(245,124,0);
     border-color: rgb(245,124,0); }
 
-.u-button-success {
+.u-button.u-button-success {
   color: rgb(255,255,255);
   background-color: rgb(76,175,80);
   border: 1px rgb(76,175,80) solid; }
-  .u-button-success.focus, .u-button-success:focus, .u-button-success:hover {
+  .u-button.u-button-success.focus, .u-button.u-button-success:focus, .u-button.u-button-success:hover {
     background-color: rgb(129,199,132);
     border-color: rgb(129,199,132); }
-  .u-button-success.active, .u-button-success:active {
+  .u-button.u-button-success.active, .u-button.u-button-success:active {
     background-color: rgb(56,142,60);
     border-color: rgb(56,142,60); }
 
+.u-button.u-button-dark {
+  color: rgb(255,255,255);
+  background-color: rgb(97,97,97);
+  border: 1px rgb(97,97,97) solid; }
+  .u-button.u-button-dark.focus, .u-button.u-button-dark:focus, .u-button.u-button-dark:hover {
+    background-color: rgb(117,117,117);
+    border-color: rgb(117,117,117); }
+  .u-button.u-button-dark.active, .u-button.u-button-dark:active {
+    background-color: rgb(66,66,66);
+    border-color: rgb(66,66,66); }
+
+.u-button.u-button-light {
+  color: rgb(97,97,97);
+  background-color: rgb(255,255,255);
+  border: 1px rgb(255,255,255) solid; }
+  .u-button.u-button-light.focus, .u-button.u-button-light:focus, .u-button.u-button-light:hover {
+    background-color: rgb(238,238,238);
+    border-color: rgb(238,238,238); }
+  .u-button.u-button-light.active, .u-button.u-button-light:active {
+    background-color: rgb(189,189,189);
+    border-color: rgb(189,189,189); }
+
 .u-button-border.u-button-success {
   color: rgb(76,175,80);
+  background-color: #fff;
   border: 1px rgb(76,175,80) solid; }
   .u-button-border.u-button-success.focus, .u-button-border.u-button-success:focus, .u-button-border.u-button-success:hover {
     background-color: rgb(129,199,132);
@@ -6409,6 +6561,7 @@ input.u-button[type="submit"] {
 
 .u-button-border.u-button-warning {
   color: rgb(255,152,0);
+  background-color: #fff;
   border: 1px rgb(255,152,0) solid; }
   .u-button-border.u-button-warning.focus, .u-button-border.u-button-warning:focus, .u-button-border.u-button-warning:hover {
     background-color: rgb(255,183,77);
@@ -6421,6 +6574,7 @@ input.u-button[type="submit"] {
 
 .u-button-border.u-button-danger {
   color: rgb(244,67,54);
+  background-color: #fff;
   border: 1px rgb(244,67,54) solid; }
   .u-button-border.u-button-danger.focus, .u-button-border.u-button-danger:focus, .u-button-border.u-button-danger:hover {
     background-color: rgb(229,115,115);
@@ -6433,6 +6587,7 @@ input.u-button[type="submit"] {
 
 .u-button-border.u-button-info {
   color: rgb(0,188,212);
+  background-color: #fff;
   border: 1px rgb(0,188,212) solid; }
   .u-button-border.u-button-info.focus, .u-button-border.u-button-info:focus, .u-button-border.u-button-info:hover {
     background-color: rgb(77,208,225);
@@ -6445,6 +6600,7 @@ input.u-button[type="submit"] {
 
 .u-button-border.u-button-primary {
   color: rgb(30,136,229);
+  background-color: #fff;
   border: 1px rgb(30,136,229) solid; }
   .u-button-border.u-button-primary.focus, .u-button-border.u-button-primary:focus, .u-button-border.u-button-primary:hover {
     background-color: rgb(66,165,245);
@@ -6455,18 +6611,44 @@ input.u-button[type="submit"] {
     background-color: rgb(21,101,192);
     border-color: rgb(21,101,192); }
 
-.u-button-border {
+.u-button-border.u-button-secondary {
-  color: rgb(0,0,0);
+  color: rgb(224,224,224);
-  border: 1px solid #d9d9d9;
+  background-color: #fff;
-  background-color: #fff; }
+  border: 1px rgb(224,224,224) solid; }
-
+  .u-button-border.u-button-secondary.focus, .u-button-border.u-button-secondary:focus, .u-button-border.u-button-secondary:hover {
-.u-button-border:hover, .u-button-border:focus {
+    background-color: rgb(238,238,238);
-  color: rgb(0,0,0);
+    border-color: rgb(238,238,238);
-  background: rgb(238,238,238); }
+    color: #fff; }
-
+  .u-button-border.u-button-secondary.active, .u-button-border.u-button-secondary:active {
-.u-button-border:active {
     color: #fff;
-  background: rgb(189,189,189); }
+    background-color: rgb(189,189,189);
+    border-color: rgb(189,189,189); }
+
+.u-button-border.u-button-dark {
+  color: rgb(97,97,97);
+  background-color: #fff;
+  border: 1px rgb(97,97,97) solid; }
+  .u-button-border.u-button-dark.focus, .u-button-border.u-button-dark:focus, .u-button-border.u-button-dark:hover {
+    background-color: rgb(117,117,117);
+    border-color: rgb(117,117,117);
+    color: #fff; }
+  .u-button-border.u-button-dark.active, .u-button-border.u-button-dark:active {
+    color: #fff;
+    background-color: rgb(66,66,66);
+    border-color: rgb(66,66,66); }
+
+.u-button-border.u-button-light {
+  color: rgb(97,97,97);
+  background-color: #fff;
+  border: 1px rgb(255,255,255) solid; }
+  .u-button-border.u-button-light.focus, .u-button-border.u-button-light:focus, .u-button-border.u-button-light:hover {
+    background-color: rgb(238,238,238);
+    border-color: rgb(238,238,238);
+    color: #fff; }
+  .u-button-border.u-button-light.active, .u-button-border.u-button-light:active {
+    color: #fff;
+    background-color: rgb(189,189,189);
+    border-color: rgb(189,189,189); }
 
 .u-button-icon {
   border-radius: 50%;
@@ -6477,7 +6659,7 @@ input.u-button[type="submit"] {
   width: 32px;
   padding: 0;
   line-height: normal;
-  border: 1px solid rgb(224,224,224); }
+  border: 1px solid rgb(189,189,189); }
 
 .u-button-lg {
   padding: 8px 15px;
@@ -6542,6 +6724,8 @@ input.u-button[type="submit"] {
   .u-form-control:focus {
     border-color: #66afe9;
     outline: 0; }
+  .u-form-control::-ms-clear, .u-form-control ::-ms-reveal {
+    display: none; }
 
 .u-form-control[disabled] {
   background: #eee;

package.json

@@ -39,7 +39,7 @@
  "dependencies": {
   "babel-runtime": "^6.23.0",
   "bee-animate": "^1.0.0",
-  "bee-checkbox": "^1.0.5",
+  "bee-checkbox": "^2.0.1",
   "classnames": "^2.2.5",
   "tinper-bee-core": "latest"
  },

src/Tree.scss

@@ -23,8 +23,8 @@ $treePrefixCls : "u-tree";
     vertical-align: middle;
   }
   .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
-      background-color: #108ee9;
+      background-color: $tree-checkbox-color;
-      border-color: #108ee9;
+      border-color: $tree-checkbox-color;
   }
   .u-tree-checkbox-inner {
       position: relative;
@@ -40,8 +40,8 @@ $treePrefixCls : "u-tree";
       transition: all .3s;
   }
   .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
-      background-color: #108ee9;
+      background-color: $tree-checkbox-color;
-      border-color: #108ee9;
+      border-color: $tree-checkbox-color;
   }
   .u-tree-checkbox-disabled .u-tree-checkbox-inner {
       border-color: #d9d9d9;
@@ -154,10 +154,13 @@ $treePrefixCls : "u-tree";
     transition: all 0.3s ease;
   }
   li a:hover {
-    background-color: #e7f4fd;
+    background-color: $tree-node-bg-color;
   }
   li a.u-tree-node-selected {
-    background-color: #cfe8fb;
+    background-color: $tree-node-bg-color;
+    .u-tree-title{
+      color: unquote("rgb(#{$primary-color})");
+    }
   }
   li span.u-checkbox {
     margin: 2px 4px 0 0;