src/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-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 }