Grid theme API changes and style fixes

Renamed decorative element style names:
- “headercorner” -> “header-deco”
- “footercorner” -> “footer-deco”
- “horizontalscrollbarbackground” -> “horizontal-scrollbar-deco”

The “-stripe” style name is now added for odd rows, not even (like in
all Table themes).

Re-implemented the Base mixins for Grid and Escalator. They are now
used for all themes, which should make future development easier
because things should only be implemented in one place.

This change makes the theme also less brittle hopefully, because it
reduces the amount of pixel calculations for paddings etc. and relies
more on plain CSS.

The Base theme now offers many variables for extending themes. This
reduces unnecessary CSS output, and makes it easier to maintain
multiple themes for the Grid.

Added a box-shadow and box-sizing mixins to Base.

Converted all CSS comments to Sass comments.

Change-Id: Iba925062c754c115b5f15e155659cfdccc702945

10 files changed, 597 insertions, 822 deletions

diff --git a/WebContent/VAADIN/themes/base/base.scss b/WebContent/VAADIN/themes/base/base.scss
index 6263646ce1..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";
@@ -61,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;
@@ -80,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;
@@ -107,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..ee00f644fa 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,17 @@
 }
 
 @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;
+  box-shadow: $shadow;
+}
+
+@mixin box-sizing ($box-sizing) {
+  -webkit-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
index c5b5d24fa4..ad09207ce0 100644
--- a/WebContent/VAADIN/themes/base/escalator/escalator.scss
+++ b/WebContent/VAADIN/themes/base/escalator/escalator.scss
@@ -1,137 +1,135 @@
-@mixin base-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}-headercorner,
-.#{$primaryStyleName}-footercorner {
-	position: absolute;
-	right: 0;
-	border: 1px solid $border-color;
-	box-sizing: border-box;
-}
-
-.#{$primaryStyleName}-headercorner { top: 0; }
-.#{$primaryStyleName}-footercorner { bottom: 0; }
-
-.#{$primaryStyleName}-horizontalscrollbarbackground {
-	position: absolute;
-	bottom: 0;
-	width: 100%;
-}
-
-.#{$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 &, .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;
-	border: 1px solid $border-color;
-	padding: 2px;
-	white-space: nowrap;
-	-moz-box-sizing: border-box;
-	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: $font-size; 
-}
-
-.#{$primaryStyleName}-cell.frozen {
-	position: relative;
-	z-index: 1;
-}
+@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
index 341fea80b5..cb381236c1 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -1,61 +1,239 @@
-@mixin base-grid($primaryStyleName : v-grid) {
-	@include base-escalator($primaryStyleName);
-
-	.#{$primaryStyleName} {
-
-		th {
-			position: relative;
-		}
-
-		th.sort-asc:after {
-			content: "\25B2" attr(sort-order);
-			position: absolute;
-			right: 5px;
-		}
-
-		th.sort-desc:after {
-			content: "\25BC" attr(sort-order);
-			position: absolute;
-			right: 5px;
-		}
-
-		.#{$primaryStyleName}-cell-active {
-			border-color: blue;
-		}
-
-		.#{$primaryStyleName}-row-active > td {
-			background: rgb(244,244,244);
-		}
-	}
-	
-	.#{$primaryStyleName}-row > td {
-		background-color: #fff;
-	}
-	
-	.#{$primaryStyleName}-row-stripe > td {
-		background-color: #eee;
-	}
-
-	.#{$primaryStyleName}-row-selected > td {
-		background: lightblue;
-	}
-
-	.#{$primaryStyleName}-editor-row {
-
-		position: absolute;
-		overflow-y: visible;
-		background: #EEE;
-		box-shadow: 0 0 5px;
-
-		& > div {
-			position: absolute;
-			box-sizing: border-box;
-			border: 1px solid #CCC;
-		}
-
-		.v-editor-row-save,
-		.v-editor-row-cancel {
-			position: absolute;
-		}
-	}
+$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-active-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-active-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-row-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}-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;
+    }
+
+    &.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-top: $v-grid-cell-horizontal-border;
+
+    &:first-child {
+      border-left: none;
+    }
+  }
+
+  tbody > .#{$primaryStyleName}-row:first-child > td {
+    border-top: 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-active > td {
+    background-color: $v-grid-row-active-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;
+      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;
+  }
+
+  // Active cell style (common for all cells)
+
+  .#{$primaryStyleName}-cell-active {
+    position: relative;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      border: $v-grid-cell-active-border;
+      display: none;
+    }
+  }
+
+  .#{$primaryStyleName}:focus .#{$primaryStyleName}-cell-active:before {
+    display: block;
+  }
+
+  // Editor row
+
+  .#{$primaryStyleName}-editor-row {
+    // TODO should be fixed in offset calculations
+    margin-top: -1px;
+    position: absolute;
+    overflow-y: visible;
+    background: $v-grid-editor-row-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;
+      }
+    }
+
+    > .v-editor-row-save,
+    > .v-editor-row-cancel {
+      position: absolute;
+      // TODO remove the inline size from the widgets
+      width: auto !important;
+      height: auto !important;
+    }
+  }
 }
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/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 09bc03ad73..397aa229cd 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -1,187 +1,60 @@
-@mixin reindeer-grid($primary-stylename : v-grid) {
-  
-  $grid-border-main: 1px solid #c2c3c4;
-  $grid-border-light: 1px solid #d4d4d4;
-  $grid-background-light: #d4d7d9;
-  
-  .#{$primary-stylename} {
-    outline: none;
-  }
-  
-  // Table wrapper
-  .#{$primary-stylename}-tablewrapper {
-    @include box-sizing(border-box);
-    border: $grid-border-light;
-  }
-  
-  // Grid header.
-  .#{$primary-stylename}-header, .#{$primary-stylename}-footer {
-    
-    .#{$primary-stylename}-cell {
-      background: $grid-background-light repeat-x;
+// 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);
-      border: $grid-border-main;
-      border-right: none;
       color: #222;
