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

Change-Id: I0babb7cb93e773a9aab82243c1112d45b15bec78

27 files changed, 712 insertions, 151 deletions

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index 3570c5efec..d40ac1a7bf 100644
--- a/WebContent/VAADIN/themes/base/base.scss
+++ b/WebContent/VAADIN/themes/base/base.scss
@@ -1,3 +1,11 @@
+$font-size: 16px !default;
+$line-height: normal !default;
+
+// Provide these so that we can use them in base mixins
+// and so that we can use base mixins in Valo
+$v-font-size: $font-size !default;
+$v-line-height: $line-height !default;
+
 @import "common/mixins.scss";
 @import "absolutelayout/absolutelayout.scss";
 @import "accordion/accordion.scss";
@@ -16,8 +24,10 @@
 @import "inlinedatefield/inlinedatefield.scss";
 @import "dragwrapper/dragwrapper.scss";
 @import "embedded/embedded.scss";
+@import "escalator/escalator.scss";
 @import "fonts/fonts.scss";
 @import "formlayout/formlayout.scss";
+@import "grid/grid.scss";
 @import "gridlayout/gridlayout.scss";
 @import "label/label.scss";
 @import "link/link.scss";
@@ -59,16 +69,14 @@
 	overflow: hidden;
 }
 
-$font-size: 16px;
-$line-height: normal;
 @mixin base {
 	// @include base-app;
-	
+
 	// everything included from base theme
 	// other themes should enclose corresponding definitions in theme selectors
-	
+
 	@include base-widget;
-	
+
 	@include base-absolutelayout;
 	@include base-accordion;
 	@include base-browserframe;
@@ -78,10 +86,10 @@ $line-height: normal;
 	@include base-caption;
 	@include base-colorpicker;
 	@include base-calendar;
-	
+
 	// here for now to preserve old semantics
 	@include base-common;
-	
+
 	@include base-layout;
 	@include base-csslayout;
 	@include base-customcomponent;
@@ -90,7 +98,9 @@ $line-height: normal;
 	@include base-inline-datefield;
 	@include base-dragwrapper;
 	@include base-embedded;
+	@include base-escalator;
 	@include base-formlayout;
+	@include base-grid;
 	@include base-gridlayout;
 	@include base-label;
 	@include base-link;
@@ -103,7 +113,7 @@ $line-height: normal;
 	@include base-progressindicator(v-progressbar);
 	/* For legacy ProgressIndicator component */
 	@include base-progressindicator(v-progressindicator);
-	
+
 	@include base-select;
 	@include base-shadow;
 	@include base-slider;
diff --git a/WebContent/VAADIN/themes/base/common/mixins.scss b/WebContent/VAADIN/themes/base/common/mixins.scss
index 79d26d6c16..fab97e9565 100644
--- a/WebContent/VAADIN/themes/base/common/mixins.scss
+++ b/WebContent/VAADIN/themes/base/common/mixins.scss
@@ -1,5 +1,5 @@
 @mixin keyframes ($name) {
-	@-webkit-keyframes #{$name} {
+  @-webkit-keyframes #{$name} {
     @content;
   }
   @-moz-keyframes #{$name} {
@@ -11,7 +11,19 @@
 }
 
 @mixin animation ($anim) {
-	-webkit-animation: $anim;
-	-moz-animation: $anim;
-	animation: $anim;
+  -webkit-animation: $anim;
+  -moz-animation: $anim;
+  animation: $anim;
+}
+
+@mixin box-shadow ($shadow) {
+  -webkit-box-shadow: $shadow;
+  -moz-box-shadow: $shadow;
+  box-shadow: $shadow;
+}
+
+@mixin box-sizing ($box-sizing) {
+  -webkit-box-sizing: $box-sizing;
+  -moz-box-sizing: $box-sizing;
+  box-sizing: $box-sizing;
 }
