15821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* Copyright (c) 2012 The Chromium Authors. All rights reserved. 25821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * Use of this source code is governed by a BSD-style license that can be 35821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) * found in the LICENSE file. */ 45821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 55821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)tree { 65821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 75821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 85821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) overflow: auto; 95821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-item > .tree-row { 125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: none; 135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: rgba(255, 255, 255, 0); 145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border: 1px solid rgba(255, 255, 255, 0); /* transparent white */ 155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-radius: 2px; 165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: black; 175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) cursor: default; 185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) line-height: 28px; 195821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 0 3px; 205821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) white-space: nowrap; 225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).expand-icon { 255821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: rotate(-90deg); 265821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transition: all 150ms; 275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-canvas(tree-triangle); 285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: 50% 50%; 295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-repeat: no-repeat; 30868fa2fe829687343ffae624259930155e16dbd8Torne (Richard Coles) background-size: 8px 5px; 315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: inline-block; 325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) height: 16px; 335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: .6; 345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) position: relative; 355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) top: 6px; 365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) vertical-align: top; 375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) width: 16px; 385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .expand-icon { 415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: rotate(90deg); 425821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 435821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-item[expanded] > .tree-row > .expand-icon { 455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-transform: rotate(0); 465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-canvas(tree-triangle); 475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) opacity: .5; 485821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 495821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row .expand-icon { 515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: hidden; 525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 535821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row[may-have-children] .expand-icon { 555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: visible; 565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row[has-children=false] .expand-icon { 595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) visibility: hidden; 605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row:hover { 635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: hsl(214, 91%, 97%); 645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: hsl(214, 91%, 85%); 655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) z-index: 1; 665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* 695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) WebKit has a bug with attribute selectors so we apply selected to the tree row 705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) as well. 715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) https://bugs.webkit.org/show_bug.cgi?id=12519 735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)*/ 755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row[selected] { 765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.8), 775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) rgba(255,255,255,0)); 785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row[selected] { 815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: hsl(0, 0%, 90%); 825821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: hsl(0, 0%, 85%); 835821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) z-index: 2; 845821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 855821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 865821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row[selected]:hover, 875821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)tree:focus .tree-row[selected] { 885821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-color: hsl(214, 91%, 89%); 895821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) border-color: rgb(125, 162, 206); 905821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 915821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 925821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-children[expanded] { 935821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: block; 945821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 955821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 965821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-children { 975821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: none; 985821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 995821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1005821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-item > .tree-row > * { 1015821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) box-sizing: border-box; 1025821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) display: inline-block; 1035821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1045821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1055821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-label { 1065821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 20px; 1075821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: 0 50%; 1085821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-repeat: no-repeat; 1095821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) white-space: pre; 1105821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1115821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1125821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .tree-label { 1135821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-position: 100% 50%; 1145821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1155821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1165821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .tree-label, 1175821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .tree-row[may-have-children] > .tree-label { 1185821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-image-set( 1192a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_100_percent/common/folder_closed_rtl.png') 1x, 1202a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_200_percent/common/folder_closed_rtl.png') 2x); 1215821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1225821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1235821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .tree-item[expanded] > .tree-row > .tree-label { 1245821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-image-set( 1252a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_100_percent/common/folder_open_rtl.png') 1x, 1262a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_200_percent/common/folder_open_rtl.png') 2x); 1275821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1285821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1295821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)tree[icon-visibility=hidden] .tree-label { 1305821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-padding-start: 0; 1315821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: none !important; 1325821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1335821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1345821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)tree[icon-visibility=parent] .tree-label, 1355821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)tree[icon-visibility=parent] .tree-row[has-children=false] > .tree-label { 1365821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: none; 1375821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1385821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1395821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-label, 1405821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-row[may-have-children] > .tree-label { 1415821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-image-set( 1422a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_100_percent/common/folder_closed.png') 1x, 1432a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_200_percent/common/folder_closed.png') 2x); 1445821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1455821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1465821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-item[expanded] > .tree-row > .tree-label { 1475821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background-image: -webkit-image-set( 1482a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_100_percent/common/folder_open.png') 1x, 1492a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles) url('../../../resources/default_200_percent/common/folder_open.png') 2x); 1505821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1515821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1525821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)/* We need to ensure that even empty labels take up space */ 1532a99a7e74a7f215066514fe81d2bfa6639d9edddTorne (Richard Coles).tree-label:empty::after { 1545821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) content: ' '; 1555821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) white-space: pre; 1565821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1575821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1585821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-rename > .tree-row > .tree-label { 1595821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-modify: read-write-plaintext-only; 1605821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) -webkit-user-select: auto; 1615821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) background: white; 1625821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) color: black; 1635821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: 1px solid black; 1645821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1655821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1665821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles).tree-item[editing] input { 1675821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) /* Do not inherit the line-height */ 1685821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font-family: inherit; 1695821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font-size: inherit; 1705821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) font-weight: inherit; 1715821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: -2px -8px -2px -3px; 1725821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)<if expr="not is_macosx"> 1735821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) outline: none; 1745821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)</if> 1755821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 1px 7px 1px 1px; 1765821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 1775821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) 1785821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)html[dir=rtl] .tree-item[editing] input { 1795821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) margin: -2px -3px -2px -8px; 1805821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles) padding: 1px 1px 1px 7px; 1815821806d5e7f356e8fa4b058a389a808ea183019Torne (Richard Coles)} 182