@mediusinc/mng-commons 3.6.0 → 4.0.0-rc.1

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

@@ -24,14 +24,12 @@
     }
 
     &.p-multiselect-chip {
-        .p-multiselect-label {
-            gap: $inlineSpacing;
-        }
         .p-multiselect-token {
             padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
-            background: $highlightBg;
-            color: $highlightTextColor;
-            border-radius: $borderRadius;
+            margin-right: $inlineSpacing;
+            background: $chipBg;
+            color: $chipTextColor;
+            border-radius: $chipBorderRadius;
 
             .p-multiselect-token-icon {
                 margin-left: $inlineSpacing;
@@ -49,7 +47,7 @@
 }
 
 .p-inputwrapper-filled {
-    .p-multiselect {
+    &.p-multiselect {
         &.p-multiselect-chip {
             .p-multiselect-label {
                 padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
@@ -58,6 +56,17 @@
     }
 }
 
+.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;
@@ -110,15 +119,22 @@
             &.p-highlight {
                 color: $highlightTextColor;
                 background: $highlightBg;
-            }
 
-            &:not(.p-highlight):not(.p-disabled):hover {
-                color: $inputListItemTextHoverColor;
-                background: $inputListItemHoverBg;
+                &.p-focus {
+                    background: $highlightFocusBg;
+                }
             }
 
-            &:focus {
-                @include focused-listitem();
+            &:not(.p-highlight):not(.p-disabled) {
+                &.p-focus {
+                    color: $inputListItemTextFocusColor;
+                    background: $inputListItemFocusBg;
+                }
+
+                &:hover {
+                    color: $inputListItemTextHoverColor;
+                    background: $inputListItemHoverBg;
+                }
             }
 
             .p-checkbox {
@@ -126,7 +142,6 @@
             }
         }
 
-
         .p-multiselect-item-group {
             margin: $submenuHeaderMargin;
             padding: $submenuHeaderPadding;
@@ -143,10 +158,6 @@
     }
 }
 
-p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
-    @include invalid-input();
-}
-
 .p-input-filled {
     .p-multiselect {
         background: $inputFilledBg;
@@ -161,13 +172,6 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
     }
 }
 
-p-multiselect.p-multiselect-clearable {
-    .p-multiselect-label-container {
-        padding-right: nth($inputPadding, 2) + $primeIconFontSize;
-    }
-
-    .p-multiselect-clear-icon {
-        color: $inputIconColor;
-        right: $inputGroupAddOnMinWidth;
-    }
+p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
+    @include invalid-input();
 }

package/scss/v2/theme/theme-base/components/input/_radiobutton.scss

@@ -54,7 +54,7 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
 
             &.p-highlight {
                 background: $radiobuttonActiveBg;
-    
+
                 &:not(.p-disabled):hover {
                     background: $radiobuttonActiveHoverBg;
                 }
@@ -75,4 +75,4 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
             }
         }
     }
-}
+}

package/scss/v2/theme/theme-base/components/input/_rating.scss