diff --git a/WebContent/VAADIN/themes/base/escalator/escalator.scss b/WebContent/VAADIN/themes/base/escalator/escalator.scss
new file mode 100644
index 0000000000..ad09207ce0
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -0,0 +1,135 @@
+@mixin base-escalator($primaryStyleName: v-escalator, $background-color: #fff) {
+
+  .#{$primaryStyleName} {
+    position: relative;
+  }
+
+  .#{$primaryStyleName}-scroller {
+    position: absolute;
+    z-index: 20;
+    outline: none;
+    @include box-sizing(border-box);
+  }
+
+  .#{$primaryStyleName}-scroller-horizontal {
+    left: 0; // Left position adjusted to align with frozen columns
+    right: 0;
+    bottom: 0;
+    overflow-y: hidden;
+    -ms-overflow-y: hidden;
+  }
+
+  .#{$primaryStyleName}-scroller-vertical {
+    right: 0;
+    top: 0;    // this will be overridden by code, but it's a good default behavior
+    bottom: 0; // this will be overridden by code, but it's a good default behavior
+    overflow-x: hidden;
+    -ms-overflow-x: hidden;
+  }
+
+  .#{$primaryStyleName}-tablewrapper {
+    position: absolute;
+    overflow: hidden;
+    @include box-sizing(border-box);
+  }
+
+  .#{$primaryStyleName}-tablewrapper > table {
+    border-spacing: 0;
+    table-layout: fixed;
+    width: inherit; // a decent default fallback
+  }
+
+  .#{$primaryStyleName}-header-deco,
+  .#{$primaryStyleName}-footer-deco {
+    position: absolute;
+    right: 0;
+    @include box-sizing(border-box);
+  }
+
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    @include box-sizing(border-box);
+  }
+
+  .#{$primaryStyleName}-header,
+  .#{$primaryStyleName}-body,
+  .#{$primaryStyleName}-footer {
+    position: absolute;
+    left: 0;
+    width: inherit;
+    z-index: 10;
+  }
+
+  .#{$primaryStyleName}-header,
+  .#{$primaryStyleName}-header-deco {
+    top: 0;
+  }
+
+  .#{$primaryStyleName}-footer,
+  .#{$primaryStyleName}-footer-deco {
+    bottom: 0;
+  }
+
+  .#{$primaryStyleName}-body {
+    z-index: 0;
+    top: 0;
+
+    .#{$primaryStyleName}-row {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  .#{$primaryStyleName}-row {
+    display: block;
+
+    .v-ie8 &, .v-ie9 & {
+      // Neither IE8 nor IE9 let table rows be longer than tbody, with only
+      // "display: block". Moar hax.
+
+      float: left;
+      clear: left;
+
+      // The inline style of margin-top from the <tbody> to offset the
+      // header's dimension is, for some strange reason, inherited into each
+      // contained <tr>. We need to cancel it:
+
+      margin-top: 0;
+    }
+
+    > td,
+    > th {
+      // IE8 likes the bgcolor here instead of on the row
+      background-color: $background-color;
+    }
+  }
+
+  .#{$primaryStyleName}-row {
+    width: inherit;
+  }
+
+  .#{$primaryStyleName}-cell {
+    display: block;
+    float: left;
+    padding: 2px;
+    white-space: nowrap;
+    @include box-sizing(border-box);
+    overflow: hidden;
+
+     // Because Vaadin changes the font size after the initial render, we
+     // need to mention the font size here explicitly, otherwise automatic
+     // row height detection gets broken.
+
+    font-size: $v-font-size;
+  }
+
+  .#{$primaryStyleName}-cell.frozen {
+    position: relative;
+    z-index: 1;
+  }
+
+}
diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
new file mode 100644
index 0000000000..ed068a5efc
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -0,0 +1,272 @@
+$v-grid-border: 1px 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-cell-focused-border: 1px solid !default;
+$v-grid-header-border: $v-grid-border !default;
+$v-grid-footer-border: $v-grid-header-border !default;
+
+$v-grid-row-height: round($v-font-size * 1.5) !default;
+$v-grid-row-background-color: #fff !default;
+$v-grid-row-stripe-background-color: darken($v-grid-row-background-color, 5%) !default;
+$v-grid-row-selected-background-color: darken($v-grid-row-background-color, 25%) !default;
+$v-grid-row-focused-background-color: null !default;
+
+$v-grid-header-row-height: null !default;
+$v-grid-header-font-size: $v-font-size !default;
+$v-grid-header-background-color: $v-grid-row-background-color !default;
+
+$v-grid-footer-row-height: $v-grid-header-row-height !default;
+$v-grid-footer-font-size: $v-grid-header-font-size !default;
+$v-grid-footer-background-color: $v-grid-header-background-color !default;
+
+$v-grid-cell-padding-horizontal: 5px !default;
+
+$v-grid-editor-background-color: $v-grid-row-background-color !default;
+
+
+@import "../escalator/escalator";
+
+
+@mixin base-grid($primaryStyleName: v-grid) {
+
+  @include base-escalator($primaryStyleName: $primaryStyleName, $background-color: $v-grid-row-background-color);
+
+  .#{$primaryStyleName} {
+    outline: none;
+  }
+
+  .#{$primaryStyleName}-scroller-vertical,
+  .#{$primaryStyleName}-scroller-horizontal {
+    border: $v-grid-border;
+  }
+
+  .#{$primaryStyleName}-scroller-vertical {
+    border-left: none;
+  }
+
+  .#{$primaryStyleName}-scroller-horizontal {
+    border-top: none;
+  }
+
+  .#{$primaryStyleName}-tablewrapper {
+    border: $v-grid-border;
+  }
+
+  // Common cell styles
+
+  .#{$primaryStyleName}-cell {
+    background-color: $v-grid-row-background-color;
+    padding: 0 $v-grid-cell-padding-horizontal;
+    line-height: $v-grid-row-height;
+    text-overflow: ellipsis;
+
+    > * {
+      line-height: $v-line-height;
+      vertical-align: middle;
+    }
+
+    // Force div elements to inline-blocks by default to enable vertical centering
+    > div {
+      display: inline-block;
+    }
+
+    &.frozen {
+      @include box-shadow(1px 0 2px rgba(0,0,0,.1));
+      border-right: $v-grid-cell-vertical-border;
+
+      @if $v-grid-cell-vertical-border and $v-grid-cell-vertical-border != none {
+        + th,
+        + td {
+          border-left: none;
+        }
+      }
+    }
+  }
+
+  // Rows
+
+  .#{$primaryStyleName}-row > td {
+    border-left: $v-grid-cell-vertical-border;
+    border-bottom: $v-grid-cell-horizontal-border;
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  .#{$primaryStyleName}-row-stripe > td {
+    background-color: $v-grid-row-stripe-background-color;
+  }
+
+  .#{$primaryStyleName}-row-selected > td {
+    background: $v-grid-row-selected-background-color;
+  }
+
+  .#{$primaryStyleName}-row-focused > td {
+    background-color: $v-grid-row-focused-background-color;
+  }
+
+  // Header
+
+  .#{$primaryStyleName}-header {
+    th {
+      position: relative;
+      background-color: $v-grid-header-background-color;
+      font-size: $v-grid-header-font-size;
+      font-weight: inherit;
+      border-left: $v-grid-header-border;
+      border-bottom: $v-grid-header-border;
+      line-height: $v-grid-header-row-height;
+      text-align: left;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+
+    .sort-asc,
+    .sort-desc {
+      padding-right: round($v-grid-header-font-size * 1.2) + $v-grid-cell-padding-horizontal;
+
+      &:after {
+        font-family: FontAwesome, sans-serif;
+        content: "\f0de" " " attr(sort-order);
+        position: absolute;
+        right: $v-grid-cell-padding-horizontal;
+        font-size: round($v-grid-header-font-size * 0.85);
+      }
+    }
+
+    .sort-desc:after {
+      content: "\f0dd" " " attr(sort-order);
+    }
+  }
+
+  // Footer
+
+  .#{$primaryStyleName}-footer {
+    td {
+      background-color: $v-grid-footer-background-color;
+      font-size: $v-grid-footer-font-size;
+      font-weight: inherit;
+      border-left: $v-grid-footer-border;
+      border-top: $v-grid-footer-border;
+      border-bottom: none;
+      line-height: $v-grid-footer-row-height;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  // Decorative elements
+
+  .#{$primaryStyleName}-header-deco {
+    border-top: $v-grid-header-border;
+    border-right: $v-grid-header-border;
+    background-color: $v-grid-header-background-color;
+  }
+
+  .#{$primaryStyleName}-footer-deco {
+    border-bottom: $v-grid-footer-border;
+    border-right: $v-grid-footer-border;
+    background-color: $v-grid-footer-background-color;
+  }
+
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    background-color: $v-grid-footer-background-color;
+    border: $v-grid-footer-border;
+    border-top: none;
+  }
+
+  // Focused cell style (common for all cells)
+
+  .#{$primaryStyleName}-cell-focused {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: $v-grid-cell-focused-border;
+      display: none;
+      pointer-events: none;
+    }
+    
+    // IE 8-10 apply "pointer-events" only to SVG elements. 
+    // Using an empty SVG instead of an empty text node makes IE
+    // obey the "pointer-events: none" and forwards click events 
+    // to the underlying element. The data decodes to:
+    // <svg xmlns="http://www.w3.org/2000/svg"></svg>
+    .ie8 &:before,
+    .ie9 &:before,
+    .ie10 &:before {
+      content: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==);
+    } 
+  }
+
+  .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-focused:before {
+    display: block;
+  }
+
+  .#{$primaryStyleName}.v-disabled:focus .#{$primaryStyleName}-cell-focused:before {
+    // Disabled Grid should not show cell focus outline
+    display: none;
+  }
+
+  // Editor
+
+  .#{$primaryStyleName}-editor {
+    // TODO should be fixed in offset calculations
+    margin-top: -1px;
+    position: absolute;
+    overflow-y: visible;
+    background: $v-grid-editor-background-color;
+    @include box-shadow(0 0 10px 1px rgba(0,0,0,.3));
+
+    > div {
+      position: absolute;
+      @include box-sizing(border-box);
+      border-left: $v-grid-cell-vertical-border;
+
+      &:first-child {
+        border-left: none;
+      }
+
+      .v-textfield,
+      .v-datefield,
+      .v-filterselect {
+        min-width: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        max-height: 100%;
+        border: none;
+        border-radius: 0;
+      }
+
+      .v-textfield-focus,
+      .v-filterselect-focus input {
+        position: relative;
+        z-index: 1;
+      }
+    }
+  }
+
+  .#{$primaryStyleName}-editor-save,
+  .#{$primaryStyleName}-editor-cancel {
+    position: absolute;
+    // TODO remove the inline size from the widgets
+    width: auto !important;
+    height: auto !important;
+  }
+
+  // Renderers
+
+  .#{$primaryStyleName}-cell > .v-progressbar {
+    width: 100%;
+  }
+}
diff --git a/WebContent/VAADIN/themes/chameleon/chameleon.scss b/WebContent/VAADIN/themes/chameleon/chameleon.scss
index 95f81f69c1..b315678308 100644
--- a/WebContent/VAADIN/themes/chameleon/chameleon.scss
+++ b/WebContent/VAADIN/themes/chameleon/chameleon.scss
@@ -1,10 +1,11 @@
+$font-size: 13px !default;
+$line-height: 1.4 !default;
+
 @import "../base/base.scss";
 @import "common/common.scss";
 @import "components/components.scss";
 @import "compound/compound.scss";
 
