@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/theme-base/components/data/_paginator.scss

@@ -0,0 +1,92 @@
+.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;
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/data/_picklist.scss

@@ -0,0 +1,116 @@
+@use 'sass:list';
+
+.p-picklist {
+  .p-picklist-buttons {
+    padding: $panelContentPadding;
+
+    .p-button {
+      margin-bottom: $inlineSpacing;
+    }
+  }
+
+  .p-picklist-header {
+    background: $panelHeaderBg;
+    color: $panelHeaderTextColor;
+    border: $panelHeaderBorder;
+    padding: $panelHeaderPadding;
+    border-bottom: 0 none;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-picklist-title {
+      font-weight: $panelHeaderFontWeight;
+    }
+  }
+
+  .p-picklist-filter-container {
+    padding: $panelHeaderPadding;
+    background: $panelContentBg;
+    border: $panelHeaderBorder;
+    border-bottom: 0 none;
+
+    .p-picklist-filter-input {
+      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-picklist-filter-icon {
+      right: list.nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
+
+  .p-picklist-list {
+    border: $panelContentBorder;
+    background: $panelContentBg;
+    color: $panelContentTextColor;
+    padding: $inputListPadding;
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+    outline: 0 none;
+
+    .p-picklist-item {
+      padding: $inputListItemPadding;
+      margin: $inputListItemMargin;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+
+      &:not(.p-highlight):hover {
+        background: $inputListItemHoverBg;
+        color: $inputListItemTextHoverColor;
+      }
+
+      &.p-focus {
+        color: $inputListItemTextFocusColor;
+        background: $inputListItemFocusBg;
+      }
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+    }
+
+    .p-picklist-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+    }
+
+    &:not(.cdk-drop-list-dragging) {
+      .p-picklist-item {
+        &:not(.p-highlight):hover {
+          background: $inputListItemHoverBg;
+          color: $inputListItemTextHoverColor;
+        }
+      }
+    }
+  }
+
+  &.p-picklist-striped {
+    .p-picklist-list {
+      .p-picklist-item:nth-child(even) {
+        background: $panelContentEvenRowBg;
+
+        &:hover {
+          background: $inputListItemHoverBg;
+        }
+      }
+    }
+  }
+}
+
+.p-picklist-item {
+  &.cdk-drag-preview {
+    padding: $inputListItemPadding;
+    box-shadow: $inputOverlayShadow;
+    border: $inputListItemBorder;
+    color: $inputListItemTextColor;
+    background: $panelContentBg;
+    margin: 0;
+  }
+}

package/primeng-theme/theme-base/components/data/_timeline.scss

@@ -0,0 +1,35 @@
+.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;
+    }
+  }
+}

package/primeng-theme/theme-base/components/data/_tree.scss

@@ -0,0 +1,153 @@
+@use 'sass:color';
+@use 'sass:list';
+
+.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-treenode-dragover {
+          background: $inputListItemHoverBg;
+          color: $inputListItemTextHoverColor;
+        }
+      }
+    }
+  }
+
+  .p-tree-filter-container {
+    margin-bottom: $inlineSpacing;
+
+    .p-tree-filter {
+      width: 100%;
+      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-tree-filter-icon {
+      right: list.nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+  }
+
+  .p-treenode-children {
+    padding: $treeNodeChildrenPadding;
+  }
+
+  .p-tree-loading-icon {
+    font-size: $loadingIconFontSize;
+
+    &.p-icon {
+      width: $loadingIconFontSize;
+      height: $loadingIconFontSize;
+    }
+  }
+
+  .p-treenode-droppoint {
+    &.p-treenode-droppoint-active {
+      background-color: color.scale($highlightBg, $lightness: -20%);
+    }
+  }
+
+  &.p-tree-horizontal {
+    .p-treenode {
+      .p-treenode-content {
+        border-radius: $borderRadius;
+        border: $panelContentBorder;
+        background-color: $panelContentBg;
+        color: $panelContentTextColor;
+        padding: $treeNodeContentPadding;
+        transition: $listItemTransition;
+
+        &.p-highlight {
+          background-color: $highlightBg;
+          color: $highlightTextColor;
+
+          .p-treenode-icon {
+            color: $highlightTextColor;
+          }
+        }
+
+        .p-tree-toggler {
+          margin-right: $inlineSpacing;
+        }
+
+        .p-treenode-icon {
+          color: $treeNodeIconColor;
+          margin-right: $inlineSpacing;
+        }
+
+        .p-checkbox {
+          margin-right: $inlineSpacing;
+        }
+
+        .p-treenode-label:not(.p-highlight):hover {
+          background-color: inherit;
+          color: inherit;
+        }
+
+        &.p-treenode-selectable:not(.p-highlight):hover {
+          background: $inputListItemHoverBg;
+          color: $inputListItemTextHoverColor;
+        }
+
+        &:focus {
+          @include focused();
+        }
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/data/_treetable.scss

@@ -0,0 +1,255 @@
+.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-icon {
+            width: $loadingIconFontSize;
+            height: $loadingIconFontSize;
+          }
+        }
+
+        p-treetablecheckbox .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;
+    }
+
+    .p-treetable-footer {
+      border-width: 0 1px 1px;
+    }
+
+    .p-treetable-top {
+      border-width: 0 1px;
+    }
+
+    .p-treetable-bottom {
+      border-width: 0 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);
+    }
+  }
+}

package/primeng-theme/theme-base/components/data/_virtualscroller.scss

@@ -0,0 +1,28 @@
+.p-virtualscroller {
+  .p-virtualscroller-header {
+    background: $tableHeaderBg;
+    color: $tableHeaderTextColor;
+    border: $tableHeaderBorder;
+    border-width: $tableHeaderBorderWidth;
+    padding: $tableHeaderPadding;
+    font-weight: $tableHeaderFontWeight;
+  }
+
+  .p-virtualscroller-content {
+    background: $tableBodyRowBg;
+    color: $tableBodyRowTextColor;
+    border: $dataViewContentBorder;
+    padding: $dataViewContentPadding;
+  }
+
+  .p-virtualscroller-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;
+  }
+}