Modularize menubar mixins and add submenu indicator for top level items

Refactored menubar mixins so that less overrides are necessary from
normal button styles, and so that custom colored and custom sized menu
bars are possible.

Add new examples to test app for “drop down buttons” and “split
buttons” using MenuBar.

Change-Id: I2b0b76817d1c9119f82b2c2f4d7e5b95a9f05a5c

2 files changed, 50 insertions, 39 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
index 7c024b323e..568dfec0b8 100644
--- a/WebContent/VAADIN/themes/tests-valo/_valotest.scss
+++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss
@@ -141,4 +141,8 @@
   .v-accordion-item-color1 .v-accordion-item-caption {
     @include valo-accordion-item-caption-style($background-color: $color2);
   }
+
+  .v-menubar-color1 {
+    @include valo-menubar-style($background-color: $v-selection-color, $unit-size: null);
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index e79e6898a9..7d7e854989 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -1,24 +1,8 @@
 @mixin valo-menubar ($primary-stylename: v-menubar, $include-additional-styles: contains($v-included-additional-styles, menubar)) {
 
   .#{$primary-stylename} {
-    @include valo-button-static-style($states: normal, $vertical-centering: false);
-    @include valo-button-style($states: normal, $cursor: default);
-    padding: 0;
-    text-align: left;
-    overflow: hidden;
-
-    &:focus:not(.v-disabled) {
-      @include valo-button-focus-style($border-fallback: none, $include-box-shadow: false);
-      $box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient);
-      @if type-of($v-focus-style) == list {
-        $box-shadow: $box-shadow, $v-focus-style;
-      }
-      @include box-shadow($box-shadow);
-    }
-
-    &.v-disabled {
-      @include opacity($v-disabled-opacity);
-    }
+    @include valo-button-static-style($states: normal focus disabled, $vertical-centering: false);
+    @include valo-menubar-style;
   }
 
   .#{$primary-stylename}:active:after {
@@ -60,6 +44,20 @@
 
   .#{$primary-stylename} .#{$primary-stylename}-submenu-indicator {
     display: none;
+
+    + .#{$primary-stylename}-menuitem-caption:after {
+      font-family: FontAwesome;
+      content: "\f078";
+      font-size: 0.7em;
+      vertical-align: .15em;
+      margin: 0 -.2em 0 .5em;
+      // IE filters are not supported on pseudo elements
+      opacity: .5;
+    }
+
+    + .#{$primary-stylename}-menuitem-caption:empty:after {
+      margin-left: -.2em;
+    }
   }
 
   .#{$primary-stylename}-popup {
@@ -70,10 +68,10 @@
     }
   }
 
-  
+
   @if $include-additional-styles {
     .#{$primary-stylename}-small {
-      @include valo-menubar-small-style($unit-size: $v-unit-size--small);
+      @include valo-menubar-style($background-color: null, $unit-size: $v-unit-size--small);
       font-size: $v-font-size--small;
     }
 
@@ -87,6 +85,27 @@
 
 
 
+@mixin valo-menubar-style ($primary-stylename: v-menubar, $background-color: $v-background-color, $unit-size: $v-unit-size) {
+  @include valo-button-style($states: normal focus, $cursor: default, $background-color: $background-color, $unit-size: $unit-size);
+  padding: 0;
+  text-align: left;
+
+  @if $unit-size {
+    line-height: $unit-size - first-number($v-border) * 2 - 1px;
+
+    > .#{$primary-stylename}-menuitem {
+      padding: 0 round($unit-size/2.6);
+
+      &[class*="-icon-only"] {
+        width: $unit-size;
+      }
+    }
+  }
+}
+
+
+
+
 @mixin valo-menubar-menuitem-style {
   $border-width: first-number($v-border);
   position: relative;
@@ -95,10 +114,12 @@
   @include box-sizing(border-box);
   @include valo-button-style($states: normal, $border-radius: 0, $shadow: null, $font-color: inherit, $cursor: pointer);
   background: transparent;
+  @include box-shadow(none);
   border-width: 0 $border-width 0 0;
+  border-color: inherit;
   height: 100%;
+  line-height: inherit;
   vertical-align: top;
-  line-height: $v-unit-size - $border-width*2 - 1px;
   text-align: center;
 
   @if $border-width == 0 {
@@ -253,20 +274,6 @@
 }
 
 
-
-@mixin valo-menubar-small-style ($primary-stylename: v-menubar, $unit-size: round($v-unit-size * 0.8)) {
-  height: $unit-size;
-
-  .#{$primary-stylename}-menuitem {
-    line-height: $unit-size - first-number($v-border)*2;
-    padding: 0 round($unit-size/2.5);
-
-    &[class*="-icon-only"] {
-      width: $unit-size;
-    }
-  }
-}
-
 @mixin valo-menubar-borderless-style ($primary-stylename: v-menubar) {
   border: none;
   border-radius: 0;
@@ -275,9 +282,8 @@
   background: transparent;
   color: inherit;
 
-  &:not(.v-disabled):focus {
-    border: none;
-    @include box-shadow(none);
+  &:focus:after {
+    display: none;
   }
 
   .#{$primary-stylename}-menuitem {
@@ -294,7 +300,8 @@
     }
 
     &:first-child,
-    &:last-child {
+    &:last-child,
+    &:first-child:last-child {
       border-radius: $v-border-radius;
     }