@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/theme-base/components/menu/_slidemenu.scss

@@ -0,0 +1,60 @@
+.p-slidemenu {
+  padding: $verticalMenuPadding;
+  background: $menuBg;
+  color: $menuTextColor;
+  border: $menuBorder;
+  border-radius: $borderRadius;
+  width: $menuWidth;
+
+  .p-slidemenu-root-list {
+    outline: 0 none;
+  }
+
+  .p-submenu-list {
+    outline: 0 none;
+  }
+
+  .p-menuitem {
+    @include menuitem();
+  }
+
+  &.p-slidemenu-overlay {
+    background: $overlayMenuBg;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+  }
+
+  .p-slidemenu-list {
+    padding: $verticalMenuPadding;
+    background: $overlayMenuBg;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+  }
+
+  .p-menuitem-separator {
+    border-top: $divider;
+    margin: $menuSeparatorMargin;
+  }
+
+  .p-slidemenu-icon {
+    font-size: $menuitemSubmenuIconFontSize;
+  }
+
+  .p-icon {
+    width: $menuitemSubmenuIconFontSize;
+    height: $menuitemSubmenuIconFontSize;
+  }
+
+  .p-slidemenu-backward {
+    padding: $menuitemPadding;
+    color: $menuitemTextColor;
+
+    &:not(.p-disabled):focus {
+      @include focused-inset();
+    }
+  }
+
+  .p-menuitem-badge {
+    @include menuitem-badge();
+  }
+}

package/primeng-theme/theme-base/components/menu/_steps.scss

@@ -0,0 +1,55 @@
+@use 'sass:math';
+
+.p-steps {
+  .p-steps-item {
+    .p-menuitem-link {
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+      background: $stepsItemBg;
+
+      .p-steps-number {
+        color: $stepsItemNumberColor;
+        border: $stepsItemBorder;
+        background: $stepsItemBg;
+        min-width: $stepsItemNumberWidth;
+        height: $stepsItemNumberHeight;
+        line-height: $stepsItemNumberHeight;
+        font-size: $stepsItemNumberFontSize;
+        z-index: 1;
+        border-radius: $stepsItemNumberBorderRadius;
+      }
+
+      .p-steps-title {
+        margin-top: $inlineSpacing;
+        color: $stepsItemTextColor;
+      }
+
+      &:not(.p-disabled):focus-visible {
+        @include focused();
+      }
+    }
+
+    &.p-highlight {
+      .p-steps-number {
+        background: $highlightBg;
+        color: $highlightTextColor;
+      }
+
+      .p-steps-title {
+        font-weight: $stepsItemActiveFontWeight;
+        color: $textColor;
+      }
+    }
+
+    &::before {
+      content: ' ';
+      border-top: $divider;
+      width: 100%;
+      top: 50%;
+      left: 0;
+      display: block;
+      position: absolute;
+      margin-top: math.div(-1 * $stepsItemNumberHeight, 2);
+    }
+  }
+}

package/primeng-theme/theme-base/components/menu/_tabmenu.scss

@@ -0,0 +1,73 @@
+.p-tabmenu {
+  .p-tabmenu-nav {
+    background: $tabviewNavBg;
+    border: $tabviewNavBorder;
+    border-width: $tabviewNavBorderWidth;
+
+    .p-menuitem-badge {
+      @include menuitem-badge();
+    }
+
+    .p-tabmenuitem {
+      margin-right: $tabviewHeaderSpacing;
+
+      .p-menuitem-link {
+        border: $tabviewHeaderBorder;
+        border-width: $tabviewHeaderBorderWidth;
+        border-color: $tabviewHeaderBorderColor;
+        background: $tabviewHeaderBg;
+        color: $tabviewHeaderTextColor;
+        padding: $tabviewHeaderPadding;
+        font-weight: $tabviewHeaderFontWeight;
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
+        transition: $listItemTransition;
+        margin: $tabviewHeaderMargin;
+
+        .p-menuitem-icon {
+          margin-right: $inlineSpacing;
+        }
+
+        &:not(.p-disabled):focus-visible {
+          @include focused-inset();
+        }
+      }
+
+      &:not(.p-highlight):not(.p-disabled):hover {
+        .p-menuitem-link {
+          background: $tabviewHeaderHoverBg;
+          border-color: $tabviewHeaderHoverBorderColor;
+          color: $tabviewHeaderTextHoverColor;
+        }
+      }
+
+      &.p-highlight {
+        .p-menuitem-link {
+          background: $tabviewHeaderActiveBg;
+          border-color: $tabviewHeaderActiveBorderColor;
+          color: $tabviewHeaderTextActiveColor;
+        }
+      }
+    }
+  }
+
+  .p-tabmenu-left-icon {
+    margin-right: $inlineSpacing;
+  }
+
+  .p-tabmenu-right-icon {
+    margin-left: $inlineSpacing;
+  }
+
+  .p-tabmenu-nav-btn.p-link {
+    background: $tabviewHeaderActiveBg;
+    color: $tabviewHeaderTextActiveColor;
+    width: $buttonIconOnlyWidth;
+    box-shadow: $raisedButtonShadow;
+    border-radius: 0;
+
+    &:focus {
+      @include focused-inset();
+    }
+  }
+}

