style:
This commit is contained in:
ahua52
parent
ba927346cd
commit
eef3c614e7
142
build/Tree.css
142
build/Tree.css
|
|
@ -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,10 +98,11 @@
|
|||
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 {
|
||||
.u-tree {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
font-size: 12px; }
|
||||
.u-tree .u-tree-checkbox {
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
|
@ -119,12 +110,10 @@
|
|||
line-height: 1;
|
||||
position: relative;
|
||||
vertical-align: middle; }
|
||||
|
||||
.u-tree-checkbox-checked .u-tree-checkbox-inner, .u-tree-checkbox-indeterminate .u-tree-checkbox-inner {
|
||||
.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-checkbox-inner {
|
||||
.u-tree .u-tree-checkbox-inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -136,16 +125,13 @@
|
|||
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 {
|
||||
.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-checkbox-disabled .u-tree-checkbox-inner {
|
||||
border-color: #d9d9d9 !important;
|
||||
.u-tree .u-tree-checkbox-disabled .u-tree-checkbox-inner {
|
||||
border-color: #d9d9d9;
|
||||
background-color: #f3f3f3; }
|
||||
|
||||
.u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
|
||||
.u-tree .u-tree-checkbox-indeterminate .u-tree-checkbox-inner:after {
|
||||
content: ' ';
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
|
|
@ -155,22 +141,15 @@
|
|||
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 {
|
||||
.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-checkbox-disabled .u-tree-checkbox-inner:after {
|
||||
.u-tree .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 {
|
||||
.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);
|
||||
|
|
@ -186,8 +165,7 @@
|
|||
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 {
|
||||
.u-tree .u-tree-checkbox-inner:after {
|
||||
-webkit-transform: rotate(45deg) scale(0);
|
||||
-ms-transform: rotate(45deg) scale(0);
|
||||
transform: rotate(45deg) scale(0);
|
||||
|
|
@ -203,19 +181,14 @@
|
|||
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 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;
|
||||
|
|
@ -225,26 +198,20 @@
|
|||
/* 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; }
|
||||
|
||||
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;
|
||||
|
|
@ -256,16 +223,12 @@
|
|||
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;
|
||||
|
|
@ -277,24 +240,20 @@
|
|||
border: 0 none;
|
||||
cursor: pointer;
|
||||
outline: none; }
|
||||
|
||||
.u-tree li span.u-tree-icon_loading:after {
|
||||
.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,
|
||||
|
|
@ -322,6 +281,26 @@
|
|||
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图标
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-tree",
|
||||
"version": "1.0.5",
|
||||
"version": "1.0.6",
|
||||
"description": "Tree ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
Loading…
Reference in New Issue