@mediusinc/mng-commons-layout 6.0.0-rc.4 → 6.0.0-rc.6

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

@@ -1,177 +0,0 @@
-@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(nth($inputPadding, 1), 2) 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(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            }
-        }
-    }
-}
-
-.p-multiselect-clearable {
-    .p-multiselect-label-container {
-        padding-right: 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: nth($inputPadding, 2) + $primeIconFontSize;
-            }
-
-            .p-multiselect-filter-icon {
-                right: 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/scss/theme/theme-base/components/input/_password.scss

@@ -1,52 +0,0 @@
-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: nth($inputPadding, 2) * 2 + $primeIconFontSize;
-    }
-    .p-password-clear-icon {
-        color: $inputIconColor;
-        right: nth($inputPadding, 2);
-    }
-}
-
-p-password.p-password-clearable.p-password-mask {
-    .p-password-input {
-        padding-right: nth($inputPadding, 2) * 3 + $primeIconFontSize * 2;
-    }
-
-    .p-password-clear-icon {
-        color: $inputIconColor;
-        right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
-    }
-}

package/scss/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/scss/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/scss/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/scss/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/scss/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();
-}

package/scss/theme/theme-base/components/input/_treeselect.scss

@@ -1,139 +0,0 @@
-@use 'sass:math';
-
-.p-treeselect {
-    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-treeselect-label {
-        padding: $inputPadding;
-        transition: $formElementTransition;
-
-        &.p-placeholder {
-            color: $inputPlaceholderTextColor;
-        }
-    }
-
-    &.p-treeselect-chip {
-        .p-treeselect-token {
-            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            margin-right: $inlineSpacing;
-            background: $chipBg;
-            color: $chipTextColor;
-            border-radius: $chipBorderRadius;
-        }
-    }
-
-    .p-treeselect-trigger {
-        background: transparent;
-        color: $inputIconColor;
-        width: $inputGroupAddOnMinWidth;
-        border-top-right-radius: $borderRadius;
-        border-bottom-right-radius: $borderRadius;
-    }
-}
-
-p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
-    @include invalid-input();
-}
-
-.p-inputwrapper-filled {
-    .p-treeselect {
-        &.p-treeselect-chip {
-            .p-treeselect-label {
-                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            }
-        }
-    }
-}
-
-.p-treeselect-panel {
-    background: $inputOverlayBg;
-    color: $inputListTextColor;
-    border: $inputOverlayBorder;
-    border-radius: $borderRadius;
-    box-shadow: $inputOverlayShadow;
-
-    .p-treeselect-header {
-        padding: $inputListHeaderPadding;
-        border-bottom: $inputListHeaderBorder;
-        color: $inputListHeaderTextColor;
-        background: $inputOverlayHeaderBg;
-        margin: $inputListHeaderMargin;
-        border-top-right-radius: $borderRadius;
-        border-top-left-radius: $borderRadius;
-
-        .p-treeselect-filter-container {
-            margin-right: $inlineSpacing;
-
-            .p-treeselect-filter {
-                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-            }
-
-            .p-treeselect-filter-icon {
-                right: nth($inputPadding, 2);
-                color: $inputIconColor;
-            }
-
-            &.p-treeselect-clearable-filter {
-                .p-treeselect-filter {
-                    padding-right: 2 * (nth($inputPadding, 2) + $primeIconFontSize);
-                }
-
-                .p-treeselect-filter-clear-icon {
-                    right: (2 * nth($inputPadding, 2)) + $primeIconFontSize;
-                }
-            }
-        }
-
-        .p-treeselect-close {
-            @include action-icon();
-        }
-    }
-
-    .p-treeselect-items-wrapper {
-        .p-tree {
-            border: 0 none;
-        }
-
-        .p-treeselect-empty-message {
-            padding: $inputListItemPadding;
-            color: $inputListItemTextColor;
-            background: $inputListItemBg;
-        }
-    }
-}
-
-.p-input-filled {
-    .p-treeselect {
-        background: $inputFilledBg;
-
-        &:not(.p-disabled):hover {
-            background-color: $inputFilledHoverBg;
-        }
-
-        &:not(.p-disabled).p-focus {
-            background-color: $inputFilledFocusBg;
-        }
-    }
-}
-
-p-treeselect.p-treeselect-clearable {
-    .p-treeselect-label-container {
-        padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-    }
-
-    .p-treeselect-clear-icon {
-        color: $inputIconColor;
-        right: $buttonIconOnlyWidth;
-    }
-}