Merge remote-tracking branch 'origin/master' into reconnect-dialog

Change-Id: Ie622160a83116c83b255a26bec297f73f3223ac7

40 files changed, 471 insertions, 221 deletions

diff --git a/WebContent/VAADIN/themes/base/button/checkbox.scss b/WebContent/VAADIN/themes/base/button/checkbox.scss
index cc6143dbc1..e46d236035 100644
--- a/WebContent/VAADIN/themes/base/button/checkbox.scss
+++ b/WebContent/VAADIN/themes/base/button/checkbox.scss
@@ -1,9 +1,5 @@
 @mixin base-checkbox($primaryStyleName : v-checkbox) {
 
- .#{$primaryStyleName} {
- 	display: block;
- }
-
 .#{$primaryStyleName},
 .#{$primaryStyleName} label,
 .#{$primaryStyleName} input,
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 1653032703..6b3b017070 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -108,6 +108,7 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       outline: none;
       padding: 0 4px;
       text-align: right;
+      line-height: 1;
 
       &::-moz-focus-inner {
         border: 0;
@@ -128,10 +129,10 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     &.open {
       .#{$primaryStyleName}-sidebar-button {
         width: 100%;
- 
+
         &:after {
-          content: "\00d7";
-          font-size: 16px;
+          content: "\f0c9";
+          font-size: $v-grid-header-font-size;
           line-height: 1;
         }
       }
@@ -142,11 +143,12 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     }
 
     .v-ie8 &.open .#{$primaryStyleName}-sidebar-button:after {
+      vertical-align: middle;
+      text-align: center;
       display: inline;
     }
 
     .#{$primaryStyleName}-sidebar-content {
-      border-top: $v-grid-border;
       padding: 4px 0;
 
       .gwt-MenuBar {
@@ -199,6 +201,12 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       border-left: none;
     }
   }
+  
+  .#{$primaryStyleName}-editor-cells.frozen > div {
+    @include box-shadow(1px 0 2px rgba(0,0,0,.1));
+    border-right: $v-grid-cell-vertical-border;
+    border-left: none;
+  }
 
   .#{$primaryStyleName}-row-stripe > td {
     background-color: $v-grid-row-stripe-background-color;
@@ -342,6 +350,10 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
   .#{$primaryStyleName}-editor-cells {
     position: relative;
     white-space: nowrap;
+    
+    &.frozen {
+      z-index: 2;
+    }
 
     > div {
       display: inline-block;
@@ -384,6 +396,10 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
         min-width: 100%;
         max-width: 100%;
       }
+      
+      &.not-editable.#{$primaryStyleName}-cell {
+        float: none;
+      }
     }
 
     .error::before {
diff --git a/WebContent/VAADIN/themes/chameleon/components/components.scss b/WebContent/VAADIN/themes/chameleon/components/components.scss
index 9c8a56b33d..578ea23bf3 100644
--- a/WebContent/VAADIN/themes/chameleon/components/components.scss
+++ b/WebContent/VAADIN/themes/chameleon/components/components.scss
@@ -1,6 +1,7 @@
 @import "accordion/accordion.scss";
 @import "button/button.scss";
 @import "colorpicker/colorpicker.scss";
+@import "grid/grid.scss";
 @import "label/label.scss";
 @import "menubar/menubar.scss";
 @import "notification/notification.scss";
@@ -24,6 +25,7 @@
 	@include chameleon-accordion;
 	@include chameleon-button;
 	@include chameleon-colorpicker;
+	@include chameleon-grid;
 	@include chameleon-label;
 	@include chameleon-menubar;
 	@include chameleon-notification;
diff --git a/WebContent/VAADIN/themes/chameleon/components/grid/grid.scss b/WebContent/VAADIN/themes/chameleon/components/grid/grid.scss
new file mode 100644
index 0000000000..5007ad6619
--- /dev/null
+++ b/WebContent/VAADIN/themes/chameleon/components/grid/grid.scss
@@ -0,0 +1,12 @@
+@mixin chameleon-grid($primaryStyleName: v-grid) {
+
+  // Sidebar
+  .#{$primaryStyleName}-sidebar.v-contextmenu {
+
+    .v-on:before, .v-off:before {
+      content: none;
+      font-size: 0;
+      margin-right: 0;
+    }
+  }
+}
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 7ae0f402aa..cb5e9d454e 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -40,6 +40,12 @@
     .#{$primaryStyleName}-sidebar-content {
       background-color: #f8f8f9;
     }
+
+    .v-on:before, .v-off:before {
+      content: none;
+      font-size: 0;
+      margin-right: 0;
+    }
   }
 
   // Sort indicators
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
index cda571fda0..fece9f1043 100644
--- a/WebContent/VAADIN/themes/reindeer/reindeer.scss
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -3,16 +3,16 @@ $line-height: normal !default;
 
 
 // Override Base Grid variables
