@swisspost/design-system-styles-primeng 9.0.0-next.9 → 9.0.1

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

@@ -1,99 +0,0 @@
-@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

@@ -1,178 +0,0 @@
-@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

@@ -1,55 +0,0 @@
-@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

@@ -1,78 +0,0 @@
-.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

@@ -1,60 +0,0 @@
-@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

@@ -1,50 +0,0 @@
-.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

@@ -1,75 +0,0 @@
-@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

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