// // Tree // .tree { // Css variables --#{$prefix}tree-icon-size: #{$tree-icon-size}; --#{$prefix}tree-icon-gap: #{$tree-icon-gap}; --#{$prefix}tree-icon-color-open: var(--#{$prefix}success); --#{$prefix}tree-icon-color-default: var(--#{$prefix}gray-500); --#{$prefix}tree-icon-color-close: var(--#{$prefix}gray-500); --#{$prefix}tree-line-color: var(--#{$prefix}gray-200); .tree-node { padding-left: $tree-node-padding-x; display: flex; flex-direction: column; align-items: start; } .tree-sub { padding: $tree-node-padding-y 0; } .tree-content { display: flex; align-items: center; padding: $tree-node-padding-y 0; } .tree-wrapper { padding-left: calc(var(--#{$prefix}tree-icon-size) + var(--#{$prefix}tree-icon-size)); } .tree-section { display: flex; align-items: baseline; padding-left: var(--#{$prefix}tree-icon-gap); } .tree-toggle { display: flex; align-items: center; width: var(--#{$prefix}tree-icon-size); .tree-icon-default { font-size: 1.5rem; color: var(--#{$prefix}tree-icon-color-default); } .tree-icon-open { font-size: 1.5rem; color: var(--#{$prefix}tree-icon-color-open); } .tree-icon-close { font-size: 1.5rem; color: var(--#{$prefix}tree-icon-color-close); } &.collapsed { .tree-icon-close { display: flex; } .tree-icon-open { display: none; } } &:not(.collapsed) { .tree-icon-close { display: none; } .tree-icon-open { display: flex; } } } & > .tree-node { padding-left: 0 !important; } &.tree-line { .tree-sub { border-left: 1px solid var(--#{$prefix}tree-line-color); margin-left: calc(var(--#{$prefix}tree-icon-size) / 2); } } }