1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. 2 * Use of this source code is governed by a BSD-style license that can be 3 * found in the LICENSE file. */ 4 5 tree { 6 display: block; 7 outline: none; 8 overflow: auto; 9 } 10 11 .tree-item > .tree-row { 12 -webkit-user-select: none; 13 background-color: rgba(255, 255, 255, 0); 14 border: 1px solid rgba(255, 255, 255, 0); /* transparent white */ 15 border-radius: 2px; 16 color: black; 17 cursor: default; 18 line-height: 28px; 19 padding: 0 3px; 20 position: relative; 21 white-space: nowrap; 22 } 23 24 .expand-icon { 25 -webkit-transform: rotate(-90deg); 26 -webkit-transition: all 150ms; 27 background-image: -webkit-canvas(tree-triangle); 28 background-position: 50% 50%; 29 background-repeat: no-repeat; 30 background-size: 8px 5px; 31 display: inline-block; 32 height: 16px; 33 opacity: .6; 34 position: relative; 35 top: 6px; 36 vertical-align: top; 37 width: 16px; 38 } 39 40 html[dir=rtl] .expand-icon { 41 -webkit-transform: rotate(90deg); 42 } 43 44 .tree-item[expanded] > .tree-row > .expand-icon { 45 -webkit-transform: rotate(0); 46 background-image: -webkit-canvas(tree-triangle); 47 opacity: .5; 48 } 49 50 .tree-row .expand-icon { 51 visibility: hidden; 52 } 53 54 .tree-row[may-have-children] .expand-icon { 55 visibility: visible; 56 } 57 58 .tree-row[has-children=false] .expand-icon { 59 visibility: hidden; 60 } 61 62 .tree-row:hover { 63 background-color: hsl(214, 91%, 97%); 64 border-color: hsl(214, 91%, 85%); 65 z-index: 1; 66 } 67 68 /* 69 WebKit has a bug with attribute selectors so we apply selected to the tree row 70 as well. 71 72 https://bugs.webkit.org/show_bug.cgi?id=12519 73 74 */ 75 .tree-row[selected] { 76 background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), 77 rgba(255,255,255,0)); 78 } 79 80 .tree-row[selected] { 81 background-color: hsl(0, 0%, 90%); 82 border-color: hsl(0, 0%, 85%); 83 z-index: 2; 84 } 85 86 .tree-row[selected]:hover, 87 tree:focus .tree-row[selected] { 88 background-color: hsl(214, 91%, 89%); 89 border-color: rgb(125, 162, 206); 90 } 91 92 .tree-children[expanded] { 93 display: block; 94 } 95 96 .tree-children { 97 display: none; 98 } 99 100 .tree-item > .tree-row > * { 101 box-sizing: border-box; 102 display: inline-block; 103 } 104 105 .tree-label { 106 -webkit-padding-start: 20px; 107 background-position: 0 50%; 108 background-repeat: no-repeat; 109 white-space: pre; 110 } 111 112 html[dir=rtl] .tree-label { 113 background-position: 100% 50%; 114 } 115 116 html[dir=rtl] .tree-label, 117 html[dir=rtl] .tree-row[may-have-children] > .tree-label { 118 background-image: -webkit-image-set( 119 url('../../../resources/default_100_percent/common/folder_closed_rtl.png') 1x, 120 url('../../../resources/default_200_percent/common/folder_closed_rtl.png') 2x); 121 } 122 123 html[dir=rtl] .tree-item[expanded] > .tree-row > .tree-label { 124 background-image: -webkit-image-set( 125 url('../../../resources/default_100_percent/common/folder_open_rtl.png') 1x, 126 url('../../../resources/default_200_percent/common/folder_open_rtl.png') 2x); 127 } 128 129 tree[icon-visibility=hidden] .tree-label { 130 -webkit-padding-start: 0; 131 background-image: none !important; 132 } 133 134 tree[icon-visibility=parent] .tree-label, 135 tree[icon-visibility=parent] .tree-row[has-children=false] > .tree-label { 136 background-image: none; 137 } 138 139 .tree-label, 140 .tree-row[may-have-children] > .tree-label { 141 background-image: -webkit-image-set( 142 url('../../../resources/default_100_percent/common/folder_closed.png') 1x, 143 url('../../../resources/default_200_percent/common/folder_closed.png') 2x); 144 } 145 146 .tree-item[expanded] > .tree-row > .tree-label { 147 background-image: -webkit-image-set( 148 url('../../../resources/default_100_percent/common/folder_open.png') 1x, 149 url('../../../resources/default_200_percent/common/folder_open.png') 2x); 150 } 151 152 /* We need to ensure that even empty labels take up space */ 153 .tree-label:empty::after { 154 content: ' '; 155 white-space: pre; 156 } 157 158 .tree-rename > .tree-row > .tree-label { 159 -webkit-user-modify: read-write-plaintext-only; 160 -webkit-user-select: auto; 161 background: white; 162 color: black; 163 outline: 1px solid black; 164 } 165 166 .tree-item[editing] input { 167 /* Do not inherit the line-height */ 168 font-family: inherit; 169 font-size: inherit; 170 font-weight: inherit; 171 margin: -2px -8px -2px -3px; 172 <if expr="not is_macosx and not is_ios"> 173 outline: none; 174 </if> 175 padding: 1px 7px 1px 1px; 176 } 177 178 html[dir=rtl] .tree-item[editing] input { 179 margin: -2px -3px -2px -8px; 180 padding: 1px 1px 1px 7px; 181 } 182