package/primeng-theme/theme-base/components/menu/_tieredmenu.scss

@@ -0,0 +1,43 @@
+.p-tieredmenu {
+  padding: $verticalMenuPadding;
+  background: $menuBg;
+  color: $menuTextColor;
+  border: $menuBorder;
+  border-radius: $borderRadius;
+  width: $menuWidth;
+
+  &.p-tieredmenu-overlay {
+    background: $overlayMenuBg;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+  }
+
+  .p-tieredmenu-root-list {
+    outline: 0 none;
+  }
+
+  .p-submenu-list {
+    padding: $verticalMenuPadding;
+    background: $overlayMenuBg;
+    border: $overlayMenuBorder;
+    box-shadow: $overlayMenuShadow;
+  }
+
+  .p-menuitem {
+    @include menuitem();
+  }
+
+  .p-menuitem-separator {
+    border-top: $divider;
+    margin: $menuSeparatorMargin;
+  }
+
+  .p-submenu-icon {
+    font-size: $menuitemSubmenuIconFontSize;
+
+    &.p-icon {
+      width: $menuitemSubmenuIconFontSize;
+      height: $menuitemSubmenuIconFontSize;
+    }
+  }
+}

package/primeng-theme/theme-base/components/messages/_inlinemessage.scss

@@ -0,0 +1,69 @@
+.p-inline-message {
+  padding: $inlineMessagePadding;
+  margin: $inlineMessageMargin;
+  border-radius: $borderRadius;
+
+  &.p-inline-message-info {
+    background: $infoMessageBg;
+    border: $infoMessageBorder;
+    border-width: $inlineMessageBorderWidth;
+    color: $infoMessageTextColor;
+
+    .p-inline-message-icon {
+      color: $infoMessageIconColor;
+    }
+  }
+
+  &.p-inline-message-success {
+    background: $successMessageBg;
+    border: $successMessageBorder;
+    border-width: $inlineMessageBorderWidth;
+    color: $successMessageTextColor;
+
+    .p-inline-message-icon {
+      color: $successMessageIconColor;
+    }
+  }
+
+  &.p-inline-message-warn {
+    background: $warningMessageBg;
+    border: $warningMessageBorder;
+    border-width: $inlineMessageBorderWidth;
+    color: $warningMessageTextColor;
+
+    .p-inline-message-icon {
+      color: $warningMessageIconColor;
+    }
+  }
+
+  &.p-inline-message-error {
+    background: $errorMessageBg;
+    border: $errorMessageBorder;
+    border-width: $inlineMessageBorderWidth;
+    color: $errorMessageTextColor;
+
+    .p-inline-message-icon {
+      color: $errorMessageIconColor;
+    }
+  }
+
+  .p-inline-message-icon {
+    font-size: $inlineMessageIconFontSize;
+    margin-right: $inlineSpacing;
+  }
+
+  .p-icon {
+    width: $inlineMessageIconFontSize;
+    height: $inlineMessageIconFontSize;
+  }
+
+  .p-inline-message-text {
+    font-size: $inlineMessageTextFontSize;
+  }
+
+  &.p-inline-message-icon-only {
+    .p-inline-message-icon {
+      margin-right: 0;
+    }
+  }
+}

package/primeng-theme/theme-base/components/messages/_message.scss