-$font-size: 13px;
-$line-height: 1.4;
 @mixin chameleon {
 	// TODO move this?
 	@include base;
diff --git a/WebContent/VAADIN/themes/reindeer-tests/styles.css b/WebContent/VAADIN/themes/reindeer-tests/styles.css
index 679de01b9c..9dd88707d1 100644
--- a/WebContent/VAADIN/themes/reindeer-tests/styles.css
+++ b/WebContent/VAADIN/themes/reindeer-tests/styles.css
@@ -32,3 +32,7 @@
 .popup-style .v-datefield-calendarpanel-body {
 	background: yellow;
 }
+
+#escalator .v-escalator-body .v-escalator-cell {
+	height: 50px;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
new file mode 100644
index 0000000000..8dacb3ccce
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -0,0 +1,60 @@
+// Variables defined in reindeer.scss
+
+@mixin reindeer-grid($primaryStyleName: v-grid) {
+
+  .#{$primaryStyleName}-header,
+  .#{$primaryStyleName}-footer {
+    .#{$primaryStyleName}-cell {
+      background-image: url(img/header-bg-light.png);
+      color: #222;
+      font-weight: bold;
+      text-shadow: #f3f5f8 0 1px 0;
+      text-transform: uppercase;
+    }
+  }
+
+  .#{$primaryStyleName}-header-deco,
+  .#{$primaryStyleName}-footer-deco,
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    background-image: url(img/header-bg-light.png);
+  }
+
+  // Selected row
+  .#{$primaryStyleName}-row-selected {
+    color: #fff;
+    text-shadow: #3b5a7a 0 1px 0;
+
+    > .#{$primaryStyleName}-cell {
+      background: #4d749f url(../common/img/sel-bg.png) repeat-x;
+      border-color: #466c90;
+    }
+
+    // Selected and focused
+    > .#{$primaryStyleName}-cell-focused:before {
+      border-color: #b1cde4;
+    }
+  }
+
+  // Sort indicators
+  .#{$primaryStyleName} th.sort-asc,
+  .#{$primaryStyleName} th.sort-desc {
+    padding-right: 16px + $v-grid-cell-padding-horizontal;
+
+    &:after {
+      content: " " attr(sort-order);
+      background: transparent no-repeat right 7px;
+      width: 16px;
+      height: 12px;
+      top: 0;
+    }
+  }
+
+  .#{$primaryStyleName} th.sort-asc:after {
+    background-image: url(img/asc-light.png);
+  }
+
+  .#{$primaryStyleName} th.sort-desc:after {
+    background-image: url(img/desc-light.png);
+  }
+
+}
diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/asc-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/asc-light.png
new file mode 100644
index 0000000000..44ed76001a
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/img/asc-light.png
diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/desc-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/desc-light.png
new file mode 100644
index 0000000000..84d15a0628
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/img/desc-light.png
diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/focus-bg-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/focus-bg-light.png
new file mode 100644
index 0000000000..20b34474c7
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/img/focus-bg-light.png
diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/focus-header-bg-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/focus-header-bg-light.png
new file mode 100644
index 0000000000..4e83df03cb
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/img/focus-header-bg-light.png
diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/focus-sel-bg-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/focus-sel-bg-light.png
new file mode 100644
index 0000000000..249fd5917c
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/img/focus-sel-bg-light.png
diff --git a/WebContent/VAADIN/themes/reindeer/grid/img/header-bg-light.png b/WebContent/VAADIN/themes/reindeer/grid/img/header-bg-light.png
new file mode 100644
index 0000000000..0b913e2ef1
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/grid/img/header-bg-light.png
diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/img/base-static.gif b/WebContent/VAADIN/themes/reindeer/progressindicator/img/base-static.gif
new file mode 100644
index 0000000000..474b684196
--- /dev/null
+++ b/WebContent/VAADIN/themes/reindeer/progressindicator/img/base-static.gif
diff --git a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
index 52e4239752..2417202828 100644
--- a/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/reindeer/progressindicator/progressindicator.scss
@@ -11,4 +11,10 @@
 	background: #f7f9f9 url(img/progress.png);
 }
 
