Fixed #11 - Add menuItemActiveFocusBg

primefaces · Jun 26, 2023 · 66e573e · 66e573e
1 parent e7ce013
commit 66e573e
Show file tree

Hide file tree

Showing 23 changed files with 125 additions and 8 deletions.
diff --git a/theme-base/_mixins.scss b/theme-base/_mixins.scss
@@ -72,6 +72,92 @@
 	}
 }
 
+@mixin menuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon, .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: $menuitemFocusBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon, .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
 @mixin horizontal-rootmenuitem-link {
 	padding: $horizontalMenuRootMenuitemPadding;
 	color: $horizontalMenuRootMenuitemTextColor;

diff --git a/theme-base/components/menu/_menu.scss b/theme-base/components/menu/_menu.scss
@@ -6,8 +6,12 @@
     border-radius: $borderRadius;
     width: $menuWidth;
 
-    .p-menuitem-link {
-        @include menuitem-link();
+    // .p-menuitem-link {
+    //     @include menuitem-link();
+    // }
+
+    .p-menuitem {
+        @include menuitem();
     }
 
     &.p-menu-overlay {
@@ -31,13 +35,13 @@
         margin: $menuSeparatorMargin;
     }
 
-    .p-menuitem {
-        margin: $verticalMenuitemMargin;
+    // .p-menuitem {
+    //     margin: $verticalMenuitemMargin;
 
-        &:last-child {
-            margin: 0;
-        }
-    }
+    //     &:last-child {
+    //         margin: 0;
+    //     }
+    // }
 
     .p-menuitem-badge {
         @include menuitem-badge();

diff --git a/themes/arya/_variables.scss b/themes/arya/_variables.scss
@@ -650,6 +650,7 @@ $menuitemHoverBg:$hoverBg !default;
 $menuitemTextActiveColor:$shade000 !default;
 $menuitemIconActiveColor:$shade000 !default;
 $menuitemActiveBg:$hoverBg !default;
+$menuitemActiveFocusBg:$hoverBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss b/themes/bootstrap4/bootstrap4-dark/_variables_dark.scss
@@ -652,6 +652,7 @@ $menuitemHoverBg:$hoverBg !default;
 $menuitemTextActiveColor:$shade000 !default;
 $menuitemIconActiveColor:$shade000 !default;
 $menuitemActiveBg:$shade900 !default;
+$menuitemActiveFocusBg:$shade900 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/bootstrap4/bootstrap4-light/_variables_light.scss b/themes/bootstrap4/bootstrap4-light/_variables_light.scss
@@ -652,6 +652,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$shade900 !default;
 $menuitemIconActiveColor:$shade900 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/fluent/fluent-light/_variables.scss b/themes/fluent/fluent-light/_variables.scss
@@ -60,6 +60,7 @@ $errorColor:#a4252c !default;
 //highlight
 $highlightBg: $neutralLight !default;
 $highlightTextColor: $neutralPrimary !default;
+$highlightFocusBg: $neutralQuaternaryAlt !default;
 
 //scale
 $scaleSM:0.875 !default;
@@ -670,6 +671,7 @@ $menuitemHoverBg:$neutralLighter !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$themePrimary !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem .5rem !default;

diff --git a/themes/lara/lara-dark/_variables.scss b/themes/lara/lara-dark/_variables.scss
@@ -651,6 +651,7 @@ $menuitemHoverBg:$hoverBg !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$highlightTextColor !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1.25rem !default;

diff --git a/themes/lara/lara-light/_variables.scss b/themes/lara/lara-light/_variables.scss
@@ -653,6 +653,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$highlightTextColor !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1.25rem !default;

diff --git a/themes/luna/_variables.scss b/themes/luna/_variables.scss
@@ -640,6 +640,7 @@ $menuitemHoverBg: #4c4c4c !default;
 $menuitemTextActiveColor: $primaryTextColor !default;
 $menuitemIconActiveColor: $primaryTextColor !default;
 $menuitemActiveBg: $primaryColor !default;
+$menuitemActiveFocusBg: $primaryColor !default;
 $menuitemSubmenuIconFontSize: .875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.857rem !default;

diff --git a/themes/material/material-dark/_variables.scss b/themes/material/material-dark/_variables.scss
@@ -649,6 +649,7 @@ $menuitemHoverBg:rgba(255,255,255,.04) !default;
 $menuitemTextActiveColor:$textColor !default;
 $menuitemIconActiveColor:$textSecondaryColor !default;
 $menuitemActiveBg:rgba(255,255,255,.04) !default;
+$menuitemActiveFocusBg:rgba(255,255,255,.04) !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:1rem !default;

diff --git a/themes/material/material-light/_variables.scss b/themes/material/material-light/_variables.scss
@@ -649,6 +649,7 @@ $menuitemHoverBg:rgba(0,0,0,.04) !default;
 $menuitemTextActiveColor:$textColor !default;
 $menuitemIconActiveColor:$textSecondaryColor !default;
 $menuitemActiveBg:rgba(0,0,0,.04) !default;
+$menuitemActiveFocusBg:rgba(0,0,0,.04) !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:1rem !default;

diff --git a/themes/mira/_variables.scss b/themes/mira/_variables.scss
@@ -675,6 +675,7 @@ $menuitemHoverBg:$white !default;
 $menuitemTextActiveColor:$black100 !default;
 $menuitemIconActiveColor:$primaryColorAlt !default;
 $menuitemActiveBg:$white !default;
+$menuitemActiveFocusBg:$white !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/mytheme/variables/_menu.scss b/themes/mytheme/variables/_menu.scss
@@ -90,6 +90,10 @@ $menuitemIconActiveColor: $textSecondaryColor;
 /// @group menu
 $menuitemActiveBg: #e9ecef;
 
+/// Background of a menuitem in active and focus states
+/// @group menu
+$menuitemActiveFocusBg: #e9ecef;
+
 /// Font size of an icon indicating the itrem has a submenu
 /// @group menu
 $menuitemSubmenuIconFontSize: .875rem;

diff --git a/themes/nano/_variables.scss b/themes/nano/_variables.scss
@@ -662,6 +662,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$shade700 !default;
 $menuitemIconActiveColor:$shade600 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.25rem .5rem !default;

diff --git a/themes/nova/_variables.scss b/themes/nova/_variables.scss
@@ -640,6 +640,7 @@ $menuitemHoverBg: #eaeaea !default;
 $menuitemTextActiveColor: $textColor !default;
 $menuitemIconActiveColor: $textColor !default;
 $menuitemActiveBg: #eaeaea !default;
+$menuitemActiveFocusBg: #eaeaea !default;
 $menuitemSubmenuIconFontSize: .875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.857rem !default;

diff --git a/themes/rhea/_variables.scss b/themes/rhea/_variables.scss
@@ -651,6 +651,7 @@ $menuitemHoverBg: #eaeaea !default;
 $menuitemTextActiveColor: $textColor !default;
 $menuitemIconActiveColor: $textColor !default;
 $menuitemActiveBg: #eaeaea !default;
+$menuitemActiveFocusBg: #eaeaea !default;
 $menuitemSubmenuIconFontSize: .875rem !default;
 $submenuHeaderMargin: 0 !default;
 $submenuHeaderPadding: 0.857rem !default;

diff --git a/themes/saga/_variables.scss b/themes/saga/_variables.scss
@@ -653,6 +653,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$shade700 !default;
 $menuitemIconActiveColor:$shade600 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/soho/soho-dark/_variables.scss b/themes/soho/soho-dark/_variables.scss
@@ -6,6 +6,7 @@ $primaryTextColor: hsl(234, 15%, 13%) !default;
 
 $highlightBg:rgba(177, 157, 247, .16) !default;
 $highlightTextColor:$primaryColor !default;
+$highlightFocusBg: rgba($primaryColor, .24) !default;
 
 $colors: (
     "blue": #54B0F3,
@@ -659,6 +660,7 @@ $menuitemHoverBg:$hoverBg !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$highlightTextColor !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1.25rem !default;

diff --git a/themes/soho/soho-light/_variables.scss b/themes/soho/soho-light/_variables.scss
@@ -6,6 +6,7 @@ $primaryTextColor: #ffffff !default;
 
 $highlightBg: #e2dcfc !default;
 $highlightTextColor: #7254f3 !default;
+$highlightFocusBg: darken($highlightBg, 6%) !default;
 
 $colors: (
     "blue": #54B0F3,
@@ -662,6 +663,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$highlightTextColor !default;
 $menuitemIconActiveColor:$highlightTextColor !default;
 $menuitemActiveBg:$highlightBg !default;
+$menuitemActiveFocusBg:$highlightFocusBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1.25rem !default;

diff --git a/themes/tailwind/tailwind-light/_variables.scss b/themes/tailwind/tailwind-light/_variables.scss
@@ -660,6 +660,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$shade700 !default;
 $menuitemIconActiveColor:$shade600 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/vela/_variables.scss b/themes/vela/_variables.scss
@@ -650,6 +650,7 @@ $menuitemHoverBg:$hoverBg !default;
 $menuitemTextActiveColor:$shade000 !default;
 $menuitemIconActiveColor:$shade000 !default;
 $menuitemActiveBg:$shade900 !default;
+$menuitemActiveFocusBg:$shade900 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/viva/viva-dark/_variables.scss b/themes/viva/viva-dark/_variables.scss
@@ -659,6 +659,7 @@ $menuitemHoverBg:$hoverBg !default;
 $menuitemTextActiveColor:$shade000 !default;
 $menuitemIconActiveColor:$shade000 !default;
 $menuitemActiveBg:$hoverBg !default;
+$menuitemActiveFocusBg:$hoverBg !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;

diff --git a/themes/viva/viva-light/_variables.scss b/themes/viva/viva-light/_variables.scss
@@ -662,6 +662,7 @@ $menuitemHoverBg:$shade200 !default;
 $menuitemTextActiveColor:$shade700 !default;
 $menuitemIconActiveColor:$shade600 !default;
 $menuitemActiveBg:$shade200 !default;
+$menuitemActiveFocusBg:$shade200 !default;
 $menuitemSubmenuIconFontSize:.875rem !default;
 $submenuHeaderMargin:0 !default;
 $submenuHeaderPadding:.75rem 1rem !default;