-      font-size: 10px;
       font-weight: bold;
-      line-height: normal;
-      padding: 4px 4px 5px 6px;
       text-shadow: #f3f5f8 0 1px 0;
       text-transform: uppercase;
-      
-      &:first-child {
-        border-left: none;
-      }
     }
-    
-    .#{$primary-stylename}-cell-active {
-      border-right: 1px solid transparent;
-      border-color: #0f68ba;
-      padding-right: 3px;
-    }
-    
-    .#{$primary-stylename}-cell-active:first-child {
-      border-left: 1px solid #0f68ba;
-      padding-left: 5px;
-    }
-    
-  }
-  
-  .#{$primary-stylename}-cell.frozen {
-    /* TODO this probably should be a SCSS mixin */
-    -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
-    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
-  }
-  
-  .#{$primary-stylename}-header {
-    border-top: none;
   }
-  
-  .#{$primary-stylename}-footer {
-    border-bottom: none;
+
+  .#{$primaryStyleName}-header-deco,
+  .#{$primaryStyleName}-footer-deco,
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    background-image: url(img/header-bg-light.png);
   }
-  
-  // Grid body
-  .#{$primary-stylename}-body {
-    
-    // Rows
-    .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell {
-      background-color: #eff0f1;
-    }
-    
-    // Cells
-    .#{$primary-stylename}-cell {
-      border: none;
-      border-left: 1px solid #d3d4d5;
-      padding: 3px 6px;
-      
-      &:first-child {
-        border-left: none;
-        
-        input[type="checkbox"] {
-          margin: 0;
-        }
-      }
-    }
-    
-    // Active state
-    .#{$primary-stylename}-row-active {
-      
-      .#{$primary-stylename}-cell {
-        background: #d6dfe9 url(img/focus-bg-light.png) repeat-x;
-      }
-      
-      .#{$primary-stylename}-cell-active {
-        border: 1px solid #0f68ba;
-      
-        // Adjust padding for 'active' borders.
-        padding: 2px 5px 2px 6px;
-        &:first-child {
-          padding-left: 5px;
-        }
-      }
-    }
-    
-    // Selected state
-    .#{$primary-stylename}-row-selected {
-      color: #fff;
-      text-shadow: #3b5a7a 0 1px 0;
-      
-      .#{$primary-stylename}-cell {
-        background: #4d749f url(../common/img/sel-bg.png) repeat-x;
-        border-color: #466c90;
-      }
-      
-      // Selected and focused
-      .#{$primary-stylename}-cell-active {
-        border-color: #b1cde4;
-      }
+
+  // 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;
     }
