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

CHANGELOG

@@ -30,6 +30,7 @@ CHANGELOG Roundcube Webmail
 - Elastic: Changed "Move to..." icon (#6637)
 - Elastic: Add hide/show for advanced preferences (#6632)
 - Elastic: Add default icon on Settings/Preferences lists for external plugins (#6814)
+- Elastic: Add indicator for popover menu items that open a submenu (#6868)
 - Elastic: Move compose attachments/options to the right side (#6839)
 - Elastic: Add border/background to attachments list widget (#6842)
 - Elastic: Add "Show unread messages" button to the search bar (#6587)

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%);

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;
+            }
+        }
     }
 }