Merge remote-tracking branch 'origin/master' into 7.3

11 files changed, 150 insertions, 52 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/_button.scss b/WebContent/VAADIN/themes/valo/components/_button.scss
index ec74f70eaf..42953ea610 100644
--- a/WebContent/VAADIN/themes/valo/components/_button.scss
+++ b/WebContent/VAADIN/themes/valo/components/_button.scss
@@ -45,6 +45,10 @@
       @include valo-link-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-button-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--tiny, $font-weight: null);
+    }
+
     .#{$primary-stylename}-small {
       @include valo-button-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--small, $font-weight: null);
     }
@@ -53,6 +57,10 @@
       @include valo-button-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--large, $font-weight: null);
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-button-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $background-color: null, $font-size: $v-font-size--huge, $font-weight: null);
+    }
+
     .#{$primary-stylename}-icon-align-right {
       @include valo-button-icon-align-right-style;
     }
@@ -65,6 +73,10 @@
       width: $v-unit-size;
       padding: 0;
 
+      &.#{$primary-stylename}-tiny {
+        width: $v-unit-size--tiny;
+      }
+
       &.#{$primary-stylename}-small {
         width: $v-unit-size--small;
       }
@@ -73,6 +85,10 @@
         width: $v-unit-size--large;
       }
 
+      &.#{$primary-stylename}-huge {
+        width: $v-unit-size--huge;
+      }
+
       .#{$primary-stylename}-caption {
         display: none;
       }
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 4e5cd5bbac..538a5e2694 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -78,6 +78,11 @@
       text-align: center;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-combobox-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
@@ -87,6 +92,11 @@
       @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
+
+    .#{$primary-stylename}-huge {
+      @include valo-combobox-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--huge;
+    }
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 1538681740..8854992032 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -59,6 +59,11 @@
       text-align: center;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-datefield-style($unit-size: $v-unit-size--tiny, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
@@ -68,6 +73,11 @@
       @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
+
+    .#{$primary-stylename}-huge {
+      @include valo-datefield-style($unit-size: $v-unit-size--huge, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+      font-size: $v-font-size--huge;
+    }
   }
 
 }
diff --git a/WebContent/VAADIN/themes/valo/components/_formlayout.scss b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
index 25dbfbef28..fc065cec3d 100644
--- a/WebContent/VAADIN/themes/valo/components/_formlayout.scss
+++ b/WebContent/VAADIN/themes/valo/components/_formlayout.scss
@@ -198,7 +198,6 @@
     > .v-label-h3,
     > .v-label-h4 {
       border-bottom: none;
-      color: $v-selection-color;
     }
 
     > .v-label-h3,
diff --git a/WebContent/VAADIN/themes/valo/components/_label.scss b/WebContent/VAADIN/themes/valo/components/_label.scss
index 29d811fc9a..e61aa4ec11 100644
--- a/WebContent/VAADIN/themes/valo/components/_label.scss
+++ b/WebContent/VAADIN/themes/valo/components/_label.scss
@@ -1,6 +1,7 @@
 $v-font-weight--header:   $v-font-weight - 100 !default;
 $v-line-height--header:   1.1             !default;
 $v-font-family--header:   null            !default;
+$v-font-color--colored:   $v-selection-color !default;
 
 $v-font-size--h1:         2.4em           !default;
 $v-font-size--h2:         1.6em           !default;
@@ -104,6 +105,10 @@ $v-letter-spacing--h4:    0               !default;
 
   @if $include-additional-styles {
 
+    .#{$primary-stylename}-colored {
+      color: $v-font-color--colored;
+    }
+
     .#{$primary-stylename}-large {
       font-size: $v-font-size--large;
     }
@@ -112,6 +117,14 @@ $v-letter-spacing--h4:    0               !default;
       font-size: $v-font-size--small;
     }
 
+    .#{$primary-stylename}-tiny {
+      font-size: $v-font-size--tiny;
+    }
+
+    .#{$primary-stylename}-huge {
+      font-size: $v-font-size--huge;
+    }
+
     .#{$primary-stylename}-bold {
       font-weight: $v-font-weight + 200;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index e79e6898a9..f03bc3d022 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,31 +114,37 @@
   @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 {
     margin-right: 1px;
   }
 