-    
-    .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell {
-        background: #d6dfe9 url(img/focus-sel-bg-light.png) repeat-x;
+
+    // Selected and active
+    > .#{$primaryStyleName}-cell-active:before {
+      border-color: #b1cde4;
     }
   }
-  
+
   // Sort indicators
-  .#{$primary-stylename} th.sort-asc:after,
-  .#{$primary-stylename} th.sort-desc:after {
-    content: " " attr(sort-order);
-    position: absolute;
-    right: 5px;
-    background: transparent no-repeat right 7px;
-    width: 16px;
-    height: 12px;
-    top: 0px;
-  }
-  
-  .#{$primary-stylename} th.#{$primary-stylename}-cell-active:after,
-  .#{$primary-stylename} th.#{$primary-stylename}-cell-active:after {
-  	right: 4px;
-  }
-  
-  .#{$primary-stylename} th.sort-asc:after {
-    background-image: url(img/desc-light.png);
+  .#{$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;
+    }
   }
-  
-  .#{$primary-stylename} th.sort-desc:after {
+
+  .#{$primaryStyleName} th.sort-asc:after {
     background-image: url(img/asc-light.png);
   }
-  
-  // Scrollbars
-  .#{$primary-stylename}-scroller {
-    @include box-sizing(border-box);
-    outline: none;
-  }  
-  
-  .#{$primary-stylename}-scroller-vertical {
-    border-top: $grid-border-main;
-    border-bottom: $grid-border-light;
-  }
-  
-  .#{$primary-stylename}-scroller-horizontal {
-    border-left: $grid-border-light;
-    border-right: $grid-border-light;
-  }
-  
-  // Fillers
-  .#{$primary-stylename}-horizontalscrollbarbackground,
-  .#{$primary-stylename}-footercorner,
-  .#{$primary-stylename}-headercorner {
-    @include box-sizing(border-box);
-    background: $grid-background-light repeat-x;
-    background-image: url(img/header-bg-light.png);
-    border: $grid-border-light;
-  }
-  
-  .#{$primary-stylename}-footercorner {
-    border-top: none;
+
+  .#{$primaryStyleName} th.sort-desc:after {
+    background-image: url(img/desc-light.png);
   }
-}
 
-@mixin box-sizing($value) {
-  box-sizing: $value;
-  -moz-box-sizing: $value;
-  -webkit-box-sizing: $value;
-}
\ No newline at end of file
+}
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
index b49e58c323..443f5cc7f3 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-active-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
@@ -34,9 +51,6 @@
 	background: #f5f5f5;
 }
 