-}
\ No newline at end of file
+// Static style
+
+.#{$primaryStyleName}-static .#{$primaryStyleName}-wrapper {
+  background: #dfe2e4 url(img/base-static.gif) repeat-x;
+}
+
+}
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
index 485839ecc7..cda571fda0 100644
--- a/WebContent/VAADIN/themes/reindeer/reindeer.scss
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -1,3 +1,20 @@
+$font-size: 12px !default;
+$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;
+
+
 @import "../base/base.scss";
 
 // common between others for now for backwards compatibility
@@ -12,6 +29,7 @@
 @import "datefield/datefield.scss";
 @import "inlinedatefield/inlinedatefield.scss";
 @import "formlayout/formlayout.scss";
+@import "grid/grid.scss";
 @import "label/label.scss";
 @import "layouts/layouts.scss";
 @import "link/link.scss";
@@ -33,9 +51,6 @@
 	background: #f5f5f5;
 }
 
-$font-size: 12px;
-$line-height: normal;
-
 @mixin reindeer {
 	@include base;
 	// TODO @each
@@ -49,6 +64,7 @@ $line-height: normal;
 	@include reindeer-datefield;
 	@include reindeer-inlinedatefield;
 	@include reindeer-formlayout;
+	@include reindeer-grid;
 	@include reindeer-label;
 	@include reindeer-layouts;
 	@include reindeer-link;
@@ -59,7 +75,7 @@ $line-height: normal;
 	@include reindeer-progressindicator(v-progressbar);
 	/* For legacy ProgressIndicator component */
 	@include reindeer-progressindicator(v-progressindicator);
-	
+
 	@include reindeer-select;
 	@include reindeer-slider;
 	@include reindeer-splitpanel;
@@ -69,5 +85,3 @@ $line-height: normal;
 	@include reindeer-tree;
 	@include reindeer-window;
 }
