blob: 93a29faee9e357718e7754727f0acf8286474cd6 [file] [log] [blame]
/*
* Copyright (C) 2013-2018 Apple Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions
* are met:
* 1. Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* 2. Redistributions in binary form must reproduce the above copyright
* notice, this list of conditions and the following disclaimer in the
* documentation and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
* THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
* PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
* BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
* CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
* SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
* INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
* CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
* ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
* THE POSSIBILITY OF SUCH DAMAGE.
*/
.table {
position: relative;
outline: none;
width: 100%;
height: 100%;
background: var(--background-color);
--table-column-border-start: 1px solid transparent;
--table-column-border-end: 0.5px solid var(--border-color);
}
.table > .header {
position: sticky;
top: 0;
height: var(--navigation-bar-height);
line-height: calc(var(--navigation-bar-height) - 1px);
border-bottom: 1px solid var(--border-color);
background: var(--background-color);
overflow-x: hidden;
vertical-align: middle;
white-space: nowrap;
}
.table > .header > .sortable:active {
background-color: hsl(0, 0%, 70%);
}
.table > .header > :matches(.sort-ascending, .sort-descending) {
background-color: hsl(0, 0%, 90%);
-webkit-padding-end: 18px;
}
.table > .header > :matches(.sort-ascending, .sort-descending)::after {
position: absolute;
top: 1px;
bottom: 0;
width: 9px;
height: 8px;
margin-bottom: auto;
margin-top: auto;
content: "";
background-size: 9px 8px;
background-repeat: no-repeat;
}
body[dir=ltr] .table > .header > :matches(.sort-ascending, .sort-descending)::after {
right: 6px;
}
body[dir=rtl] .table > .header > :matches(.sort-ascending, .sort-descending)::after {
left: 6px;
}
.table > .header > .sort-ascending::after {
background-image: url(../Images/SortIndicatorArrows.svg#up-arrow-normal);
}
.table > .header > .sort-descending::after {
background-image: url(../Images/SortIndicatorArrows.svg#down-arrow-normal);
}
.table > .data-container {
position: absolute;
top: var(--navigation-bar-height);
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
overflow-y: scroll;
}
.table > .resizers {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
}
.table > .data-container.not-scrollable {
overflow-y: hidden;
}
.table > .data-container > .data-list {
list-style-type: none;
padding: 0;
margin: 0;
min-height: 100%;
background-image: linear-gradient(to bottom, var(--even-zebra-stripe-row-background-color), var(--even-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color) 50%, var(--odd-zebra-stripe-row-background-color));
background-size: 100% 40px;
}
.table > .data-container > .data-list.odd-first-zebra-stripe {
background-image: linear-gradient(to bottom, var(--odd-zebra-stripe-row-background-color), var(--odd-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color) 50%, var(--even-zebra-stripe-row-background-color));
}
.table > .data-container > .data-list > li {
height: 20px;
line-height: 20px;
vertical-align: middle;
white-space: nowrap;
border-bottom: solid 1px transparent;
}
.table > .data-container > .data-list > li.selected {
background-color: var(--selected-background-color-unfocused) !important;
color: inherit !important;
background-clip: padding-box;
}
.table:focus > .data-container > .data-list li.selected {
background-color: var(--selected-background-color) !important;
color: var(--selected-foreground-color) !important;
}
.table .cell {
position: relative;
display: inline-block;
padding: 0 6px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
body[dir=ltr] .table .cell:not(:last-child) {
border-right: var(--table-column-border-end);
}
body[dir=rtl] .table .cell:not(:last-child) {
border-left: var(--table-column-border-end);
}
body[dir=ltr] .table .cell:first-child {
border-left: var(--table-column-border-start);
}
body[dir=rtl] .table .cell:first-child {
border-right: var(--table-column-border-start);
}
.table .cell.align-right {
text-align: right;
}
.table .cell.align-left {
text-align: left;
}
.table .cell.align-center {
text-align: center;
}
@media (prefers-color-scheme: dark) {
.table > .header > .sortable:active {
background-color: hsla(0, 0%, var(--foreground-lightness), 0.2);
}
.table > .header > :matches(.sort-ascending, .sort-descending) {
background: var(--background-color-selected);
}
.table > .header > :matches(.sort-ascending, .sort-descending)::after {
filter: invert();
}
}