Fixed #13 - Add new mixin, update menubar classes and focus

primefaces · Jul 5, 2023 · e3e05cf · e3e05cf
1 parent 561f69d
commit e3e05cf
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 74 deletions.
diff --git a/theme-base/_mixins.scss b/theme-base/_mixins.scss
@@ -200,6 +200,52 @@
 	}
 }
 
+@mixin horizontal-rootmenuitem {
+    > .p-menuitem-content {
+        color: $horizontalMenuRootMenuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+        .p-menuitem-link {
+            padding: $horizontalMenuRootMenuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $horizontalMenuRootMenuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        > .p-menuitem-content {
+            &:hover {
+                color: $horizontalMenuRootMenuitemTextHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
 @mixin placeholder {
 	::-webkit-input-placeholder {
 		@content

diff --git a/theme-base/components/menu/_menubar.scss b/theme-base/components/menu/_menubar.scss
@@ -5,85 +5,33 @@
     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;
         border: $overlayMenuBorder;
         box-shadow: $overlayMenuShadow;
         width: $menuWidth;
 
-        .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 {
-            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();
     }
 }
 
@@ -118,7 +66,7 @@
             box-shadow: $overlayMenuShadow;
             width: 100%;
 
-            .p-menu-separator {
+            .p-menuitem-separator {
                 border-top: $divider;
                 margin: $menuSeparatorMargin;
             }
@@ -127,23 +75,26 @@
                 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,9 +112,11 @@
                 }
 
                 .p-menuitem-active {
-                    > .p-menuitem-link {
-                        > .p-submenu-icon {
-                            transform: rotate(-90deg);
+                    > .p-menuitem-content {
+                        > .p-menuitem-link {
+                            > .p-submenu-icon {
+                                transform: rotate(-90deg);
+                            }
                         }
                     }
                 }