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

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

@@ -1,66 +0,0 @@
-@use 'sass:list';
-@use 'sass:math';
-
-.p-chips {
-  &:not(.p-disabled):hover {
-    .p-chips-multiple-container {
-      border-color: $inputHoverBorderColor;
-    }
-  }
-
-  &:not(.p-disabled).p-focus {
-    .p-chips-multiple-container {
-      @include focused-input();
-    }
-  }
-
-  .p-chips-multiple-container {
-    padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
-    gap: $inlineSpacing;
-
-    .p-chips-token {
-      padding: math.div(list.nth($inputPadding, 1), 2) list.nth($inputPadding, 2);
-      margin-right: $inlineSpacing;
-      background: $chipBg;
-      color: $chipTextColor;
-      border-radius: $chipBorderRadius;
-
-      &.p-focus {
-        background: $chipFocusBg;
-        color: $chipFocusTextColor;
-      }
-
-      .p-chips-token-icon {
-        margin-left: $inlineSpacing;
-      }
-    }
-
-    .p-chips-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-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
-  @include invalid-input();
-}
-
-p-chips.p-chips-clearable {
-  .p-inputtext {
-    padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
-  }
-
-  .p-chips-clear-icon {
-    color: $inputIconColor;
-    right: list.nth($inputPadding, 2);
-  }
-}

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

@@ -1,19 +0,0 @@
-.p-colorpicker-preview,
-.p-fluid .p-colorpicker-preview.p-inputtext {
-  width: $colorPickerPreviewWidth;
-  height: $colorPickerPreviewHeight;
-}
-
-.p-colorpicker-panel {
-  background: $colorPickerBg;
-  border: $colorPickerBorder;
-
-  .p-colorpicker-color-handle,
-  .p-colorpicker-hue-handle {
-    border-color: $colorPickerHandleColor;
-  }
-}
-
-.p-colorpicker-overlay-panel {
-  box-shadow: $inputOverlayShadow;
-}

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

@@ -1,149 +0,0 @@
-@use 'sass:list';
-
-.p-dropdown {
-  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-dropdown-clearable {
-    .p-dropdown-label {
-      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
-    }
-  }
-
-  .p-dropdown-label {
-    background: transparent;
-    border: 0 none;
-
-    &.p-placeholder {
-      color: $inputPlaceholderTextColor;
-    }
-
-    &:focus,
-    &:enabled:focus {
-      outline: 0 none;
-      box-shadow: none;
-    }
-  }
-
-  .p-dropdown-trigger {
-    background: transparent;
-    color: $inputIconColor;
-    width: $inputGroupAddOnMinWidth;
-    border-top-right-radius: $borderRadius;
-    border-bottom-right-radius: $borderRadius;
-  }
-
-  .p-dropdown-clear-icon {
-    color: $inputIconColor;
-    right: $inputGroupAddOnMinWidth;
-  }
-
-  &.p-invalid.p-component {
-    @include invalid-input();
-  }
-}
-
-.p-dropdown-panel {
-  background: $inputOverlayBg;
-  color: $inputListTextColor;
-  border: $inputOverlayBorder;
-  border-radius: $borderRadius;
-  box-shadow: $inputOverlayShadow;
-
-  .p-dropdown-header {
-    padding: $inputListHeaderPadding;
-    border-bottom: $inputListHeaderBorder;
-    color: $inputListHeaderTextColor;
-    background: $inputOverlayHeaderBg;
-    margin: $inputListHeaderMargin;
-    border-top-right-radius: $borderRadius;
-    border-top-left-radius: $borderRadius;
-
-    .p-dropdown-filter {
-      padding-right: list.nth($inputPadding, 2) + $primeIconFontSize;
-      margin-right: -1 * (list.nth($inputPadding, 2) + $primeIconFontSize);
-    }
-
-    .p-dropdown-filter-icon {
-      right: list.nth($inputPadding, 2);
-      color: $inputIconColor;
-    }
-  }
-
-  .p-dropdown-items {
-    padding: $inputListPadding;
-
-    .p-dropdown-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-dropdown-item-group {
-      margin: $submenuHeaderMargin;
-      padding: $submenuHeaderPadding;
-      color: $submenuHeaderTextColor;
-      background: $submenuHeaderBg;
-      font-weight: $submenuHeaderFontWeight;
-    }
-
-    .p-dropdown-empty-message {
-      padding: $inputListItemPadding;
-      color: $inputListItemTextColor;
-      background: $inputListItemBg;
-    }
-  }
-}
-
-.p-input-filled {
-  .p-dropdown {
-    background: $inputFilledBg;
-
-    &:not(.p-disabled):hover {
-      background-color: $inputFilledHoverBg;
-    }
-
-    &:not(.p-disabled).p-focus {
-      background-color: $inputFilledFocusBg;
-
-      .p-inputtext {
-        background-color: transparent;
-      }
-    }
-  }
-}

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

@@ -1,122 +0,0 @@
-.p-editor-container {
-  .p-editor-toolbar {
-    background: $editorToolbarBg;
-    border-top-right-radius: $borderRadius;
-    border-top-left-radius: $borderRadius;
-
-    &.ql-snow {
-      border: $editorToolbarBorder;
-
-      .ql-stroke {
-        stroke: $editorToolbarIconColor;
-      }
-
-      .ql-fill {
-        fill: $editorToolbarIconColor;
-      }
-
-      .ql-picker {
-        .ql-picker-label {
-          border: 0 none;
-          color: $editorToolbarIconColor;
-
-          &:hover {
-            color: $editorToolbarIconHoverColor;
-
-            .ql-stroke {
-              stroke: $editorToolbarIconHoverColor;
-            }
-
-            .ql-fill {
-              fill: $editorToolbarIconHoverColor;
-            }
-          }
-        }
-
-        &.ql-expanded {
-          .ql-picker-label {
-            color: $editorToolbarIconHoverColor;
-
-            .ql-stroke {
-              stroke: $editorToolbarIconHoverColor;
-            }
-
-            .ql-fill {
-              fill: $editorToolbarIconHoverColor;
-            }
-          }
-
-          .ql-picker-options {
-            background: $inputOverlayBg;
-            border: $inputOverlayBorder;
-            box-shadow: $inputOverlayShadow;
-            border-radius: $borderRadius;
-            padding: $inputListPadding;
-
-            .ql-picker-item {
-              color: $inputListItemTextColor;
-
-              &:hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
-              }
-            }
-          }
-
-          &:not(.ql-icon-picker) {
-            .ql-picker-item {
-              padding: $inputListItemPadding;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .p-editor-content {
-    border-bottom-right-radius: $borderRadius;
-    border-bottom-left-radius: $borderRadius;
-
-    &.ql-snow {
-      border: $editorContentBorder;
-    }
-
-    .ql-editor {
-      background: $inputBg;
-      color: $inputTextColor;
-      border-bottom-right-radius: $borderRadius;
-      border-bottom-left-radius: $borderRadius;
-    }
-  }
-
-  .ql-snow.ql-toolbar button:hover,
-  .ql-snow.ql-toolbar button:focus {
-    color: $editorToolbarIconHoverColor;
-
-    .ql-stroke {
-      stroke: $editorToolbarIconHoverColor;
-    }
-
-    .ql-fill {
-      fill: $editorToolbarIconHoverColor;
-    }
-  }
-
-  .ql-snow.ql-toolbar button.ql-active,
-  .ql-snow.ql-toolbar .ql-picker-label.ql-active,
-  .ql-snow.ql-toolbar .ql-picker-item.ql-selected {
-    color: $editorIconActiveColor;
-
-    .ql-stroke {
-      stroke: $editorIconActiveColor;
-    }
-
-    .ql-fill {
-      fill: $editorIconActiveColor;
-    }
-
-    .ql-picker-label {
-      color: $editorIconActiveColor;
-    }
-  }
-}

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

@@ -1,75 +0,0 @@
-.p-inputgroup-addon {
-  background: $inputGroupBg;
-  color: $inputGroupTextColor;
-  border-top: $inputBorder;
-  border-left: $inputBorder;
-  border-bottom: $inputBorder;
-  padding: $inputPadding;
-  min-width: $inputGroupAddOnMinWidth;
-
-  &:last-child {
-    border-right: $inputBorder;
-  }
-}
-
-.p-inputgroup {
-  > .p-component,
-  > .p-element,
-  > .p-inputwrapper > .p-component > .p-inputtext,
-  > .p-float-label > .p-component {
-    border-radius: 0;
-    margin: 0;
-
-    + .p-inputgroup-addon {
-      border-left: 0 none;
-    }
-
-    &:focus {
-      z-index: 1;
-
-      ~ label {
-        z-index: 1;
-      }
-    }
-  }
-}
-
-.p-inputgroup-addon:first-child,
-.p-inputgroup button:first-child,
-.p-inputgroup input:first-child,
-.p-inputgroup > .p-inputwrapper:first-child > .p-component,
-.p-inputgroup > .p-inputwrapper:first-child > .p-component > .p-inputtext {
-  border-top-left-radius: $borderRadius;
-  border-bottom-left-radius: $borderRadius;
-}
-
-.p-inputgroup .p-float-label:first-child input {
-  border-top-left-radius: $borderRadius;
-  border-bottom-left-radius: $borderRadius;
-}
-
-.p-inputgroup-addon:last-child,
-.p-inputgroup button:last-child,
-.p-inputgroup input:last-child,
-.p-inputgroup > .p-inputwrapper:last-child > .p-component,
-.p-inputgroup > .p-inputwrapper:last-child > .p-component > .p-inputtext {
-  border-top-right-radius: $borderRadius;
-  border-bottom-right-radius: $borderRadius;
-}
-
-.p-inputgroup .p-float-label:last-child input {
-  border-top-right-radius: $borderRadius;
-  border-bottom-right-radius: $borderRadius;
-}
-
-.p-fluid {
-  .p-inputgroup {
-    .p-button {
-      width: auto;
-
-      &.p-button-icon-only {
-        width: $buttonIconOnlyWidth;
-      }
-    }
-  }
-}

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

@@ -1,17 +0,0 @@
-@use 'sass:list';
-@use 'sass:math';
-
-p-inputmask.ng-dirty.ng-invalid > .p-inputtext {
-  @include invalid-input();
-}
-
-p-inputmask.p-inputmask-clearable {
-  .p-inputtext {
-    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
-  }
-
-  .p-inputmask-clear-icon {
-    color: $inputIconColor;
-    right: list.nth($inputPadding, 2);
-  }
-}

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

@@ -1,28 +0,0 @@
-@use 'sass:list';
-
-p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
-  @include invalid-input();
-}
-
-p-inputnumber.p-inputnumber-clearable {
-  .p-inputnumber-input {
-    padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
-  }
-
-  .p-inputnumber-clear-icon {
-    color: $inputIconColor;
-    right: list.nth($inputPadding, 2);
-  }
-
-  .p-inputnumber-buttons-stacked {
-    .p-inputnumber-clear-icon {
-      right: $buttonIconOnlyWidth + list.nth($inputPadding, 2);
-    }
-  }
-
-  .p-inputnumber-buttons-horizontal {
-    .p-inputnumber-clear-icon {
-      right: $buttonIconOnlyWidth + list.nth($inputPadding, 2);
-    }
-  }
-}

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

@@ -1,55 +0,0 @@
-@use 'sass:math';
-
-.p-inputswitch {
-  width: $inputSwitchWidth;
-  height: $inputSwitchHeight;
-
-  .p-inputswitch-slider {
-    background: $inputSwitchSliderOffBg;
-    transition: $formElementTransition;
-    border-radius: $inputSwitchBorderRadius;
-
-    &::before {
-      background: $inputSwitchHandleOffBg;
-      width: $inputSwitchHandleWidth;
-      height: $inputSwitchHandleHeight;
-      left: $inputSwitchSliderPadding;
-      margin-top: math.div(-1 * $inputSwitchHandleHeight, 2);
-      border-radius: $inputSwitchHandleBorderRadius;
-      transition-duration: $transitionDuration;
-    }
-  }
-
-  &.p-focus {
-    .p-inputswitch-slider {
-      @include focused();
-    }
-  }
-
-  &:not(.p-disabled):hover {
-    .p-inputswitch-slider {
-      background: $inputSwitchSliderOffHoverBg;
-    }
-  }
-
-  &.p-inputswitch-checked {
-    .p-inputswitch-slider {
-      background: $inputSwitchSliderOnBg;
-
-      &::before {
-        background: $inputSwitchHandleOnBg;
-        transform: translateX($inputSwitchHandleWidth);
-      }
-    }
-
-    &:not(.p-disabled):hover {
-      .p-inputswitch-slider {
-        background: $inputSwitchSliderOnHoverBg;
-      }
-    }
-  }
-}
-
-p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
-  @include invalid-input();
-}

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

@@ -1,102 +0,0 @@
-@use 'sass:list';
-
-.p-inputtext {
-  font-family: var(--font-family);
-  font-feature-settings: var(--font-feature-settings, normal);
-  font-size: $inputTextFontSize;
-  color: $inputTextColor;
-  background: $inputBg;
-  padding: $inputPadding;
-  border: $inputBorder;
-  transition: $formElementTransition;
-  appearance: none;
-  border-radius: $borderRadius;
-
-  &:enabled:hover {
-    border-color: $inputHoverBorderColor;
-  }
-
-  &:enabled:focus {
-    @include focused-input();
-  }
-
-  &.ng-dirty.ng-invalid {
-    @include invalid-input();
-  }
-
-  &.p-inputtext-sm {
-    @include scaledFontSize($inputTextFontSize, $scaleSM);
-    @include scaledPadding($inputPadding, $scaleSM);
-  }
-
-  &.p-inputtext-lg {
-    @include scaledFontSize($inputTextFontSize, $scaleLG);
-    @include scaledPadding($inputPadding, $scaleLG);
-  }
-}
-
-.p-float-label > label {
-  left: list.nth($inputPadding, 2);
-  color: $inputPlaceholderTextColor;
-  transition-duration: $transitionDuration;
-}
-
-.p-float-label > .ng-invalid.ng-dirty + label {
-  color: $inputErrorBorderColor;
-}
-
-.p-input-icon-left > .p-icon-wrapper.p-icon,
-.p-input-icon-left > i:first-of-type {
-  left: list.nth($inputPadding, 2);
-  color: $inputIconColor;
-}
-
-.p-input-icon-left > .p-inputtext {
-  padding-left: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
-}
-
-.p-input-icon-left.p-float-label > label {
-  left: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
-}
-
-.p-input-icon-right > .p-icon-wrapper,
-.p-input-icon-right > i:last-of-type {
-  right: list.nth($inputPadding, 2);
-  color: $inputIconColor;
-}
-
-.p-input-icon-right > .p-inputtext {
-  padding-right: list.nth($inputPadding, 2) * 2 + $primeIconFontSize;
-}
-
-@include placeholder {
-  color: $inputPlaceholderTextColor;
-}
-
-.p-input-filled {
-  .p-inputtext {
-    background-color: $inputFilledBg;
-
-    &:enabled:hover {
-      background-color: $inputFilledHoverBg;
-    }
-
-    &:enabled:focus {
-      background-color: $inputFilledFocusBg;
-    }
-  }
-}
-
-.p-inputtext-sm {
-  .p-inputtext {
-    @include scaledFontSize($inputTextFontSize, $scaleSM);
-    @include scaledPadding($inputPadding, $scaleSM);
-  }
-}
-
-.p-inputtext-lg {
-  .p-inputtext {
-    @include scaledFontSize($inputTextFontSize, $scaleLG);
-    @include scaledPadding($inputPadding, $scaleLG);
-  }
-}