-  $br: $v-border-radius - $border-width - 1px;
+  $br: max(0, $v-border-radius - $border-width);
   &:first-child {
     border-left-width: 0;
-    border-radius: $br 0 0 $br;
+    @if $v-border-radius > 0 {
+      border-radius: $br 0 0 $br;
+    }
   }
 
   &:last-child {
-    border-radius: 0 $br $br 0;
-    margin-right: -$border-width;
+    @if $v-border-radius > 0 {
+      border-radius: 0 $br $br 0;
+    }
+    border-right-width: 0;
   }
 
   &:first-child:last-child {
-    border-radius: $br;
-    border-right-width: 0;
-    margin-right: 0;
+    @if $v-border-radius > 0 {
+      border-radius: $br;
+    }
   }
 
   &:before {
@@ -253,20 +278,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 +286,8 @@
   background: transparent;
   color: inherit;
 
-  &:not(.v-disabled):focus {
-    border: none;
-    @include box-shadow(none);
+  &:focus:after {
+    display: none;
   }
 
   .#{$primary-stylename}-menuitem {
@@ -294,7 +304,8 @@
     }
 
     &:first-child,
-    &:last-child {
+    &:last-child,
+    &:first-child:last-child {
       border-radius: $v-border-radius;
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss
index 4c5d99b8e2..5e524bfb9e 100644
--- a/WebContent/VAADIN/themes/valo/components/_textarea.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss
@@ -19,6 +19,11 @@
       @include valo-textfield-borderless-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-textarea-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-textarea-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
       font-size: $v-font-size--small;
@@ -29,6 +34,11 @@
       font-size: $v-font-size--large;
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-textarea-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--huge;
+    }
+
     .#{$primary-stylename}-align-right {
       text-align: right;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 75cfc5ef85..0b4fa50fb2 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -1,5 +1,5 @@
 $v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default;
-$v-textfield-background-color--readonly: $v-app-background-color;
+$v-textfield-background-color--readonly: darkest-color($v-app-background-color, darken($v-textfield-background-color, 2%));
 $v-textfield-bevel: inset 0 1px 0 v-shade !default;
 $v-textfield-shadow: 0 1px 0 (v-tint 2) !default;
 $v-textfield-font-weight: 400 !default;
@@ -30,6 +30,11 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       @include valo-textfield-borderless-style;
     }
 
+    .#{$primary-stylename}-tiny {
+      @include valo-textfield-style($unit-size: $v-unit-size--tiny, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--tiny;
+    }
+
     .#{$primary-stylename}-small {
       @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
       font-size: $v-font-size--small;
@@ -40,9 +45,16 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       font-size: $v-font-size--large;
     }
 
+    .#{$primary-stylename}-huge {
+      @include valo-textfield-style($unit-size: $v-unit-size--huge, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null);
+      font-size: $v-font-size--huge;
+    }
+
     @include valo-textfield-inline-icon($stylenames: inline-icon);
+    @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny);
     @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
     @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large);
+    @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge);
 
     .#{$primary-stylename}-align-right {
       text-align: right;
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 7e00f4ec09..93553fe55a 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -218,7 +218,8 @@ $v-tree-expand-animation-enabled: false !default;
   // Drag'n'drop styles
 
   .#{$primary-stylename}-node-drag-top:before,
-  .#{$primary-stylename}-node-drag-bottom:after {
+  .#{$primary-stylename}-node-drag-bottom:after,
+  .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded > .#{$primary-stylename}-node-children:before {
     content: "\2022";
     display: block;
     position: absolute;
@@ -230,6 +231,12 @@ $v-tree-expand-animation-enabled: false !default;
     color: $v-focus-color;
     text-indent: round($v-font-size/-4);
     text-shadow: 0 0 1px $v-background-color, 0 0 1px $v-background-color;
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .#{$primary-stylename}-node-drag-bottom.#{$primary-stylename}-node-dragfolder.#{$primary-stylename}-node-expanded:after {
+    content: none;
   }
 
   .#{$primary-stylename}-node-caption-drag-center {
diff --git a/WebContent/VAADIN/themes/valo/shared/_variables.scss b/WebContent/VAADIN/themes/valo/shared/_variables.scss
index b1c113b2cc..7dd3827298 100644
--- a/WebContent/VAADIN/themes/valo/shared/_variables.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_variables.scss
@@ -60,14 +60,20 @@ $v-required-field-indicator-color : $v-error-indicator-color
 $v-friendly-color                 : #2c9720                                     !default;
 
 
-$v-scaling-factor--small          : 0.8                                         !default;
+$v-scaling-factor--tiny           : 0.75                                        !default;
+$v-scaling-factor--small          : 0.85                                        !default;
 $v-scaling-factor--large          : 1.2                                         !default;
+$v-scaling-factor--huge           : 1.6                                         !default;
 
+$v-unit-size--tiny                : round($v-unit-size * $v-scaling-factor--tiny)  !default;
 $v-unit-size--small               : round($v-unit-size * $v-scaling-factor--small) !default;
 $v-unit-size--large               : round($v-unit-size * $v-scaling-factor--large) !default;
+$v-unit-size--huge                : round($v-unit-size * $v-scaling-factor--huge)  !default;
 
-$v-font-size--small               : round($v-font-size * $v-scaling-factor--small) !default;
-$v-font-size--large               : round($v-font-size * $v-scaling-factor--large) !default;
+$v-font-size--tiny                : ceil($v-font-size * $v-scaling-factor--tiny)  !default;
+$v-font-size--small               : ceil($v-font-size * $v-scaling-factor--small) !default;
+$v-font-size--large               : ceil($v-font-size * $v-scaling-factor--large) !default;
+$v-font-size--huge                : ceil($v-font-size * $v-scaling-factor--huge)  !default;