amis2/scss/components/form/_tree.scss

265 lines
5.1 KiB
SCSS
Raw Normal View History

2019-04-30 11:11:25 +08:00
.#{$ns}TreeControl {
border: 1px solid var(--Form-input-borderColor);
2019-12-06 09:58:08 +08:00
padding: 6px 12px;
border-radius: 2px;
max-height: 300px;
overflow: auto;
&.h-full {
max-height: none;
overflow: visible;
}
&.no-border {
border: 0;
}
2019-04-30 11:11:25 +08:00
}
.#{$ns}Tree {
2019-12-06 09:58:08 +08:00
&-list,
&-sublist {
list-style: none;
padding: 0;
margin: 0;
}
&-sublist {
margin-left: var(--Tree-indent);
}
2019-12-06 09:58:08 +08:00
&-sublist.is-folded {
display: none;
}
&-item {
line-height: var(--Tree-itemHeight);
2019-12-06 09:58:08 +08:00
position: relative;
> div {
&:hover {
text-decoration: none;
> .#{$ns}Tree-item-icons {
visibility: visible;
}
2019-12-06 09:58:08 +08:00
}
2019-11-10 11:18:22 +08:00
2019-12-06 09:58:08 +08:00
> span > svg {
display: inline-block;
cursor: pointer;
2019-12-06 09:58:08 +08:00
position: relative;
top: 2px;
width: px2rem(16px);
height: px2rem(16px);
margin-left: var(--gap-xs);
2019-12-06 09:58:08 +08:00
}
}
2019-12-06 09:58:08 +08:00
}
&.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: '';
}
}
2019-12-06 09:58:08 +08:00
&-rootItem {
line-height: var(--Tree-itemHeight);
2019-12-06 09:58:08 +08:00
}
2019-12-06 09:58:08 +08:00
&-item > div:hover > .#{$ns}Tree-item-icons,
&-rootItem > div:hover > .#{$ns}Tree-item-icons {
visibility: visible;
}
2019-12-06 09:58:08 +08:00
&-itemLabel {
display: flex;
2020-08-07 14:20:18 +08:00
align-items: center;
2019-12-06 09:58:08 +08:00
&:hover {
background: var(--Tree-item-onHover-bg);
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-item-icons {
visibility: hidden;
transition: visibility var(--animation-duration) ease;
2019-12-06 09:58:08 +08:00
display: inline-block;
vertical-align: top;
height: var(--Tree-itemHeight);
line-height: var(--Tree-itemHeight);
padding-right: var(--gap-xs);
2019-12-06 09:58:08 +08:00
> a {
display: inline-block;
vertical-align: middle;
margin-left: var(--gap-xs);
2019-12-06 09:58:08 +08:00
cursor: pointer;
> svg {
2020-06-09 14:44:38 +08:00
$svgSize: px2rem(12px);
2019-12-06 09:58:08 +08:00
width: $svgSize;
height: $svgSize;
2020-06-09 14:44:38 +08:00
top: 0;
2019-12-06 09:58:08 +08:00
}
}
2019-12-06 09:58:08 +08:00
}
2019-12-06 09:58:08 +08:00
&-itemInput {
padding-left: var(--Tree-itemArrowWidth);
2020-08-20 18:14:05 +08:00
display: flex;
flex-direction: row;
flex-wrap: nowrap;
2019-12-06 09:58:08 +08:00
> a {
display: inline-block;
cursor: pointer;
margin-left: var(--gap-sm);
color: var(--icon-color);
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:hover {
color: var(--icon-onHover-color);
2019-12-06 09:58:08 +08:00
text-decoration: none;
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
> input {
2020-08-20 18:14:05 +08:00
flex-grow: 1;
width: 100%;
2019-12-06 09:58:08 +08:00
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);
2019-12-06 09:58:08 +08:00
&::placeholder {
color: var(--Form-input-placeholderColor);
user-select: none;
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&:focus {
border-color: var(--Form-input-onFocused-borderColor);
box-shadow: var(--Form-input-boxShadow);
background: var(--Form-input-onFocused-bg);
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-04-30 11:11:25 +08:00
2019-12-06 09:58:08 +08:00
&-addTopBtn {
cursor: pointer;
height: var(--Tree-itemHeight);
line-height: var(--Tree-itemHeight);
2019-12-06 09:58:08 +08:00
display: block;
2019-11-10 11:18:22 +08:00
2019-12-06 09:58:08 +08:00
&:hover {
text-decoration: none;
}
2019-12-06 09:58:08 +08:00
&.is-disabled {
pointer-events: none;
color: var(--text--muted-color);
}
2019-12-06 09:58:08 +08:00
> svg {
$svgSize: px2rem(14px);
width: $svgSize;
height: $svgSize;
top: $svgSize * 0.125;
margin-right: var(--gap-xs);
}
2019-12-06 09:58:08 +08:00
}
&-itemArrow {
cursor: pointer;
width: var(--Tree-itemArrowWidth);
2020-12-25 00:13:14 +08:00
display: inline-flex;
margin-right: var(--gap-xs);
2019-12-06 09:58:08 +08:00
2020-06-09 14:44:38 +08:00
// &:before {
// font-style: normal;
// font-family: $Tree-arrowVendor;
// content: $Tree-unfoldedArrowContent;
// }
> svg {
width: var(--Tree-itemArrowWidth);
height: var(--Tree-itemArrowWidth);
2020-12-25 00:13:14 +08:00
display: block;
transition: transform var(--animation-duration);
2020-06-09 14:44:38 +08:00
top: 0;
transform: rotate(90deg);
}
2020-06-09 14:44:38 +08:00
&.is-folded > svg {
transform: rotate(0deg);
}
2019-12-06 09:58:08 +08:00
}
&-itemArrowPlaceholder {
display: inline-block;
width: calc(var(--Tree-itemArrowWidth) + var(--gap-xs));
2019-12-06 09:58:08 +08:00
}
&-spinner {
margin-right: var(--gap-xs);
}
2019-12-06 09:58:08 +08:00
&-itemIcon {
2020-12-25 00:13:14 +08:00
display: inline-flex;
margin-right: var(--gap-xs);
2019-12-06 09:58:08 +08:00
}
2020-06-09 14:44:38 +08:00
&-rootIcon,
&-folderIcon,
2019-12-06 09:58:08 +08:00
&-leafIcon {
2020-06-09 14:44:38 +08:00
> svg {
2020-12-25 00:13:14 +08:00
top: 0;
2020-06-09 14:44:38 +08:00
width: px2rem(14px);
height: px2rem(14px);
}
2019-12-06 09:58:08 +08:00
}
2019-12-06 09:58:08 +08:00
&-itemLabel {
user-select: none;
2019-12-06 09:58:08 +08:00
&.is-checked,
&.is-children-checked {
color: var(--Tree-itemLabel--onChecked-color);
}
2019-12-06 09:58:08 +08:00
&.is-disabled {
color: var(--text--muted-color);
}
2020-06-09 14:44:38 +08:00
> .#{$ns}Checkbox {
2020-12-25 00:13:14 +08:00
display: inline-flex;
align-self: center;
2020-06-09 14:44:38 +08:00
}
2019-12-06 09:58:08 +08:00
}
&-itemText {
cursor: pointer;
flex: 1 auto;
line-height: var(--lineHeightBase);
2020-06-11 13:37:17 +08:00
padding: px2rem(4px) 0;
2019-12-06 09:58:08 +08:00
}
&-placeholder {
color: var(--text--muted-color);
2019-12-06 09:58:08 +08:00
}
}