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

2 files changed, 61 insertions, 176 deletions

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