innov
/
bee-tree
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Wiki Activity

选中色统一

This commit is contained in:
yangchch6 2019-03-19 16:24:35 +08:00
parent 429de2473a
commit 3792e9382a
8 changed files with 182 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

163
build/Tree.css
View File

@ -6,9 +6,9 @@
.u-checkbox {
display: inline-block;
position: relative;
margin: 0 5px;
height: 18px;
line-height: 18px;
margin: 0 8px;
height: 16px;
line-height: 16px;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
@ -16,9 +16,6 @@
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'] {
position: absolute;
z-index: 3;
@ -31,36 +28,42 @@
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(30,136,229); }
border-color: rgb(245, 60, 50); }
.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);
box-shadow: inset 0 0 0 10px rgb(30,136,229);
border-color: rgb(30,136,229); }
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.is-checked .u-checkbox-label:after {
color: #fff;
color: rgb(245, 60, 50);
content: "\e658";
line-height: 18px;
font-size: 14px; }
line-height: 16px;
font-size: 12px;
font-weight: 600; }
.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
border-color: rgb(245, 60, 50); }
.u-checkbox.is-checked.u-checkbox-inverse .u-checkbox-label:after {
color: #fff; }
.u-checkbox .u-checkbox-label {
cursor: pointer;
display: inline-block;
padding-left: 25px; }
padding-left: 25px;
line-height: 16px;
color: #212121; }
.u-checkbox .u-checkbox-label:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: 1px solid;
border: 1px solid rgb(165, 173, 186);
background-color: #fff;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
content: '';
font-family: 'uf';
display: inline-block;
width: 18px;
height: 18px;
width: 16px;
height: 16px;
left: 0;
top: 0;
text-align: center;
@ -69,64 +72,97 @@
content: '';
font-family: 'uf';
display: inline-block;
width: 18px;
height: 18px;
width: 16px;
height: 16px;
left: 0;
top: 0;
text-align: center;
position: absolute; }
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
color: #fff;
content: "\e6ce";
line-height: 18px;
font-size: 14px; }
.u-checkbox.disabled .u-checkbox-label {
cursor: not-allowed;
color: #909090; }
.u-checkbox.disabled .u-checkbox-label:before {
border-color: #DFE1E6;
color: #909090; }
.u-checkbox.disabled .u-checkbox-label:after {
color: #c1c7d0; }
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px rgb(30,136,229);
border-color: rgb(30,136,229); }
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
color: rgb(245, 60, 50);
content: "\e6ce";
line-height: 16px;
font-size: 12px;
font-weight: 600; }
.u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
-webkit-box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
box-shadow: inset 0 0 0 10px rgb(245, 60, 50);
border-color: rgb(245, 60, 50); }
.u-checkbox.u-checkbox-indeterminate.u-checkbox-inverse .u-checkbox-label:after {
color: #fff; }
.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(76,175,80);
-webkit-box-shadow: inset 0 0 0 10px rgb(76,175,80);
box-shadow: inset 0 0 0 10px rgb(76,175,80);
border-color: rgb(76,175,80); }
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.u-checkbox-success.is-checked .u-checkbox-label:after {
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); }
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:after {
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); }
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:after {
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); }
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:after {
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); }
-moz-box-shadow: inset 0 0 0 10px #fff;
-webkit-box-shadow: inset 0 0 0 10px #fff;
box-shadow: inset 0 0 0 10px #fff;
border-color: rgb(165, 173, 186); }
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:after {
color: rgb(0,188,212); }
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: rgb(0,188,212); }
@ -134,7 +170,8 @@
.u-tree {
margin: 0;
padding: 5px;
font-size: 12px; }
font-size: 12px;
outline: none; }
.u-tree .u-tree-checkbox {
white-space: nowrap;
cursor: pointer;
@ -144,8 +181,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: rgb(30,136,229);
border-color: rgb(30,136,229); }
background-color: rgb(245, 60, 50);
border-color: rgb(245, 60, 50); }
.u-tree .u-tree-checkbox-inner {
position: relative;
top: 0;
@ -159,8 +196,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: rgb(30,136,229);
border-color: rgb(30,136,229); }
background-color: rgb(245, 60, 50);
border-color: rgb(245, 60, 50); }
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9;
background-color: #f3f3f3; }
@ -222,8 +259,6 @@
list-style: none;
white-space: nowrap;
outline: 0; }
.u-tree li:first-child {
padding-top: 8px; }
.u-tree li:last-child {
padding-bottom: 0; }
.u-tree li a[draggable],
@ -257,17 +292,17 @@
cursor: pointer;
text-decoration: none;
vertical-align: middle;
color: #666;
color: #212121;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease; }
.u-tree li a.u-tree-node-content-wrapper {
width: calc(100% - 18px); }
.u-tree li a:hover {
background-color: rgb(243,243,243); }
background-color: rgb(235, 236, 240); }
.u-tree li a.u-tree-node-selected {
background-color: rgb(243,243,243); }
background-color: rgb(255, 247, 231); }
.u-tree li a.u-tree-node-selected .u-tree-title {
color: rgb(30,136,229); }
color: rgb(245, 60, 50); }
.u-tree li span.u-checkbox {
margin: 2px 4px 0 0; }
.u-tree li span.u-tree-switcher,
@ -335,7 +370,7 @@
.u-tree .u-tree-treenode-disabled > span,
.u-tree .u-tree-treenode-disabled > a,
.u-tree .u-tree-treenode-disabled > a span {
color: #ccc;
color: #909090;
cursor: not-allowed; }
.u-tree .u-tree-treenode-disabled > span:hover,
.u-tree .u-tree-treenode-disabled > a:hover,

