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

增加主题定制

This commit is contained in:
yangchch6 2019-02-16 10:51:34 +08:00
parent 763d04795b
commit 2db3c6b098
9 changed files with 364 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
build/Tree.css
View File

@ -31,7 +31,7 @@
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: #1e88e5; }
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);
@ -83,8 +83,8 @@
font-size: 14px; }
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:before {
box-shadow: inset 0 0 0 10px #1e88e5;
border-color: #1e88e5; }
box-shadow: inset 0 0 0 10px rgb(30,136,229);
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);
@ -144,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;
border-color: #108ee9; }
background-color: rgb(30,136,229);
border-color: rgb(30,136,229); }
.u-tree .u-tree-checkbox-inner {
position: relative;
top: 0;
@ -159,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;
border-color: #108ee9; }
background-color: rgb(30,136,229);
border-color: rgb(30,136,229); }
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9;
background-color: #f3f3f3; }
@ -257,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,

2
demo/demolist/Demo1.js
View File

@ -62,7 +62,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>

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

199
dist/demo.css vendored
View File

@ -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; }
@ -3505,6 +3502,36 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.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"; }
.uf-globe:before {
content: "\e9db"; }
/* FormGroup */
/* Navlayout */
.vertical-align {
@ -5261,7 +5288,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
.u-checkbox input[disabled] {
cursor: not-allowed; }
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
border-color: #1e88e5; }
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); }
@ -5306,8 +5333,8 @@ 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;
border-color: #1e88e5; }
box-shadow: inset 0 0 0 10px rgb(30,136,229);
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);
@ -5357,8 +5384,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;
border-color: #108ee9; }
background-color: rgb(30,136,229);
border-color: rgb(30,136,229); }
.u-tree .u-tree-checkbox-inner {
position: relative;
top: 0;
@ -5371,8 +5398,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;
border-color: #108ee9; }
background-color: rgb(30,136,229);
border-color: rgb(30,136,229); }
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9;
background-color: #f3f3f3; }
@ -5458,9 +5485,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,
@ -6340,7 +6369,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;
@ -6363,13 +6392,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);
@ -6389,7 +6421,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);
@ -6415,63 +6447,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);
@ -6484,6 +6567,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);
@ -6496,6 +6580,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);
@ -6508,6 +6593,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);
@ -6520,6 +6606,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);
@ -6530,18 +6617,44 @@ input.u-button[type="submit"] {
background-color: rgb(21,101,192);
border-color: rgb(21,101,192); }
.u-button-border {
color: rgb(0,0,0);
border: 1px solid #d9d9d9;
background-color: #fff; }
.u-button-border.u-button-secondary {
color: rgb(224,224,224);
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 {
background-color: rgb(238,238,238);
border-color: rgb(238,238,238);
color: #fff; }
.u-button-border.u-button-secondary.active, .u-button-border.u-button-secondary:active {
color: #fff;
background-color: rgb(189,189,189);
border-color: rgb(189,189,189); }
.u-button-border:hover, .u-button-border:focus {
color: rgb(0,0,0);
background: rgb(238,238,238); }
.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:active {
color: #fff;
background: rgb(189,189,189); }
.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%;
@ -6552,7 +6665,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;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

365
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

2
package.json
View File

@ -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"
},

15
src/Tree.scss
View File

@ -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;
border-color: #108ee9;
background-color: $tree-checkbox-color;
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;
border-color: #108ee9;
background-color: $tree-checkbox-color;
border-color: $tree-checkbox-color;
}
.u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9;
@ -156,10 +156,13 @@ $treePrefixCls : "u-tree";
}
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;