@swisspost/design-system-styles-primeng 7.3.0

package/primeng-theme/theme-base/components/file/_fileupload.scss

@@ -0,0 +1,64 @@
+.p-fileupload {
+  .p-fileupload-buttonbar {
+    background: $panelHeaderBg;
+    padding: $panelHeaderPadding;
+    border: $panelHeaderBorder;
+    color: $panelHeaderTextColor;
+    border-bottom: 0 none;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-button {
+      margin-right: $inlineSpacing;
+
+      &.p-fileupload-choose.p-focus {
+        @include focused();
+      }
+    }
+  }
+
+  .p-fileupload-content {
+    background: $panelContentBg;
+    padding: $fileUploadContentPadding;
+    border: $panelContentBorder;
+    color: $panelContentTextColor;
+    border-bottom-right-radius: $borderRadius;
+    border-bottom-left-radius: $borderRadius;
+
+    &.p-fileupload-highlight {
+      border-color: $fileUploadContentHoverBorder;
+      border-style: dashed;
+      background-color: $highlightBg;
+    }
+  }
+
+  .p-progressbar {
+    height: $fileUploadProgressBarHeight;
+  }
+
+  .p-fileupload-row {
+    > div {
+      padding: $tableBodyCellPadding;
+    }
+  }
+
+  &.p-fileupload-advanced {
+    .p-message {
+      margin-top: 0;
+    }
+  }
+}
+
+.p-fileupload-choose {
+  &:not(.p-disabled):hover {
+    background: $buttonHoverBg;
+    color: $buttonTextHoverColor;
+    border-color: $buttonHoverBorderColor;
+  }
+
+  &:not(.p-disabled):active {
+    background: $buttonActiveBg;
+    color: $buttonTextActiveColor;
+    border-color: $buttonActiveBorderColor;
+  }
+}

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

@@ -0,0 +1,137 @@
+@use 'sass:list';
+@use 'sass:math';
+
+.p-autocomplete {
+  .p-autocomplete-loader {
+    right: list.nth($inputPadding, 2);
+  }
+
+  &.p-autocomplete-dd {
+    .p-autocomplete-loader {
+      right: list.nth($inputPadding, 2) + $buttonIconOnlyWidth;
+    }
+  }
+
+  &:not(.p-disabled):hover {
+    .p-autocomplete-multiple-container {
+      border-color: $inputHoverBorderColor;
+    }
+  }
+
+  &:not(.p-disabled).p-focus {
+    .p-autocomplete-multiple-container {
+      @include focused-input();
+    }
+  }
+
+  .p-autocomplete-multiple-container {
+    padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
+    gap: $inlineSpacing;
+
+    .p-autocomplete-input-token {
+      padding: math.div(list.nth($inputPadding, 1), 2) 0;
+
+      input {
+        font-family: inherit;
+        font-feature-settings: inherit;
+        font-size: inherit;
+        color: $textColor;
+        padding: 0;
+        margin: 0;
+      }
+    }
+
+    .p-autocomplete-token {
+      padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
+      background: $chipBg;
+      color: $chipTextColor;
+      border-radius: $chipBorderRadius;
+
+      .p-autocomplete-token-icon {
+        margin-left: $inlineSpacing;
+      }
+
+      &.p-focus {
+        background: $chipFocusBg;
+        color: $chipFocusTextColor;
+      }
+    }
+  }
+
+  &.p-invalid.p-component > .p-inputtext {
+    @include invalid-input();
+  }
+}
+
+.p-autocomplete-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-autocomplete-items {
+    padding: $inputListPadding;
+
+    .p-autocomplete-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-autocomplete-item-group {
+      margin: $submenuHeaderMargin;
+      padding: $submenuHeaderPadding;
+      color: $submenuHeaderTextColor;
+      background: $submenuHeaderBg;
+      font-weight: $submenuHeaderFontWeight;
+    }
+  }
+}
+
+p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
+  @include invalid-input();
+}
+
+p-autocomplete.p-autocomplete-clearable {
+  .p-inputtext {
+    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-autocomplete-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2);
+  }
+}
+
+p-autocomplete.p-autocomplete-clearable .p-autocomplete-dd {
+  .p-autocomplete-clear-icon {
+    color: $inputIconColor;
+    right: $buttonIconOnlyWidth + list.nth($inputPadding, 2);
+  }
+}

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

