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;
opacity: 0.5; }
.u-checkbox input[type='checkbox'] {
position: absolute;
left: 0;
z-index: 1;
cursor: pointer;
opacity: 0;
top: 2px;
height: 18px;
width: 18px; }
display: none;
cursor: pointer; }
.u-checkbox input[disabled] {
cursor: not-allowed; }
.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);
@ -31,9 +27,7 @@
.u-checkbox .u-checkbox-label {
cursor: pointer;
display: inline-block;
position: relative;
padding-left: 25px;
color: #a9a9a9; }
padding-left: 25px; }
.u-checkbox .u-checkbox-label:before {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
@ -50,7 +44,7 @@
width: 18px;
height: 18px;
left: 0;
top: -13px;
top: 4px;
text-align: center;
position: absolute; }
.u-checkbox .u-checkbox-label:after {
@ -60,14 +54,10 @@
width: 18px;
height: 18px;
left: 0;
top: -13px;
top: 4px;
text-align: center;
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 {
color: #fff;
content: "\e6ce";
@ -108,220 +98,209 @@
box-shadow: inset 0 0 0 10px 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 {
margin: 0;
padding: 5px;
font-size: 12px; }
.u-tree li {
padding: 0;
margin: 2px 0;
list-style: none;
white-space: nowrap;
outline: 0; }
.u-tree li a[draggable],
.u-tree li a[draggable="true"] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element; }
.u-tree li.drag-over > a[draggable] {
background-color: #108ee9;
color: white;
opacity: 0.8; }
.u-tree li.drag-over-gap-top > a[draggable] {
border-top: 2px #108ee9 solid; }
.u-tree li.drag-over-gap-bottom > a[draggable] {
border-bottom: 2px #108ee9 solid; }
.u-tree li.filter-node > a {
color: #f50 !important;
font-weight: bold !important; }
.u-tree li ul {
margin: 0;
padding: 0 0 0 18px; }
.u-tree li a {
display: inline-block;
padding: 1px 5px;
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 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-checkbox {
white-space: nowrap;
cursor: pointer;
outline: none;
display: inline-block;
line-height: 1;
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; }
.u-tree .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 .u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
background-color: #108ee9;
border-color: #108ee9; }
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
border-color: #d9d9d9;
background-color: #f3f3f3; }
.u-tree .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 .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 .u-tree-checkbox-disabled .u-tree-checkbox-inner:after {
-webkit-animation-name: none;
animation-name: none;
border-color: #f3f3f3; }
.u-tree .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 .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 li span.u-tree-checkbox {
margin: 2px 4px 0 0; }
.u-tree li {
padding: 0;
margin: 2px 0;
list-style: none;
white-space: nowrap;
outline: 0; }
.u-tree li a[draggable],
.u-tree li a[draggable="true"] {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Required to make elements draggable in old WebKit */
-khtml-user-drag: element;
-webkit-user-drag: element; }
.u-tree li.drag-over > a[draggable] {
background-color: #108ee9;
color: white;
opacity: 0.8; }
.u-tree li.drag-over-gap-top > a[draggable] {
border-top: 2px #108ee9 solid; }
.u-tree li.drag-over-gap-bottom > a[draggable] {
border-bottom: 2px #108ee9 solid; }
.u-tree li.filter-node > a {
color: #f50;
font-weight: bold; }
.u-tree li ul {
margin: 0;
padding: 0 0 0 18px; }
.u-tree li a {
display: inline-block;
padding: 1px 5px;
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-center_open:after,
@ -392,33 +371,6 @@
-ms-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图标
*/

View File

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