mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender-pwa.git
synced 2025-07-16 09:38:51 +02:00
429 lines
9.0 KiB
SCSS
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);
|
|
}
|
|
}
|
|
}
|