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

Change-Id: Ibe1a7badae6dfa8ca33b56c400c7dcb3d7a7aeda

14 files changed, 130 insertions, 30 deletions

diff --git a/WebContent/VAADIN/themes/tests-valo-light/_variables.scss b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss
new file mode 100644
index 0000000000..e851f075e4
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss
@@ -0,0 +1,24 @@
+$v-app-loading-text: "Light Valo";
+
+$v-background-color: hsl(0, 0, 99.5%);
+$v-app-background-color: #fff;
+$v-focus-color: hsl(218, 80%, 60%);
+$v-border: 1px solid (v-shade 0.6);
+$v-border-radius: 3px;
+$v-bevel: inset 0 1px 0 v-tint;
+$v-textfield-bevel: false;
+$v-gradient: v-linear 3%;
+$v-shadow: false;
+$valo-menu-background-color: hsl(218, 20%, 98%);
+$v-friendly-color: hsl(163, 61%, 41%);
+$v-error-indicator-color: hsl(349, 66%, 56%);
+
+
+@import "../valo/valo";
+
+.tests-valo-light .valo-menu .valo-menu-title {
+  background: $v-app-background-color;
+  color: $v-selection-color;
+  text-shadow: none;
+  border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
+}
diff --git a/WebContent/VAADIN/themes/tests-valo-light/styles.scss b/WebContent/VAADIN/themes/tests-valo-light/styles.scss
new file mode 100644
index 0000000000..12ee8a780e
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-valo-light/styles.scss
@@ -0,0 +1,6 @@
+@import "variables";
+@import "../tests-valo/valotest";
+
+.tests-valo-light {
+   @include valotest;
+}
diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
index e74781fc46..9fe360c6ed 100644
--- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss
@@ -44,6 +44,7 @@
 
     label {
       @include valo-tappable;
+      display: inline-block;
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 538a5e2694..93cb5393ee 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -67,6 +67,11 @@
       }
       .#{$primary-stylename}-button {
         border: none;
+        color: inherit;
+        @include opacity(.5);
+      }
+      &.#{$primary-stylename}-prompt .#{$primary-stylename}-input {
+        @include valo-textfield-prompt-style(transparent);
       }
     }
 
@@ -83,8 +88,12 @@
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$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);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 8854992032..521d661a3d 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -48,6 +48,8 @@
       }
       .#{$primary-stylename}-button {
         border: none;
+        color: inherit;
+        @include opacity(.5);
       }
     }
 
@@ -64,8 +66,12 @@
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
       @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss
index f03bc3d022..7368579d43 100644
--- a/WebContent/VAADIN/themes/valo/components/_menubar.scss
+++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss
@@ -91,7 +91,7 @@
   text-align: left;
 
   @if $unit-size {
-    line-height: $unit-size - first-number($v-border) * 2 - 1px;
+    line-height: $unit-size - first-number($v-border) * 2;
 
     > .#{$primary-stylename}-menuitem {
       padding: 0 round($unit-size/2.6);
diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss
index 6ccd5139da..07e21cccbf 100644
--- a/WebContent/VAADIN/themes/valo/components/_panel.scss
+++ b/WebContent/VAADIN/themes/valo/components/_panel.scss
@@ -162,6 +162,8 @@ $v-panel-border: $v-border !default;
       left: 0;
       height: 0;
       border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5));
+      $border-color: first-color(valo-border($color: $v-app-background-color, $strength: 1));
+      border-color: rgba($border-color, .5);
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 46318590d0..adac1b90bd 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -3,7 +3,6 @@ $v-table-border-width: first-number($v-border) !default;
 $v-table-border-color: null !default;
 $v-table-border-radius: 0 !default;
 $v-table-cell-padding-horizontal: round($v-unit-size/3) !default;
-//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default;
 $v-table-resizer-width: round($v-unit-size/4.5) !default;
 $v-table-sort-indicator-width: round($v-unit-size/2) !default;
 $v-table-header-font-size: round($v-font-size * 0.86) !default;
@@ -153,10 +152,10 @@ $v-table-background-color: null !default;
     width: $v-table-resizer-width;
     cursor: e-resize;
     cursor: col-resize;
-    position: absolute;
-    top: 0;
+    position: relative;
     right: round($v-table-resizer-width / -2);
     z-index: 1;
+    margin-left: -$v-table-resizer-width;
   }
 
   .#{$primary-stylename}-cell-content {
