Elastic: Add indicator for popover menu items that open a submenu (#6868)

2 files changed, 39 insertions, 6 deletions

diff --git a/skins/elastic/styles/colors.less b/skins/elastic/styles/colors.less
index 085e9e868..2d0174b90 100644
--- a/skins/elastic/styles/colors.less
+++ b/skins/elastic/styles/colors.less
@@ -131,7 +131,7 @@
 @color-popover-separator-background: @color-black-shade-bg;
 @color-popover-mobile-header:               #fff;
 @color-popover-mobile-header-background:    @color-main-dark;
-
+@color-popover-mobile-dropbutton-background: #f6f6f6;
 
 // Dialogs
 @color-dialog-overlay-background:   fade(@color-font, 50%);
diff --git a/skins/elastic/styles/widgets/menu.less b/skins/elastic/styles/widgets/menu.less
index 1b578eb5e..03c5756e8 100644
--- a/skins/elastic/styles/widgets/menu.less
+++ b/skins/elastic/styles/widgets/menu.less
@@ -283,20 +283,53 @@
                 flex: 1;
             }
 
+            &:not(.disabled):hover {
+                background-color: @color-popover-mobile-dropbutton-background;
+            }
+
             a.dropdown {
-                width: auto;
+                width: 3.5rem;
+                padding: 0 .5em;
+                background-color: @color-popover-mobile-dropbutton-background;
 
-                &:before {
-                    content: @fa-var-angle-right;
-                    line-height: inherit;
-                    margin: 0;
+                &:hover {
+                    background-color: @color-menu-hover-background;
                 }
 
+                // Note: :before icon is replaced with :after icon by a[aria-haspopup] below
+
+                &:before,
                 span.inner {
                     display: none;
                 }
             }
         }
+
+        a[aria-haspopup] {
+            position: realtive;
+
+            &:after {
+                &:extend(.font-icon-class);
+                content: @fa-var-chevron-right;
+                float: right;
+                margin: 0;
+                color: @color-black-shade-text;
+                font-size: .9em;
+
+                html.layout-small & {
+                    margin: 0 .2em;
+                }
+            }
+
+            &.dropdown:after {
+                margin: 0 .5em !important;
+                color: @color-list;
+            }
+
+            &:hover:after {
+                color: @color-menu-hover;
+            }
+        }
     }
 }