| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- @use '../helpers/baseMixin.scss';
- .vxe-tree {
- position: relative;
- color: var(--vxe-ui-font-color);
- font-family: var(--vxe-ui-font-family);
- &.node--trigger {
- .vxe-tree--node-item {
- cursor: pointer;
- }
- }
- .vxe-tree--node-item {
- &.is--current {
- background-color: var(--vxe-ui-tree-node-current-background-color);
- }
- }
- &.checkbox--highlight {
- .vxe-tree--node-item {
- &.is-checkbox--checked {
- background-color: var(--vxe-ui-tree-node-checkbox-checked-background-color);
- }
- }
- }
- &.radio--highlight {
- .vxe-tree--node-item {
- &.is-radio--checked {
- background-color: var(--vxe-ui-tree-node-radio-checked-background-color);
- }
- }
- }
- &.node--hover {
- .vxe-tree--node-item {
- &:hover {
- background-color: var(--vxe-ui-tree-node-hover-background-color);
- &.is--current {
- background-color: var(--vxe-ui-tree-node-hover-current-background-color);
- }
- }
- }
- &.radio--highlight {
- .vxe-tree--node-item {
- &.is-radio--checked {
- &:hover {
- background-color: var(--vxe-ui-tree-node-hover-radio-checked-background-color);
- }
- }
- }
- }
- &.checkbox--highlight {
- .vxe-tree--node-item {
- &.is-checkbox--checked {
- &:hover {
- background-color: var(--vxe-ui-tree-node-hover-checkbox-checked-background-color);
- }
- }
- }
- }
- }
- &.show--line {
- .vxe-tree--node-child-line {
- position: absolute;
- top: 0;
- left: 0;
- height: calc(100% - 0.7em);
- transform: translateX(-0.6em);
- border-left-width: var(--vxe-ui-tree-node-line-width);
- border-left-style: var(--vxe-ui-tree-node-line-style);
- border-left-color: var(--vxe-ui-tree-node-line-color);
- pointer-events: none;
- z-index: 5;
- }
- }
- }
- .vxe-tree--node-line-wrapper {
- position: relative;
- display: block;
- height: 0;
- }
- .vxe-tree--node-line {
- position: absolute;
- bottom: calc(var(--vxe-ui-tree-node-height) / 2 * -1);
- left: 0.6em;
- width: 0.6em;
- border-width: 0 0 var(--vxe-ui-tree-node-line-width) var(--vxe-ui-tree-node-line-width);
- border-style: var(--vxe-ui-tree-node-line-style);
- border-color: var(--vxe-ui-tree-node-line-color);
- pointer-events: none;
- }
- .vxe-tree--node-list-wrapper {
- overflow-y: auto;
- overflow-x: hidden;
- }
- .vxe-tree--node-child-wrapper {
- position: relative;
- }
- .vxe-tree--node-item {
- display: flex;
- flex-direction: row;
- height: var(--vxe-ui-tree-node-height);
- line-height: var(--vxe-ui-tree-node-height);
- }
- .vxe-tree--node-item-switcher {
- position: relative;
- width: 1.4em;
- flex-shrink: 0;
- user-select: none;
- }
- .vxe-tree--node-item-icon {
- position: absolute;
- display: inline-flex;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- cursor: pointer;
- text-align: center;
- z-index: 7;
- & > i {
- display: inline-flex;
- @include baseMixin.createAnimationTransition(all, 0.2s);
- }
- }
- .vxe-tree--node-item-inner {
- display: flex;
- flex-direction: row;
- flex-grow: 1;
- overflow: hidden;
- .vxe-tree--node-item-title {
- flex-grow: 1;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
- .vxe-tree--node-item-extra {
- flex-shrink: 0
- }
- }
- .vxe-tree--checkbox-option {
- padding-right: 0.4em;
- @include baseMixin.createCheckboxIcon();
- }
- .vxe-tree--radio-option {
- padding-right: 0.4em;
- @include baseMixin.createRadioIcon();
- }
- .vxe-tree--empty-placeholder {
- margin-top: 1.4em;
- text-align: center;
- height: var(--vxe-ui-tree-node-height);
- color: var(--vxe-ui-input-placeholder-color);
- }
- .vxe-tree--y-space {
- width: 0;
- float: left;
- }
- .vxe-tree {
- font-size: var(--vxe-ui-font-size-default);
- &.size--medium {
- font-size: var(--vxe-ui-font-size-medium);
- }
- &.size--small {
- font-size: var(--vxe-ui-font-size-small);
- }
- &.size--mini {
- font-size: var(--vxe-ui-font-size-mini);
- }
- }
|