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

4 files changed, 399 insertions, 207 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;
+    }
+  }
 }