dumi
Version:
📖 Documentation Generator of React Component
187 lines (157 loc) • 3.85 kB
text/less
@import (reference) '../../styles/variables.less';
@treePrefixCls: ~'rc-tree';
@treeNodePrefixCls: ~'@{treePrefixCls}-treenode';
.@{prefix}-tree {
@bg-color: tint(@c-site-bg, 50%);
padding: 16px;
margin: 24px 0 32px;
background: @bg-color;
border: 1px solid @c-border-light;
border-radius: 2px;
color: @c-text;
overflow-y: auto;
@{dark-selector} & {
@bg-color: shade(@c-site-bg-dark, 50%);
color: @c-text-dark;
background: @bg-color;
border-color: @c-border-dark;
}
small {
@small-font-color: @c-text-note-dark;
padding-left: 24px;
color: @c-text-note-dark;
font-size: 14px;
white-space: nowrap;
@{dark-selector} & {
color: @c-text-note-dark;
}
&::before {
content: '# ';
}
}
&.@{treePrefixCls} {
transition: all 0.3s;
line-height: 1.5715;
list-style: none;
font-size: 14px;
.@{treeNodePrefixCls} {
position: relative;
display: flex;
align-items: flex-start;
&::before {
position: absolute;
top: 0;
right: 0;
bottom: 4px;
left: 0;
transition: background 0.3s;
content: '';
}
&:hover::before {
background: shade(@bg-color, 5%);
@{dark-selector} & {
@bg-color: shade(@c-site-bg-dark, 50%);
background: tint(@bg-color, 10%);
}
}
> * {
z-index: 1;
}
}
@treeNode-size: 28px;
@border: #d9d9d9;
.@{treeNodePrefixCls} span.@{treePrefixCls}-switcher {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: @treeNode-size;
margin-right: 2px;
line-height: @treeNode-size;
background: transparent;
cursor: pointer;
flex-shrink: 0;
}
.@{treeNodePrefixCls} .@{treePrefixCls}-node-content-wrapper {
flex: auto;
min-height: @treeNode-size;
margin: 0;
padding: 0 4px;
line-height: @treeNode-size;
cursor: pointer;
white-space: nowrap;
.@{treePrefixCls}-iconEle {
margin-right: 6px;
vertical-align: 0;
}
}
&.@{treePrefixCls}-show-line {
.@{treePrefixCls}-indent {
display: inline-block;
height: 0;
vertical-align: bottom;
flex-shrink: 0;
&-unit {
position: relative;
display: inline-block;
width: 24px;
height: @treeNode-size;
&::before {
position: absolute;
top: 0;
right: 12px;
bottom: -4px;
border-right: 1px solid @border;
content: '';
}
&-end::before {
display: none;
}
}
}
.tree-switcher-leaf-line {
position: relative;
z-index: 1;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
&::before {
position: absolute;
top: 0;
bottom: -4px;
margin-left: -1px;
border-left: 1px solid @border;
content: ' ';
}
&::after {
position: absolute;
top: 0;
bottom: calc(@treeNode-size / 2);
width: 12px;
margin-left: -1px;
border-bottom: 1px solid @border;
content: ' ';
}
}
.@{treeNodePrefixCls}-leaf-last {
.tree-switcher-leaf-line::before {
height: calc(@treeNode-size / 2);
}
}
}
}
&-icon {
width: 16px;
color: @c-text;
vertical-align: -0.225em;
display: inline-block;
@{dark-selector} & {
color: @c-text-dark;
}
}
}
.ant-motion-collapse {
overflow: hidden;
transition: height 0.2s ease-in-out, opacity 0.2s ease-in-out ;
}