1/* 2 * Copyright (C) 2013 Apple Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions 6 * are met: 7 * 1. Redistributions of source code must retain the above copyright 8 * notice, this list of conditions and the following disclaimer. 9 * 2. Redistributions in binary form must reproduce the above copyright 10 * notice, this list of conditions and the following disclaimer in the 11 * documentation and/or other materials provided with the distribution. 12 * 13 * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS'' 14 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, 15 * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 16 * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS 17 * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR 18 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF 19 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS 20 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN 21 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 22 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF 23 * THE POSSIBILITY OF SUCH DAMAGE. 24 */ 25 26.data-grid { 27 position: relative; 28 outline: none; 29} 30 31.data-grid .highlight { 32 background-color: rgb(255, 230, 179); 33} 34 35.data-grid tr.selected .highlight { 36 background-color: transparent; 37} 38 39.data-grid table { 40 table-layout: fixed; 41 border-spacing: 0; 42 border-collapse: collapse; 43 width: 100%; 44} 45 46.data-grid .data-container { 47 position: absolute; 48 top: 23px; 49 bottom: 0; 50 left: 0; 51 right: 0; 52 overflow-x: hidden; 53 overflow-y: overlay; 54} 55 56.data-grid.inline .data-container { 57 position: static; 58} 59 60.data-grid.inline { 61 border: 1px solid rgb(179, 179, 179); 62} 63 64.data-grid.no-header > table.header { 65 display: none; 66} 67 68.data-grid.no-header .data-container { 69 top: 0; 70} 71 72.data-grid th { 73 text-align: left; 74 vertical-align: middle; 75 76 background-color: white; 77 78 border-bottom: 1px solid rgb(179, 179, 179); 79 80 font-weight: normal; 81 82 height: 22px; 83 padding: 0 6px; 84 85 white-space: nowrap; 86 overflow: hidden; 87} 88 89.data-grid :-webkit-any(th, td):not(:last-child) { 90 border-right: 1px solid rgb(179, 179, 179); 91} 92 93.data-grid th.sortable:active { 94 background-color: rgb(179, 179, 179); 95} 96 97.data-grid th:-webkit-any(.sort-ascending, .sort-descending) { 98 background-color: rgb(230, 230, 230); 99} 100 101.data-grid tr.filler { 102 display: table-row !important; 103 height: auto !important; 104} 105 106.data-grid tr.filler td { 107 height: auto !important; 108 padding: 0 !important; 109} 110 111.data-grid table.data { 112 position: absolute; 113 left: 0; 114 top: 0; 115 right: 0; 116 bottom: 0; 117 height: 100%; 118 border-top: 0 none transparent; 119 background-image: linear-gradient(to bottom, white, white 50%, rgb(243, 246, 250) 50%, rgb(243, 246, 250)); 120 background-size: 100% 42px; 121 table-layout: fixed; 122} 123 124.data-grid.inline table.data { 125 position: static; 126} 127 128.data-grid table.data tr { 129 display: none; 130} 131 132.data-grid table.data tr.revealed { 133 display: table-row; 134} 135 136.data-grid td { 137 vertical-align: top; 138 height: 12px; 139 line-height: 17px; 140 padding: 2px 6px; 141 white-space: nowrap; 142 overflow: hidden; 143} 144 145.data-grid:focus tr.selected td:not(:last-child) { 146 border-right-color: rgb(0, 102, 204); 147} 148 149body.mac-platform.legacy .data-grid:focus tr.selected td:not(:last-child) { 150 border-right-color: rgb(53, 109, 189); 151} 152 153.data-grid :-webkit-any(th, td) > div { 154 white-space: nowrap; 155 text-overflow: ellipsis; 156 overflow: hidden; 157} 158 159.data-grid .centered div { 160 text-align: center; 161} 162 163.data-grid .right div { 164 text-align: right; 165} 166 167.data-grid th.sortable div { 168 position: relative; 169} 170 171.data-grid th:-webkit-any(.sort-ascending, .sort-descending) > div:first-child { 172 padding-right: 12px; 173} 174 175.data-grid th.sort-ascending > div:first-child::after { 176 position: absolute; 177 top: 1px; 178 bottom: 0; 179 right: 0; 180 181 margin-bottom: auto; 182 margin-top: auto; 183 184 width: 9px; 185 height: 8px; 186 187 content: ""; 188 189 background-image: -webkit-canvas(data-grid-sort-indicator-up-arrow); 190 background-size: 9px 8px; 191 background-repeat: no-repeat; 192} 193 194.data-grid th.sort-descending > div:first-child::after { 195 position: absolute; 196 top: 1px; 197 bottom: 0; 198 right: 0; 199 200 margin-bottom: auto; 201 margin-top: auto; 202 203 width: 9px; 204 height: 8px; 205 206 content: ""; 207 208 background-image: -webkit-canvas(data-grid-sort-indicator-down-arrow); 209 background-size: 9px 8px; 210 background-repeat: no-repeat; 211} 212 213.data-grid button { 214 line-height: 19px; 215} 216 217.data-grid tr.parent td.disclosure::before { 218 float: left; 219 220 content: ""; 221 222 background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal); 223 background-size: 8px 8px; 224 background-repeat: no-repeat; 225 226 width: 8px; 227 height: 8px; 228 229 margin-top: 2px; 230 margin-right: 2px; 231} 232 233.data-grid tr.parent.expanded td.disclosure::before { 234 background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal); 235} 236 237.data-grid:focus tr.parent.selected td.disclosure::before { 238 background-image: -webkit-canvas(disclosure-triangle-tiny-closed-selected); 239} 240 241.data-grid:focus tr.parent.expanded.selected td.disclosure::before { 242 background-image: -webkit-canvas(disclosure-triangle-tiny-open-selected); 243} 244 245.data-grid tr.selected { 246 background-color: rgb(212, 212, 212) !important; 247 color: inherit !important; 248} 249 250.data-grid:focus tr.selected { 251 background-color: rgb(0, 128, 252) !important; 252 color: white !important; 253} 254 255body.mac-platform.legacy .data-grid:focus tr.selected { 256 background-color: rgb(56, 121, 217) !important; 257} 258 259.data-grid tr:not(.parent) td.disclosure { 260 text-indent: 10px; 261} 262 263.data-grid td .subtitle { 264 color: rgba(0, 0, 0, 0.7); 265} 266 267.data-grid td .subtitle::before { 268 content: " — "; 269} 270 271.data-grid:focus tr.selected td .subtitle { 272 color: rgba(255, 255, 255, 0.9); 273} 274 275.data-grid td.error { 276 color: rgb(224, 16, 16); 277} 278 279.data-grid tr.selected td.error { 280 color: inherit; 281} 282 283.data-grid td .icon { 284 display: inline-block; 285 vertical-align: top; 286 287 width: 16px; 288 height: 16px; 289 290 margin-right: 2px; 291} 292 293.data-grid td .go-to-arrow { 294 float: right; 295 296 display: none; 297 298 margin-left: 2px; 299} 300 301.data-grid tr:-webkit-any(.selected, :hover) .go-to-arrow { 302 display: block; 303} 304 305.data-grid-resizer { 306 position: absolute; 307 top: 0; 308 bottom: 0; 309 width: 5px; 310 z-index: 500; 311 cursor: col-resize; 312} 313