-
-
diff --git a/WebContent/VAADIN/themes/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
new file mode 100644
index 0000000000..a1081878cc
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -0,0 +1,53 @@
+// Variables defined in runo.scss
+
+@mixin runo-grid($primaryStyleName: v-grid) {
+
+  .#{$primaryStyleName}-header,
+  .#{$primaryStyleName}-footer {
+    .#{$primaryStyleName}-cell {
+      background-image: url(img/header-bg.png);
+      color: #393a3c;
+      text-shadow: #fff 0 1px 0;
+      @include box-shadow(inset 1px 0 0 #fff);
+    }
+  }
+
+  .#{$primaryStyleName}-header-deco,
+  .#{$primaryStyleName}-footer-deco,
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    background-image: url(img/header-bg.png);
+  }
+
+  // Selected row
+  .#{$primaryStyleName}-row-selected {
+    color: #fff;
+
+    // Selected and focused
+    > .#{$primaryStyleName}-cell-focused:before {
+      border-color: lighten($v-grid-row-selected-background-color, 20%);
+    }
+  }
+
+  // Sort indicators
+  .#{$primaryStyleName} th.sort-asc,
+  .#{$primaryStyleName} th.sort-desc {
+    padding-right: 30px + $v-grid-cell-padding-horizontal;
+
+    &:after {
+      content: attr(sort-order);
+      background: transparent no-repeat right 50%;
+      width: 30px;
+      height: 36px;
+      top: 0;
+    }
+  }
+
+  .#{$primaryStyleName} th.sort-asc:after {
+    background-image: url(img/sort-asc.png);
+  }
+
+  .#{$primaryStyleName} th.sort-desc:after {
+    background-image: url(img/sort-desc.png);
+  }
+
+}
diff --git a/WebContent/VAADIN/themes/runo/grid/img/header-bg.png b/WebContent/VAADIN/themes/runo/grid/img/header-bg.png
new file mode 100644
index 0000000000..275fbc4382
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/grid/img/header-bg.png
diff --git a/WebContent/VAADIN/themes/runo/grid/img/resizer-bg.png b/WebContent/VAADIN/themes/runo/grid/img/resizer-bg.png
new file mode 100644
index 0000000000..d9089775cb
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/grid/img/resizer-bg.png
diff --git a/WebContent/VAADIN/themes/runo/grid/img/sort-asc.png b/WebContent/VAADIN/themes/runo/grid/img/sort-asc.png
new file mode 100644
index 0000000000..44e17d5446
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/grid/img/sort-asc.png
diff --git a/WebContent/VAADIN/themes/runo/grid/img/sort-desc.png b/WebContent/VAADIN/themes/runo/grid/img/sort-desc.png
new file mode 100644
index 0000000000..35fd0595f8
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/grid/img/sort-desc.png
diff --git a/WebContent/VAADIN/themes/runo/progressindicator/img/base-static.gif b/WebContent/VAADIN/themes/runo/progressindicator/img/base-static.gif
new file mode 100644
index 0000000000..474b684196
--- /dev/null
+++ b/WebContent/VAADIN/themes/runo/progressindicator/img/base-static.gif
diff --git a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
index 9664a473b2..432123cf1f 100644
--- a/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
+++ b/WebContent/VAADIN/themes/runo/progressindicator/progressindicator.scss
@@ -20,4 +20,10 @@
 	background: #dfe2e4;
 }
 