4
build/Tree.js
View File

@ -591,9 +591,7 @@ var Tree = function (_React$Component) {
var onFocusRes = onFocus && onFocus(isExist);
if (onFocusRes instanceof Promise) {
onFocusRes.then(function () {
if (!isExist) {
_this4._focusDom(_this4.selectKeyDomPos, targetDom);
}
_this4._focusDom(_this4.selectKeyDomPos, targetDom);
});
} else {
this._focusDom(this.selectKeyDomPos, targetDom);

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

6
dist/demo.css vendored
View File

@ -263,14 +263,14 @@
cursor: pointer;
text-decoration: none;
vertical-align: middle;
color: #666;
color: #212121;
transition: all 0.3s ease; }
.u-tree li a.u-tree-node-content-wrapper {
width: calc(100% - 18px); }
.u-tree li a:hover {
background-color: rgb(235, 236, 240); }
.u-tree li a.u-tree-node-selected {
background-color: rgb(235, 236, 240); }
background-color: rgb(255, 247, 231); }
.u-tree li a.u-tree-node-selected .u-tree-title {
color: rgb(245, 60, 50); }
.u-tree li span.u-checkbox {
@ -335,7 +335,7 @@
.u-tree .u-tree-treenode-disabled > span,
.u-tree .u-tree-treenode-disabled > a,
.u-tree .u-tree-treenode-disabled > a span {
color: #ccc;
color: #909090;
cursor: not-allowed; }
.u-tree .u-tree-treenode-disabled > span:hover,
.u-tree .u-tree-treenode-disabled > a:hover,

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

156
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

8
src/Tree.scss
View File

@ -156,7 +156,7 @@ $treePrefixCls : "u-tree";
cursor: pointer;
text-decoration: none;
vertical-align: middle;
color: #666;
color: $font-color-base;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
// a 标签hover宽度调整
@ -169,9 +169,9 @@ $treePrefixCls : "u-tree";
background-color: $tree-node-bg-color;
}
li a.u-tree-node-selected {
background-color: $tree-node-bg-color;
background-color: $selected-bg-color-base;
.u-tree-title{
color: unquote("rgb(#{$primary-color})");
color: $brand-primary;
}
}
li span.u-checkbox {
@ -256,7 +256,7 @@ $treePrefixCls : "u-tree";
.u-tree-treenode-disabled > span,
.u-tree-treenode-disabled > a,
.u-tree-treenode-disabled > a span {
color: #ccc;
color: #909090;
cursor: not-allowed;
&:hover{
background: transparent;