@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/theme-base/components/input/_listbox.scss

@@ -0,0 +1,99 @@
+@use 'sass:list';
+
+.p-listbox {
+  background: $inputListBg;
+  color: $inputListTextColor;
+  border: $inputListBorder;
+  border-radius: $borderRadius;
+  transition: $formElementTransition;
+
+  .p-listbox-header {
+    padding: $inputListHeaderPadding;
+    border-bottom: $inputListHeaderBorder;
+    color: $inputListHeaderTextColor;
+    background: $inputListHeaderBg;
+    margin: $inputListHeaderMargin;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-listbox-filter {
+      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+    }
+
+    .p-listbox-filter-icon {
+      right: list.nth($inputPadding, 2);
+      color: $inputIconColor;
+    }
+
+    .p-checkbox {
+      margin-right: $inlineSpacing;
+    }
+  }
+
+  .p-listbox-list {
+    padding: $inputListPadding;
+    outline: 0 none;
+
+    .p-listbox-item {
+      margin: $inputListItemMargin;
+      padding: $inputListItemPadding;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+
+      .p-checkbox {
+        margin-right: $inlineSpacing;
+      }
+    }
+
+    .p-listbox-item-group {
+      margin: $submenuHeaderMargin;
+      padding: $submenuHeaderPadding;
+      color: $submenuHeaderTextColor;
+      background: $submenuHeaderBg;
+      font-weight: $submenuHeaderFontWeight;
+    }
+
+    .p-listbox-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+    }
+  }
+
+  &:not(.p-disabled) {
+    .p-listbox-item {
+      &.p-highlight {
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+
+      &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+          color: $inputListItemTextFocusColor;
+          background: $inputListItemFocusBg;
+        }
+
+        &:hover {
+          color: $inputListItemTextHoverColor;
+          background: $inputListItemHoverBg;
+        }
+      }
+    }
+  }
+
+  &.p-focus {
+    @include focused-input();
+  }
+}
+
+p-listbox.ng-dirty.ng-invalid > .p-listbox {
+  @include invalid-input();
+}

package/primeng-theme/theme-base/components/input/_multiselect.scss