-}
\ No newline at end of file
+// Static style
+
+.#{$primaryStyleName}-static .#{$primaryStyleName}-wrapper {
+  background: #dfe2e4 url(img/base-static.gif) repeat-x;
+}
+
+}
diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss
index 33ad35a8af..73566be8c3 100644
--- a/WebContent/VAADIN/themes/runo/runo.scss
+++ b/WebContent/VAADIN/themes/runo/runo.scss
@@ -1,3 +1,22 @@
+$font-size: 13px !default;
+$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-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;
+
+
 @import "../base/base.scss";
 
 @import "absolutelayout/absolutelayout.scss";
@@ -9,6 +28,7 @@
 @import "datefield/datefield.scss";
 @import "inlinedatefield/inlinedatefield.scss";
 @import "formlayout/formlayout.scss";
+@import "grid/grid.scss";
 @import "gridlayout/gridlayout.scss";
 @import "label/label.scss";
 @import "link/link.scss";
@@ -32,9 +52,6 @@
 	background: #e9eced;
 }
 
-$font-size: 13px;
-$line-height: 18px;
-
 @mixin runo {
 	// TODO move?
 	@include base;
@@ -44,12 +61,13 @@ $line-height: 18px;
 	@include runo-button;
 	@include runo-caption;
 	@include runo-colorpicker;
-	
+
 	@include runo-common;
-	
+
 	@include runo-datefield;
 	@include runo-inline-datefield;
 	@include runo-formlayout;
+	@include runo-grid;
 	@include runo-gridlayout;
 	@include runo-label;
 	@include runo-link;
@@ -58,11 +76,11 @@ $line-height: 18px;
 	@include runo-orderedlayout;
 	@include runo-panel;
 	@include runo-popupview;
-	
+
 	@include runo-progressindicator(v-progressbar);
 	/* For legacy ProgressIndicator component */
 	@include runo-progressindicator(v-progressindicator);
-	
+
 	@include runo-select;
 	@include runo-shadow;
 	@include runo-slider;
diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss
index 0efc363a82..52f1d696aa 100644
--- a/WebContent/VAADIN/themes/valo/components/_all.scss
+++ b/WebContent/VAADIN/themes/valo/components/_all.scss
@@ -105,7 +105,7 @@
   }
 
   @if v-is-included(grid) {
-    @include valo-grid(v-escalator);
+    @include valo-grid;
   }
 
   @if v-is-included(textfield) {
diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss
deleted file mode 100644
index 06ce2e6142..0000000000
--- a/WebContent/VAADIN/themes/valo/components/_escalator.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- *
- *
- * @param {string} $primaryStyleName (v-escalator) - 
- *
- * @group escalator
- */
-@mixin valo-escalator($primaryStyleName : v-escalator) {
-
-$background-color: white;
-$border-color: #aaa;
-
-.#{$primaryStyleName} {
-  position: relative;
-  background-color: $background-color;
-}
-
-.#{$primaryStyleName}-scroller {
-  position: absolute;
-  overflow: auto;
-  z-index: 20;
-}
-
-.#{$primaryStyleName}-scroller-horizontal {
-  left: 0; /* Left position adjusted to align with frozen columns */
-  right: 0;
-  bottom: 0;
-  overflow-y: hidden;
-  -ms-overflow-y: hidden;
-}
-
-.#{$primaryStyleName}-scroller-vertical {
-  right: 0;
-  top: 0;    /* this will be overridden by code, but it's a good default behavior */
-  bottom: 0; /* this will be overridden by code, but it's a good default behavior */
-  overflow-x: hidden;
-  -ms-overflow-x: hidden;
-}
-
-.#{$primaryStyleName}-tablewrapper {
-  position: absolute;
-  overflow: hidden;
-}
-
-.#{$primaryStyleName}-tablewrapper > table {
-  border-spacing: 0;
-  table-layout: fixed;
-  width: inherit; /* a decent default fallback */
-}
-
-.#{$primaryStyleName}-header,
-.#{$primaryStyleName}-body,
-.#{$primaryStyleName}-footer {
-  position: absolute;
-  left: 0;
-  width: inherit;
-  z-index: 10;
-}
-
-.#{$primaryStyleName}-header { top: 0; }
-.#{$primaryStyleName}-footer { bottom: 0; }
-
-.#{$primaryStyleName}-body {
-  z-index: 0;
-  top: 0;
-  
-  .#{$primaryStyleName}-row {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-.#{$primaryStyleName}-row {
-  display: block;
-  
-  .v-ie8 & {
-    /* IE8 doesn't let table rows be longer than body only with display block. Moar hax. */
-    float: left;
-    clear: left;
-    
-    /* 
-     * The inline style of margin-top from the <tbody> to offset the header's dimension is, 
-     * for some strange reason, inherited into each contained <tr>. 
-     * We need to cancel it: 
-     */
-    margin-top: 0;
-  }
-
-  > td, > th {
-    /* IE8 likes the bgcolor here instead of on the row */
-    background-color: $background-color;
-  }
-}
-
-
-.#{$primaryStyleName}-row {
-  width: inherit;
-}
-
-.#{$primaryStyleName}-cell {
-  display: block;
-  float: left;
-  border: 1px solid $border-color;
-  padding: 2px;
-  white-space: nowrap;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.#{$primaryStyleName}-cell.frozen {
-  position: relative;
-  z-index: 0;
-}
-
-}
\ 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 cf06167337..2e76434709 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -1,12 +1,98 @@
-@import "escalator";
+@import "table";
+
+$v-grid-row-background-color: valo-table-background-color() !default;
+$v-grid-row-stripe-background-color: scale-color($v-grid-row-background-color, $lightness: if(color-luminance($v-grid-row-background-color) < 10, 4%, -4%)) !default;
+
+$v-grid-border: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default;
+$v-grid-cell-focused-border: max(2px, first-number($v-border)) solid $v-selection-color !default;
+
+$v-grid-row-height: $v-table-row-height !default;
+$v-grid-row-selected-background-color: $v-selection-color !default;
+
+$v-grid-header-font-size: $v-table-header-font-size !default;
+$v-grid-header-background-color: $v-background-color !default;
+
+$v-grid-cell-padding-horizontal: $v-table-cell-padding-horizontal !default;
+
+
+@import "../../base/grid/grid";
 
 /**
  *
  *
- * @param {string} $primary-styleName (v-grid) - 
+ * @param {string} $primary-stylename (v-grid) -
  *
  * @group grid
  */
