@aziontech/theme 2.6.0 → 4.0.0

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

@@ -1,166 +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-invalid.p-component {
-        @include invalid-input();
-    }
-}
-
-.p-inputwrapper-filled {
-    &.p-multiselect {
-        &.p-multiselect-chip {
-            .p-multiselect-label {
-                padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            }
-        }
-    }
-}
-
-.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;
-        }
-    }
-}

package/src/azion/theme-base/components/input/_password.scss

@@ -1,33 +0,0 @@
-.p-password {
-    &.p-invalid.p-component > .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;
-            }
-        }
-    }
-}

package/src/azion/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-invalid > .p-radiobutton-box {
-        @include invalid-input();
-    }
-
-    &:focus {
-        outline: 0 none;
-    }
-}
-
-.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;
-                }
-            }
-        }
-    }
-}
-
-@if ($highlightBg == $radiobuttonActiveBg) {
-    .p-highlight {
-        .p-radiobutton {
-            .p-radiobutton-box {
-                border-color: $radiobuttonIconActiveColor;
-            }
-        }
-    }
-}

package/src/azion/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/src/azion/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-invalid > .p-button {
-        @include invalid-input();
-    }
-}

package/src/azion/theme-base/components/input/_slider.scss

@@ -1,49 +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;
-        }
-    }
-}

package/src/azion/theme-base/components/input/_togglebutton.scss

@@ -1,52 +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).p-focus {
-        @include focused-input();
-    }
-
-    &: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-invalid > .p-button {
-        @include invalid-input();
-    }
-}

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

@@ -1,91 +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-invalid.p-component {
-        @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-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;
-        }
-    }
-}

package/src/azion/theme-base/components/menu/_breadcrumb.scss

@@ -1,42 +0,0 @@
-.p-breadcrumb {
-    background: $breadcrumbBg;
-    border: $breadcrumbBorder;
-    border-radius: $borderRadius;
-    padding: $breadcrumbPadding;
-
-    .p-breadcrumb-list {
-        li {
-            .p-menuitem-link {
-                transition: $listItemTransition;
-                border-radius: $borderRadius;
-
-                &:focus-visible {
-                    @include focused();
-                }
-
-                .p-menuitem-text {
-                    color: $breadcrumbItemTextColor;
-                }
-
-                .p-menuitem-icon {
-                    color: $breadcrumbItemIconColor;
-                }
-            }
-
-            &.p-menuitem-separator {
-                margin: 0 $inlineSpacing 0 $inlineSpacing;
-                color: $breadcrumbSeparatorColor;
-            }
-
-            &:last-child {
-                .p-menuitem-text {
-                    color: $breadcrumbLastItemTextColor;
-                }
-
-                .p-menuitem-icon {
-                    color: $breadcrumbLastItemIconColor;
-                }
-            }
-        }
-    }
-}

package/src/azion/theme-base/components/menu/_contextmenu.scss

@@ -1,39 +0,0 @@
-.p-contextmenu {
-    padding: $verticalMenuPadding;
-    background: $overlayMenuBg;
-    color: $menuTextColor;
-    border: $overlayMenuBorder;
-    box-shadow: $overlayMenuShadow;
-    border-radius: $borderRadius;
-    width: $menuWidth;
-
-    .p-contextmenu-root-list {
-        outline: 0 none;
-    }
-
-    .p-submenu-list {
-        padding: $verticalMenuPadding;
-        background: $overlayMenuBg;
-        border: $overlayMenuBorder;
-        box-shadow: $overlayMenuShadow;
-        border-radius: $borderRadius;
-    }
-
-    .p-menuitem {
-        @include menuitem();
-    }
-
-    .p-menuitem-separator {
-        border-top: $divider;
-        margin: $menuSeparatorMargin;
-    }
-
-    .p-submenu-icon {
-        font-size: $menuitemSubmenuIconFontSize;
-
-        &.p-icon {
-            width: $menuitemSubmenuIconFontSize;
-            height: $menuitemSubmenuIconFontSize;
-        }
-    }
-}