@@ -178,14 +177,23 @@ $v-table-background-color: null !default;
 
   .#{$primary-stylename}-cell-wrapper {
     line-height: 1;
-    min-height: $v-table-row-height;
-    $vertical-padding: round(($v-table-row-height - $v-font-size)/2);
-    padding: $vertical-padding $v-table-cell-padding-horizontal;
+    padding: 0 $v-table-cell-padding-horizontal;
     @include box-sizing(border-box);
     margin-right: 0 !important;
 
     > .v-widget {
-      margin: round($vertical-padding / -2) round($v-table-cell-padding-horizontal / -2);
+      // Leave some breathing room around the table cell and the widget
+      margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2);
+
+      &.v-label,
+      &.v-checkbox,
+      &.v-select-optiongroup {
+        margin: 0;
+      }
+      &.v-progressbar {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
   }
 
@@ -220,8 +228,9 @@ $v-table-background-color: null !default;
 
     @include valo-gradient($v-selection-color);
     background-origin: border-box;
-    color: valo-font-color($v-selection-color, 0.9);
-    text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);
+    $font-color: valo-font-color($v-selection-color, 0.9);
+    color: $font-color;
+    text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color);
 
     + .v-selected {
       $gradient-end: first(last(valo-gradient-color-stops($v-selection-color)));
@@ -248,8 +257,7 @@ $v-table-background-color: null !default;
     width: $v-table-sort-indicator-width;
     height: $v-table-row-height;
     line-height: $v-table-row-height;
-    position: absolute;
-    right: 0;
+    margin-left: -$v-table-sort-indicator-width;
   }
 
   .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before,
@@ -295,13 +303,16 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-focus-slot-right {
     border-right: $v-table-border-width + 2px solid $v-focus-color;
     right: -$v-table-border-width - 1px;
+    margin-left: -$v-table-resizer-width - $v-table-border-width - 2px;
   }
 
   .#{$primary-stylename}-focus-slot-left {
+    float: left;
     border-left: $v-table-border-width + 2px solid $v-focus-color;
     left: -$v-table-border-width;
     right: auto;
     margin-left: 0 !important;
+    margin-right: -$v-table-resizer-width - $v-table-border-width - 2px;
   }
 
   .#{$primary-stylename}-column-selector {
@@ -500,7 +511,7 @@ $v-table-background-color: null !default;
 
     .#{$primary-stylename}-compact,
     .#{$primary-stylename}-small {
-      @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
+      @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2));
     }
 
     .#{$primary-stylename}-small {
@@ -639,11 +650,21 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-cell-wrapper {
-    padding: $vertical-padding $cell-padding-horizontal;
-    min-height: $row-height;
+    padding-left: $cell-padding-horizontal;
+    padding-right: $cell-padding-horizontal;
 
     > .v-widget {
-      margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2);
+      margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2);
+
+      &.v-label,
+      &.v-checkbox,
+      &.v-select-optiongroup {
+        margin: 0;
+      }
+      &.v-progressbar {
+        margin-left: 0;
+        margin-right: 0;
+      }
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss
index 0b4fa50fb2..85e2487bc1 100644
--- a/WebContent/VAADIN/themes/valo/components/_textfield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss
@@ -35,8 +35,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
       font-size: $v-font-size--tiny;
     }
 
+    .#{$primary-stylename}-compact,
     .#{$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);
+    }
+
+    .#{$primary-stylename}-small {
       font-size: $v-font-size--small;
     }
 
@@ -52,6 +56,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
     @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 compact, $unit-size: $v-unit-size--small);
     @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);