@@ -0,0 +1,269 @@
+@use 'sass:list';
+
+p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
+  @include invalid-input();
+}
+
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  @include focused-input();
+}
+
+.p-datepicker {
+  padding: $calendarPadding;
+  background: $calendarInlineBg;
+  color: $calendarTextColor;
+  border: $calendarBorder;
+  border-radius: $borderRadius;
+
+  &:not(.p-datepicker-inline) {
+    background: $calendarBg;
+    border: $calendarOverlayBorder;
+    box-shadow: $inputOverlayShadow;
+
+    .p-datepicker-header {
+      background: $calendarHeaderBg;
+    }
+  }
+
+  .p-datepicker-header {
+    padding: $calendarHeaderPadding;
+    color: $calendarHeaderTextColor;
+    background: $calendarInlineHeaderBg;
+    font-weight: $calendarHeaderFontWeight;
+    margin: $inputListHeaderMargin;
+    border-bottom: $calendarHeaderBorder;
+    border-top-right-radius: $borderRadius;
+    border-top-left-radius: $borderRadius;
+
+    .p-datepicker-prev,
+    .p-datepicker-next {
+      @include action-icon();
+    }
+
+    .p-datepicker-title {
+      line-height: $actionIconHeight;
+
+      .p-datepicker-year,
+      .p-datepicker-month {
+        color: $calendarHeaderTextColor;
+        transition: $actionIconTransition;
+        font-weight: $calendarHeaderFontWeight;
+        padding: $calendarHeaderCellPadding;
+
+        &:enabled:hover {
+          color: $calendarMonthYearHeaderHoverTextColor;
+        }
+      }
+
+      .p-datepicker-month {
+        margin-right: $inlineSpacing;
+      }
+    }
+  }
+
+  table {
+    font-size: $fontSize;
+    margin: $calendarTableMargin;
+
+    th {
+      padding: $calendarHeaderCellPadding;
+
+      > span {
+        width: $calendarCellDateWidth;
+        height: $calendarCellDateHeight;
+      }
+    }
+
+    td {
+      padding: $calendarCellDatePadding;
+
+      > span {
+        width: $calendarCellDateWidth;
+        height: $calendarCellDateHeight;
+        border-radius: $calendarCellDateBorderRadius;
+        transition: $listItemTransition;
+        border: $calendarCellDateBorder;
+
+        &.p-highlight {
+          color: $highlightTextColor;
+          background: $highlightBg;
+        }
+
+        &:focus {
+          @include focused();
+        }
+      }
+
+      &.p-datepicker-today {
+        > span {
+          background: $calendarCellDateTodayBg;
+          color: $calendarCellDateTodayTextColor;
+          border-color: $calendarCellDateTodayBorderColor;
+
+          &.p-highlight {
+            color: $highlightTextColor;
+            background: $highlightBg;
+          }
+        }
+      }
+    }
+  }
+
+  .p-datepicker-buttonbar {
+    padding: $calendarButtonBarPadding;
+    border-top: $divider;
+
+    .p-button {
+      width: auto;
+    }
+  }
+
+  .p-timepicker {
+    border-top: $divider;
+    padding: $calendarTimePickerPadding;
+
+    button {
+      @include action-icon();
+
+      &:last-child {
+        margin-top: 0.2em;
+      }
+    }
+
+    span {
+      font-size: $calendarTimePickerTimeFontSize;
+    }
+
+    > div {
+      padding: $calendarTimePickerElementPadding;
+    }
+  }
+
+  &.p-datepicker-timeonly {
+    .p-timepicker {
+      border-top: 0 none;
+    }
+  }
+
+  .p-monthpicker {
+    margin: $calendarTableMargin;
+
+    .p-monthpicker-month {
+      padding: $calendarCellDatePadding;
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+    }
+  }
+
+  .p-yearpicker {
+    margin: $calendarTableMargin;
+
+    .p-yearpicker-year {
+      padding: $calendarCellDatePadding;
+      transition: $listItemTransition;
+      border-radius: $borderRadius;
+
+      &.p-highlight {
+        color: $highlightTextColor;
+        background: $highlightBg;
+      }
+    }
+  }
+
+  &.p-datepicker-multiple-month {
+    .p-datepicker-group {
+      border-left: $divider;
+      padding-right: $calendarPadding;
+      padding-left: $calendarPadding;
+      padding-top: 0;
+      padding-bottom: 0;
+
+      &:first-child {
+        padding-left: 0;
+        border-left: 0 none;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+
+  &:not(.p-disabled) {
+    table {
+      td {
+        span:not(.p-highlight):not(.p-disabled) {
+          &:hover {
+            background: $calendarCellDateHoverBg;
+          }
+
+          &:focus {
+            @include focused();
+          }
+        }
+      }
+    }
+
+    .p-monthpicker {
+      .p-monthpicker-month {
+        &:not(.p-disabled) {
+          &:not(.p-highlight):hover {
+            background: $calendarCellDateHoverBg;
+          }
+
+          &:focus {
+            @include focused();
+          }
+        }
+      }
+    }
+
+    .p-yearpicker {
+      .p-yearpicker-year {
+        &:not(.p-disabled) {
+          &:not(.p-highlight):hover {
+            background: $calendarCellDateHoverBg;
+          }
+
+          &:focus {
+            @include focused();
+          }
+        }
+      }
+    }
+  }
+}
+
+p-calendar.p-calendar-clearable {
+  .p-inputtext {
+    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
+  }
+
+  .p-calendar-clear-icon {
+    color: $inputIconColor;
+    right: list.nth($inputPadding, 2);
+  }
+}
+
+p-calendar.p-calendar-clearable .p-calendar-w-btn {
+  .p-calendar-clear-icon {
+    color: $inputIconColor;
+    right: $buttonIconOnlyWidth + list.nth($inputPadding, 2);
+  }
+}
+
+@media screen and (max-width: $calendarBreakpoint) {
+  .p-datepicker {
+    table {
+      th,
+      td {
+        padding: $calendarCellDatePaddingSM;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,137 @@
+@use 'sass:list';
+@use 'sass:math';
+
+.p-cascadeselect {
+  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-cascadeselect-label {
+    background: transparent;
+    border: 0 none;
+    padding: $inputPadding;
+
+    &.p-placeholder {
+      color: $inputPlaceholderTextColor;
+    }
+
+    &:enabled:focus {
+      outline: 0 none;
+      box-shadow: none;
+    }
+  }
+
+  .p-cascadeselect-trigger {
+    background: transparent;
+    color: $inputIconColor;
+    width: $inputGroupAddOnMinWidth;
+    border-top-right-radius: $borderRadius;
+    border-bottom-right-radius: $borderRadius;
+  }
+
+  &.p-invalid.p-component {
+    @include invalid-input();
+  }
+}
+
+.p-cascadeselect-panel {
+  background: $inputOverlayBg;
+  color: $inputListTextColor;
+  border: $inputOverlayBorder;
+  border-radius: $borderRadius;
+  box-shadow: $inputOverlayShadow;
+
+  .p-cascadeselect-items {
+    padding: $inputListPadding;
+
+    .p-cascadeselect-item {
+      margin: $inputListItemMargin;
+      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-cascadeselect-item-content {
+        padding: $inputListItemPadding;
+      }
+
+      .p-cascadeselect-group-icon {
+        font-size: $menuitemSubmenuIconFontSize;
+      }
+    }
+  }
+}
+
+.p-input-filled {
+  .p-cascadeselect {
+    background: $inputFilledBg;
+
+    &:not(.p-disabled):hover {
+      background-color: $inputFilledHoverBg;
+    }
+
+    &:not(.p-disabled).p-focus {
+      background-color: $inputFilledFocusBg;
+    }
+  }
+}
+
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+  @include invalid-input();
+}
+
+p-cascadeselect.p-cascadeselect-clearable {
+  .p-cascadeselect-label {
+    padding-right: list.nth($inputPadding, 2);
+  }
+
+  .p-cascadeselect-clear-icon {
+    color: $inputIconColor;
+    right: $inputGroupAddOnMinWidth;
+  }
+}
+
+.p-overlay-modal {
+  .p-cascadeselect-sublist {
+    .p-cascadeselect-panel {
+      box-shadow: none;
+      border-radius: 0;
+      padding: math.div($inlineSpacing, 2) 0 math.div($inlineSpacing, 2) $inlineSpacing;
+    }
+  }
+
+  .p-cascadeselect-item-active > .p-cascadeselect-item-content .p-cascadeselect-group-icon {
+    transform: rotate(90deg);
+  }
+}

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

@@ -0,0 +1,90 @@
+.p-checkbox {
+  width: $checkboxWidth;
+  height: $checkboxHeight;
+
+  .p-checkbox-box {
+    border: $checkboxBorder;
+    background: $inputBg;
+    width: $checkboxWidth;
+    height: $checkboxHeight;
+    color: $textColor;
+    border-radius: $borderRadius;
+    transition: $formElementTransition;
+
+    .p-checkbox-icon {
+      transition-duration: $transitionDuration;
+      color: $checkboxIconActiveColor;
+      font-size: $checkboxIconFontSize;
+    }
+
+    .p-icon {
+      width: $checkboxIconFontSize;
+      height: $checkboxIconFontSize;
+    }
+
+    &.p-highlight {
+      border-color: $checkboxActiveBorderColor;
+      background: $checkboxActiveBg;
+    }
+  }
+
+  &:not(.p-checkbox-disabled) {
+    .p-checkbox-box {
+      &:hover {
+        border-color: $inputHoverBorderColor;
+      }
+
+      &.p-focus {
+        @include focused-input();
+      }
+
+      &.p-highlight:hover {
+        border-color: $checkboxActiveHoverBorderColor;
+        background: $checkboxActiveHoverBg;
+        color: $checkboxIconActiveHoverColor;
+      }
+    }
+  }
+}
+
+p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
+  @include invalid-input();
+}
+
+.p-input-filled {
+  .p-checkbox {
+    .p-checkbox-box {
+      background-color: $inputFilledBg;
+
+      &.p-highlight {
+        background: $checkboxActiveBg;
+      }
+    }
+
+    &:not(.p-checkbox-disabled) {
+      .p-checkbox-box {
+        &:hover {
+          background-color: $inputFilledHoverBg;
+        }
+
+        &.p-highlight:hover {
+          background: $checkboxActiveHoverBg;
+        }
+      }
+    }
+  }
+}
+
+.p-checkbox-label {
+  margin-left: $inlineSpacing;
+}
+
+@if ($highlightBg == $checkboxActiveBg) {
+  .p-highlight {
+    .p-checkbox {
+      .p-checkbox-box {
+        border-color: $checkboxIconActiveColor;
+      }
+    }
+  }
+}