-@mixin valo-grid($primary-styleName : v-grid) {
-  @include valo-escalator($primary-styleName);
-}
\ No newline at end of file
+@mixin valo-grid ($primary-stylename: v-grid) {
+
+  @include base-grid($primary-stylename);
+
+  .#{$primary-stylename} {
+    @include user-select(text);
+    background-color: $v-background-color;
+  }
+
+  .#{$primary-stylename}-header .#{$primary-stylename}-cell {
+    @include valo-gradient($v-grid-header-background-color);
+    text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-header-background-color), $background-color: $v-grid-header-background-color);
+  }
+
+  .#{$primary-stylename}-footer .#{$primary-stylename}-cell {
+    @include valo-gradient($v-grid-footer-background-color);
+    text-shadow: valo-text-shadow($font-color: valo-font-color($v-grid-footer-background-color), $background-color: $v-grid-footer-background-color);
+  }
+
+  .#{$primary-stylename}-header-deco {
+    @include valo-gradient($v-grid-header-background-color);
+  }
+
+  .#{$primary-stylename}-footer-deco,
+  .#{$primary-stylename}-horizontal-scrollbar-deco {
+    @include valo-gradient($v-grid-footer-background-color);
+  }
+
+  // Selected
+  .#{$primary-stylename}-row-selected {
+    > .#{$primary-stylename}-cell {
+      @include valo-gradient($v-selection-color);
+      color: valo-font-color($v-selection-color);
+      text-shadow: valo-text-shadow($font-color: valo-font-color($v-selection-color), $background-color: $v-selection-color);
+      border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);
+    }
+
+    > .#{$primary-stylename}-cell-focused:before {
+      border-color: adjust-color($v-selection-color, $lightness: 20%);
+    }
+  }
+
+  .#{$primary-stylename}-editor-save,
+  .#{$primary-stylename}-editor-cancel {
+    @include valo-button-static-style;
+    @include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
+  }
+
+  // Customize scrollbars
+  .#{$primary-stylename}-scroller {
+    &::-webkit-scrollbar {
+      border: none;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      border: 4px solid transparent;
+      background: if(is-dark-color($v-grid-header-background-color), rgba(255,255,255,.3), rgba(0,0,0,.3));
+      -webkit-background-clip: content-box;
+      background-clip: content-box;
+    }
+  }
+
+  .#{$primary-stylename}-scroller-vertical::-webkit-scrollbar-thumb {
+    min-height: 30px;
+  }
+
+  .#{$primary-stylename}-scroller-horizontal::-webkit-scrollbar-thumb {
+    min-width: 30px;
+  }
+
+}