@@ -0,0 +1,178 @@
+@use 'sass:list';
+@use 'sass:math';
+
+.p-multiselect {
+  background: $inputBg;
+  border: $inputBorder;
+  transition: $formElementTransition;
+  border-radius: $borderRadius;
+
+  &:not(.p-disabled):hover {
+    border-color: $inputHoverBorderColor;
+  }
+
+  &:not(.p-disabled).p-focus {
+    @include focused-input();
+  }
+
+  .p-multiselect-label {
+    padding: $inputPadding;
+    transition: $formElementTransition;
+
+    &.p-placeholder {
+      color: $inputPlaceholderTextColor;
+    }
+  }
+
+  &.p-multiselect-chip {
+    .p-multiselect-token {
+      padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
+      margin-right: $inlineSpacing;
+      background: $chipBg;
+      color: $chipTextColor;
+      border-radius: $chipBorderRadius;
+
+      .p-multiselect-token-icon {
+        margin-left: $inlineSpacing;
+      }
+    }
+  }
+
+  .p-multiselect-trigger {
+    background: transparent;
+    color: $inputIconColor;
+    width: $inputGroupAddOnMinWidth;
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+  }
+}
+
+.p-inputwrapper-filled {
+  &.p-multiselect {
+    &.p-multiselect-chip {
+      .p-multiselect-label {
+        padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
+      }
+    }
+  }
+}
+
+.p-multiselect-clearable {
+  .p-multiselect-label-container {
+    padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+  }
+
+  .p-multiselect-clear-icon {
+    color: $inputIconColor;
+    right: $inputGroupAddOnMinWidth;
+  }
+}
+
+.p-multiselect-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-multiselect-header {
+    padding: $inputListHeaderPadding;
+    border-bottom: $inputListHeaderBorder;
+    color: $inputListHeaderTextColor;
+    background: $inputOverlayHeaderBg;
+    margin: $inputListHeaderMargin;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-multiselect-filter-container {
+      .p-inputtext {
+        padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
+      }
+
+      .p-multiselect-filter-icon {
+        right: list.nth($inputPadding, 2);
+        color: $inputIconColor;
+      }
+    }
+
+    .p-checkbox {
+      margin-right: $inlineSpacing;
+    }
+
+    .p-multiselect-close {
+      margin-left: $inlineSpacing;
+      @include action-icon();
+    }
+  }
+
+  .p-multiselect-items {
+    padding: $inputListPadding;
+
+    .p-multiselect-item {
+      margin: $inputListItemMargin;
+      padding: $inputListItemPadding;
+      border: $inputListItemBorder;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+      transition: $listItemTransition;
+      border-radius: $inputListItemBorderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+
+        &.p-focus {
+          background: $highlightFocusBg;
+        }
+      }
+
+      &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+          color: $inputListItemTextFocusColor;
+          background: $inputListItemFocusBg;
+        }
+
+        &:hover {
+          color: $inputListItemTextHoverColor;
+          background: $inputListItemHoverBg;
+        }
+      }
+
+      .p-checkbox {
+        margin-right: $inlineSpacing;
+      }
+    }
+
+    .p-multiselect-item-group {
+      margin: $submenuHeaderMargin;
+      padding: $submenuHeaderPadding;
+      color: $submenuHeaderTextColor;
+      background: $submenuHeaderBg;
+      font-weight: $submenuHeaderFontWeight;
+    }
+
+    .p-multiselect-empty-message {
+      padding: $inputListItemPadding;
+      color: $inputListItemTextColor;
+      background: $inputListItemBg;
+    }
+  }
+}
+
+.p-input-filled {
+  .p-multiselect {
+    background: $inputFilledBg;
+
+    &:not(.p-disabled):hover {
+      background-color: $inputFilledHoverBg;
+    }
+
+    &:not(.p-disabled).p-focus {
+      background-color: $inputFilledFocusBg;
+    }
+  }
+}
+
+p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
+  @include invalid-input();
+}

package/primeng-theme/theme-base/components/input/_password.scss

@@ -0,0 +1,55 @@
+@use 'sass:list';
+
+p-password.ng-invalid.ng-dirty > .p-password > .p-inputtext {
+  @include invalid-input();
+}
+
+.p-password-panel {
+  padding: $panelContentPadding;
+  background: $panelContentBg;
+  color: $panelContentTextColor;
+  border: $overlayContentBorder;
+  box-shadow: $inputOverlayShadow;
+  border-radius: $borderRadius;
+
+  .p-password-meter {
+    margin-bottom: $inlineSpacing;
+    background: $passwordMeterBg;
+
+    .p-password-strength {
+      &.weak {
+        background: $passwordWeakBg;
+      }
+
+      &.medium {
+        background: $passwordMediumBg;
+      }
+
+      &.strong {
+        background: $passwordStrongBg;
+      }
+    }
+  }
+}
+
+p-password.p-password-clearable {
+  .p-password-input {
+    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-password-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2);
+  }
+}
+
+p-password.p-password-clearable.p-password-mask {
+  .p-password-input {
+    padding-right: list.nth($inputPadding, 2) * 3 + $primeIconFontSize * 2;
+  }
+
+  .p-password-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+}

package/primeng-theme/theme-base/components/input/_radiobutton.scss

