.#{$ns}TreeControl { border: 1px solid var(--Form-input-borderColor); padding: 6px 12px; border-radius: 2px; max-height: 300px; overflow: auto; &.h-full { max-height: none; overflow: visible; } &.no-border { border: 0; } } .#{$ns}Tree { &-list, &-sublist { list-style: none; padding: 0; margin: 0; } &-sublist { margin-left: var(--Tree-indent); } &-sublist.is-folded { display: none; } &-item { line-height: var(--Tree-itemHeight); position: relative; > div { &:hover { text-decoration: none; > .#{$ns}Tree-item-icons { visibility: visible; } } > span > svg { display: inline-block; cursor: pointer; position: relative; top: 2px; width: px2rem(16px); height: px2rem(16px); margin-left: var(--gap-xs); } } } &.is-disabled { pointer-events: none; } &--outline &-sublist &-item--isLeaf { &:before { position: absolute; top: -8px; left: calc((var(--Tree-indent) - 5px) * -1); bottom: 0px; border-left: 1px solid var(--borderColor); content: ''; } } &-rootItem { line-height: var(--Tree-itemHeight); } &-item > div:hover > .#{$ns}Tree-item-icons, &-rootItem > div:hover > .#{$ns}Tree-item-icons { visibility: visible; } &-itemLabel { display: flex; align-items: center; &:hover { background: var(--Tree-item-onHover-bg); } } &-item-icons { visibility: hidden; transition: visibility var(--animation-duration) ease; display: inline-block; vertical-align: top; height: var(--Tree-itemHeight); line-height: var(--Tree-itemHeight); padding-right: var(--gap-xs); > a { display: inline-block; vertical-align: middle; margin-left: var(--gap-xs); cursor: pointer; > svg { $svgSize: px2rem(12px); width: $svgSize; height: $svgSize; top: 0; } } } &-itemInput { padding-left: var(--Tree-itemArrowWidth); display: flex; flex-direction: row; flex-wrap: nowrap; > a { display: inline-block; cursor: pointer; margin-left: var(--gap-sm); color: var(--icon-color); &:hover { color: var(--icon-onHover-color); text-decoration: none; } } > input { flex-grow: 1; width: 100%; outline: none; background: var(--Form-input-bg); border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor); border-radius: var(--Form-input-borderRadius); line-height: var(--Form-input-lineHeight); padding: calc( ( var(--Tree-inputHeight) - var(--Form-input-lineHeight) * var(--Form-input-fontSize) - #{px2rem(2px)} ) / 2 ) var(--Form-input-paddingX); font-size: var(--Form-input-fontSize); &::placeholder { color: var(--Form-input-placeholderColor); user-select: none; } &:focus { border-color: var(--Form-input-onFocused-borderColor); box-shadow: var(--Form-input-boxShadow); background: var(--Form-input-onFocused-bg); } } } &-addTopBtn { cursor: pointer; height: var(--Tree-itemHeight); line-height: var(--Tree-itemHeight); display: block; &:hover { text-decoration: none; } &.is-disabled { pointer-events: none; color: var(--text--muted-color); } > svg { $svgSize: px2rem(14px); width: $svgSize; height: $svgSize; top: $svgSize * 0.125; margin-right: var(--gap-xs); } } &-itemArrow { cursor: pointer; width: var(--Tree-itemArrowWidth); display: inline-flex; margin-right: var(--gap-xs); // &:before { // font-style: normal; // font-family: $Tree-arrowVendor; // content: $Tree-unfoldedArrowContent; // } > svg { width: var(--Tree-itemArrowWidth); height: var(--Tree-itemArrowWidth); display: block; transition: transform var(--animation-duration); top: 0; transform: rotate(90deg); } &.is-folded > svg { transform: rotate(0deg); } } &-itemArrowPlaceholder { display: inline-block; width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs)); } &-spinner { margin-right: var(--gap-xs); } &-itemIcon { display: inline-flex; margin-right: var(--gap-xs); } &-rootIcon, &-folderIcon, &-leafIcon { > svg { top: 0; width: px2rem(14px); height: px2rem(14px); } } &-itemLabel { user-select: none; &.is-checked, &.is-children-checked { color: var(--Tree-itemLabel--onChecked-color); } &.is-disabled { color: var(--text--muted-color); } > .#{$ns}Checkbox { display: inline-flex; align-self: center; } } &-itemText { cursor: pointer; flex: 1 auto; line-height: var(--lineHeightBase); padding: px2rem(4px) 0; } &-placeholder { color: var(--text--muted-color); } }