Files
htwkalender-pwa/frontend/public/primevue-sass-theme/theme-base/components/data/_treetable.scss
2024-06-10 10:50:27 +02:00

429 lines
9.0 KiB
SCSS

// core
.p-treetable {
position: relative;
}
.p-treetable table {
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
.p-treetable .p-sortable-column {
cursor: pointer;
user-select: none;
}
.p-treetable-responsive-scroll > .p-treetable-wrapper {
overflow-x: auto;
}
.p-treetable-responsive-scroll > .p-treetable-wrapper > table,
.p-treetable-auto-layout > .p-treetable-wrapper > table {
table-layout: auto;
}
.p-treetable-hoverable-rows .p-treetable-tbody > tr {
cursor: pointer;
}
.p-treetable-toggler {
cursor: pointer;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
overflow: hidden;
position: relative;
}
.p-treetable-toggler + .p-checkbox {
vertical-align: middle;
}
.p-treetable-toggler + .p-checkbox + span {
vertical-align: middle;
}
/* Resizable */
.p-treetable-resizable > .p-treetable-wrapper {
overflow-x: auto;
}
.p-treetable-resizable .p-treetable-thead > tr > th,
.p-treetable-resizable .p-treetable-tfoot > tr > td,
.p-treetable-resizable .p-treetable-tbody > tr > td {
overflow: hidden;
}
.p-treetable-resizable .p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
}
.p-treetable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
display: none;
}
.p-treetable .p-column-resizer {
display: block;
position: absolute;
top: 0;
right: 0;
margin: 0;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor: col-resize;
border: 1px solid transparent;
}
.p-treetable .p-column-resizer-helper {
width: 1px;
position: absolute;
z-index: 10;
display: none;
}
.p-treetable .p-treetable-loading-overlay {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Scrollable */
.p-treetable-scrollable .p-treetable-wrapper {
position: relative;
overflow: auto;
}
.p-treetable-scrollable .p-treetable-table {
display: block;
}
.p-treetable-scrollable .p-treetable-thead,
.p-treetable-scrollable .p-treetable-tbody,
.p-treetable-scrollable .p-treetable-tfoot {
display: block;
}
.p-treetable-scrollable .p-treetable-thead > tr,
.p-treetable-scrollable .p-treetable-tbody > tr,
.p-treetable-scrollable .p-treetable-tfoot > tr {
display: flex;
flex-wrap: nowrap;
width: 100%;
}
.p-treetable-scrollable .p-treetable-thead > tr > th,
.p-treetable-scrollable .p-treetable-tbody > tr > td,
.p-treetable-scrollable .p-treetable-tfoot > tr > td {
display: flex;
flex: 1 1 0;
align-items: center;
}
.p-treetable-scrollable .p-treetable-thead {
position: sticky;
top: 0;
z-index: 1;
}
.p-treetable-scrollable .p-treetable-tfoot {
position: sticky;
bottom: 0;
z-index: 1;
}
.p-treetable-scrollable .p-frozen-column {
position: sticky;
background: inherit;
}
.p-treetable-scrollable th.p-frozen-column {
z-index: 1;
}
.p-treetable-scrollable-both .p-treetable-thead > tr > th,
.p-treetable-scrollable-both .p-treetable-tbody > tr > td,
.p-treetable-scrollable-both .p-treetable-tfoot > tr > td,
.p-treetable-scrollable-horizontal
.p-treetable-thead
> tr
> th
.p-treetable-scrollable-horizontal
.p-treetable-tbody
> tr
> td,
.p-treetable-scrollable-horizontal .p-treetable-tfoot > tr > td {
flex: 0 0 auto;
}
.p-treetable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}
.p-treetable-flex-scrollable .p-treetable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}
// theme
.p-treetable {
.p-paginator-top {
border-width: $tableTopPaginatorBorderWidth;
border-radius: 0;
}
.p-paginator-bottom {
border-width: $tableBottomPaginatorBorderWidth;
border-radius: 0;
}
.p-treetable-header {
background: $tableHeaderBg;
color: $tableHeaderTextColor;
border: $tableHeaderBorder;
border-width: $tableHeaderBorderWidth;
padding: $tableHeaderPadding;
font-weight: $tableHeaderFontWeight;
}
.p-treetable-footer {
background: $tableFooterBg;
color: $tableFooterTextColor;
border: $tableFooterBorder;
border-width: $tableFooterBorderWidth;
padding: $tableFooterPadding;
font-weight: $tableFooterFontWeight;
}
.p-treetable-thead > tr > th {
text-align: $tableCellContentAlignment;
padding: $tableHeaderCellPadding;
border: $tableHeaderCellBorder;
border-width: $tableHeaderCellBorderWidth;
font-weight: $tableHeaderCellFontWeight;
color: $tableHeaderCellTextColor;
background: $tableHeaderCellBg;
transition: $listItemTransition;
}
.p-treetable-tfoot > tr > td {
text-align: $tableCellContentAlignment;
padding: $tableFooterCellPadding;
border: $tableFooterCellBorder;
border-width: $tableFooterCellBorderWidth;
font-weight: $tableFooterCellFontWeight;
color: $tableFooterCellTextColor;
background: $tableFooterCellBg;
}
.p-sortable-column {
outline-color: $focusOutlineColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconColor;
margin-left: $inlineSpacing;
}
.p-sortable-column-badge {
border-radius: 50%;
height: $tableSortableColumnBadgeSize;
min-width: $tableSortableColumnBadgeSize;
line-height: $tableSortableColumnBadgeSize;
color: $highlightTextColor;
background: $highlightBg;
margin-left: $inlineSpacing;
}
&:not(.p-highlight):hover {
background: $tableHeaderCellHoverBg;
color: $tableHeaderCellTextHoverColor;
.p-sortable-column-icon {
color: $tableHeaderCellIconHoverColor;
}
}
&.p-highlight {
background: $tableHeaderCellHighlightBg;
color: $tableHeaderCellHighlightTextColor;
.p-sortable-column-icon {
color: $tableHeaderCellHighlightTextColor;
}
}
}
.p-treetable-tbody {
> tr {
background: $tableBodyRowBg;
color: $tableBodyRowTextColor;
transition: $listItemTransition;
> td {
text-align: $tableCellContentAlignment;
border: $tableBodyCellBorder;
border-width: $tableBodyCellBorderWidth;
padding: $tableBodyCellPadding;
.p-treetable-toggler {
@include action-icon();
margin-right: $inlineSpacing;
& + .p-checkbox {
margin-right: $inlineSpacing;
&.p-indeterminate {
.p-checkbox-icon {
color: $textColor;
}
}
}
}
}
&:focus-visible {
outline: 0.15rem solid $focusOutlineColor;
outline-offset: -0.15rem;
}
&.p-highlight {
background: $highlightBg;
color: $highlightTextColor;
.p-treetable-toggler {
color: $highlightTextColor;
&:hover {
color: $highlightTextColor;
}
}
}
}
}
&.p-treetable-hoverable-rows {
.p-treetable-tbody > tr:not(.p-highlight):hover {
background: $tableBodyRowHoverBg;
color: $tableBodyRowTextHoverColor;
.p-treetable-toggler {
color: $tableBodyRowTextHoverColor;
}
}
}
.p-column-resizer-helper {
background: $tableResizerHelperBg;
}
.p-treetable-scrollable-header,
.p-treetable-scrollable-footer {
background: $panelHeaderBg;
}
.p-treetable-loading-icon {
font-size: $loadingIconFontSize;
&.p-icon {
width: $loadingIconFontSize;
height: $loadingIconFontSize;
}
}
&.p-treetable-gridlines {
.p-datatable-header {
border-width: 1px 1px 0 1px;
}
.p-treetable-footer {
border-width: 0 1px 1px 1px;
}
.p-treetable-top {
border-width: 0 1px 0 1px;
}
.p-treetable-bottom {
border-width: 0 1px 1px 1px;
}
.p-treetable-thead {
> tr {
> th {
border-width: 1px;
}
}
}
.p-treetable-tbody {
> tr {
> td {
border-width: 1px;
}
}
}
.p-treetable-tfoot {
> tr {
> td {
border-width: 1px;
}
}
}
}
&.p-treetable-sm {
.p-treetable-header {
@include scaledPadding($tableHeaderPadding, $scaleSM);
}
.p-treetable-thead > tr > th {
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
}
.p-treetable-tbody > tr > td {
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
}
.p-treetable-tfoot > tr > td {
@include scaledPadding($tableFooterPadding, $tableScaleSM);
}
.p-treetable-footer {
@include scaledPadding($tableFooterPadding, $tableScaleSM);
}
}
&.p-treetable-lg {
.p-treetable-header {
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
}
.p-treetable-thead > tr > th {
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
}
.p-treetable-tbody > tr > td {
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
}
.p-treetable-tfoot > tr > td {
@include scaledPadding($tableFooterPadding, $tableScaleLG);
}
.p-treetable-footer {
@include scaledPadding($tableFooterPadding, $tableScaleLG);
}
}
}