Home | History | Annotate | Download | only in css 
      1 tree {
      2   outline: none;
      3   overflow: auto;
      4   display: block;
      5 }
      6 
      7 .tree-item > .tree-row {
      8   color: black;
      9   -webkit-user-select: none;
     10   border: 1px solid rgba(255,255,255,0); /* transparent white */
     11   background-color: rgba(255,255,255,0);
     12   border-radius: 2px;
     13   padding: 0px 3px;
     14   line-height: 20px;
     15   white-space: nowrap;
     16   cursor: default;
     17   position: relative;
     18   margin: -1px 0;
     19 }
     20 
     21 .expand-icon {
     22   width: 16px;
     23   height: 16px;
     24   display: inline-block;
     25   vertical-align: top;
     26   position: relative;
     27   top: 2px;
     28   background-image: -webkit-canvas(tree-triangle);
     29   background-position: 50% 50%;
     30   background-repeat: no-repeat;
     31   -webkit-transition: all .15s;
     32   opacity: .6;
     33   -webkit-transform: rotate(-90deg);
     34 }
     35 
     36 html[dir=rtl] .expand-icon {
     37   -webkit-transform: rotate(90deg);
     38 }
     39 
     40 .tree-item[expanded] > .tree-row > .expand-icon {
     41   background-image: -webkit-canvas(tree-triangle);
     42   -webkit-transform: rotate(0deg);
     43   opacity: .5;
     44 }
     45 
     46 .tree-row .expand-icon {
     47   visibility: hidden;
     48 }
     49 
     50 .tree-row[may-have-children] .expand-icon {
     51   visibility: visible;
     52 }
     53 
     54 .tree-row[has-children=false] .expand-icon {
     55   visibility: hidden;
     56 }
     57 
     58 .tree-row:hover {
     59   border-color: hsl(214, 91%, 85%);
     60   z-index: 1;
     61   background-color: hsl(214, 91%, 97%);
     62 }
     63 
     64 /*
     65   WebKit has a bug with attribute selectors so we apply selected to the tree row
     66   as well.
     67 
     68   https://bugs.webkit.org/show_bug.cgi?id=12519
     69 
     70 */
     71 .tree-row[selected] {
     72   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8),
     73                                             rgba(255,255,255,0));
     74 }
     75 
     76 .tree-row[selected] {
     77   border-color: hsl(0,0%,85%);
     78   background-color: hsl(0, 0%, 90%);
     79   z-index: 2;
     80 }
     81 
     82 .tree-row[selected]:hover,
     83 tree:focus .tree-row[selected] {
     84   background-color: hsl(214, 91%, 89%);
     85   border-color: #7da2ce;
     86 }
     87 
     88 .tree-children[expanded] {
     89   display: block;
     90 }
     91 
     92 .tree-children {
     93   display: none;
     94 }
     95 
     96 .tree-item > .tree-row > * {
     97   display: inline-block;
     98   box-sizing: border-box;
     99 }
    100 
    101 .tree-label {
    102   -webkit-padding-start: 20px;
    103   background-image: url("../../../../../app/resources/folder_closed.png");
    104   background-position: 0 50%;
    105   background-repeat: no-repeat;
    106   white-space: pre;
    107 }
    108 
    109 /* We need to ensure that even empty labels take up space */
    110 .tree-label:empty:after {
    111   content: " ";
    112   white-space: pre;
    113 }
    114 
    115 .tree-rename > .tree-row > .tree-label {
    116   -webkit-user-select: auto;
    117   -webkit-user-modify: read-write-plaintext-only;
    118   background: white;
    119   color: black;
    120   outline: 1px solid black;
    121 }
    122 
    123 html[dir=rtl] .tree-label {
    124   background-position: 100% 50%;
    125 }
    126 
    127 .tree-row[selected] > .tree-label {
    128   background-image: url("../../../../../app/resources/folder_open.png");
    129 }
    130 
    131 html[dir='rtl'] .tree-label {
    132   background-image: url("../../../../../app/resources/folder_closed_rtl.png");
    133 }
    134 
    135 html[dir='rtl'] .tree-row[selected] > .tree-label {
    136   background-image: url("../../../../../app/resources/folder_open_rtl.png");
    137 }
    138 
    139 .tree-item[editing] input {
    140   /* Do not inherit the line-height */
    141   font-family: inherit;
    142   font-size: inherit;
    143   font-weight: inherit;
    144   margin: -2px -8px -2px -3px;
    145   padding: 1px 7px 1px 1px;
    146 }
    147 
    148 html:not([os=mac]) .tree-item[editing] input {
    149   outline: none;
    150 }
    151 
    152 html[dir=rtl] .tree-item[editing] input {
    153   margin: -2px -3px -2px -8px;
    154   padding: 1px 1px 1px 7px;
    155 }
    156