fix: drag treenode style

pull/5202/head
tangjinzhou 2022-01-23 15:31:28 +08:00
parent d442db08eb
commit 6d4248d046
1 changed files with 62 additions and 14 deletions

View File

@ -1,7 +1,6 @@
@import '../../style/mixins/index';
@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
@tree-motion: ~'@{ant-prefix}-motion-collapse';
@tree-node-padding: (@padding-xs / 2);
@ -13,6 +12,7 @@
display: inline-block;
font-size: 10px;
vertical-align: baseline;
svg {
transition: transform 0.3s;
}
@ -28,6 +28,7 @@
background-color: @primary-color;
border-radius: 1px;
pointer-events: none;
&::after {
position: absolute;
top: -3px;
@ -66,6 +67,26 @@
.@{custom-tree-prefix-cls}-node-content-wrapper {
flex: auto;
}
// >>> Drag
.@{custom-tree-node-prefix-cls}.dragging {
position: relative;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: @tree-node-padding;
left: 0;
border: 1px solid @primary-color;
opacity: 0;
animation: ant-tree-node-fx-do-not-use 0.3s;
animation-play-state: running;
animation-fill-mode: forwards;
content: '';
pointer-events: none;
}
}
}
}
@ -110,6 +131,19 @@
}
}
// >>> Drag Handler
&-draggable-icon {
width: @tree-title-height;
line-height: @tree-title-height;
text-align: center;
opacity: 0.2;
transition: opacity @animation-duration-slow;
.@{custom-tree-node-prefix-cls}:hover & {
opacity: 0.45;
}
}
// >>> Switcher
&-switcher {
.antTreeSwitcherIcon();
@ -145,19 +179,21 @@
display: inline-block;
width: 100%;
height: 100%;
// https://github.com/ant-design/ant-design/issues/31884
&::before {
position: absolute;
top: 0;
right: 12px;
bottom: -@tree-node-padding;
margin-left: -1px;
border-left: 1px solid @normal-color;
border-right: 1px solid @normal-color;
content: ' ';
}
&::after {
position: absolute;
width: @tree-title-height - 14px;
height: @tree-title-height - 10px;
margin-left: -1px;
border-bottom: 1px solid @normal-color;
content: ' ';
}
@ -200,6 +236,7 @@
line-height: @tree-title-height;
text-align: center;
vertical-align: top;
&:empty {
display: none;
}
@ -212,7 +249,7 @@
}
// ==================== Draggable =====================
&-node-content-wrapper[draggable='true'] {
&-node-content-wrapper {
line-height: @tree-title-height;
user-select: none;
@ -255,20 +292,31 @@
background: @component-background;
&-line-icon {
vertical-align: -0.225em;
// https://github.com/ant-design/ant-design/issues/32813
vertical-align: -0.15em;
}
}
}
.@{custom-tree-node-prefix-cls}-leaf-last {
.@{custom-tree-prefix-cls}-switcher {
&-leaf-line {
&::before {
top: auto !important;
bottom: auto !important;
height: @tree-title-height - 10px !important;
}
}
}
}
}
.@{tree-node-prefix-cls}-leaf-last {
.@{tree-prefix-cls}-switcher {
&-leaf-line {
&::before {
top: auto !important;
bottom: auto !important;
height: @tree-title-height - 10px !important;
}
}
@keyframes ant-tree-node-fx-do-not-use {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}