This commit is contained in:
ahua52 2018-02-01 10:13:31 +08:00
parent ba927346cd
commit eef3c614e7
2 changed files with 207 additions and 255 deletions

View File

@ -10,14 +10,10 @@
cursor: not-allowed; cursor: not-allowed;
opacity: 0.5; } opacity: 0.5; }
.u-checkbox input[type='checkbox'] { .u-checkbox input[type='checkbox'] {
position: absolute; display: none;
left: 0; cursor: pointer; }
z-index: 1; .u-checkbox input[disabled] {
cursor: pointer; cursor: not-allowed; }
opacity: 0;
top: 2px;
height: 18px;
width: 18px; }
.u-checkbox.is-checked .u-checkbox-label:before { .u-checkbox.is-checked .u-checkbox-label:before {
-moz-box-shadow: inset 0 0 0 10px rgb(30,136,229); -moz-box-shadow: inset 0 0 0 10px rgb(30,136,229);
-webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229); -webkit-box-shadow: inset 0 0 0 10px rgb(30,136,229);
@ -31,9 +27,7 @@
.u-checkbox .u-checkbox-label { .u-checkbox .u-checkbox-label {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
position: relative; padding-left: 25px; }
padding-left: 25px;
color: #a9a9a9; }
.u-checkbox .u-checkbox-label:before { .u-checkbox .u-checkbox-label:before {
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
@ -50,7 +44,7 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
left: 0; left: 0;
top: -13px; top: 4px;
text-align: center; text-align: center;
position: absolute; } position: absolute; }
.u-checkbox .u-checkbox-label:after { .u-checkbox .u-checkbox-label:after {
@ -60,14 +54,10 @@
width: 18px; width: 18px;
height: 18px; height: 18px;
left: 0; left: 0;
top: -13px; top: 4px;
text-align: center; text-align: center;
position: absolute; } position: absolute; }
.u-checkbox-checked .u-checkbox-label, .u-checkbox-indeterminate .u-checkbox-label {
background-color: #108ee9;
border-color: #108ee9; }
.u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after { .u-checkbox.u-checkbox-indeterminate .u-checkbox-label:after {
color: #fff; color: #fff;
content: "\e6ce"; content: "\e6ce";
@ -108,220 +98,209 @@
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); } border-color: rgb(0,188,212); }
.u-tree li span.u-tree-checkbox {
margin: 2px 4px 0 0; }
.u-tree-checkbox {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
position: relative;
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; }
.u-tree-checkbox-inner {
position: relative;
top: 0;
left: 0;
display: inline-block;
width: 14px;
height: 14px;
border: 1px solid #d9d9d9;
border-radius: 3px;
background-color: #fff;
-webkit-transition: all .3s;
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; }
.u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9 !important;
background-color: #f3f3f3; }
.u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
content: ' ';
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
position: absolute;
left: 2px;
top: 5px;
width: 8px;
height: 1px; }
.u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9 !important;
background-color: #f3f3f3; }
.u-tree-checkbox-disabled.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
-webkit-animation-name: none;
animation-name: none;
border-color: #ccc; }
.u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
-webkit-animation-name: none;
animation-name: none;
border-color: #f3f3f3; }
.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
-webkit-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
transform: rotate(45deg) scale(1);
position: absolute;
left: 4px;
top: 1px;
display: table;
width: 5px;
height: 8px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
-webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; }
.u-tree-checkbox-inner:after {
-webkit-transform: rotate(45deg) scale(0);
-ms-transform: rotate(45deg) scale(0);
transform: rotate(45deg) scale(0);
position: absolute;
left: 4px;
top: 1px;
display: table;
width: 5px;
height: 8px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
content: ' ';
-webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6); }
.u-tree { .u-tree {
margin: 0; margin: 0;
padding: 5px; padding: 5px;
font-size: 12px; } font-size: 12px; }
.u-tree .u-tree-checkbox {
.u-tree li { white-space: nowrap;
padding: 0; cursor: pointer;
margin: 2px 0; outline: none;
list-style: none; display: inline-block;
white-space: nowrap; line-height: 1;
outline: 0; } position: relative;
vertical-align: middle; }
.u-tree li a[draggable], .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
.u-tree li a[draggable="true"] { background-color: #108ee9;
-webkit-user-select: none; border-color: #108ee9; }
-moz-user-select: none; .u-tree .u-tree-checkbox-inner {
-ms-user-select: none; position: relative;
user-select: none; top: 0;
/* Required to make elements draggable in old WebKit */ left: 0;
-khtml-user-drag: element; display: inline-block;
-webkit-user-drag: element; } width: 14px;
height: 14px;
.u-tree li.drag-over > a[draggable] { border: 1px solid #d9d9d9;
background-color: #108ee9; border-radius: 3px;
color: white; background-color: #fff;
opacity: 0.8; } -webkit-transition: all .3s;
transition: all .3s; }
.u-tree li.drag-over-gap-top > a[draggable] { .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
border-top: 2px #108ee9 solid; } background-color: #108ee9;
border-color: #108ee9; }
.u-tree li.drag-over-gap-bottom > a[draggable] { .u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-bottom: 2px #108ee9 solid; } border-color: #d9d9d9;
background-color: #f3f3f3; }
.u-tree li.filter-node > a { .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
color: #f50 !important; content: ' ';
font-weight: bold !important; } -webkit-transform: scale(1);
-ms-transform: scale(1);
.u-tree li ul { transform: scale(1);
margin: 0; position: absolute;
padding: 0 0 0 18px; } left: 2px;
top: 5px;
.u-tree li a { width: 8px;
display: inline-block; height: 1px; }
padding: 1px 5px; .u-tree .u-tree-checkbox-disabled.u-tree-checkbox-checked .u-tree-checkbox-inner:after {
border-radius: 2px; -webkit-animation-name: none;
margin: 0; animation-name: none;
cursor: pointer; border-color: #ccc; }
text-decoration: none; .u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
vertical-align: top; -webkit-animation-name: none;
color: #666; animation-name: none;
-webkit-transition: all 0.3s ease; border-color: #f3f3f3; }
transition: all 0.3s ease; } .u-tree .u-tree-checkbox-checked .u-tree-checkbox-inner:after {
-webkit-transform: rotate(45deg) scale(1);
.u-tree li a:hover { -ms-transform: rotate(45deg) scale(1);
background-color: #e7f4fd; } transform: rotate(45deg) scale(1);
position: absolute;
.u-tree li a.u-tree-node-selected { left: 4px;
background-color: #cfe8fb; } top: 1px;
display: table;
.u-tree li span.u-checkbox { width: 5px;
margin: 2px 4px 0 0; } height: 8px;
border: 2px solid #fff;
.u-tree li span.u-tree-switcher, border-top: 0;
.u-tree li span.u-tree-iconEle { border-left: 0;
margin: 0; content: ' ';
width: 16px; -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
height: 16px; transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s; }
line-height: 16px; .u-tree .u-tree-checkbox-inner:after {
display: inline-block; -webkit-transform: rotate(45deg) scale(0);
vertical-align: middle; -ms-transform: rotate(45deg) scale(0);
border: 0 none; transform: rotate(45deg) scale(0);
cursor: pointer; position: absolute;
outline: none; } left: 4px;
top: 1px;
.u-tree li span.u-tree-icon_loading:after { display: table;
display: inline-block; width: 5px;
vertical-align: middle; height: 8px;
background: url("data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7") no-repeat scroll 0 0 transparent; border: 2px solid #fff;
content: ""; border-top: 0;
width: 14px; border-left: 0;
height: 14px; } content: ' ';
-webkit-transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6);
.u-tree li span.u-tree-switcher.u-tree-switcher-noop { transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6); }
cursor: auto; } .u-tree li span.u-tree-checkbox {
margin: 2px 4px 0 0; }
.u-tree li span.u-tree-switcher.u-tree-roots_open, .u-tree li {
.u-tree li span.u-tree-switcher.u-tree-center_open, padding: 0;
.u-tree li span.u-tree-switcher.u-tree-bottom_open, margin: 2px 0;
.u-tree li span.u-tree-switcher.u-tree-noline_open { list-style: none;
position: relative; } white-space: nowrap;
outline: 0; }
.u-tree li span.u-tree-switcher.u-tree-roots_open:after, .u-tree li a[draggable],
.u-tree li span.u-tree-switcher.u-tree-center_open:after, .u-tree li a[draggable="true"] {
.u-tree li span.u-tree-switcher.u-tree-bottom_open:after, -webkit-user-select: none;
.u-tree li span.u-tree-switcher.u-tree-noline_open:after { -moz-user-select: none;
font-size: 18px; -ms-user-select: none;
font-size: 7px \9; user-select: none;
-webkit-transform: scale(0.58333) rotate(0deg); /* Required to make elements draggable in old WebKit */
-ms-transform: scale(0.58333) rotate(0deg); -khtml-user-drag: element;
transform: scale(0.58333) rotate(0deg); -webkit-user-drag: element; }
/* IE6-IE8 */ .u-tree li.drag-over > a[draggable] {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)"; background-color: #108ee9;
zoom: 1; color: white;
display: inline-block; opacity: 0.8; }
font-family: 'uf'; .u-tree li.drag-over-gap-top > a[draggable] {
text-rendering: optimizeLegibility; border-top: 2px #108ee9 solid; }
-webkit-font-smoothing: antialiased; .u-tree li.drag-over-gap-bottom > a[draggable] {
-moz-osx-font-smoothing: grayscale; border-bottom: 2px #108ee9 solid; }
content: "\e639"; .u-tree li.filter-node > a {
font-weight: bold; color: #f50;
position: absolute; font-weight: bold; }
top: 0; .u-tree li ul {
right: 0px; margin: 0;
color: #666; padding: 0 0 0 18px; }
-webkit-transition: -webkit-transform .3s ease; .u-tree li a {
transition: -webkit-transform .3s ease; display: inline-block;
transition: transform .3s ease; padding: 1px 5px;
transition: transform .3s ease, -webkit-transform .3s ease; } border-radius: 2px;
margin: 0;
cursor: pointer;
text-decoration: none;
vertical-align: top;
color: #666;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease; }
.u-tree li a:hover {
background-color: #e7f4fd; }
.u-tree li a.u-tree-node-selected {
background-color: #cfe8fb; }
.u-tree li span.u-checkbox {
margin: 2px 4px 0 0; }
.u-tree li span.u-tree-switcher,
.u-tree li span.u-tree-iconEle {
margin: 0;
width: 16px;
height: 16px;
line-height: 16px;
display: inline-block;
vertical-align: middle;
border: 0 none;
cursor: pointer;
outline: none; }
.u-tree .u-tree li span.u-tree-icon_loading:after {
display: inline-block;
vertical-align: middle;
background: url("data:image/gif;base64,R0lGODlhEAAQAKIGAMLY8YSx5HOm4Mjc88/g9Ofw+v///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgAGACwAAAAAEAAQAAADMGi6RbUwGjKIXCAA016PgRBElAVlG/RdLOO0X9nK61W39qvqiwz5Ls/rRqrggsdkAgAh+QQFCgAGACwCAAAABwAFAAADD2hqELAmiFBIYY4MAutdCQAh+QQFCgAGACwGAAAABwAFAAADD1hU1kaDOKMYCGAGEeYFCQAh+QQFCgAGACwKAAIABQAHAAADEFhUZjSkKdZqBQG0IELDQAIAIfkEBQoABgAsCgAGAAUABwAAAxBoVlRKgyjmlAIBqCDCzUoCACH5BAUKAAYALAYACgAHAAUAAAMPaGpFtYYMAgJgLogA610JACH5BAUKAAYALAIACgAHAAUAAAMPCAHWFiI4o1ghZZJB5i0JACH5BAUKAAYALAAABgAFAAcAAAMQCAFmIaEp1motpDQySMNFAgA7") no-repeat scroll 0 0 transparent;
content: "";
width: 14px;
height: 14px; }
.u-tree li span.u-tree-switcher.u-tree-switcher-noop {
cursor: auto; }
.u-tree li span.u-tree-switcher.u-tree-roots_open,
.u-tree li span.u-tree-switcher.u-tree-center_open,
.u-tree li span.u-tree-switcher.u-tree-bottom_open,
.u-tree li span.u-tree-switcher.u-tree-noline_open {
position: relative; }
.u-tree li span.u-tree-switcher.u-tree-roots_open:after,
.u-tree li span.u-tree-switcher.u-tree-center_open:after,
.u-tree li span.u-tree-switcher.u-tree-bottom_open:after,
.u-tree li span.u-tree-switcher.u-tree-noline_open:after {
font-size: 18px;
font-size: 7px \9;
-webkit-transform: scale(0.58333) rotate(0deg);
-ms-transform: scale(0.58333) rotate(0deg);
transform: scale(0.58333) rotate(0deg);
/* IE6-IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
zoom: 1;
display: inline-block;
font-family: 'uf';
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: "\e639";
font-weight: bold;
position: absolute;
top: 0;
right: 0px;
color: #666;
-webkit-transition: -webkit-transform .3s ease;
transition: -webkit-transform .3s ease;
transition: transform .3s ease;
transition: transform .3s ease, -webkit-transform .3s ease; }
.u-tree .u-tree-child-tree {
display: none; }
.u-tree .u-tree-child-tree-open {
display: block; }
.u-tree .u-tree-treenode-disabled > span,
.u-tree .u-tree-treenode-disabled > a,
.u-tree .u-tree-treenode-disabled > a span {
color: #ccc;
cursor: not-allowed; }
.u-tree .u-tree-icon__open {
margin-right: 2px;
vertical-align: top; }
.u-tree .u-tree-icon__close {
margin-right: 2px;
vertical-align: top; }
.u-tree .u-motion-collapse {
overflow: hidden; }
.u-tree .u-motion-collapse-active {
-webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
:root .u-tree li span.u-tree-switcher.u-tree-roots_open:after, :root .u-tree li span.u-tree-switcher.u-tree-roots_open:after,
:root .u-tree li span.u-tree-switcher.u-tree-center_open:after, :root .u-tree li span.u-tree-switcher.u-tree-center_open:after,
@ -392,33 +371,6 @@
-ms-transform: rotate(270deg) scale(0.6); -ms-transform: rotate(270deg) scale(0.6);
transform: rotate(270deg) scale(0.6); } transform: rotate(270deg) scale(0.6); }
.u-tree-child-tree {
display: none; }
.u-tree-child-tree-open {
display: block; }
.u-tree-treenode-disabled > span,
.u-tree-treenode-disabled > a,
.u-tree-treenode-disabled > a span {
color: #ccc;
cursor: not-allowed; }
.u-tree-icon__open {
margin-right: 2px;
vertical-align: top; }
.u-tree-icon__close {
margin-right: 2px;
vertical-align: top; }
.u-motion-collapse {
overflow: hidden; }
.u-motion-collapse-active {
-webkit-transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
transition: height 0.2s cubic-bezier(0.215, 0.61, 0.355, 1); }
/** /**
* 自定义switcher图标 * 自定义switcher图标
*/ */

View File

@ -1,6 +1,6 @@
{ {
"name": "bee-tree", "name": "bee-tree",
"version": "1.0.5", "version": "1.0.6",
"description": "Tree ui component for react", "description": "Tree ui component for react",
"keywords": [ "keywords": [
"react", "react",