-$font-size: 12px;
-$line-height: normal;
-
 @mixin reindeer {
 	@include base;
 	// TODO @each
@@ -61,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;
@@ -71,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
index 204dc4c3f2..77d7b0a9af 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -1,205 +1,53 @@
-@mixin runo-grid($primary-stylename : v-grid) {
-  
-  $grid-border-main: 1px solid #b6bbbc;
-  $grid-border-active: 1px solid #57a7ed;
-  
-  .#{$primary-stylename} {
-    outline: none;
-  }
-  
-  .#{$primary-stylename}-tablewrapper {
-    @include box-sizing(border-box);
-    border: $grid-border-main;
-  }
-  
-  .#{$primary-stylename}-cell.frozen {
-    /* TODO this probably should be a SCSS mixin */
-    -webkit-box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
-    box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1);
-  }
-  
-  // Grid header.
-  .#{$primary-stylename}-header, .#{$primary-stylename}-footer {
-    
-    .#{$primary-stylename}-cell {
+// 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;
-      background: #e7e9ea url(img/header-bg.png) repeat-x;
-      border: none;
-      font-size: 15px;
-      font-weight: normal;
-      padding: 9px 2px 9px 6px;
-      position: relative;
-      text-shadow: #ffffff 0 1px 0;
-      
-      &:first-child {
-        &:before, &:after {
-          content: none;
-        }
-      }
-      
-      &:before {
-        background-image: url(img/resizer-bg.png);
-        content: "";
-        height: 100%;
-        left: 0;
-        top: 0;
-        width: 2px;
-        position: absolute;
-      }
-    }
-    
-    .#{$primary-stylename}-cell-active {
-        border: $grid-border-active;
+      text-shadow: #fff 0 1px 0;
+      @include box-shadow(inset 1px 0 0 #fff);
     }
   }
-  
-  .#{$primary-stylename}-header {
-    .#{$primary-stylename}-cell {
-      border-bottom: $grid-border-main;
-    }
 
-    .#{$primary-stylename}-cell-active {
-        padding: 8px 1px 9px 5px;
-    }
+  .#{$primaryStyleName}-header-deco,
+  .#{$primaryStyleName}-footer-deco,
+  .#{$primaryStyleName}-horizontal-scrollbar-deco {
+    background-image: url(img/header-bg.png);
   }
-  
-  .#{$primary-stylename}-footer {
-    .#{$primary-stylename}-cell {
-      border-top: $grid-border-main;
-    }
-    
-    .#{$primary-stylename}-cell-active {
-        padding: 9px 1px 8px 5px;
+
+  // Selected row
+  .#{$primaryStyleName}-row-selected {
+    color: #fff;
+
+    // Selected and active
+    > .#{$primaryStyleName}-cell-active:before {
+      border-color: lighten($v-grid-row-selected-background-color, 20%);
     }
   }
-  
-  .#{$primary-stylename}-header .#{$primary-stylename}-cell-active {
-    border-bottom: $grid-border-active;
-  }
-  
-  .#{$primary-stylename}-footer .#{$primary-stylename}-cell-active {
-    border-top: $grid-border-active;
-  }
-  
+
   // Sort indicators
-  .#{$primary-stylename} th.sort-asc:after,
-  .#{$primary-stylename} th.sort-desc:after {
-    content: attr(sort-order);
-    height: 36px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    width: 20px;
-  }
-  
-  .#{$primary-stylename} th.#{$primary-stylename}-cell-active.sort-asc:after,
-  .#{$primary-stylename} th.#{$primary-stylename}-cell-active.sort-desc:after {
-    right: -1px;
-    top: -1px;
-  }
-  
-  .#{$primary-stylename} th.sort-asc:after {
-    background: transparent url(img/sort-asc.png) no-repeat right 50%;
-  }
-  
-  .#{$primary-stylename} th.sort-desc:after {
-    background: transparent url(img/sort-desc.png) no-repeat right 50%;
-  }
-  
-  // Grid body
-  .#{$primary-stylename}-body {
-    
-    .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell {
-      background-color: #f6f7f7;
-    }
-    
-    // Cells
-    .#{$primary-stylename}-cell {
-      border: none;
-      line-height: 23px;
-      padding: 3px 6px 0 6px;
-    }
-    
-    // Active state
-    .#{$primary-stylename}-row-active {
-      
-      .#{$primary-stylename}-cell {
-        background: #edeeee;
-      }
-      
-      .#{$primary-stylename}-cell-active {
-        border: $grid-border-active;
-      
-        // Adjust padding for 'active' border.
-        padding: 2px 5px 0 5px;
-      }
-    }
-    
-    // Selected state
-    .#{$primary-stylename}-row.#{$primary-stylename}-row-selected {
-      color: white;
-      
-      .#{$primary-stylename}-cell {
-        background-color: #57a7ed;
-      }
-      
-      .#{$primary-stylename}-cell-active {
-        border-color: #489ade;
-      }
-    }
-    
-    .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell {
-        background: #3a90d3;
+  .#{$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;
     }
