/ packages / one-dark-ui / styles / tree-view.less
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  }