mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
201 lines
4.0 KiB
SCSS
201 lines
4.0 KiB
SCSS
@mixin tree-input {
|
|
> svg {
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
position: relative;
|
|
top: 2px;
|
|
width: px2rem(16px);
|
|
height: px2rem(16px);
|
|
margin-left: px2rem(5px);
|
|
}
|
|
|
|
> input {
|
|
margin-left: px2rem(15px);
|
|
padding: px2rem(5px);
|
|
width: px2rem(150px);
|
|
height: px2rem(25px);
|
|
color: $Form-input-color;
|
|
|
|
&::placeholder {
|
|
color: $Form-input-placeholderColor;
|
|
user-select: none;
|
|
}
|
|
|
|
&:focus {
|
|
outline: none;
|
|
border: $borderWidth solid $info;
|
|
}
|
|
}
|
|
}
|
|
|
|
// todo
|
|
.#{$ns}TreeControl {
|
|
border: 1px solid $Form-input-borderColor;
|
|
padding: 6px 12px;
|
|
border-radius: 2px;
|
|
max-height: 300px;
|
|
overflow: auto;
|
|
|
|
&.h-full {
|
|
max-height: none;
|
|
}
|
|
|
|
&.no-border {
|
|
border: 0;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Tree {
|
|
&-list,
|
|
&-sublist {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
&-sublist {
|
|
padding-left: $Tree-indent;
|
|
|
|
&.is-folded {
|
|
display: none;
|
|
}
|
|
|
|
> li {
|
|
@include tree-input;
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
line-height: px2rem(30px);
|
|
position: relative;
|
|
|
|
.#{$ns}Tree-item-icons {
|
|
visibility: hidden;
|
|
transition: visibility .1s ease;
|
|
}
|
|
|
|
> a {
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
|
|
> span.#{$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);
|
|
}
|
|
}
|
|
|
|
&--isLeaf > a {
|
|
padding-left: $Tree-itemArrowWidth + $gap-xs;
|
|
}
|
|
|
|
&--isEdit {
|
|
display: inline-block;
|
|
@include tree-input;
|
|
}
|
|
}
|
|
|
|
&-rootItem {
|
|
> a > i {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.#{$ns}Tree-addTop {
|
|
height: px2rem(25px);
|
|
line-height: px2rem(25px);
|
|
cursor: pointer;
|
|
padding-left: $Tree-indent;
|
|
> p {
|
|
> svg {
|
|
position: relative;
|
|
top: 2px;
|
|
width: px2rem(16px);
|
|
height: px2rem(16px);
|
|
}
|
|
> span {
|
|
padding-left: px2rem(5px);
|
|
}
|
|
}
|
|
|
|
&-input {
|
|
@include tree-input
|
|
}
|
|
}
|
|
}
|
|
|
|
&-itemArrow {
|
|
cursor: pointer;
|
|
width: $Tree-itemArrowWidth;
|
|
margin-right: $gap-xs;
|
|
display: inline-block;
|
|
|
|
&:before {
|
|
font-style: normal;
|
|
font-family: $Tree-arrowVendor;
|
|
content: $Tree-unfoldedArrowContent;
|
|
}
|
|
|
|
&.is-folded:before {
|
|
content: $Tree-foldedArrowContent;
|
|
}
|
|
}
|
|
|
|
&-itemIcon {
|
|
display: inline-block;
|
|
margin-right: $gap-xs;
|
|
}
|
|
|
|
&-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;
|
|
}
|
|
}
|
|
|
|
&-itemText {
|
|
user-select: none;
|
|
cursor: pointer;
|
|
|
|
&.is-checked,
|
|
&.is-children-checked {
|
|
color: $Tree-itemText--onChecked-color;
|
|
}
|
|
|
|
&.is-disabled {
|
|
color: $text--muted-color;
|
|
}
|
|
}
|
|
|
|
&-placeholder {
|
|
color: $text--muted-color;
|
|
}
|
|
}
|