@@ -0,0 +1,107 @@
+.p-message {
+  margin: $messageMargin;
+  border-radius: $borderRadius;
+
+  .p-message-wrapper {
+    padding: $messagePadding;
+  }
+
+  .p-message-close {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    border-radius: $actionIconBorderRadius;
+    background: transparent;
+    transition: $actionIconTransition;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    &:focus-visible {
+      @include focused();
+    }
+  }
+
+  &.p-message-info {
+    background: $infoMessageBg;
+    border: $infoMessageBorder;
+    border-width: $messageBorderWidth;
+    color: $infoMessageTextColor;
+
+    .p-message-icon {
+      color: $infoMessageIconColor;
+    }
+
+    .p-message-close {
+      color: $infoMessageIconColor;
+    }
+  }
+
+  &.p-message-success {
+    background: $successMessageBg;
+    border: $successMessageBorder;
+    border-width: $messageBorderWidth;
+    color: $successMessageTextColor;
+
+    .p-message-icon {
+      color: $successMessageIconColor;
+    }
+
+    .p-message-close {
+      color: $successMessageIconColor;
+    }
+  }
+
+  &.p-message-warn {
+    background: $warningMessageBg;
+    border: $warningMessageBorder;
+    border-width: $messageBorderWidth;
+    color: $warningMessageTextColor;
+
+    .p-message-icon {
+      color: $warningMessageIconColor;
+    }
+
+    .p-message-close {
+      color: $warningMessageIconColor;
+    }
+  }
+
+  &.p-message-error {
+    background: $errorMessageBg;
+    border: $errorMessageBorder;
+    border-width: $messageBorderWidth;
+    color: $errorMessageTextColor;
+
+    .p-message-icon {
+      color: $errorMessageIconColor;
+    }
+
+    .p-message-close {
+      color: $errorMessageIconColor;
+    }
+  }
+
+  .p-message-text {
+    font-size: $messageTextFontSize;
+    font-weight: $messageTextFontWeight;
+  }
+
+  .p-message-icon {
+    font-size: $messageIconFontSize;
+    margin-right: $inlineSpacing;
+  }
+
+  .p-icon {
+    width: $messageIconFontSize;
+    height: $messageIconFontSize;
+  }
+
+  .p-message-summary {
+    font-weight: 700;
+  }
+
+  .p-message-detail {
+    margin-left: $inlineSpacing;
+  }
+}

package/primeng-theme/theme-base/components/messages/_toast.scss