-    
-  }
-  
-  // Scrollbars
-  .#{$primary-stylename}-scroller {
-    @include box-sizing(border-box);
-    outline: none;
-  }
-  
-  .#{$primary-stylename}-scroller-vertical {
-    border-top: $grid-border-main;
-    border-bottom: $grid-border-main;
-  }
-  
-  .#{$primary-stylename}-scroller-horizontal {
-    border-left: $grid-border-main;
-    border-right: $grid-border-main;
-  }
-  
-  // Fillers
-  .#{$primary-stylename}-horizontalscrollbarbackground,
-  .#{$primary-stylename}-footercorner,
-  .#{$primary-stylename}-headercorner {
-    @include box-sizing(border-box);
-    border: $grid-border-main;
   }
 
-  .#{$primary-stylename}-footercorner,
-  .#{$primary-stylename}-headercorner {
-    background: #e7e9ea url(img/header-bg.png) repeat-x;
-    border-left: 0;
+  .#{$primaryStyleName} th.sort-asc:after {
+    background-image: url(img/sort-asc.png);
   }
 
-  .#{$primary-stylename}-footercorner {
-    border-top: 0;
-  }
-  
-  .#{$primary-stylename}-headercorner {
-    border-bottom: 0;
+  .#{$primaryStyleName} th.sort-desc:after {
+    background-image: url(img/sort-desc.png);
   }
-      
-  .#{$primary-stylename}-horizontalscrollbarbackground {
-    background-color: #edeeee;
-    border-top: 0;
-  }
-}
 
-@mixin box-sizing($value) {
-  box-sizing: $value;
-  -moz-box-sizing: $value;
-  -webkit-box-sizing: $value;
-}
\ No newline at end of file
+}
diff --git a/WebContent/VAADIN/themes/runo/runo.scss b/WebContent/VAADIN/themes/runo/runo.scss
index 2294d0329b..92fed26267 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-active-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";
@@ -33,9 +52,6 @@
 	background: #e9eced;
 }
 
-$font-size: 13px;
-$line-height: 18px;
-
 @mixin runo {
 	// TODO move?
 	@include base;
@@ -45,9 +61,9 @@ $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;
@@ -60,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/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index dbf25273a4..be9201d98d 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -1,275 +1,108 @@
-@import "../../base/escalator/escalator";
 @import "table";
 
-$primary-stylename: v-grid;
-$grid-background-color: valo-table-background-color();
-$grid-border: valo-border($color: $grid-background-color, $strength: 0.8);
+$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;
 
-$grid-cell-active-border-width: round($v-unit-size * 0.05);
-$grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2);
+$v-grid-border: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default;
+$v-grid-cell-active-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) -
  *
  * @group grid
- */ 
-@mixin valo-grid($primary-stylename : v-grid) {
+ */
+@mixin valo-grid ($primary-stylename: v-grid) {
+
+  @include base-grid($primary-stylename);
 
-  @include base-escalator($primary-stylename);
-  
   .#{$primary-stylename} {
-    outline: none;
-  }
-  
-  // Table wrapper
-  .#{$primary-stylename}-tablewrapper {
-    border: $grid-border;
-    @include box-sizing(border-box);
+    @include user-select(text);
+    background-color: $v-background-color;
   }
 