-$v-grid-border: 1px solid #c2c3c4;
-$v-grid-cell-vertical-border: 1px solid #d4d4d4;
-$v-grid-cell-horizontal-border: none;
-$v-grid-cell-focused-border: 1px solid #0f68ba;
-$v-grid-row-height: 20px;
-$v-grid-row-stripe-background-color: #eff0f1;
-$v-grid-row-selected-background-color: #4d749f;
-$v-grid-header-font-size: 10px;
-$v-grid-header-background-color: rgb(217,219,221);
-$v-grid-cell-padding-horizontal: 6px;
+$v-grid-border: 1px solid #c2c3c4 !default;
+$v-grid-cell-vertical-border: 1px solid #d4d4d4 !default;
+$v-grid-cell-horizontal-border: none !default;
+$v-grid-cell-focused-border: 1px solid #0f68ba !default;
+$v-grid-row-height: 20px !default;
+$v-grid-row-stripe-background-color: #eff0f1 !default;
+$v-grid-row-selected-background-color: #4d749f !default;
+$v-grid-header-font-size: 10px !default;
+$v-grid-header-background-color: rgb(217,219,221) !default;
+$v-grid-cell-padding-horizontal: 6px !default;
 
 
 @import "../base/base.scss";
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
index aca9821c53..1f049c5fb0 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -30,14 +30,7 @@
   
   // Sidebar
   .#{$primaryStyleName}-sidebar.v-contextmenu {
-    &.open {
-      .#{$primaryStyleName}-sidebar-button {
-        &:after {
-          font-size: 22px;
-        }
-      }
-    }
-        
+
     .#{$primaryStyleName}-sidebar-content {
       background-color: transparent;
       
@@ -45,6 +38,12 @@
         border: none;
       }
     }
+
+    .v-on:before, .v-off:before {
+      content: none;
+      font-size: 0;
+      margin-right: 0;
+    }
   }
 
   // Sort indicators
diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss
index 73566be8c3..d481476d4c 100644
--- a/WebContent/VAADIN/themes/runo/runo.scss
+++ b/WebContent/VAADIN/themes/runo/runo.scss
@@ -3,18 +3,18 @@ $line-height: 18px !default;
 
 
 // Override Base Grid variables
-$v-grid-border: 1px solid #b6bbbc;
-$v-grid-cell-vertical-border: 1px solid #d4d4d4;
-$v-grid-cell-vertical-border: none;
-$v-grid-cell-horizontal-border: none;
-$v-grid-cell-focused-border: 1px solid #57a7ed;
-$v-grid-row-height: 26px;
-$v-grid-header-row-height: 36px;
+$v-grid-border: 1px solid #b6bbbc !default;
+$v-grid-cell-vertical-border: 1px solid #d4d4d4 !default;
+$v-grid-cell-vertical-border: none !default;
+$v-grid-cell-horizontal-border: none !default;
+$v-grid-cell-focused-border: 1px solid #57a7ed !default;
+$v-grid-row-height: 26px !default;
+$v-grid-header-row-height: 36px !default;
 $v-grid-row-background-color: #fff !default;
-$v-grid-row-stripe-background-color:#eff0f1;
-$v-grid-row-selected-background-color: #57a7ed;
-$v-grid-header-font-size: 15px;
-$v-grid-header-background-color: #e7e9ea;
+$v-grid-row-stripe-background-color:#eff0f1 !default;
+$v-grid-row-selected-background-color: #57a7ed !default;
+$v-grid-header-font-size: 15px !default;
+$v-grid-header-background-color: #e7e9ea !default;
 
 
 @import "../base/base.scss";
diff --git a/WebContent/VAADIN/themes/tests-tickets/folder with space/resource with special $chars@.txt b/WebContent/VAADIN/themes/tests-tickets/folder with space/resource with special $chars@.txt
new file mode 100644
index 0000000000..dff31dd51f
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-tickets/folder with space/resource with special $chars@.txt
@@ -0,0 +1 @@
+Just ordinary contents here
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/tests-tickets/ordinary.txt b/WebContent/VAADIN/themes/tests-tickets/ordinary.txt
new file mode 100644
index 0000000000..dff31dd51f
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-tickets/ordinary.txt
@@ -0,0 +1 @@
+Just ordinary contents here
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/tests-tickets/percentagein%20name.txt b/WebContent/VAADIN/themes/tests-tickets/percentagein%20name.txt
new file mode 100644
index 0000000000..dff31dd51f
--- /dev/null
+++ b/WebContent/VAADIN/themes/tests-tickets/percentagein%20name.txt
@@ -0,0 +1 @@
+Just ordinary contents here
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index 27d421b9f2..e9b4d249c7 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -21,6 +21,11 @@ $v-grid-details-marker-width: first-number($v-grid-border) * 2 !default;
 $v-grid-details-marker-color: $v-selection-color !default;
 $v-grid-details-border-top: valo-border($color: $v-grid-border-color-source, $strength: 0.3) !default;
 $v-grid-details-border-top-stripe: valo-border($color: $v-grid-row-stripe-background-color, $strength: 0.3) !default;
+
+$v-grid-border-size: 1px !default;
+$v-grid-border: $v-grid-border-size solid #ddd !default;
+$v-grid-cell-vertical-border: $v-grid-border !default;
+$v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default;
 $v-grid-details-border-bottom: $v-grid-cell-horizontal-border !default;
 $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
 
@@ -119,6 +124,10 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
       vertical-align: middle;
     }
     