@@ -0,0 +1,99 @@
+.p-toast {
+  opacity: $toastOpacity;
+
+  .p-toast-message {
+    margin: $toastMargin;
+    box-shadow: $toastShadow;
+    border-radius: $borderRadius;
+
+    .p-toast-message-content {
+      padding: $toastPadding;
+      border-width: $toastBorderWidth;
+
+      .p-toast-message-text {
+        margin: $toastMessageTextMargin;
+      }
+
+      .p-toast-message-icon {
+        font-size: $toastIconFontSize;
+      }
+
+      .p-icon:not(.p-toast-icon-close-icon) {
+        width: $toastIconFontSize;
+        height: $toastIconFontSize;
+      }
+
+      .p-toast-summary {
+        font-weight: $toastTitleFontWeight;
+      }
+
+      .p-toast-detail {
+        margin: $toastDetailMargin;
+      }
+    }
+
+    .p-toast-icon-close {
+      width: $toastIconFontSize;
+      height: $toastIconFontSize;
+      border-radius: $actionIconBorderRadius;
+      background: transparent;
+      transition: $actionIconTransition;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.3);
+      }
+
+      &:focus-visible {
+        @include focused();
+      }
+    }
+
+    &.p-toast-message-info {
+      background: $infoMessageBg;
+      border: $infoMessageBorder;
+      border-width: $messageBorderWidth;
+      color: $infoMessageTextColor;
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: $infoMessageIconColor;
+      }
+    }
+
+    &.p-toast-message-success {
+      background: $successMessageBg;
+      border: $successMessageBorder;
+      border-width: $messageBorderWidth;
+      color: $successMessageTextColor;
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: $successMessageIconColor;
+      }
+    }
+
+    &.p-toast-message-warn {
+      background: $warningMessageBg;
+      border: $warningMessageBorder;
+      border-width: $messageBorderWidth;
+      color: $warningMessageTextColor;
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: $warningMessageIconColor;
+      }
+    }
+
+    &.p-toast-message-error {
+      background: $errorMessageBg;
+      border: $errorMessageBorder;
+      border-width: $messageBorderWidth;
+      color: $errorMessageTextColor;
+
+      .p-toast-message-icon,
+      .p-toast-icon-close {
+        color: $errorMessageIconColor;
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/misc/_avatar.scss

@@ -0,0 +1,30 @@
+.p-avatar {
+  background-color: $avatarBg;
+  border-radius: $borderRadius;
+
+  &.p-avatar-lg {
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.5rem;
+
+    .p-avatar-icon {
+      font-size: 1.5rem;
+    }
+  }
+
+  &.p-avatar-xl {
+    width: 4rem;
+    height: 4rem;
+    font-size: 2rem;
+
+    .p-avatar-icon {
+      font-size: 2rem;
+    }
+  }
+}
+
+.p-avatar-group {
+  .p-avatar {
+    border: 2px solid $panelContentBg;
+  }
+}

package/primeng-theme/theme-base/components/misc/_badge.scss

@@ -0,0 +1,48 @@
+.p-badge {
+  background: $badgeBg;
+  color: $badgeTextColor;
+  font-size: $badgeFontSize;
+  font-weight: $badgeFontWeight;
+  min-width: $badgeMinWidth;
+  height: $badgeHeight;
+  line-height: $badgeHeight;
+
+  &.p-badge-secondary {
+    background-color: $secondaryButtonBg;
+    color: $secondaryButtonTextColor;
+  }
+
+  &.p-badge-success {
+    background-color: $successButtonBg;
+    color: $successButtonTextColor;
+  }
+
+  &.p-badge-info {
+    background-color: $infoButtonBg;
+    color: $infoButtonTextColor;
+  }
+
+  &.p-badge-warning {
+    background-color: $warningButtonBg;
+    color: $warningButtonTextColor;
+  }
+
+  &.p-badge-danger {
+    background-color: $dangerButtonBg;
+    color: $dangerButtonTextColor;
+  }
+
+  &.p-badge-lg {
+    font-size: 1.5 * $badgeFontSize;
+    min-width: 1.5 * $badgeMinWidth;
+    height: 1.5 * $badgeHeight;
+    line-height: 1.5 * $badgeHeight;
+  }
+
+  &.p-badge-xl {
+    font-size: 2 * $badgeFontSize;
+    min-width: 2 * $badgeMinWidth;
+    height: 2 * $badgeHeight;
+    line-height: 2 * $badgeHeight;
+  }
+}

package/primeng-theme/theme-base/components/misc/_chip.scss

@@ -0,0 +1,40 @@
+@use 'sass:list';
+@use 'sass:math';
+
+.p-chip {
+  background-color: $chipBg;
+  color: $chipTextColor;
+  border-radius: $chipBorderRadius;
+  padding: 0 list.nth($inputPadding, 2);
+
+  .p-chip-text {
+    line-height: 1.5;
+    margin-top: math.div(list.nth($inputPadding, 1), 2);
+    margin-bottom: math.div(list.nth($inputPadding, 1), 2);
+  }
+
+  .p-chip-icon {
+    margin-right: $inlineSpacing;
+  }
+
+  img {
+    width: 1.5 + list.nth($inputPadding, 1);
+    height: 1.5 + list.nth($inputPadding, 1);
+    margin-left: -1 * list.nth($inputPadding, 2);
+    margin-right: $inlineSpacing;
+  }
+
+  .pi-chip-remove-icon {
+    margin-left: $inlineSpacing;
+    border-radius: $borderRadius;
+    transition: $actionIconTransition;
+
+    &:focus-visible {
+      @include focused();
+    }
+
+    &:focus {
+      outline: 0 none;
+    }
+  }
+}

package/primeng-theme/theme-base/components/misc/_inplace.scss

@@ -0,0 +1,16 @@
+.p-inplace {
+  .p-inplace-display {
+    padding: $inplacePadding;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    &:not(.p-disabled):hover {
+      background: $inplaceHoverBg;
+      color: $inplaceTextHoverColor;
+    }
+
+    &:focus {
+      @include focused();
+    }
+  }
+}

package/primeng-theme/theme-base/components/misc/_progressbar.scss

@@ -0,0 +1,17 @@
+.p-progressbar {
+  border: $progressBarBorder;
+  height: $progressBarHeight;
+  background: $progressBarBg;
+  border-radius: $borderRadius;
+
+  .p-progressbar-value {
+    border: 0 none;
+    margin: 0;
+    background: $progressBarValueBg;
+  }
+
+  .p-progressbar-label {
+    color: $progressBarValueTextColor;
+    line-height: $progressBarHeight;
+  }
+}

package/primeng-theme/theme-base/components/misc/_scrolltop.scss

@@ -0,0 +1,25 @@
+.p-scrolltop {
+  width: $scrollTopWidth;
+  height: $scrollTopHeight;
+  border-radius: $scrollTopBorderRadius;
+  box-shadow: $inputOverlayShadow;
+  transition: $actionIconTransition;
+
+  &.p-link {
+    background: $scrollTopBg;
+
+    &:hover {
+      background: $scrollTopHoverBg;
+    }
+  }
+
+  .p-scrolltop-icon {
+    font-size: $scrollTopFontSize;
+    color: $scrollTopTextColor;
+  }
+
+  .p-icon {
+    width: $scrollTopFontSize;
+    height: $scrollTopFontSize;
+  }
+}

package/primeng-theme/theme-base/components/misc/_skeleton.scss

@@ -0,0 +1,13 @@
+.p-skeleton {
+  background-color: $skeletonBg;
+  border-radius: $borderRadius;
+
+  &::after {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0),
+      $skeletonAnimationBg,
+      rgba(255, 255, 255, 0)
+    );
+  }
+}