tree-view.less
1 @tree-view-height: @ui-line-height; 2 3 .tree-view { 4 font-size: @ui-size; 5 background: @tree-view-background-color; 6 7 .project-root.project-root { 8 &:before { 9 height: @ui-tab-height; 10 background-clip: padding-box; 11 } 12 & > .header .name { 13 line-height: @ui-tab-height; 14 } 15 } 16 17 // Selected state 18 .selected:before { 19 background: @background-color-selected; 20 } 21 22 // Focus + selected state 23 &:focus { 24 .selected.list-item > .name, // files 25 .selected.list-nested-item > .list-item > .name, // folders 26 .selected.list-nested-item > .header:before { // arrow icon 27 color: contrast(@button-background-color-selected); 28 } 29 .selected:before { 30 background: @button-background-color-selected; 31 } 32 } 33 } 34 35 .theme-one-dark-ui .tree-view .project-root.project-root::before { 36 border-top: 1px solid transparent; 37 background-clip: padding-box; 38 } 39 40 .tree-view-resizer { 41 .tree-view-resize-handle { 42 width: 8px; 43 } 44 } 45 46 // Variable height, based on ems 47 .list-group li:not(.list-nested-item), 48 .list-tree li:not(.list-nested-item), 49 .list-group li.list-nested-item > .list-item, 50 .list-tree li.list-nested-item > .list-item { 51 line-height: @tree-view-height; 52 } 53 54 .list-group .selected::before, 55 .list-tree .selected::before { 56 height: @tree-view-height; 57 } 58 59 // icon 60 .list-group .icon, 61 .list-tree .icon { 62 display: inline-block; 63 height: inherit; 64 &::before { 65 top: initial; 66 line-height: inherit; 67 height: inherit; 68 vertical-align: top; 69 } 70 } 71 72 // Arrow icon 73 .list-group, 74 .list-tree { 75 .header.header.header.header::before { 76 top: initial; 77 line-height: inherit; 78 height: inherit; 79 vertical-align: top; 80 font-size: inherit; 81 } 82 } 83 .tree-view .project-root-header.project-root-header.project-root-header.project-root-header::before { 84 line-height: @ui-tab-height; 85 }