mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
295 lines
5.4 KiB
SCSS
295 lines
5.4 KiB
SCSS
.#{$ns}TreeControl {
|
|
border: 1px solid $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.is-folded {
|
|
display: none;
|
|
}
|
|
|
|
&-item {
|
|
line-height: $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: px2rem(5px);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-rootItem {
|
|
line-height: $Tree-itemHeight;
|
|
}
|
|
|
|
&-item > div:hover > .#{$ns}Tree-item-icons,
|
|
&-rootItem > div:hover > .#{$ns}Tree-item-icons {
|
|
visibility: visible;
|
|
}
|
|
|
|
&-itemLabel {
|
|
&:hover {
|
|
background: $Tree-item-onHover-bg;
|
|
}
|
|
}
|
|
|
|
&-item-icons {
|
|
visibility: hidden;
|
|
transition: visibility 0.1s ease;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
height: $Tree-itemHeight;
|
|
line-height: $Tree-itemHeight;
|
|
|
|
> a {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: $gap-xs;
|
|
cursor: pointer;
|
|
|
|
> svg {
|
|
$svgSize: px2rem(16px);
|
|
width: $svgSize;
|
|
height: $svgSize;
|
|
top: 0.125 * $svgSize;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-itemInput {
|
|
padding-left: $Tree-itemArrowWidth;
|
|
|
|
> a {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
margin-left: $gap-sm;
|
|
color: $icon-color;
|
|
|
|
&:hover {
|
|
color: $icon-onHover-color;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
> input {
|
|
outline: none;
|
|
background-color: $Form-input-bg;
|
|
border: $Form-input-borderWidth solid $Form-input-borderColor;
|
|
border-radius: $Form-input-borderRadius;
|
|
line-height: $Form-input-lineHeight;
|
|
padding: (
|
|
$Tree-inputHeight - $Form-input-lineHeight * $Form-input-fontSize -
|
|
px2rem(2px)
|
|
)/2 $Form-input-paddingX;
|
|
font-size: $Form-input-fontSize;
|
|
|
|
&::placeholder {
|
|
color: $Form-input-placeholderColor;
|
|
user-select: none;
|
|
}
|
|
|
|
&:focus {
|
|
border-color: $Form-input-onFocused-borderColor;
|
|
box-shadow: $Form-input-boxShadow;
|
|
|
|
@if $Form-input-onFocused-bg !=$Form-input-bg {
|
|
background-color: $Form-input-onFocused-bg;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-addTopBtn {
|
|
cursor: pointer;
|
|
height: $Tree-itemHeight;
|
|
line-height: $Tree-itemHeight;
|
|
display: block;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
&.is-disabled {
|
|
pointer-events: none;
|
|
color: $text--muted-color;
|
|
}
|
|
|
|
> svg {
|
|
$svgSize: px2rem(14px);
|
|
width: $svgSize;
|
|
height: $svgSize;
|
|
top: $svgSize * 0.125;
|
|
margin-right: $Tree-itemArrowWidth - px2rem(14px); // icon 的宽度是14px
|
|
}
|
|
}
|
|
|
|
&-itemArrow {
|
|
cursor: pointer;
|
|
width: $Tree-itemArrowWidth;
|
|
text-align: center;
|
|
display: inline-block;
|
|
|
|
&:before {
|
|
font-style: normal;
|
|
font-family: $Tree-arrowVendor;
|
|
content: $Tree-unfoldedArrowContent;
|
|
}
|
|
|
|
&.is-folded:before {
|
|
content: $Tree-foldedArrowContent;
|
|
}
|
|
}
|
|
|
|
&-itemArrowPlaceholder {
|
|
display: inline-block;
|
|
width: $Tree-itemArrowWidth;
|
|
}
|
|
|
|
&-itemIcon {
|
|
display: inline-block;
|
|
margin-right: px2rem(3px);
|
|
}
|
|
|
|
&-rootIcon {
|
|
&:before {
|
|
font-style: normal;
|
|
font-family: $Tree-rootIconVendor;
|
|
content: $Tree-rootIconContent;
|
|
}
|
|
}
|
|
|
|
&-leafIcon {
|
|
&:before {
|
|
font-style: normal;
|
|
font-family: $Tree-leafIconVendor;
|
|
content: $Tree-leafIconContent;
|
|
}
|
|
}
|
|
|
|
&-folderIcon {
|
|
&:before {
|
|
font-style: normal;
|
|
font-family: $Tree-folderIconVendor;
|
|
content: $Tree-folderIconContent;
|
|
}
|
|
}
|
|
|
|
&-itemLabel {
|
|
user-select: none;
|
|
|
|
&.is-checked,
|
|
&.is-children-checked {
|
|
color: $Tree-itemLabel--onChecked-color;
|
|
}
|
|
|
|
&.is-disabled {
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
&-itemText {
|
|
cursor: pointer;
|
|
}
|
|
|
|
&-placeholder {
|
|
color: $text--muted-color;
|
|
}
|
|
|
|
&-item &-item > &-itemLabel,
|
|
&-item &-item > &-placeholder {
|
|
padding-left: $Tree-indent;
|
|
}
|
|
|
|
&-item &-item &-item > &-itemLabel,
|
|
&-item &-item &-item > &-placeholder {
|
|
padding-left: $Tree-indent * 2;
|
|
}
|
|
|
|
&-item &-item &-item &-item > &-itemLabel {
|
|
padding-left: $Tree-indent * 3;
|
|
}
|
|
|
|
&-item &-item &-item &-item &-item > &-itemLabel {
|
|
padding-left: $Tree-indent * 4;
|
|
}
|
|
|
|
&-item &-item &-item &-item &-item &-item > &-itemLabel {
|
|
padding-left: $Tree-indent * 5;
|
|
}
|
|
|
|
&-item &-item &-item &-item &-item &-item &-item > &-itemLabel {
|
|
padding-left: $Tree-indent * 6;
|
|
}
|
|
|
|
&-item &-item &-item &-item &-item &-item &-item &-item > &-itemLabel {
|
|
padding-left: $Tree-indent * 7;
|
|
}
|
|
|
|
&-item &-item &-item &-item &-item &-item &-item &-item &-item > &-itemLabel {
|
|
padding-left: $Tree-indent * 8;
|
|
}
|
|
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
> &-itemLabel {
|
|
padding-left: $Tree-indent * 9;
|
|
}
|
|
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
&-item
|
|
> &-itemLabel {
|
|
padding-left: $Tree-indent * 10;
|
|
}
|
|
}
|