ui/webui/resources/css/tree.css

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