+    &.not-editable.#{$primary-stylename}-cell {
+      float: none;
+    }
+    
     .error::before {
       border-top: round($v-unit-size / 4) solid $v-error-indicator-color;
       border-right: round($v-unit-size / 4) solid transparent;
@@ -203,9 +212,6 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
   // Sidebar
   .#{$primary-stylename}-sidebar.v-contextmenu {
     &.open {
-      .#{$primary-stylename}-sidebar-button:after {
-        font-size: 20px;
-      }
 
       .#{$primary-stylename}-sidebar-content {
         margin: 0 0 2px;
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss b/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss
index e97b2fe8d4..c94d48ae14 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/_bourbon.scss
@@ -1,6 +1,12 @@
+// Bourbon 3.2.4
+// http://bourbon.io
+// Copyright 2011-2015 thoughtbot, inc.
+// MIT License
+
 // Settings
 @import "settings/prefixer";
 @import "settings/px-to-em";
+@import "settings/asset-pipeline";
 
 // Custom Helpers
 @import "helpers/gradient-positions-parser";
@@ -11,12 +17,14 @@
 @import "helpers/shape-size-stripper";
 
 // Custom Functions
+@import "functions/color-lightness";
 @import "functions/flex-grid";
-@import "functions/grid-width";
 @import "functions/golden-ratio";
+@import "functions/grid-width";
 @import "functions/linear-gradient";
 @import "functions/modular-scale";
 @import "functions/px-to-em";
+@import "functions/px-to-rem";
 @import "functions/radial-gradient";
 @import "functions/strip-units";
 @import "functions/tint-shade";
@@ -34,8 +42,10 @@
 @import "css3/box-sizing";
 @import "css3/calc";
 @import "css3/columns";
+@import "css3/filter";
 @import "css3/flex-box";
 @import "css3/font-face";
+@import "css3/font-feature-settings";
 @import "css3/hyphens";
 @import "css3/hidpi-media-query";
 @import "css3/image-rendering";
@@ -56,14 +66,14 @@
 @import "addons/ellipsis";
 @import "addons/font-family";
 @import "addons/hide-text";
-//@import "addons/html5-input-types";
+@import "addons/html5-input-types";
 @import "addons/position";
 @import "addons/prefixer";
-@import "addons/rem";
 @import "addons/retina-image";
 @import "addons/size";
 @import "addons/timing-functions";
 @import "addons/triangle";
+@import "addons/word-wrap";
 
 // Soon to be deprecated Mixins
 @import "bourbon-deprecated-upcoming";
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss
index fcc39fdf35..14a89e480c 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_button.scss
@@ -1,38 +1,51 @@
-@mixin button ($style: simple, $base-color: #4294f0) {
+@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
 
-  @if type-of($style) == color {
+  @if type-of($style) == string and type-of($base-color) == color {
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == string and type-of($base-color) == number {
+    $padding: $text-size;
+    $text-size: $base-color;
+    $base-color: #4294f0;
+
+    @if $padding == inherit {
+      $padding: 7px 18px;
+    }
+
+    @include buttonstyle($style, $base-color, $text-size, $padding);
+  }
+
+  @if type-of($style) == color and type-of($base-color) == color {
     $base-color: $style;
     $style: simple;
+    @include buttonstyle($style, $base-color, $text-size, $padding);
   }
 
-  // Grayscale button
-  @if $base-color == grayscale($base-color) {
-    @if $style == simple {
-      @include simple($base-color, $grayscale: true);
-    }
+  @if type-of($style) == color and type-of($base-color) == number {
+    $padding: $text-size;
+    $text-size: $base-color;
+    $base-color: $style;
+    $style: simple;
 
-    @else if $style == shiny {
-      @include shiny($base-color, $grayscale: true);
+    @if $padding == inherit {
+      $padding: 7px 18px;
     }
 
-    @else if $style == pill {
-      @include pill($base-color, $grayscale: true);
-    }
+    @include buttonstyle($style, $base-color, $text-size, $padding);
   }
 
-  // Colored button
-  @else {
-    @if $style == simple {
-      @include simple($base-color);
-    }
+  @if type-of($style) == number {
+    $padding: $base-color;
+    $text-size: $style;
+    $base-color: #4294f0;
+    $style: simple;
 
-    @else if $style == shiny {
-      @include shiny($base-color);
+    @if $padding == #4294f0 {
+      $padding: 7px 18px;
     }
 
-    @else if $style == pill {
-      @include pill($base-color);
-    }
+    @include buttonstyle($style, $base-color, $text-size, $padding);
   }
 
   &:disabled {
@@ -42,16 +55,55 @@
 }
 
 
+// Selector Style Button
+//************************************************************************//
+@mixin buttonstyle($type, $b-color, $t-size, $pad) {
+  // Grayscale button
+  @if $type == simple and $b-color == grayscale($b-color) {
+    @include simple($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == shiny and $b-color == grayscale($b-color) {
+    @include shiny($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == pill and $b-color == grayscale($b-color) {
+    @include pill($b-color, true, $t-size, $pad);
+  }
+
+  @if $type == flat and $b-color == grayscale($b-color) {
+    @include flat($b-color, true, $t-size, $pad);
+  }
+
+  // Colored button
+  @if $type == simple {
+    @include simple($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == shiny {
+    @include shiny($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == pill {
+    @include pill($b-color, false, $t-size, $pad);
+  }
+
+  @else if $type == flat {
+    @include flat($b-color, false, $t-size, $pad);
+  }
+}
+
+
 // Simple Button
 //************************************************************************//
-@mixin simple($base-color, $grayscale: false) {
+@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
   $color:         hsl(0, 0, 100%);
   $border:        adjust-color($base-color, $saturation:  9%,  $lightness: -14%);
   $inset-shadow:  adjust-color($base-color, $saturation: -8%,  $lightness:  15%);
   $stop-gradient: adjust-color($base-color, $saturation:  9%,  $lightness: -11%);
   $text-shadow:   adjust-color($base-color, $saturation:  15%, $lightness: -18%);
 
-  @if lightness($base-color) > 70% {
+  @if is-light($base-color) {
     $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
@@ -68,10 +120,10 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: inherit;
+  font-size: $textsize;
   font-weight: bold;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 7px 18px;
+  padding: $padding;
   text-decoration: none;
   text-shadow: 0 1px 0 $text-shadow;
   background-clip: padding-box;
@@ -92,7 +144,8 @@
     @include linear-gradient ($base-color-hover, $stop-gradient-hover);
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
     $border-active:       adjust-color($base-color, $saturation: 9%, $lightness: -14%);
     $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
 
@@ -102,14 +155,14 @@
     }
 
     border: 1px solid $border-active;
-    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee;
+    box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
   }
 }
 
 
 // Shiny Button
 //************************************************************************//
-@mixin shiny($base-color, $grayscale: false) {
+@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
   $color:         hsl(0, 0, 100%);
   $border:        adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
   $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
@@ -119,7 +172,7 @@
   $text-shadow:   adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
   $third-stop:    adjust-color($base-color, $red: -86,  $green: -75,  $blue: -48);
 
-  @if lightness($base-color) > 70% {
+  @if is-light($base-color) {
     $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
@@ -140,10 +193,10 @@
   box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: inherit;
+  font-size: $textsize;
   font-weight: bold;
   @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
-  padding: 8px 20px;
+  padding: $padding;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
@@ -168,21 +221,22 @@
                                   $fourth-stop-hover 100%);
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
     $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
 
     @if $grayscale == true {
       $inset-shadow-active: grayscale($inset-shadow-active);
     }
 
-    box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff;
+    box-shadow: inset 0 0 20px 0 $inset-shadow-active;
   }
 }
 
 
 // Pill Button
 //************************************************************************//
-@mixin pill($base-color, $grayscale: false) {
+@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
   $color:         hsl(0, 0, 100%);
   $border-bottom: adjust-color($base-color, $hue:  8, $saturation: -11%, $lightness: -26%);
   $border-sides:  adjust-color($base-color, $hue:  4, $saturation: -21%, $lightness: -21%);
@@ -191,7 +245,7 @@
   $stop-gradient: adjust-color($base-color, $hue:  8, $saturation:  14%, $lightness: -10%);
   $text-shadow:   adjust-color($base-color, $hue:  5, $saturation: -19%, $lightness: -15%);
 
-  @if lightness($base-color) > 70% {
+  @if is-light($base-color) {
     $color:       hsl(0, 0, 20%);
     $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
   }
@@ -208,14 +262,14 @@
   border: 1px solid $border-top;
   border-color: $border-top $border-sides $border-bottom;
   border-radius: 16px;
-  box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3;
+  box-shadow: inset 0 1px 0 0 $inset-shadow;
   color: $color;
   display: inline-block;
-  font-size: inherit;
+  font-size: $textsize;
   font-weight: normal;
   line-height: 1;
   @include linear-gradient ($base-color, $stop-gradient);
-  padding: 5px 16px;
+  padding: $padding;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 1px $text-shadow;
@@ -249,7 +303,8 @@
     background-clip: padding-box;
   }
 
-  &:active:not(:disabled) {
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
     $active-color:         adjust-color($base-color, $hue: 4,  $saturation: -12%,  $lightness: -10%);
     $border-active:        adjust-color($base-color, $hue: 6,  $saturation: -2.5%, $lightness: -30%);
     $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation:  6%,   $lightness: -31%);
@@ -267,7 +322,53 @@
     background: $active-color;
     border: 1px solid $border-active;
     border-bottom: 1px solid $border-bottom-active;
-    box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff;
+    box-shadow: inset 0 0 6px 3px $inset-shadow-active;
     text-shadow: 0 -1px 1px $text-shadow-active;
   }
 }
+
+
+
+// Flat Button
+//************************************************************************//
+@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+  $color:         hsl(0, 0, 100%);
+
+  @if is-light($base-color) {
+    $color:       hsl(0, 0, 20%);
+  }
+
+  background-color: $base-color;
+  border-radius: 3px;
+  border: none;
+  color: $color;
+  display: inline-block;
+  font-size: inherit;
+  font-weight: bold;
+  padding: 7px 18px;
+  text-decoration: none;
+  background-clip: padding-box;
+
+  &:hover:not(:disabled){
+    $base-color-hover:    adjust-color($base-color, $saturation: 4%, $lightness: 5%);
+
+    @if $grayscale == true {
+      $base-color-hover: grayscale($base-color-hover);
+    }
+
+    background-color: $base-color-hover;
+    cursor: pointer;
+  }
+
+  &:active:not(:disabled),
+  &:focus:not(:disabled) {
+    $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+
+    @if $grayscale == true {
+      $base-color-active: grayscale($base-color-active);
+    }
+
+    background-color: $base-color-active;
+    cursor: pointer;
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss
index 4818f62fd8..742f1031a4 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_directional-values.scss
@@ -57,9 +57,6 @@
   $right:  $pre + "-right"  + if($suf, "-#{$suf}", "");
   $all:    $pre +             if($suf, "-#{$suf}", "");
 
-  // Get list inside $vals (is there a better way?)
-  @each $val in $vals { $vals: $val; }
-
   $vals: collapse-directionals($vals);
 
   @if contains-falsy($vals) {
@@ -94,21 +91,21 @@
 }
 
 @mixin margin($vals...) {
-  @include directional-property(margin, false, $vals);
+  @include directional-property(margin, false, $vals...);
 }
 
 @mixin padding($vals...) {
-  @include directional-property(padding, false, $vals);
+  @include directional-property(padding, false, $vals...);
 }
 
 @mixin border-style($vals...) {
-  @include directional-property(border, style, $vals);
+  @include directional-property(border, style, $vals...);
 }
 
 @mixin border-color($vals...) {
-  @include directional-property(border, color, $vals);
+  @include directional-property(border, color, $vals...);
 }
 
 @mixin border-width($vals...) {
-  @include directional-property(border, width, $vals);
+  @include directional-property(border, width, $vals...);
 }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss
index 26fc879021..8428e4e194 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_html5-input-types.scss
@@ -22,7 +22,7 @@ $inputs-list: 'input[type="email"]',
 
 $unquoted-inputs-list: ();
 @each $input-type in $inputs-list {
-  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global;
+  $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
 }
 
 $all-text-inputs: $unquoted-inputs-list;
@@ -33,7 +33,7 @@ $all-text-inputs: $unquoted-inputs-list;
 $all-text-inputs-hover: ();
 @each $input-type in $unquoted-inputs-list {
       $input-type-hover: $input-type + ":hover";
-      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma) !global;
+      $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma);
 }
 
 // Focus Pseudo-class
@@ -41,7 +41,7 @@ $all-text-inputs-hover: ();
 $all-text-inputs-focus: ();
 @each $input-type in $unquoted-inputs-list {
       $input-type-focus: $input-type + ":focus";
-      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma) !global;
+      $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
 }
 
 // You must use interpolation on the variable:
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss
index aba34edcd9..31a0699769 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_position.scss
@@ -14,19 +14,19 @@
 
   position: $position;
 
-  @if ($top and $top == auto) or (type-of($top) == number and not unitless($top)) {
+  @if ($top and $top == auto) or (type-of($top) == number and not(unitless($top))) {
     top: $top;
   }
 
-  @if ($right and $right == auto) or (type-of($right) == number and not unitless($right)) {
+  @if ($right and $right == auto) or (type-of($right) == number and not(unitless($right))) {
     right: $right;
   }
 
-  @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not unitless($bottom)) {
+  @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not(unitless($bottom))) {
     bottom: $bottom;
   }
 
-  @if ($left and $left == auto) or (type-of($left) == number and not unitless($left)) {
+  @if ($left and $left == auto) or (type-of($left) == number and not(unitless($left))) {
     left: $left;
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_rem.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_rem.scss
deleted file mode 100644
index ddd7022b44..0000000000
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_rem.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@mixin rem($property, $size, $base: $em-base) {
-  @if not unitless($base) {
-    $base: strip-units($base);
-  }
-
-  $unitless_values: ();
-  @each $num in $size {
-    @if not unitless($num) {
-      @if unit($num) == "em" {
-        $num: $num * $base;
-      }
-
-      $num: strip-units($num);
-    }
-
-    $unitless_values: append($unitless_values, $num);
-  }
-  $size: $unitless_values;
-
-  $pixel_values: ();
-  $rem_values: ();
-  @each $value in $pxval {
-    $pixel_value: $value * 1px;
-    $pixel_values: append($pixel_values, $pixel_value);
-
-    $rem_value: ($value / $base) * 1rem;
-    $rem_values: append($rem_values, $rem_value);
-  }
-
-  #{$property}: $pixel_values;
-  #{$property}: $rem_values;
-}
-
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss
index 7931bd1333..3995c1970a 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_retina-image.scss
@@ -1,4 +1,4 @@
-@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
   @if $asset-pipeline {
     background-image: image-url("#{$filename}.#{$extension}");
   }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss
index 51b2410914..5ecc6f9dcf 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_timing-functions.scss
@@ -1,5 +1,5 @@
 // CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
-// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html
+// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
 
 // EASE IN
 $ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss
index 0e02aca2ca..3b29e2c3c0 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_triangle.scss
@@ -2,44 +2,85 @@
   height: 0;
   width: 0;
 
+  $width: nth($size, 1);
+  $height: nth($size, length($size));
+
+  $foreground-color: nth($color, 1);
+  $background-color: transparent !default;
+  @if (length($color) == 2) {
+    $background-color: nth($color, 2);
+  }
+
   @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
-    border-color: transparent;
-    border-style: solid;
-    border-width: $size / 2;
+
+    $width: $width / 2;
+    $height: if(length($size) > 1, $height, $height/2);
 
     @if $direction == up {
-      border-bottom-color: $color;
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+      border-bottom: $height solid $foreground-color;
 
     } @else if $direction == right {
-      border-left-color:   $color;
+      border-top: $width solid $background-color;
+      border-bottom: $width solid $background-color;
+      border-left: $height solid $foreground-color;
 
     } @else if $direction == down {
-      border-top-color:    $color;
+      border-left: $width solid $background-color;
+      border-right: $width solid $background-color;
+      border-top: $height solid $foreground-color;
 
     } @else if $direction == left {
-      border-right-color:  $color;
+      border-top: $width solid $background-color;
+      border-bottom: $width solid $background-color;
+      border-right: $height solid $foreground-color;
     }
   }
 
   @else if ($direction == up-right) or ($direction == up-left) {
-    border-top: $size solid $color;
+    border-top: $height solid $foreground-color;
 
     @if $direction == up-right {
-      border-left:  $size solid transparent;
+      border-left:  $width solid $background-color;
 
     } @else if $direction == up-left {
-      border-right: $size solid transparent;
+      border-right: $width solid $background-color;
     }
   }
 
   @else if ($direction == down-right) or ($direction == down-left) {
-    border-bottom: $size solid $color;
+    border-bottom: $height solid $foreground-color;
 
     @if $direction == down-right {
-      border-left:  $size solid transparent;
+      border-left:  $width solid $background-color;
 
     } @else if $direction == down-left {
-      border-right: $size solid transparent;
+      border-right: $width solid $background-color;
     }
   }
+
+  @else if ($direction == inset-up) {
+    border-width: $height $width;
+    border-style: solid;
+    border-color: $background-color $background-color $foreground-color;
+  }
+
+  @else if ($direction == inset-down) {
+    border-width: $height $width;
+    border-style: solid;
+    border-color: $foreground-color $background-color $background-color;
+  }
+
+  @else if ($direction == inset-right) {
+    border-width: $width $height;
+    border-style: solid;
+    border-color: $background-color $background-color $background-color $foreground-color;
+  }
+
+  @else if ($direction == inset-left) {
+    border-width: $width $height;
+    border-style: solid;
+    border-color: $background-color $foreground-color $background-color $background-color;
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/addons/_word-wrap.scss b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_word-wrap.scss
new file mode 100644
index 0000000000..9734a597cd
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/addons/_word-wrap.scss
@@ -0,0 +1,8 @@
+@mixin word-wrap($wrap: break-word) {
+  word-wrap: $wrap;
+
+  @if $wrap == break-word {
+    overflow-wrap: break-word;
+    word-break: break-all;
+  }
+}
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss
index 42274a4eeb..96f601c1a8 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_columns.scss
@@ -15,7 +15,7 @@
 
 @mixin column-fill($arg: auto) {
 // auto || length
-  @include prefixer(columns-fill, $arg, webkit moz spec);
+  @include prefixer(column-fill, $arg, webkit moz spec);
 }
 
 @mixin column-rule($arg) {
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_filter.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_filter.scss
new file mode 100644
index 0000000000..8560d77676
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_filter.scss
@@ -0,0 +1,5 @@
+@mixin filter($function: none) {
+  // <filter-function> [<filter-function]* | none
+  @include prefixer(filter, $function, webkit spec);
+}
+
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss
index b48476e870..34a3a0522b 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_flex-box.scss
@@ -78,7 +78,7 @@
         display: flex;
     }
 
-    @elseif $value == "inline-flex" {
+    @else if $value == "inline-flex" {
         display: -webkit-inline-box;
         display: -moz-inline-box;
         display: inline-box;
@@ -124,16 +124,16 @@
         $value-2009: horizontal;
     }
 
-    @elseif $value == "row-reverse" {
+    @else if $value == "row-reverse" {
         $value-2009: horizontal;
         $direction: reverse;
     }
 
-    @elseif $value == column {
+    @else if $value == column {
         $value-2009: vertical;
     }
 
-    @elseif $value == "column-reverse" {
+    @else if $value == "column-reverse" {
         $value-2009: vertical;
         $direction: reverse;
     }
@@ -162,11 +162,11 @@
         $alt-value: single;
     }
 
-    @elseif $value == wrap {
+    @else if $value == wrap {
         $alt-value: multiple;
     }
 
-    @elseif $value == "wrap-reverse" {
+    @else if $value == "wrap-reverse" {
         $alt-value: multiple;
     }
 
@@ -224,15 +224,15 @@
         $alt-value: start;
     }
 
-    @elseif $value == "flex-end" {
+    @else if $value == "flex-end" {
         $alt-value: end;
     }
 
-    @elseif $value == "space-between" {
+    @else if $value == "space-between" {
         $alt-value: justify;
     }
 
-    @elseif $value == "space-around" {
+    @else if $value == "space-around" {
         $alt-value: center;
     }
 
@@ -257,7 +257,7 @@
         $alt-value: start;
     }    
 
-    @elseif $value == "flex-end" {
+    @else if $value == "flex-end" {
         $alt-value: end;
     }
 
@@ -280,7 +280,7 @@
         $value-2011: start;
     }    
 
-    @elseif $value == "flex-end" {
+    @else if $value == "flex-end" {
         $value-2011: end;
     }
 
@@ -300,15 +300,15 @@
         $value-2011: start;
     }    
 
-    @elseif $value == "flex-end" {
+    @else if $value == "flex-end" {
         $value-2011: end;
     }
 
-    @elseif $value == "space-between" {
+    @else if $value == "space-between" {
         $value-2011: justify;
     }
 
-    @elseif $value == "space-around" {
+    @else if $value == "space-around" {
         $value-2011: distribute;
     }
 
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss
index 029ee8fe88..fbf483fde9 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-face.scss
@@ -1,6 +1,6 @@
 // Order of the includes matters, and it is: normal, bold, italic, bold+italic.
 
-@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) {
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
   @font-face {
     font-family: $font-family;
     font-weight: $weight;
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-feature-settings.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-feature-settings.scss
new file mode 100644
index 0000000000..8a9f536775
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_font-feature-settings.scss
@@ -0,0 +1,10 @@
+// Font feature settings mixin and property default.
+// Examples: @include font-feature-settings("liga");
+//           @include font-feature-settings("lnum" false);
+//           @include font-feature-settings("pnum" 1, "kern" 0);
+//           @include font-feature-settings("ss01", "ss02");
+
+@mixin font-feature-settings($settings...) {
+  @if length($settings) == 0 { $settings: none; }
+  @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss
index d4bac3ce0d..03432c637d 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_image-rendering.scss
@@ -1,6 +1,7 @@
 @mixin image-rendering ($mode:auto) {
 
   @if ($mode == crisp-edges) {
+      -ms-interpolation-mode: nearest-neighbor; // IE8+
       image-rendering: -moz-crisp-edges;
       image-rendering: -o-crisp-edges;
       image-rendering: -webkit-optimize-contrast;
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss
index a9af53da4f..cc12be79bd 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_keyframes.scss
@@ -20,19 +20,16 @@
       @content;
     }
   }
-  @if $original-prefix-for-spec {
-    @include disable-prefix-for-all();
-    $prefix-for-spec: true;
-    // Chrome supports the standard keyframes syntax, but not the standard transform syntax
-    $prefix-for-webkit: true;
-    @keyframes #{$name} {
-      @content;
-    }
-  }
 
   $prefix-for-webkit:    $original-prefix-for-webkit;
   $prefix-for-mozilla:   $original-prefix-for-mozilla;
   $prefix-for-microsoft: $original-prefix-for-microsoft;
   $prefix-for-opera:     $original-prefix-for-opera;
   $prefix-for-spec:      $original-prefix-for-spec;
+
+  @if $original-prefix-for-spec {
+    @keyframes #{$name} {
+      @content;
+    }
+  }
 }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss
index 22fd92b4f2..5682fd097a 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_placeholder.scss
@@ -1,29 +1,8 @@
-$placeholders: '-webkit-input-placeholder',
-               '-moz-placeholder',
-               '-ms-input-placeholder';
-
 @mixin placeholder {
+  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
   @each $placeholder in $placeholders {
-    @if $placeholder == "-webkit-input-placeholder" {
-      &::#{$placeholder} {
-        @content;
-      }
-    }
-    @else if $placeholder == "-moz-placeholder" {
-      // FF 18-
-      &:#{$placeholder} {
-        @content;
-      }
-
-      // FF 19+
-      &::#{$placeholder} {
-        @content;
-      }
-    }
-    @else {
-      &:#{$placeholder} {
-        @content;
-      }
+    &:#{$placeholder}-placeholder {
+      @content;
     }
   }
 }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss
index fe18933fef..5ad4c0aed2 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/css3/_transition.scss
@@ -4,13 +4,56 @@
 //          @include transition-property (transform, opacity);
 
 @mixin transition ($properties...) {
-  @if length($properties) >= 1 {
-    @include prefixer(transition, $properties, webkit moz spec);
+  // Fix for vendor-prefix transform property
+  $needs-prefixes: false;
+  $webkit: ();
+  $moz: ();
+  $spec: ();
+
+  // Create lists for vendor-prefixed transform
+  @each $list in $properties {
+    @if nth($list, 1) == "transform" {
+      $needs-prefixes: true;
+      $list1: -webkit-transform;
+      $list2: -moz-transform;
+      $list3: ();
+
+      @each $var in $list {
+        $list3: join($list3, $var);
+
+        @if $var != "transform" {
+          $list1: join($list1, $var);
+          $list2: join($list2, $var);
+        }
+      }
+
+      $webkit: append($webkit, $list1);
+         $moz: append($moz,    $list2);
+        $spec: append($spec,   $list3);
+    }
+
+    // Create lists for non-prefixed transition properties
+    @else {
+      $webkit:  append($webkit, $list, comma);
+      $moz:     append($moz,    $list, comma);
+      $spec:    append($spec,   $list, comma);
+    }
   }
 
+  @if $needs-prefixes {
+    -webkit-transition: $webkit;
+       -moz-transition: $moz;
+            transition: $spec;
+  }
   @else {
-    $properties: all 0.15s ease-out 0s;
-    @include prefixer(transition, $properties, webkit moz spec);
+    @if length($properties) >= 1 {
+      @include prefixer(transition, $properties, webkit moz spec);
+    }
+
+    @else {
+      $properties: all 0.15s ease-out 0s;
+      @include prefixer(transition, $properties, webkit moz spec);
+    }
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_color-lightness.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_color-lightness.scss
new file mode 100644
index 0000000000..8c6df4e256
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_color-lightness.scss
@@ -0,0 +1,13 @@
+// Programatically determines whether a color is light or dark
+// Returns a boolean
+// More details here http://robots.thoughtbot.com/closer-look-color-lightness
+
+@function is-light($hex-color) {
+  $-local-red: red(rgba($hex-color, 1.0));
+  $-local-green: green(rgba($hex-color, 1.0));
+  $-local-blue: blue(rgba($hex-color, 1.0));
+
+  $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
+
+  @return $-local-lightness > .6;
+}
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss
index 0a7185916c..afc59eb954 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_modular-scale.scss
@@ -1,4 +1,4 @@
-// Scaling Varaibles
+// Scaling Variables
 $golden:           1.618;
 $minor-second:     1.067;
 $major-second:     1.125;
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_px-to-rem.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_px-to-rem.scss
new file mode 100644
index 0000000000..96b244e4cb
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_px-to-rem.scss
@@ -0,0 +1,15 @@
+// Convert pixels to rems
+// eg. for a relational value of 12px write rem(12)
+// Assumes $em-base is the font-size of <html>
+
+@function rem($pxval) {
+  @if not unitless($pxval) {
+      $pxval: strip-units($pxval);
+  }
+
+  $base: $em-base;
+  @if not unitless($base) {
+      $base: strip-units($base);
+  }
+  @return ($pxval / $base) * 1rem;
+}
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss
index 6ceae72102..49e621d63d 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/functions/_transition-property-name.scss
@@ -2,21 +2,21 @@
 // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
 //************************************************************************//
 @function transition-property-names($props, $vendor: false) {
-  $new-props: ();
-  
-  @each $prop in $props {
-    $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
-  }
+	$new-props: ();
+	
+	@each $prop in $props {
+		$new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+	}
 
-  @return $new-props;
+	@return $new-props;
 }
 
 @function transition-property-name($prop, $vendor: false) {
-  // put other properties that need to be prefixed here aswell
-  @if $vendor and $prop == transform {
-    @return unquote('-' + $vendor + '-' + $prop);
-  }
-  @else {
-    @return $prop;
-  }
+	// put other properties that need to be prefixed here aswell
+	@if $vendor and $prop == transform {
+		@return unquote('-' + $vendor + '-' + $prop);
+	}
+	@else {
+		@return $prop;
+	}
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss
index 5765676838..c145110a17 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/helpers/_render-gradients.scss
@@ -16,11 +16,11 @@
   }
 
   @if $vendor {
-    $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+    $vendor-gradients: "-#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} #{$gradients})";
   }
   @else if $vendor == false {
     $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})";
-    $vendor-gradients: unquote($vendor-gradients);
   }
+  $vendor-gradients: unquote($vendor-gradients);
   @return $vendor-gradients;
 }
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/settings/_asset-pipeline.scss b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_asset-pipeline.scss
new file mode 100644
index 0000000000..d481a6afb1
--- /dev/null
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_asset-pipeline.scss
@@ -0,0 +1 @@
+$asset-pipeline: false !default;
diff --git a/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss
index c29a961919..ecab49fb54 100644
--- a/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss
+++ b/WebContent/VAADIN/themes/valo/util/bourbon/settings/_prefixer.scss
@@ -1,6 +1,6 @@
 // Variable settings for /addons/prefixer.scss
-$prefix-for-webkit:    true;
-$prefix-for-mozilla:   true;
-$prefix-for-microsoft: true;
-$prefix-for-opera:     true;
-$prefix-for-spec:      true; // required for keyframe mixin
+$prefix-for-webkit:    true !default;
+$prefix-for-mozilla:   true !default;
+$prefix-for-microsoft: true !default;
+$prefix-for-opera:     true !default;
+$prefix-for-spec:      true !default; // required for keyframe mixin
diff --git a/WebContent/WEB-INF/web.xml b/WebContent/WEB-INF/web.xml
index c097fcf1b7..1879175109 100644
--- a/WebContent/WEB-INF/web.xml
+++ b/WebContent/WEB-INF/web.xml
@@ -128,6 +128,16 @@
         <async-supported>true</async-supported>
     </servlet>
 
+    <servlet>
+        <servlet-name>VaadinApplicationRunnerWithPushTimeout</servlet-name>
+        <servlet-class>com.vaadin.launcher.ApplicationRunnerServlet</servlet-class>
+        <init-param>
+            <param-name>pushLongPollingSuspendTimeout</param-name>
+            <param-value>10000</param-value>
+        </init-param>
+        <async-supported>true</async-supported>
+    </servlet>
+
     <!-- For testing GAE - the deployment script changes this to use GAEVaadinServlet -->
     <servlet>
         <servlet-name>IntegrationTest</servlet-name>
@@ -173,6 +183,11 @@
     </servlet-mapping>
 
     <servlet-mapping>
+        <servlet-name>VaadinApplicationRunnerWithPushTimeout</servlet-name>
+        <url-pattern>/run-push-timeout/*</url-pattern>
+    </servlet-mapping>
+
+    <servlet-mapping>
         <servlet-name>VaadinApplicationRunnerWithJSR356</servlet-name>
         <url-pattern>/run-jsr356/*</url-pattern>
     </servlet-mapping>
diff --git a/WebContent/release-notes.html b/WebContent/release-notes.html
index b7cdba7887..e9b4a24ce1 100644
--- a/WebContent/release-notes.html
+++ b/WebContent/release-notes.html
@@ -109,11 +109,18 @@
 
         <h3 id="incompatible">Incompatible or Behavior-altering Changes in @version-minor@</h3>
         <ul>
+            <li>Window close shortcuts have been changed, and ESCAPE is no longer a hard-coded default, but rather a soft one,
+                and can be removed. If the <pre>close-shortcut</pre> attribute of the <pre>v-window</pre> element is present,
+                it must list all close shortcuts, including ESCAPE, separated by whitespace. Existing, unchanged code should
+                behave as before. See ticket <a href="https://dev.vaadin.com/ticket/17383">#17383</a> for more information 
+                on the reasoning behind the change.</li>
             <li>The push path has been changed from /PUSH/ to /PUSH to be compatible with JSR 356.</li>
             <li>Widgetset files and other pre-compressed resources are sent as gzip to compatible browsers.
                 This may interfere with custom response compression solutions that do not respect the Content-Encoding response header.</li>
             <li>Unused methods related to the "out of sync" message have been removed from SystemMessages class.</li>
             <li>All notifications use the WAI-ARIA alert role to be compatible with Jaws</li>
+            <li>Grid SelectionModels are now Extensions. This update removes all selection related variables and API from 
+            GridConnector, GridState, GridServerRpc and GridClientRpc</li>
         </ul>
         <h3 id="knownissues">Known Issues and Limitations</h3>
         <ul>