-  // Grid header.
-  .#{$primary-stylename}-header {
-    @include valo-grid-header-style;
-  }
-  
-  // Sort indicators
-  .#{$primary-stylename} th.sort-asc:after, th.sort-desc:after {
-    font-family: FontAwesome;
-    float: right;
+  .#{$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} th.sort-asc:after {
-   content: "\f0dd" attr(sort-order);
+  .#{$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} th.sort-desc:after {
-    content: "\f0de" attr(sort-order);
+
+  .#{$primary-stylename}-header-deco {
+    @include valo-gradient($v-grid-header-background-color);
   }
 
-  // Grid body.
-  .#{$primary-stylename}-body {
-    
-    // Rows
-    .#{$primary-stylename}-row > td {
-      background-color: $grid-background-color;
-    }
-      
-    .#{$primary-stylename}-row-stripe > td {
-      $bg-lightness: if(color-luminance($grid-background-color) < 10, 4%, -4%);
-      background-color: scale-color($grid-background-color, $lightness: $bg-lightness);
-    }
-    
-    // Cells
-    .#{$primary-stylename}-cell {
-      padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal;
-    }
-    
-    
-    // Active state
-    .#{$primary-stylename}-row-active .#{$primary-stylename}-cell-active {
-      border: $grid-cell-active-border-width solid $v-selection-color;
-      padding-top: $grid-cell-padding-vertical - $grid-cell-active-border-width;
-      padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
-      padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width;
-      padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2);
-      
-      &:first-child {
-        padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
-      }
-    }
-    
-    // Selected state
-    .#{$primary-stylename}-row-selected {
-      
-      .#{$primary-stylename}-cell-active {
-        border-color: adjust-color($v-selection-color, $lightness: 20%);
-      }
-      
-      td {
-        @include valo-gradient($v-selection-color);
-        color: $grid-background-color;
-        border-color: adjust-color($v-selection-color, $lightness: -8%, $saturation: -8%);
-      }
-    }
+  .#{$primary-stylename}-footer-deco,
+  .#{$primary-stylename}-horizontal-scrollbar-deco {
+    @include valo-gradient($v-grid-footer-background-color);
   }
-  
-  // Common styles for all cells
-  .#{$primary-stylename}-cell {
-    border: none;
-    border-left: $grid-border;
-    line-height: 1;
-    
-    &.frozen {
-      @include box-shadow(2px 0 2px rgba(0,0,0,0.1));
+
+  // 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%);
     }
-    
-    &:first-child {
-      border-left: none;
-      position: relative;
-        
-      // Position the first column checkboxes
-      input[type="checkbox"] {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        margin: auto;
-        right: 0;
-        top: 0;
-      }
+
+    > .#{$primary-stylename}-cell-active:before {
+      border-color: adjust-color($v-selection-color, $lightness: 20%);
     }
   }
-  
-  // Grid footer.
-  .#{$primary-stylename}-footer {
-    @include valo-grid-footer-style;
+
+  .v-editor-row-save,
+  .v-editor-row-cancel {
+    @include valo-button-static-style;
+    @include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
   }
-  
-  // Grid editor row
-  .#{$primary-stylename}-editor-row {
-    @include box-shadow(0px 0px 6px 2px rgba(0,0,0,0.14));
-    position: relative;
-    outline: none;
-    
-    // Ugly fix for correcting editor row position
-    margin-top: -1px;
-    
-    > div {
-      @include box-sizing(border-box);
-      display: inline-block;
-      
-      .v-textfield, .v-datefield, .v-filterselect {
-        background: $grid-background-color;
-        border: none;
-        border-left: $grid-border;
-        border-radius: 0;
-        height: 100%;
-        width: 100%;
-        
-        &:focus, &:active {
-          @include box-shadow(inset 0 0 0 2px $v-focus-color);
-          outline: none;
-        }
-      }
-      
-      &:first-child > * {
-        border-left: none;
-      }
+
+  // Customize scrollbars
+  .#{$primary-stylename}-scroller {
+    &::-webkit-scrollbar {
+      border: none;
     }
-  }
-  
-  // Grid editor row buttons
-  .v-editor-row-save, .v-editor-row-cancel {
-    @include valo-button-static-style;
-    @include valo-button-style($unit-size: $v-unit-size--small, $border-radius: 0);
-    border-right: none;
-    position: static;
-    width: auto !important;
 
-    &:after, &:before {
-      content: 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;
     }
   }
