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

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

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

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

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

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

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