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

1 files changed, 238 insertions, 60 deletions

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;
+    }
+  }
 }