/*
TODO: Don't actually used scoped CSS for QuickGrid.razor, because it's so perf-critical we don't even want to
add the extra attributes on all the tr/td elements. We can hook everything onto the table.quickgrid class,
remembering to be specific about matching closest tr/td only, not any child tables.
*/
table.qgrid th {
position: relative; /* So that col-options appears next to it */
}
table.qgrid .col-header-content {
/* We want the th elements to be display:flex, but they also have to be display:table-cell to avoid breaking the layout.
So .col-header-content is an immediate child with display:flex. */
position: relative;
display: flex;
align-items: center;
}
/* Deep to make it easy for people adding a sort-indicator element in a custom HeaderTemplate */
table.qgrid th .sort-indicator {
/* Preset width so the column width doen't change as the sort indicator appears/disappears */
width: 1rem;
height: 1rem;
align-self: center;
text-align: center;
}
table.qgrid .col-sort-desc .sort-indicator, .col-sort-asc .sort-indicator {
background-image: url('data:image/svg+xml;utf8,');
}
table.qgrid .col-sort-asc .sort-indicator {
transform: scaleY(-1);
}
/* Deep to make it easy for people adding a col-options-button element in a custom HeaderTemplate */
table.qgrid th .col-options-button {
border: none;
padding: 0; /* So that even if the text on the button is wide, it gets properly centered */
width: 1rem;
align-self: stretch;
background: url('data:image/svg+xml;utf8,') center center / 1rem no-repeat;
}
table.qgrid .col-options {
position: absolute;
background: white;
border: 1px solid silver;
left: 0;
padding: 1rem;
z-index: 1;
}
table.qgrid .col-justify-end .col-options {
left: unset;
right: 0;
}
table.qgrid .col-width-draghandle {
position: absolute;
top: 0;
bottom: 0;
right: 0rem;
cursor: ew-resize;
}
table.qgrid .col-width-draghandle:after {
content: ' ';
position: absolute;
top: 0;
bottom: 0;
border-left: 1px solid black;
}
table.qgrid td.col-justify-center {
text-align: center;
}
table.qgrid td.col-justify-end {
text-align: right;
}
table.qgrid .col-justify-start .col-options {
left: 0;
right: unset;
}
table.qgrid td.col-justify-start {
text-align: left;
}
table.qgrid td.col-justify-right {
text-align: right;
}
table.qgrid td.col-justify-left {
text-align: left;
}
/* Unfortunately we can't use the :dir pseudoselector due to lack of browser support. Instead we have to rely on
the developer setting to detect if we're in RTL mode. */
html[dir=rtl] table.qgrid td.col-justify-end {
text-align: left;
}
html[dir=rtl] table.qgrid .col-options {
left: unset;
right: 0;
}
html[dir=rtl] table.qgrid td.col-justify-start {
text-align: right;
}
html[dir=rtl] table.qgrid .col-justify-end .col-options {
right: unset;
left: 0;
}
/* Personalization */
.qgrid-container {
border-radius: 0.5rem;
border: 1px solid var(--use-stroke-neutral-1, #00000008);
width: 100%;
overflow-x: auto;
}
.qgrid[theme=default] > thead{
border-bottom: 1px solid var(--use-stroke-neutral-1, #00000008);
background-color: var(--use-action-1, #00000008);
}
.qgrid[theme=default] {
--col-gap: 1rem;
width: 100%;
table-layout: auto;
}
.qgrid[theme=default] .col-header-content {
padding-right: var(--col-gap);
}
.qgrid[theme=default] > thead > tr > th {
padding: 0;
height: 3rem;
}
.qgrid[theme=default].loading > tbody {
opacity: 0.25;
transition: opacity linear 100ms;
transition-delay: 25ms; /* Don't want flicker if the queries are resolving almost immediately */
}
.qgrid[theme=default] .col-title {
padding: 0.6rem 1rem;
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
flex-wrap: nowrap;
}
.qgrid[theme=default] > tbody > tr > td {
padding: 0.8rem calc(1rem + var(--col-gap)) 0.8rem 1rem;
}
.qgrid[theme=default] > tbody > tr:not(:last-child) > td {
border-bottom: 1px solid var(--use-stroke-neutral-1, #00000008);
}
.qgrid[theme=default] .col-title {
gap: 0.4rem; /* Separate the sort indicator from title text */
color: var(--use-text-positive-loud, #040404);
font-size: var(--size-b2);
line-height: 130%;
letter-spacing: -0.02em;
font-weight: 600;
}
.qgrid[theme=default] .sort-indicator {
opacity: 0.5;
}
.qgrid[theme=default] .col-options-button {
width: 1.5rem;
}
.qgrid[theme=default] button.col-title:hover, .qgrid[theme=default] .col-options-button:hover {
background-color: rgba(128, 128, 128, 0.2);
}
.qgrid[theme=default] button.col-title:active, .qgrid[theme=default] .col-options-button:active {
background-color: rgba(128, 128, 128, 0.5);
}
.qgrid[theme=default] > thead .col-width-draghandle {
width: 1rem;
right: calc(var(--col-gap) / 2 - 0.5rem);
}
.qgrid[theme=default] > thead .col-width-draghandle:hover {
background: rgba(128, 128, 128, 0.2);
}
.qgrid[theme=default] > thead .col-width-draghandle:active {
background: rgba(128, 128, 128, 0.4);
}
.qgrid[theme=default] > thead .col-width-draghandle:hover:after, .qgrid[theme=default] > thead .col-width-draghandle:active:after {
border-color: black;
}
.qgrid[theme=default] > thead .col-width-draghandle:after {
border-color: #ccc;
left: 0.5rem;
top: 5px;
bottom: 5px;
}
.qgrid[theme=default] .col-options {
box-shadow: 0 3px 8px 1px #aaa;
border-color: #ddd;
border-radius: 0.3rem;
}
.qgrid[theme=default] > tbody > tr > td.grid-cell-placeholder:after {
content: '\2026';
opacity: 0.75;
}