mirror of
https://gitlab.dit.htwk-leipzig.de/htwk-software/htwkalender.git
synced 2025-08-11 06:03:50 +02:00
feat:#47 updated primevue theme for sass
This commit is contained in:
Elmar Kresse
@@ -0,0 +1,109 @@
|
||||
// core
|
||||
.p-carousel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-carousel-prev,
|
||||
.p-carousel-next {
|
||||
align-self: center;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-carousel-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-carousel-items-content {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-carousel-items-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-carousel-indicator > button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Vertical */
|
||||
.p-carousel-vertical .p-carousel-container {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-carousel-vertical .p-carousel-items-container {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Keyboard Support */
|
||||
.p-items-hidden .p-carousel-item {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-items-hidden .p-carousel-item.p-carousel-item-active {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-carousel {
|
||||
.p-carousel-content {
|
||||
.p-carousel-prev,
|
||||
.p-carousel-next {
|
||||
@include action-icon();
|
||||
margin: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-carousel-indicators {
|
||||
padding: $carouselIndicatorsPadding;
|
||||
|
||||
.p-carousel-indicator {
|
||||
margin-right: $inlineSpacing;
|
||||
margin-bottom: $inlineSpacing;
|
||||
|
||||
button {
|
||||
background-color: $carouselIndicatorBg;
|
||||
width: $carouselIndicatorWidth;
|
||||
height: $carouselIndicatorHeight;
|
||||
transition: $actionIconTransition;
|
||||
border-radius: $carouselIndicatorBorderRadius;
|
||||
|
||||
&:hover {
|
||||
background: $carouselIndicatorHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
button {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,584 @@
|
||||
// core
|
||||
.p-datatable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-datatable-table {
|
||||
border-spacing: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-datatable .p-sortable-column {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-datatable .p-sortable-column .p-column-title,
|
||||
.p-datatable .p-sortable-column .p-sortable-column-icon,
|
||||
.p-datatable .p-sortable-column .p-sortable-column-badge {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.p-datatable .p-sortable-column .p-sortable-column-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-datatable-hoverable-rows .p-selectable-row {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Scrollable */
|
||||
.p-datatable-scrollable > .p-datatable-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-thead {
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-tfoot {
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable .p-frozen-column {
|
||||
position: sticky;
|
||||
background: inherit;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable th.p-frozen-column {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.p-datatable-flex-scrollable {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-datatable-flex-scrollable > .p-datatable-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
|
||||
position: sticky;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Resizable */
|
||||
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
|
||||
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
|
||||
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
|
||||
background-clip: padding-box;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-datatable .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-datatable .p-column-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-datatable .p-column-resizer-helper {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-datatable .p-row-editor-init,
|
||||
.p-datatable .p-row-editor-save,
|
||||
.p-datatable .p-row-editor-cancel {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Expand */
|
||||
.p-datatable .p-row-toggler {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Reorder */
|
||||
.p-datatable-reorder-indicator-up,
|
||||
.p-datatable-reorder-indicator-down {
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.p-reorderable-column,
|
||||
.p-datatable-reorderablerow-handle {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* Loader */
|
||||
.p-datatable .p-datatable-loading-overlay {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Filter */
|
||||
.p-column-filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-column-filter-menu {
|
||||
display: inline-flex;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-column-filter-row .p-column-filter-element {
|
||||
flex: 1 1 auto;
|
||||
width: 1%;
|
||||
}
|
||||
|
||||
.p-column-filter-menu-button,
|
||||
.p-column-filter-clear-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-column-filter-row-items {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.p-column-filter-row-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.p-column-filter-add-button,
|
||||
.p-column-filter-remove-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-column-filter-add-button .p-button-label,
|
||||
.p-column-filter-remove-button .p-button-label {
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.p-column-filter-buttonbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
.p-datatable .p-datatable-tbody > tr > td > .p-column-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* VirtualScroller */
|
||||
.p-datatable-virtualscroller-spacer {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-datatable .p-virtualscroller .p-virtualscroller-loading {
|
||||
transform: none !important;
|
||||
min-height: 0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-datatable {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-datatable-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableHeaderCellPadding;
|
||||
border: $tableHeaderCellBorder;
|
||||
border-width: $tableHeaderCellBorderWidth;
|
||||
font-weight: $tableHeaderCellFontWeight;
|
||||
color: $tableHeaderCellTextColor;
|
||||
background: $tableHeaderCellBg;
|
||||
transition: $listItemTransition;
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
padding: $tableFooterCellPadding;
|
||||
border: $tableFooterCellBorder;
|
||||
border-width: $tableFooterCellBorderWidth;
|
||||
font-weight: $tableFooterCellFontWeight;
|
||||
color: $tableFooterCellTextColor;
|
||||
background: $tableFooterCellBg;
|
||||
}
|
||||
|
||||
.p-sortable-column {
|
||||
.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;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $tableHeaderCellHighlightHoverBg;
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
|
||||
.p-sortable-column-icon {
|
||||
color: $tableHeaderCellHighlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
box-shadow: $inputListItemFocusShadow;
|
||||
outline: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
transition: $listItemTransition;
|
||||
|
||||
> td {
|
||||
text-align: $tableCellContentAlignment;
|
||||
border: $tableBodyCellBorder;
|
||||
border-width: $tableBodyCellBorderWidth;
|
||||
padding: $tableBodyCellPadding;
|
||||
|
||||
.p-row-toggler,
|
||||
.p-row-editor-init,
|
||||
.p-row-editor-save,
|
||||
.p-row-editor-cancel {
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
.p-row-editor-save {
|
||||
margin-right: $inlineSpacing;
|
||||
}
|
||||
|
||||
> .p-column-title {
|
||||
font-weight: $tableHeaderCellFontWeight;
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 0.15rem solid $focusOutlineColor;
|
||||
outline-offset: -0.15rem;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
&.p-highlight-contextmenu {
|
||||
outline: 0.15rem solid $focusOutlineColor;
|
||||
outline-offset: -0.15rem;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-top > td {
|
||||
box-shadow: inset 0 2px 0 0 $highlightBg;
|
||||
}
|
||||
|
||||
&.p-datatable-dragpoint-bottom > td {
|
||||
box-shadow: inset 0 -2px 0 0 $highlightBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-hoverable-rows {
|
||||
.p-datatable-tbody > tr:not(.p-highlight):hover {
|
||||
background: $tableBodyRowHoverBg;
|
||||
color: $tableBodyRowTextHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-resizer-helper {
|
||||
background: $tableResizerHelperBg;
|
||||
}
|
||||
|
||||
&.p-datatable-scrollable > .p-datatable-wrapper > .p-datatable-table,
|
||||
&.p-datatable-scrollable > .p-datatable-wrapper > .p-virtualscroller > .p-datatable-table {
|
||||
> .p-datatable-thead,
|
||||
> .p-datatable-tfoot {
|
||||
background-color: $tableHeaderCellBg;
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-gridlines {
|
||||
.p-datatable-header {
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-paginator-top {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
|
||||
.p-datatable-thead {
|
||||
> tr {
|
||||
> th {
|
||||
border-width: 1px 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px 0 0 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px 1px 0 1px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
> td {
|
||||
border-width: 1px 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 1px 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 1px 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-datatable-thead + .p-datatable-tfoot {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 0 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-datatable-thead):has(.p-datatable-tbody) .p-datatable-tbody {
|
||||
> tr {
|
||||
> td {
|
||||
border-width: 0 0 1px 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 0 1px 1px 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:has(.p-datatable-tbody):has(.p-datatable-tfoot) .p-datatable-tbody {
|
||||
> tr {
|
||||
&:last-child {
|
||||
> td {
|
||||
border-width: 0 0 0 1px;
|
||||
|
||||
&:last-child {
|
||||
border-width: 0 1px 0 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-striped {
|
||||
.p-datatable-tbody {
|
||||
> tr.p-row-odd {
|
||||
background: $tableBodyRowEvenBg;
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-row-toggler {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-sm {
|
||||
.p-datatable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleSM);
|
||||
}
|
||||
}
|
||||
|
||||
&.p-datatable-lg {
|
||||
.p-datatable-header {
|
||||
@include scaledPadding($tableHeaderPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-thead > tr > th {
|
||||
@include scaledPadding($tableHeaderCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-tbody > tr > td {
|
||||
@include scaledPadding($tableBodyCellPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-tfoot > tr > td {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
|
||||
.p-datatable-footer {
|
||||
@include scaledPadding($tableFooterPadding, $tableScaleLG);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,38 @@
|
||||
.p-dataview {
|
||||
.p-paginator-top {
|
||||
border-width: $tableTopPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-paginator-bottom {
|
||||
border-width: $tableBottomPaginatorBorderWidth;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-dataview-header {
|
||||
background: $tableHeaderBg;
|
||||
color: $tableHeaderTextColor;
|
||||
border: $tableHeaderBorder;
|
||||
border-width: $tableHeaderBorderWidth;
|
||||
padding: $tableHeaderPadding;
|
||||
font-weight: $tableHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-dataview-content {
|
||||
background: $tableBodyRowBg;
|
||||
color: $tableBodyRowTextColor;
|
||||
border: $dataViewContentBorder;
|
||||
padding: $dataViewContentPadding;
|
||||
}
|
||||
|
||||
.p-dataview-footer {
|
||||
background: $tableFooterBg;
|
||||
color: $tableFooterTextColor;
|
||||
border: $tableFooterBorder;
|
||||
border-width: $tableFooterBorderWidth;
|
||||
padding: $tableFooterPadding;
|
||||
font-weight: $tableFooterFontWeight;
|
||||
border-bottom-left-radius: $borderRadius;
|
||||
border-bottom-right-radius: $borderRadius;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,148 @@
|
||||
.p-column-filter-row {
|
||||
.p-column-filter-menu-button,
|
||||
.p-column-filter-clear-button {
|
||||
margin-left: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-menu-button {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $actionIconColor;
|
||||
border: $actionIconBorder;
|
||||
background: $actionIconBg;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $actionIconHoverColor;
|
||||
border-color: $actionIconHoverBorderColor;
|
||||
background: $actionIconHoverBg;
|
||||
}
|
||||
|
||||
&.p-column-filter-menu-button-open,
|
||||
&.p-column-filter-menu-button-open:hover {
|
||||
background: $actionIconHoverBg;
|
||||
color: $actionIconHoverColor;
|
||||
}
|
||||
|
||||
&.p-column-filter-menu-button-active,
|
||||
&.p-column-filter-menu-button-active:hover {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.p-column-filter-clear-button {
|
||||
width: $actionIconWidth;
|
||||
height: $actionIconHeight;
|
||||
color: $actionIconColor;
|
||||
border: $actionIconBorder;
|
||||
background: $actionIconBg;
|
||||
border-radius: $actionIconBorderRadius;
|
||||
transition: $actionIconTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&:hover {
|
||||
color: $actionIconHoverColor;
|
||||
border-color: $actionIconHoverBorderColor;
|
||||
background: $actionIconHoverBg;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-overlay {
|
||||
background: $inputOverlayBg;
|
||||
color: $inputListTextColor;
|
||||
border: $inputOverlayBorder;
|
||||
border-radius: $borderRadius;
|
||||
box-shadow: $inputOverlayShadow;
|
||||
min-width: $menuWidth;
|
||||
|
||||
.p-column-filter-row-items {
|
||||
padding: $inputListPadding;
|
||||
|
||||
.p-column-filter-row-item {
|
||||
margin: $inputListItemMargin;
|
||||
padding: $inputListItemPadding;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $inputListItemBorderRadius;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):not(.p-disabled):hover {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@include focused-listitem();
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-separator {
|
||||
border-top: $divider;
|
||||
margin: $menuSeparatorMargin;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-overlay-menu {
|
||||
.p-column-filter-operator {
|
||||
padding: $inputListHeaderPadding;
|
||||
border-bottom: $inputListHeaderBorder;
|
||||
color: $inputListHeaderTextColor;
|
||||
background: $inputOverlayHeaderBg;
|
||||
margin: $inputListHeaderMargin;
|
||||
border-top-right-radius: $borderRadius;
|
||||
border-top-left-radius: $borderRadius;
|
||||
}
|
||||
|
||||
.p-column-filter-constraint {
|
||||
padding: $panelContentPadding;
|
||||
border-bottom: $divider;
|
||||
|
||||
.p-column-filter-matchmode-dropdown {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-column-filter-remove-button {
|
||||
margin-top: $inlineSpacing;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
}
|
||||
|
||||
.p-column-filter-add-rule {
|
||||
padding: $panelFooterPadding;
|
||||
}
|
||||
|
||||
.p-column-filter-buttonbar {
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
// core
|
||||
.p-orderlist {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-orderlist-controls {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-orderlist-list-container {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.p-orderlist-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
min-height: 12rem;
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.p-orderlist-item {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-orderlist.p-state-disabled .p-orderlist-item,
|
||||
.p-orderlist.p-state-disabled .p-button {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.p-orderlist.p-state-disabled .p-orderlist-list {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-orderlist {
|
||||
.p-orderlist-controls {
|
||||
padding: $panelContentPadding;
|
||||
|
||||
.p-button {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-orderlist-list-container {
|
||||
background: $panelContentBg;
|
||||
border: $panelContentBorder;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&.p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-orderlist-header {
|
||||
color: $panelHeaderTextColor;
|
||||
padding: $panelHeaderPadding;
|
||||
font-weight: $panelHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-orderlist-list {
|
||||
color: $panelContentTextColor;
|
||||
padding: $inputListPadding;
|
||||
outline: 0 none;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: $panelContentBorder;
|
||||
}
|
||||
|
||||
.p-orderlist-item {
|
||||
padding: $inputListItemPadding;
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: transform $transitionDuration, $listItemTransition;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-orderlist-striped {
|
||||
.p-orderlist-list {
|
||||
.p-orderlist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
// core
|
||||
.p-organizationchart-table {
|
||||
border-spacing: 0;
|
||||
border-collapse: separate;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.p-organizationchart-table > tbody > tr > td {
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
padding: 0 0.75rem;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler {
|
||||
position: absolute;
|
||||
bottom: -0.75rem;
|
||||
margin-left: -0.75rem;
|
||||
z-index: 2;
|
||||
left: 50%;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
|
||||
position: relative;
|
||||
top: 0.25rem;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-down {
|
||||
margin: 0 auto;
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-right {
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-left {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.p-organizationchart-selectable-node {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-organizationchart {
|
||||
.p-organizationchart-node-content {
|
||||
&.p-organizationchart-selectable-node:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-node-toggler {
|
||||
i {
|
||||
color: darken($highlightBg, 25%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-organizationchart-line-down {
|
||||
background: $organizationChartConnectorColor;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-left {
|
||||
border-right: $panelContentBorder;
|
||||
border-color: $organizationChartConnectorColor;
|
||||
}
|
||||
|
||||
.p-organizationchart-line-top {
|
||||
border-top: $panelContentBorder;
|
||||
border-color: $organizationChartConnectorColor;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $panelContentPadding;
|
||||
}
|
||||
|
||||
.p-organizationchart-node-content .p-node-toggler {
|
||||
background: inherit;
|
||||
color: inherit;
|
||||
border-radius: 50%;
|
||||
outline-color: transparent;
|
||||
|
||||
&:focus-visible {
|
||||
@include focused();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
// core
|
||||
.p-paginator-default {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.p-paginator-left-content {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.p-paginator-right-content {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.p-paginator-page,
|
||||
.p-paginator-next,
|
||||
.p-paginator-last,
|
||||
.p-paginator-first,
|
||||
.p-paginator-prev,
|
||||
.p-paginator-current {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-paginator-element:focus {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-paginator {
|
||||
background: $paginatorBg;
|
||||
color: $paginatorTextColor;
|
||||
border: $paginatorBorder;
|
||||
border-width: $paginatorBorderWidth;
|
||||
padding: $paginatorPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-paginator-first,
|
||||
.p-paginator-prev,
|
||||
.p-paginator-next,
|
||||
.p-paginator-last {
|
||||
background-color: $paginatorElementBg;
|
||||
border: $paginatorElementBorder;
|
||||
color: $paginatorElementIconColor;
|
||||
min-width: $paginatorElementWidth;
|
||||
height: $paginatorElementHeight;
|
||||
margin: $paginatorElementMargin;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $paginatorElementBorderRadius;
|
||||
|
||||
&:not(.p-disabled):not(.p-highlight):hover {
|
||||
background: $paginatorElementHoverBg;
|
||||
border-color: $paginatorElementHoverBorderColor;
|
||||
color: $paginatorElementIconHoverColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator-first {
|
||||
border-top-left-radius: $paginatorElementBorderRadius;
|
||||
border-bottom-left-radius: $paginatorElementBorderRadius;
|
||||
}
|
||||
|
||||
.p-paginator-last {
|
||||
border-top-right-radius: $paginatorElementBorderRadius;
|
||||
border-bottom-right-radius: $paginatorElementBorderRadius;
|
||||
}
|
||||
|
||||
.p-dropdown {
|
||||
margin-left: $inlineSpacing;
|
||||
margin-right: $inlineSpacing;
|
||||
height: $paginatorElementHeight;
|
||||
|
||||
.p-dropdown-label {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator-page-input {
|
||||
margin-left: $inlineSpacing;
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
.p-inputtext {
|
||||
max-width: $paginatorElementWidth;
|
||||
}
|
||||
}
|
||||
|
||||
.p-paginator-current {
|
||||
background-color: $paginatorElementBg;
|
||||
border: $paginatorElementBorder;
|
||||
color: $paginatorElementIconColor;
|
||||
min-width: $paginatorElementWidth;
|
||||
height: $paginatorElementHeight;
|
||||
margin: $paginatorElementMargin;
|
||||
padding: 0 $inlineSpacing;
|
||||
}
|
||||
|
||||
.p-paginator-pages {
|
||||
.p-paginator-page {
|
||||
background-color: $paginatorElementBg;
|
||||
border: $paginatorElementBorder;
|
||||
color: $paginatorElementIconColor;
|
||||
min-width: $paginatorElementWidth;
|
||||
height: $paginatorElementHeight;
|
||||
margin: $paginatorElementMargin;
|
||||
transition: $listItemTransition;
|
||||
border-radius: $paginatorElementBorderRadius;
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
border-color: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $paginatorElementHoverBg;
|
||||
border-color: $paginatorElementHoverBorderColor;
|
||||
color: $paginatorElementIconHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,126 @@
|
||||
// core
|
||||
.p-picklist {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.p-picklist-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-picklist-list-wrapper {
|
||||
flex: 1 1 50%;
|
||||
}
|
||||
|
||||
.p-picklist-list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
min-height: 12rem;
|
||||
max-height: 24rem;
|
||||
}
|
||||
|
||||
.p-picklist-item {
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.p-picklist-item.p-picklist-flip-enter-active.p-picklist-flip-enter-to,
|
||||
.p-picklist-item.p-picklist-flip-leave-active.p-picklist-flip-leave-to {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-picklist {
|
||||
.p-picklist-buttons {
|
||||
padding: $panelContentPadding;
|
||||
|
||||
.p-button {
|
||||
margin-bottom: $inlineSpacing;
|
||||
}
|
||||
}
|
||||
|
||||
.p-picklist-list-wrapper {
|
||||
background: $panelContentBg;
|
||||
border: $panelContentBorder;
|
||||
border-radius: $borderRadius;
|
||||
transition: $formElementTransition;
|
||||
outline-color: transparent;
|
||||
|
||||
&.p-focus {
|
||||
@include focused-input();
|
||||
}
|
||||
}
|
||||
|
||||
.p-picklist-header {
|
||||
color: $panelHeaderTextColor;
|
||||
padding: $panelHeaderPadding;
|
||||
font-weight: $panelHeaderFontWeight;
|
||||
}
|
||||
|
||||
.p-picklist-list {
|
||||
color: $panelContentTextColor;
|
||||
padding: $inputListPadding;
|
||||
outline: 0 none;
|
||||
|
||||
&:not(:first-child) {
|
||||
border-top: $panelContentBorder;
|
||||
}
|
||||
|
||||
.p-picklist-item {
|
||||
padding: $inputListItemPadding;
|
||||
margin: $inputListItemMargin;
|
||||
border: $inputListItemBorder;
|
||||
color: $inputListItemTextColor;
|
||||
background: $inputListItemBg;
|
||||
transition: transform $transitionDuration, $listItemTransition;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-focus {
|
||||
color: $inputListItemTextHoverColor;
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
color: $highlightTextColor;
|
||||
background: $highlightBg;
|
||||
|
||||
&.p-focus {
|
||||
background: $highlightFocusBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-picklist-striped {
|
||||
.p-picklist-list {
|
||||
.p-picklist-item:nth-child(even) {
|
||||
background: $panelContentEvenRowBg;
|
||||
|
||||
&:hover {
|
||||
background: $inputListItemHoverBg;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,151 @@
|
||||
// core
|
||||
.p-timeline {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-opposite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-left .p-timeline-event-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-opposite {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-right .p-timeline-event-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-opposite {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(odd) .p-timeline-event-content {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-opposite {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.p-timeline-vertical.p-timeline-alternate .p-timeline-event:nth-child(even) .p-timeline-event-content {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.p-timeline-event {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 70px;
|
||||
}
|
||||
|
||||
.p-timeline-event:last-child {
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.p-timeline-event-content {
|
||||
flex: 1;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.p-timeline-event-separator {
|
||||
flex: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-timeline-event-marker {
|
||||
display: flex;
|
||||
align-self: baseline;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event {
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event:last-child {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-separator {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal .p-timeline-event-connector {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-timeline-bottom .p-timeline-event {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.p-timeline-horizontal.p-timeline-alternate .p-timeline-event:nth-child(even) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-timeline {
|
||||
.p-timeline-event-marker {
|
||||
border: $timelineEventMarkerBorder;
|
||||
border-radius: $timelineEventMarkerBorderRadius;
|
||||
width: $timelineEventMarkerWidth;
|
||||
height: $timelineEventMarkerHeight;
|
||||
background-color: $timelineEventMarkerBackground;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
background-color: $timelineEventColor;
|
||||
}
|
||||
|
||||
&.p-timeline-vertical {
|
||||
.p-timeline-event-opposite,
|
||||
.p-timeline-event-content {
|
||||
padding: $timelineVerticalEventContentPadding;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
width: $timelineEventConnectorSize;
|
||||
}
|
||||
}
|
||||
|
||||
&.p-timeline-horizontal {
|
||||
.p-timeline-event-opposite,
|
||||
.p-timeline-event-content {
|
||||
padding: $timelineHorizontalEventContentPadding;
|
||||
}
|
||||
|
||||
.p-timeline-event-connector {
|
||||
height: $timelineEventConnectorSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
// core
|
||||
.p-tree-container {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-treenode-children {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.p-tree-wrapper {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.p-treenode-selectable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.p-tree-toggler {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.p-treenode-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.p-tree-filter {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-tree-filter-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-tree-filter-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -0.5rem;
|
||||
}
|
||||
|
||||
.p-tree-loading {
|
||||
position: relative;
|
||||
min-height: 4rem;
|
||||
}
|
||||
|
||||
.p-tree .p-tree-loading-overlay {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.p-tree-flex-scrollable {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.p-tree-flex-scrollable .p-tree-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
// theme
|
||||
.p-tree {
|
||||
border: $panelContentBorder;
|
||||
background: $panelContentBg;
|
||||
color: $panelContentTextColor;
|
||||
padding: $panelContentPadding;
|
||||
border-radius: $borderRadius;
|
||||
|
||||
.p-tree-container {
|
||||
.p-treenode {
|
||||
padding: $treeNodePadding;
|
||||
outline: 0 none;
|
||||
|
||||
&:focus > .p-treenode-content {
|
||||
@include focused-listitem();
|
||||
}
|
||||
|
||||
.p-treenode-content {
|
||||
border-radius: $borderRadius;
|
||||
transition: $listItemTransition;
|
||||
padding: $treeNodeContentPadding;
|
||||
|
||||
.p-tree-toggler {
|
||||
margin-right: $inlineSpacing;
|
||||
@include action-icon();
|
||||
}
|
||||
|
||||
.p-treenode-icon {
|
||||
margin-right: $inlineSpacing;
|
||||
color: $treeNodeIconColor;
|
||||
}
|
||||
|
||||
.p-checkbox {
|
||||
margin-right: $inlineSpacing;
|
||||
|
||||
&.p-indeterminate {
|
||||
.p-checkbox-icon {
|
||||
color: $textColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-highlight {
|
||||
background: $highlightBg;
|
||||
color: $highlightTextColor;
|
||||
|
||||
.p-tree-toggler,
|
||||
.p-treenode-icon {
|
||||
color: $highlightTextColor;
|
||||
|
||||
&:hover {
|
||||
color: $highlightTextColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.p-treenode-selectable:not(.p-highlight):hover {
|
||||
background: $inputListItemHoverBg;
|
||||
color: $inputListItemTextHoverColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.p-tree-filter-container {
|
||||
margin-bottom: $inlineSpacing;
|
||||
|
||||
.p-tree-filter {
|
||||
width: 100%;
|
||||
padding-right: nth($inputPadding, 2) + $primeIconFontSize;
|
||||
}
|
||||
|
||||
.p-tree-filter-icon {
|
||||
right: nth($inputPadding, 2);
|
||||
color: $inputIconColor;
|
||||
}
|
||||
}
|
||||
|
||||
.p-treenode-children {
|
||||
padding: $treeNodeChildrenPadding;
|
||||
}
|
||||
|
||||
.p-tree-loading-icon {
|
||||
font-size: $loadingIconFontSize;
|
||||
|
||||
&.p-icon {
|
||||
width: $loadingIconFontSize;
|
||||
height: $loadingIconFontSize;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,422 @@
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user