-  .v-editor-row-save {
-    border-bottom-left-radius: round($v-unit-size * 0.1);
-  }
-  
-   // Scrollbars
-  .#{$primary-stylename}-scroller {
-    @include box-sizing(border-box);
-    outline: none;
-  }  
-  
-  .#{$primary-stylename}-scroller-vertical {
-    border-top: $grid-border;
-    border-bottom: $grid-border;
-  }
-    
-  .#{$primary-stylename}-scroller-horizontal {
-    border-left: $grid-border;
-    border-right: $grid-border;
-  }
-  
-  // Fillers
-  .#{$primary-stylename}-horizontalscrollbarbackground,
-  .#{$primary-stylename}-headercorner,
-  .#{$primary-stylename}-footercorner {
-    @include box-sizing(border-box);
-    @include valo-gradient($v-background-color);
-    border: $grid-border;
-  }
-  
-  .#{$primary-stylename}-horizontalscrollbarbackground {
-  	border-top: none;
-  }
-  
-  .#{$primary-stylename}-headercorner,
-  .#{$primary-stylename}-footercorner {
-  	border-left: none;
-  }
-  
-  .#{$primary-stylename}-footercorner {
-  	border-top: none;
-  }
-  
-  .#{$primary-stylename}-headercorner {
-  	border-bottom: none;
-  }
-}
 
-@mixin valo-grid-header-style {
-  .#{$primary-stylename}-cell {
-    @include valo-gradient($v-background-color);
-    border-bottom: $grid-border;
-  }
+  .#{$primary-stylename}-scroller-vertical {
+    border: $v-grid-border;
+    border-left: none;
 
-  th {
-    font-weight: inherit;
-    font-size: $v-table-header-font-size;
-    padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width;
-  }
-  
-  // Active state
-    .#{$primary-stylename}-cell-active {
-      border: $grid-cell-active-border-width solid $v-selection-color;
-      padding-top: $grid-cell-padding-vertical - $grid-cell-active-border-width;
-      padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
-      padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width;
-      padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2);
-    }
-    
-    & .#{$primary-stylename}-cell-active:first-child {
-      border-left: $grid-cell-active-border-width solid $v-selection-color;
-      padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
+    &::-webkit-scrollbar-thumb {
+      min-height: 30px;
     }
+  }
 
-}
+  .#{$primary-stylename}-scroller-horizontal {
+    border: $v-grid-border;
+    border-top: none;
 
-@mixin valo-grid-footer-style {
-  .#{$primary-stylename}-cell {
-    @include valo-gradient($v-background-color);
-    border-top: $grid-border;
+    &::-webkit-scrollbar-thumb {
+      min-width: 30px;
+    }
   }
 
-  td {
-    font-weight: inherit;
-    font-size: $v-table-header-font-size;
-    padding: $grid-cell-padding-vertical $v-table-cell-padding-horizontal $grid-cell-padding-vertical - $v-table-border-width;
-  }
-  
-    // Active state
-    .#{$primary-stylename}-cell-active {
-      border: $grid-cell-active-border-width solid $v-selection-color;
-      padding-top: $grid-cell-padding-vertical - round($grid-cell-active-border-width/2);
-      padding-right: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
-      padding-bottom: $grid-cell-padding-vertical - $grid-cell-active-border-width;
-      padding-left: $v-table-cell-padding-horizontal - round($grid-cell-active-border-width/2);
-    }
-    
-    & .#{$primary-stylename}-cell-active:first-child {
-      border-left: $grid-cell-active-border-width solid $v-selection-color;
-      padding-left: $v-table-cell-padding-horizontal - $grid-cell-active-border-width;
-    }
-  
 }