acud
Version:
acg react 组件库
353 lines (315 loc) • 10.2 kB
text/less
@import '../../style/mixins/index';
@tree-prefix-cls: ~'@{acud-prefix}-tree';
@select-tree-prefix-cls: ~'@{acud-prefix}-select-tree';
.treeSwitcherIcon(@type: 'tree-default-open-icon') {
.@{tree-prefix-cls}-switcher-icon,
.@{select-tree-prefix-cls}-switcher-icon {
.basic-config(@tree-default-icon-tp, @tree-default-icon-p);
display: inline-block;
font-size: 10px;
line-height: 0;
vertical-align: -.24em;
svg {
// 宽度规范覆盖自定义图标
width: 16px;
transition: transform .3s;
}
}
}
.drop-indicator() {
.@{tree-prefix-cls}-drop-indicator {
position: absolute;
z-index: 1;
height: 1px;
background-color: @B6;
border-radius: 1px;
pointer-events: none;
&::after {
position: absolute;
top: -2px;
left: -4px;
width: 5px;
height: 5px;
background-color: transparent;
border: 1px solid @B6;
border-radius: 50%;
content: '';
}
}
}
.acudTreeFn(@custom-tree-prefix-cls) {
@custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
@custom-tree-with-title-ellipsis: ~'@{custom-tree-prefix-cls}-with-title-ellipsis';
.@{custom-tree-prefix-cls} {
&-checkbox-inner {
&::after {
top: 43%;
left: 24%;
width: 4px;
height: 8px;
position: absolute;
display: table;
border: 1px solid @G11;
border-top: 0;
border-left: 0;
transform: rotate(45deg) scale(1) translate(-50%, -50%);
opacity: 1;
content: " ";
.@{custom-tree-node-prefix-cls}-checkbox-disabled & {
border: 1px solid @G6;
border-top: 0;
border-left: 0;
}
}
}
.@{custom-tree-prefix-cls}-checkbox-disabled.@{custom-tree-prefix-cls}-checkbox-checked {
.@{custom-tree-prefix-cls}-checkbox-inner::after {
border-color: @G11;
}
}
.@{custom-tree-prefix-cls}-checkbox-disabled:not(.@{custom-tree-prefix-cls}-checkbox-checked) {
.@{custom-tree-prefix-cls}-checkbox-inner::after {
display: none;
}
}
// popover-util
&-popover-util {
margin: -1.5 * @P 0;
li {
line-height: 8 * @P;
margin: 0 -3 * @P;
padding: 0 3 * @P;
&:hover {
background: @tree-node-selected-color;
cursor: pointer;
}
}
&-li-disabled {
color: @G6;
&:hover {
background: transparent ;
cursor: not-allowed ;
}
}
}
// Search Input
&-search-input {
margin-bottom: @P;
}
// TreeNode
.@{custom-tree-node-prefix-cls} {
display: flex;
align-items: flex-start;
outline: none;
padding: 0 0 @tree-node-padding 0;
line-height: @tree-title-height;
.basic-tp-config(@tree-default-tp);
&:active {
color: @tree-node-active-color;
}
&-disabled {
.@{custom-tree-prefix-cls}-node-content-wrapper {
color: @tree-node-disabled-color;
cursor: not-allowed;
&:hover {
background: transparent;
}
&:active {
color: @tree-node-disabled-color;
}
}
}
}
// indent
&-indent {
align-self: stretch;
white-space: nowrap;
user-select: none;
&-unit {
display: inline-block;
width: @tree-title-height;
}
}
// switcher
&-switcher {
.treeSwitcherIcon();
position: relative;
flex: none;
align-self: stretch;
width: @tree-switcher-width;
margin: 0;
line-height: @tree-title-height;
text-align: center;
cursor: pointer;
user-select: none;
&-noop {
cursor: default;
}
&_close {
.@{custom-tree-prefix-cls}-switcher-icon {
svg {
transform: rotate(-90deg);
}
}
}
&-leaf-line {
position: relative;
z-index: 1;
display: inline-block;
width: 100%;
height: 100%;
&::before {
position: absolute;
top: 0;
right: @P * 2;
bottom: -@tree-node-padding;
margin-left: -1px;
border-right: 1px solid @G6;
content: ' ';
}
&::after {
position: absolute;
width: @tree-title-height - 14px;
height: @tree-title-height - 10px;
border-bottom: 1px solid @G6;
content: ' ';
}
}
}
// title
& &-node-content-wrapper {
position: relative;
flex: 1;
z-index: auto;
min-height: @tree-title-height;
margin: 0 @P;
padding: 0 @P;
color: inherit;
line-height: @tree-title-height;
background: transparent;
cursor: pointer;
transition: all 0.3s, border 0s, line-height 0s, box-shadow 0s;
&:hover {
background-color: @tree-node-hover-color;
border-radius: @R2;
}
&:active {
color: @tree-node-active-color;
}
&.@{custom-tree-prefix-cls}-node-selected, & .@{custom-tree-prefix-cls}-node-highlighttext {
background-color: @tree-node-selected-color;
border-radius: @R2;
}
// Icon
.@{custom-tree-prefix-cls}-iconEle {
display: inline-block;
width: @tree-switcher-width;
height: @tree-switcher-width;
line-height: @tree-title-height;
margin-right: 2 * @P;
text-align: center;
vertical-align: top;
color: @G5;
&:empty {
display: none;
}
.@{iconfont-css-prefix} {
vertical-align: -0.2em;
}
}
.@{custom-tree-prefix-cls}-icon-util > span {
color: @G5;
margin-left: 2 * @P;
vertical-align: -0.2em;
line-height: 0;
&:hover {
color: @tree-node-icon-hover-color
}
&:active {
color: @tree-node-icon-active-color
}
}
.@{custom-tree-prefix-cls}-edit-input {
margin: 0 -2 * @P;
}
}
// draggable
&-node-content-wrapper {
line-height: @tree-title-height;
user-select: none;
.drop-indicator();
}
&-draggable-icon {
width: @tree-switcher-width;
height: @tree-switcher-width;
text-align: center;
line-height: @tree-title-height;
margin: 0 2 * @P;
opacity: 0;
.@{custom-tree-node-prefix-cls}:hover & {
opacity: 0.45;
}
}
// show line
&-show-line {
.@{custom-tree-prefix-cls}-indent {
&-unit {
position: relative;
height: 100%;
&::before {
position: absolute;
top: 0;
right: (@tree-title-height / 3 * 2);
bottom: -@tree-node-padding;
border-right: 1px solid @G6;
content: '';
}
&-end {
&::before {
display: none;
}
}
}
}
}
.@{custom-tree-node-prefix-cls}-leaf-last {
.@{custom-tree-prefix-cls}-switcher {
&-leaf-line {
&::before {
top: auto ;
bottom: auto ;
height: @tree-title-height - 10px ;
}
}
}
}
// Checkbox
&-checkbox {
margin: 0.5 * @P 0 0 2 * @P;
top: 0.1em;
}
}
.@{custom-tree-with-title-ellipsis} {
.@{custom-tree-prefix-cls}-title {
flex: 1;
overflow: hidden;
&-titleWithOps {
display: flex;
white-space: nowrap;
}
&-titleContent {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.@{custom-tree-prefix-cls}-node-content-wrapper {
display: flex;
overflow: hidden;
max-width: 100%;
.@{custom-tree-prefix-cls}-edit-input {
margin: 0;
}
}
}
}