• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
5tree {
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
40html[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,
87tree: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
112html[dir=rtl] .tree-label {
113  background-position: 100% 50%;
114}
115
116html[dir=rtl] .tree-label,
117html[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
123html[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
129tree[icon-visibility=hidden] .tree-label {
130  -webkit-padding-start: 0;
131  background-image: none !important;
132}
133
134tree[icon-visibility=parent] .tree-label,
135tree[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
178html[dir=rtl] .tree-item[editing] input {
179  margin: -2px -3px -2px -8px;
180  padding: 1px 1px 1px 7px;
181}
182