@@ -1,43 +1,44 @@
+@use 'sass:math';
+
 .p-rating {
     gap: $inlineSpacing;
-    
-    .p-rating-icon {
-        color: $ratingStarIconOffColor;
-        margin-left: $inlineSpacing;
-        transition: $formElementTransition;
-        font-size: $ratingIconFontSize;
-
-        &.p-icon {
-            width: $ratingIconFontSize;
-            height: $ratingIconFontSize;   
-        }
 
-        &.p-rating-cancel {
-            color: $ratingCancelIconColor;
-        }
+    .p-rating-item {
+        .p-rating-icon {
+            color: $ratingStarIconOffColor;
+            transition: $formElementTransition;
+            font-size: $ratingIconFontSize;
 
-        &:focus {
-            @include focused();
+            &.p-icon {
+                width: $ratingIconFontSize;
+                height: $ratingIconFontSize;
+            }
+
+            &.p-rating-cancel {
+                color: $ratingCancelIconColor;
+            }
         }
 
-        &:first-child {
-            margin-left: 0;
+        &.p-focus {
+            @include focused-input();
         }
 
-        &.p-rating-icon-active {
-            color: $ratingStarIconOnColor;
+        &.p-rating-item-active {
+            .p-rating-icon {
+                color: $ratingStarIconOnColor;
+            }
         }
     }
 
     &:not(.p-disabled):not(.p-readonly) {
-        .p-rating-icon {
+        .p-rating-item {
             &:hover {
-                color: $ratingStarIconHoverColor;
-            }
+                .p-rating-icon {
+                    color: $ratingStarIconHoverColor;
 
-            &.p-rating-cancel {
-                &:hover {
-                    color: $ratingCancelIconHoverColor;
+                    &.p-rating-cancel {
+                        color: $ratingCancelIconHoverColor;
+                    }
                 }
             }
         }
@@ -47,8 +48,12 @@
 @if ($highlightBg == $ratingStarIconOnColor) {
     .p-highlight {
         .p-rating {
-            .p-rating-icon {
-                color: $highlightTextColor;
+            .p-rating-item {
+                &.p-rating-item-active {
+                    .p-rating-icon {
+                        color: $highlightTextColor;
+                    }
+                }
             }
         }
     }

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

@@ -78,17 +78,17 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
             .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;
                 }
@@ -99,7 +99,7 @@ p-treeselect.ng-invalid.ng-dirty > .p-treeselect {
             @include action-icon();
         }
     }
-    
+
     .p-treeselect-items-wrapper {
         .p-tree {
             border: 0 none;
@@ -131,9 +131,9 @@ p-treeselect.p-treeselect-clearable {
     .p-treeselect-label-container {
         padding-right: nth($inputPadding, 2) + $primeIconFontSize;
     }
-    
+
     .p-treeselect-clear-icon {
         color: $inputIconColor;
         right: $buttonIconOnlyWidth;
     }
-}
+}

package/scss/v2/theme/theme-base/components/menu/_breadcrumb.scss

@@ -4,13 +4,13 @@
     border-radius: $borderRadius;
     padding: $breadcrumbPadding;
 
-    ul {
+    .p-breadcrumb-list {
         li {
             .p-menuitem-link {
                 transition: $listItemTransition;
                 border-radius: $borderRadius;
 
-                &:focus {
+                &:focus-visible {
                     @include focused();
                 }
 
@@ -23,7 +23,7 @@
                 }
             }
 
-            &.p-breadcrumb-chevron {
+            &.p-menuitem-separator {
                 margin: 0 $inlineSpacing 0 $inlineSpacing;
                 color: $breadcrumbSeparatorColor;
             }

package/scss/v2/theme/theme-base/components/menu/_contextmenu.scss

@@ -7,8 +7,8 @@
     border-radius: $borderRadius;
     width: $menuWidth;
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    .p-contextmenu-root-list {
+        outline: 0 none;
     }
 
     .p-submenu-list {
@@ -20,42 +20,20 @@
     }
 
     .p-menuitem {
-        margin: $verticalMenuitemMargin;
-    
-        &:last-child {
-            margin: 0;
-        }
-
-        &.p-menuitem-active {
-            > .p-menuitem-link {
-                background: $menuitemActiveBg;
-
-                .p-menuitem-text {
-                    color: $menuitemTextActiveColor;
-                }
-
-                .p-menuitem-icon, .p-submenu-icon {
-                    color: $menuitemIconActiveColor;
-                }
-            }
-        }
+        @include menuitem();
     }
 
-    .p-menu-separator {
+    .p-menuitem-separator {
         border-top: $divider;
         margin: $menuSeparatorMargin;
     }
 
     .p-submenu-icon {
         font-size: $menuitemSubmenuIconFontSize;
-    }
-
-    .p-icon {
-        width: $menuitemSubmenuIconFontSize;
-        height: $menuitemSubmenuIconFontSize;
-    }
 
-    .p-menuitem-badge {
-        @include menuitem-badge();
+        &.p-icon {
+            width: $menuitemSubmenuIconFontSize;
+            height: $menuitemSubmenuIconFontSize;
+        }
     }
 }

package/scss/v2/theme/theme-base/components/menu/_dock.scss

@@ -1,16 +1,25 @@
 .p-dock {
-    .p-dock-list {
+    .p-dock-list-container {
         background: $dockBg;
         border: $dockBorder;
         padding: $dockPadding;
         border-radius: $dockBorderRadius;
+
+        .p-dock-list {
+            outline: 0 none;
+        }
     }
 
     .p-dock-item {
         padding: $dockItemPadding;
+        border-radius: $dockItemBorderRadius;
+
+        &.p-focus {
+            @include focused-listitem();
+        }
     }
 
-    .p-dock-action {
+    .p-dock-link {
         width: $dockActionWidth;
         height: $dockActionHeight;
     }

package/scss/v2/theme/theme-base/components/menu/_megamenu.scss

@@ -5,35 +5,12 @@
     border: $horizontalMenuBorder;
     border-radius: $borderRadius;
 
-    .p-megamenu-root-list {  
-        > .p-menuitem {
-            > .p-menuitem-link {
-                @include horizontal-rootmenuitem-link();
-            }
-
-            &.p-menuitem-active {
-                > .p-menuitem-link,
-                > .p-menuitem-link:not(.p-disabled):hover {
-                    background: $horizontalMenuRootMenuitemActiveBg;
-            
-                    .p-menuitem-text {
-                        color: $horizontalMenuRootMenuitemTextActiveColor;
-                    }
-            
-                    .p-menuitem-icon {
-                        color: $horizontalMenuRootMenuitemIconActiveColor;
-                    }
-                    
-                    .p-submenu-icon {
-                        color: $horizontalMenuRootMenuitemIconActiveColor;
-                    }
-                }
-            }
-        }
+    .p-megamenu-root-list {
+        outline: 0 none;
     }
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    .p-menuitem {
+        @include menuitem();
     }
 
     .p-megamenu-panel {
@@ -43,64 +20,36 @@
         box-shadow: $overlayMenuShadow;
     }
 
-    .p-megamenu-submenu-header {
+    .p-submenu-header {
         margin: $submenuHeaderMargin;
         padding: $submenuHeaderPadding;
         color: $submenuHeaderTextColor;
         background: $submenuHeaderBg;
         font-weight: $submenuHeaderFontWeight;
-        border-top-right-radius: $borderRadius; 
-        border-top-left-radius: $borderRadius; 
+        border-top-right-radius: $borderRadius;
+        border-top-left-radius: $borderRadius;
     }
 
-    .p-megamenu-submenu {
+    .p-submenu-list {
         padding: $verticalMenuPadding;
         width: $menuWidth;
 
-        .p-menu-separator {
+        .p-menuitem-separator {
             border-top: $divider;
             margin: $menuSeparatorMargin;
         }
-
-        .p-menuitem {
-            margin: $verticalMenuitemMargin;
-    
-            &:last-child {
-                margin: 0;
-            }
-        }
-    }
-
-    .p-menuitem {
-        &.p-menuitem-active {
-            > .p-menuitem-link {
-                background: $menuitemActiveBg;
-
-                .p-menuitem-text {
-                    color: $menuitemTextActiveColor;
-                }
-
-                .p-menuitem-icon, .p-submenu-icon {
-                    color: $menuitemIconActiveColor;
-                }
-            }
-        }
     }
 
     &.p-megamenu-vertical {
         width: $menuWidth;
         padding: $verticalMenuPadding;
+    }
 
-        .p-menuitem {
-            margin: $verticalMenuitemMargin;
-    
-            &:last-child {
-                margin: 0;
+    &.p-megamenu-horizontal {
+        .p-megamenu-root-list {
+            > .p-menuitem {
+                @include horizontal-rootmenuitem();
             }
         }
     }
-
-    .p-menuitem-badge {
-        @include menuitem-badge();
-    }
 }

package/scss/v2/theme/theme-base/components/menu/_menu.scss

@@ -6,8 +6,8 @@
     border-radius: $borderRadius;
     width: $menuWidth;
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    .p-menuitem {
+        @include menuitem();
     }
 
     &.p-menu-overlay {
@@ -22,23 +22,15 @@
         color: $submenuHeaderTextColor;
         background: $submenuHeaderBg;
         font-weight: $submenuHeaderFontWeight;
-        border-top-right-radius: $submenuHeaderBorderRadius; 
-        border-top-left-radius: $submenuHeaderBorderRadius; 
+        border-top-right-radius: $submenuHeaderBorderRadius;
+        border-top-left-radius: $submenuHeaderBorderRadius;
     }
 
-    .p-menu-separator {
+    .p-menuitem-separator {
         border-top: $divider;
         margin: $menuSeparatorMargin;
     }
 
-    .p-menuitem {
-        margin: $verticalMenuitemMargin;
-
-        &:last-child {
-            margin: 0;
-        }
-    }
-
     .p-menuitem-badge {
         @include menuitem-badge();
     }

package/scss/v2/theme/theme-base/components/menu/_menubar.scss

@@ -5,37 +5,18 @@
     border: $horizontalMenuBorder;
     border-radius: $borderRadius;
 
-    .p-menuitem-link {
-        @include menuitem-link();
-    }
-
     .p-menubar-root-list {
-        > .p-menuitem {
-            > .p-menuitem-link {
-                @include horizontal-rootmenuitem-link();
-            }
+        outline: 0 none;
 
-            &.p-menuitem-active {
-                > .p-menuitem-link,
-                > .p-menuitem-link:not(.p-disabled):hover {
-                    background: $horizontalMenuRootMenuitemActiveBg;
-            
-                    .p-menuitem-text {
-                        color: $horizontalMenuRootMenuitemTextActiveColor;
-                    }
-            
-                    .p-menuitem-icon {
-                        color: $horizontalMenuRootMenuitemIconActiveColor;
-                    }
-                    
-                    .p-submenu-icon {
-                        color: $horizontalMenuRootMenuitemIconActiveColor;
-                    }
-                }
-            }
+        > .p-menuitem {
+            @include horizontal-rootmenuitem();
         }
     }
 
+    .p-menuitem {
+        @include menuitem();
+    }
+
     .p-submenu-list {
         padding: $verticalMenuPadding;
         background: $overlayMenuBg;
@@ -43,7 +24,7 @@
         box-shadow: $overlayMenuShadow;
         width: $menuWidth;
 
-        .p-menu-separator {
+        .p-menuitem-separator {
             border-top: $divider;
             margin: $menuSeparatorMargin;
         }
@@ -51,39 +32,6 @@
         .p-submenu-icon {
             font-size: $menuitemSubmenuIconFontSize;
         }
-
-        .p-icon {
-            width: $menuitemSubmenuIconFontSize;
-            height: $menuitemSubmenuIconFontSize;
-        }
-
-        .p-menuitem {
-            margin: $verticalMenuitemMargin;
-    
-            &:last-child {
-                margin: 0;
-            }
-        }
-    }
-
-    .p-menuitem {
-        &.p-menuitem-active {
-            > .p-menuitem-link {
-                background: $menuitemActiveBg;
-
-                .p-menuitem-text {
-                    color: $menuitemTextActiveColor;
-                }
-
-                .p-menuitem-icon, .p-submenu-icon {
-                    color: $menuitemIconActiveColor;
-                }
-            }
-        }
-    }
-
-    .p-menuitem-badge {
-        @include menuitem-badge();
     }
 }
 
@@ -98,12 +46,12 @@
             color: $horizontalMenuRootMenuitemIconColor;
             border-radius: $actionIconBorderRadius;
             transition: $actionIconTransition;
-        
+
             &:hover {
                 color: $horizontalMenuRootMenuitemIconHoverColor;
                 background: $horizontalMenuRootMenuitemHoverBg;
             }
-        
+
             &:focus {
                 @include focused();
             }
@@ -117,33 +65,35 @@
             border: $overlayMenuBorder;
             box-shadow: $overlayMenuShadow;
             width: 100%;
-    
-            .p-menu-separator {
+
+            .p-menuitem-separator {
                 border-top: $divider;
                 margin: $menuSeparatorMargin;
             }
-    
+
             .p-submenu-icon {
                 font-size: $menuitemSubmenuIconFontSize;
             }
 
-            > .p-menuitem {
+            .p-menuitem {
                 width: 100%;
                 position: static;
 
-                > .p-menuitem-link {
-                    @include menuitem-link();
-
-                    > .p-submenu-icon {
-                        margin-left: auto;
-                        transition: transform $transitionDuration;
+                .p-menuitem-content {
+                    .p-menuitem-link {
+                        .p-submenu-icon {
+                            margin-left: auto;
+                            transition: transform $transitionDuration;
+                        }
                     }
                 }
 
                 &.p-menuitem-active {
-                    > .p-menuitem-link {
-                        > .p-submenu-icon {
-                            transform: rotate(-180deg);
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-180deg);
+                            }
                         }
                     }
                 }
@@ -161,14 +111,16 @@
                 }
 
                 .p-menuitem-active {
-                    > .p-menuitem-link {
-                        > .p-submenu-icon {
-                            transform: rotate(-90deg);
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-90deg);
+                            }
                         }
                     }
                 }
             }
-    
+
             .p-menuitem {
                 width: 100%;
                 position: static;
@@ -185,4 +137,4 @@
             z-index: 1;
         }
     }
-}
+}