@@ -0,0 +1,78 @@
+.p-radiobutton {
+  width: $radiobuttonWidth;
+  height: $radiobuttonHeight;
+
+  .p-radiobutton-box {
+    border: $radiobuttonBorder;
+    background: $inputBg;
+    width: $radiobuttonWidth;
+    height: $radiobuttonHeight;
+    color: $textColor;
+    border-radius: 50%;
+    transition: $formElementTransition;
+
+    &:not(.p-disabled):not(.p-highlight):hover {
+      border-color: $inputHoverBorderColor;
+    }
+
+    &:not(.p-disabled).p-focus {
+      @include focused-input();
+    }
+
+    .p-radiobutton-icon {
+      width: $radiobuttonIconSize;
+      height: $radiobuttonIconSize;
+      transition-duration: $transitionDuration;
+      background-color: $radiobuttonIconActiveColor;
+    }
+
+    &.p-highlight {
+      border-color: $radiobuttonActiveBorderColor;
+      background: $radiobuttonActiveBg;
+
+      &:not(.p-disabled):hover {
+        border-color: $radiobuttonActiveHoverBorderColor;
+        background: $radiobuttonActiveHoverBg;
+        color: $radiobuttonIconActiveHoverColor;
+      }
+    }
+  }
+}
+
+p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
+  @include invalid-input();
+}
+
+.p-input-filled {
+  .p-radiobutton {
+    .p-radiobutton-box {
+      background-color: $inputFilledBg;
+
+      &:not(.p-disabled):hover {
+        background-color: $inputFilledHoverBg;
+      }
+
+      &.p-highlight {
+        background: $radiobuttonActiveBg;
+
+        &:not(.p-disabled):hover {
+          background: $radiobuttonActiveHoverBg;
+        }
+      }
+    }
+  }
+}
+
+.p-radiobutton-label {
+  margin-left: $inlineSpacing;
+}
+
+@if ($highlightBg == $radiobuttonActiveBg) {
+  .p-highlight {
+    .p-radiobutton {
+      .p-radiobutton-box {
+        border-color: $radiobuttonIconActiveColor;
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_rating.scss

@@ -0,0 +1,60 @@
+@use 'sass:math';
+
+.p-rating {
+  gap: $inlineSpacing;
+
+  .p-rating-item {
+    .p-rating-icon {
+      color: $ratingStarIconOffColor;
+      transition: $formElementTransition;
+      font-size: $ratingIconFontSize;
+
+      &.p-icon {
+        width: $ratingIconFontSize;
+        height: $ratingIconFontSize;
+      }
+
+      &.p-rating-cancel {
+        color: $ratingCancelIconColor;
+      }
+    }
+
+    &.p-focus {
+      @include focused-input();
+    }
+
+    &.p-rating-item-active {
+      .p-rating-icon {
+        color: $ratingStarIconOnColor;
+      }
+    }
+  }
+
+  &:not(.p-disabled):not(.p-readonly) {
+    .p-rating-item {
+      &:hover {
+        .p-rating-icon {
+          color: $ratingStarIconHoverColor;
+
+          &.p-rating-cancel {
+            color: $ratingCancelIconHoverColor;
+          }
+        }
+      }
+    }
+  }
+}
+
+@if ($highlightBg == $ratingStarIconOnColor) {
+  .p-highlight {
+    .p-rating {
+      .p-rating-item {
+        &.p-rating-item-active {
+          .p-rating-icon {
+            color: $highlightTextColor;
+          }
+        }
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_selectbutton.scss

@@ -0,0 +1,50 @@
+.p-selectbutton {
+  .p-button {
+    background: $toggleButtonBg;
+    border: $toggleButtonBorder;
+    color: $toggleButtonTextColor;
+    transition: $formElementTransition;
+
+    .p-button-icon-left,
+    .p-button-icon-right {
+      color: $toggleButtonIconColor;
+    }
+
+    &:not(.p-disabled):not(.p-highlight):hover {
+      background: $toggleButtonHoverBg;
+      border-color: $toggleButtonHoverBorderColor;
+      color: $toggleButtonTextHoverColor;
+
+      .p-button-icon-left,
+      .p-button-icon-right {
+        color: $toggleButtonIconHoverColor;
+      }
+    }
+
+    &.p-highlight {
+      background: $toggleButtonActiveBg;
+      border-color: $toggleButtonActiveBorderColor;
+      color: $toggleButtonTextActiveColor;
+
+      .p-button-icon-left,
+      .p-button-icon-right {
+        color: $toggleButtonIconActiveColor;
+      }
+
+      &:hover {
+        background: $toggleButtonActiveHoverBg;
+        border-color: $toggleButtonActiveHoverBorderColor;
+        color: $toggleButtonTextActiveHoverColor;
+
+        .p-button-icon-left,
+        .p-button-icon-right {
+          color: $toggleButtonIconActiveHoverColor;
+        }
+      }
+    }
+  }
+}
+
+p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
+  @include invalid-input();
+}

package/primeng-theme/theme-base/components/input/_slider.scss

@@ -0,0 +1,75 @@
+@use 'sass:math';
+
+.p-slider {
+  background: $sliderBg;
+  border: $sliderBorder;
+  border-radius: $borderRadius;
+
+  &.p-slider-horizontal {
+    height: $sliderHorizontalHeight;
+
+    .p-slider-handle {
+      margin-top: math.div(-1 * $sliderHandleHeight, 2);
+      margin-left: math.div(-1 * $sliderHandleWidth, 2);
+    }
+  }
+
+  &.p-slider-vertical {
+    width: $sliderVerticalWidth;
+
+    .p-slider-handle {
+      margin-left: math.div(-1 * $sliderHandleWidth, 2);
+      margin-bottom: math.div(-1 * $sliderHandleHeight, 2);
+    }
+  }
+
+  .p-slider-handle {
+    height: $sliderHandleHeight;
+    width: $sliderHandleWidth;
+    background: $sliderHandleBg;
+    border: $sliderHandleBorder;
+    border-radius: $sliderHandleBorderRadius;
+    transition: $formElementTransition;
+
+    &:focus {
+      @include focused();
+    }
+  }
+
+  .p-slider-range {
+    background: $sliderRangeBg;
+  }
+
+  &:not(.p-disabled) {
+    .p-slider-handle:hover {
+      background: $sliderHandleHoverBg;
+      border-color: $sliderHandleHoverBorderColor;
+    }
+  }
+
+  &.p-slider-animate {
+    &.p-slider-horizontal {
+      .p-slider-handle {
+        transition:
+          $formElementTransition,
+          left $transitionDuration;
+      }
+
+      .p-slider-range {
+        transition: width $transitionDuration;
+      }
+    }
+
+    &.p-slider-vertical {
+      .p-slider-handle {
+        transition:
+          $formElementTransition,
+          bottom $transitionDuration;
+      }
+
+      .p-slider-range {
+        transition: height $transitionDuration;
+      }
+    }
+  }
+}

package/primeng-theme/theme-base/components/input/_togglebutton.scss

@@ -0,0 +1,48 @@
+.p-togglebutton.p-button {
+  background: $toggleButtonBg;
+  border: $toggleButtonBorder;
+  color: $toggleButtonTextColor;
+  transition: $formElementTransition;
+
+  .p-button-icon-left,
+  .p-button-icon-right {
+    color: $toggleButtonIconColor;
+  }
+
+  &:not(.p-disabled):not(.p-highlight):hover {
+    background: $toggleButtonHoverBg;
+    border-color: $toggleButtonHoverBorderColor;
+    color: $toggleButtonTextHoverColor;
+
+    .p-button-icon-left,
+    .p-button-icon-right {
+      color: $toggleButtonIconHoverColor;
+    }
+  }
+
+  &.p-highlight {
+    background: $toggleButtonActiveBg;
+    border-color: $toggleButtonActiveBorderColor;
+    color: $toggleButtonTextActiveColor;
+
+    .p-button-icon-left,
+    .p-button-icon-right {
+      color: $toggleButtonIconActiveColor;
+    }
+
+    &:hover {
+      background: $toggleButtonActiveHoverBg;
+      border-color: $toggleButtonActiveHoverBorderColor;
+      color: $toggleButtonTextActiveHoverColor;
+
+      .p-button-icon-left,
+      .p-button-icon-right {
+        color: $toggleButtonIconActiveHoverColor;
+      }
+    }
+  }
+}
+
+p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
+  @include invalid-input();
+}