@@ -158,7 +163,10 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 
 @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) {
-  @if type-of($background-color) == color {
+  @if $background-color ==  transparent {
+    color: inherit;
+    @include opacity(.5);
+  } @else if type-of($background-color) == color {
     $font-color: valo-font-color($background-color);
     $font-color: mix($background-color, $font-color);
     @if is-dark-color($background-color) and saturation($background-color) > 50% {
@@ -205,15 +213,20 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   border-radius: 0;
   background: $background-color;
   @include box-shadow(none);
-  @if $background-color == transparent {
-    color: inherit;
-  } @else if type-of($background-color) == color {
-    color: valo-font-color($background-color);
+
+  $font-color: inherit;
+  @if $background-color != transparent and type-of($background-color) == color {
+    $font-color: valo-font-color($background-color);
   }
+  color: $font-color;
 
   &:focus {
     @include box-shadow(none);
   }
+
+  &[class*="prompt"] {
+    @include valo-textfield-prompt-style($background-color);
+  }
 }
 
 
diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss
index 93553fe55a..8e75f59945 100644
--- a/WebContent/VAADIN/themes/valo/components/_tree.scss
+++ b/WebContent/VAADIN/themes/valo/components/_tree.scss
@@ -176,8 +176,9 @@ $v-tree-expand-animation-enabled: false !default;
 
 
   .#{$primary-stylename}-node-selected {
-    color: valo-font-color($v-selection-color, 0.9);
-    text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth);
+    $font-color: valo-font-color($v-selection-color, 0.9);
+    color: $font-color;
+    text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color);
 
     &:after {
       opacity: 1;
diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
index 507065d339..9a9e597888 100644
--- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
+++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss
@@ -87,10 +87,11 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
       img.v-icon {
         width: round($v-unit-size * 1.5);
         height: round($v-unit-size * 1.5);
-        border-radius: ceil($v-unit-size * 1.5 / 2);
+        border-radius: ceil($v-unit-size * 1.5 / 2 + first-number($v-border));
         box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow);
         display: block;
         margin: 0 auto .3em;
+        border: valo-border();
       }
     }
 
@@ -101,10 +102,6 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
   .valo-menu-subtitle {
     @include valo-menu-subtitle-style($bg);
-
-    .valo-menu-badge {
-      color: mix(valo-font-color($bg), $v-selection-color);
-    }
   }
 
   .valo-menuitems {
@@ -177,9 +174,11 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
         padding: 0;
         height: $v-unit-size;
         color: valo-font-color($v-selection-color, 0.5);
+        max-width: 30%;
 
         .v-menubar-menuitem {
           line-height: $v-unit-size - 1px;
+          white-space: nowrap;
         }
 
         img.v-icon {
@@ -188,6 +187,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
           width: round($v-unit-size / 2);
           height: round($v-unit-size / 2);
           border-radius: ceil($v-unit-size / 4);
+          border: none;
         }
       }
 
@@ -228,7 +228,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
 
 @mixin valo-menu-style ($bg: $valo-menu-background-color) {
   height: 100%;
-  @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
+  @include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 0%, $bg round($v-unit-size/4)), $fallback: $bg);
   color: valo-font-color($bg, 0.5);
   font-size: round($v-font-size * 0.9);
   line-height: round($v-unit-size * 0.8);
@@ -256,6 +256,10 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
   color: valo-font-color($bg, 0.33);
   margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2);
   border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone);
+
+  [class*="badge"] {
+    color: mix(valo-font-color($bg), $v-selection-color);
+  }
 }
 
 
@@ -286,6 +290,14 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
     overflow: hidden;
   }
 
+  [class*="badge"] {
+    @if abs($diff) < 50 {
+      color: mix(valo-font-color($bg), $v-selection-color);
+    } @else {
+      color: $active-color;
+    }
+  }
+  
   &.selected {
     background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%));
 
diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss
index 97859a62b2..b958be79da 100644
--- a/WebContent/VAADIN/themes/valo/components/_window.scss
+++ b/WebContent/VAADIN/themes/valo/components/_window.scss
@@ -96,6 +96,8 @@ $v-window-modality-curtain-background-color: #222 !default;
       height: 0;
       $_bg: $v-window-background-color;
       border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5));
+      $border-color: first-color(valo-border($strength: 1));
+      border-color: rgba($border-color, .5);
     }
   }
 
diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
index 8a3894b524..4b737416c2 100644
--- a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss
@@ -10,6 +10,7 @@
 
   .v-contextmenu .gwt-MenuItem {
     @include valo-selection-item-style;
+    display: block; // Firefox 24 needs this to make position: relative; work
   }
 
   .v-contextmenu .gwt-MenuItem-selected {
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index a5f6e36957..dc54672cb6 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -181,7 +181,9 @@ $v-selection-item-selection-color: $v-selection-color !default;
 
 @mixin valo-selection-item-selected-style {
   @include valo-gradient($v-selection-item-selection-color);
-  color: valo-font-color($v-selection-item-selection-color, 0.9);
+  $font-color: valo-font-color($v-selection-item-selection-color, 0.9);
+  color: $font-color;
+  text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color);
 }