Patches up the themes for Grid a bit (#13334)

Change-Id: I1231b8097d06d8230ddee640894ceaf749dab0ee

6 files changed, 159 insertions, 80 deletions

diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index 1fa0a743a6..09bc03ad73 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -1,11 +1,8 @@
 @mixin reindeer-grid($primary-stylename : v-grid) {
   
-  // TODO: check/set these values
-  $scrollbar-size: 15px;
-  $header-height: 22px;
-  
   $grid-border-main: 1px solid #c2c3c4;
   $grid-border-light: 1px solid #d4d4d4;
+  $grid-background-light: #d4d7d9;
   
   .#{$primary-stylename} {
     outline: none;
@@ -21,7 +18,7 @@
   .#{$primary-stylename}-header, .#{$primary-stylename}-footer {
     
     .#{$primary-stylename}-cell {
-      background: transparent repeat-x;
+      background: $grid-background-light repeat-x;
       background-image: url(img/header-bg-light.png);
       border: $grid-border-main;
       border-right: none;
@@ -37,6 +34,24 @@
         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 {
@@ -74,7 +89,7 @@
     .#{$primary-stylename}-row-active {
       
       .#{$primary-stylename}-cell {
-        background: none;
+        background: #d6dfe9 url(img/focus-bg-light.png) repeat-x;
       }
       
       .#{$primary-stylename}-cell-active {
@@ -98,10 +113,15 @@
         border-color: #466c90;
       }
       
+      // Selected and focused
       .#{$primary-stylename}-cell-active {
         border-color: #b1cde4;
       }
     }
+    
+    .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell {
+        background: #d6dfe9 url(img/focus-sel-bg-light.png) repeat-x;
+    }
   }
   
   // Sort indicators
@@ -116,6 +136,11 @@
     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);
   }
@@ -141,30 +166,17 @@
   }
   
   // Fillers
-  .#{$primary-stylename}-filler-x {
+  .#{$primary-stylename}-horizontalscrollbarbackground,
+  .#{$primary-stylename}-footercorner,
+  .#{$primary-stylename}-headercorner {
     @include box-sizing(border-box);
-    background: transparent repeat-x;
+    background: $grid-background-light repeat-x;
     background-image: url(img/header-bg-light.png);
     border: $grid-border-light;
-    border-top: none;
-    bottom: 0px;
-    height: $scrollbar-size;
-    left: 0;
-    position: absolute;
-    width: 100%;
   }
   
-  .#{$primary-stylename}-filler-y {
-    @include box-sizing(border-box);
-    background: transparent repeat-x;
-    background-image: url(img/header-bg-light.png);
-    border: $grid-border-light;
-    border-left: none;
-    height: $header-height;
-    position: absolute;
-    right: 0;
-    top: 0px;
-    width: $scrollbar-size; 
+  .#{$primary-stylename}-footercorner {
+    border-top: none;
   }
 }
 
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/runo/grid/grid.scss b/WebContent/VAADIN/themes/runo/grid/grid.scss
index c5b3602943..204dc4c3f2 100644
--- a/WebContent/VAADIN/themes/runo/grid/grid.scss
+++ b/WebContent/VAADIN/themes/runo/grid/grid.scss
@@ -1,10 +1,7 @@
 @mixin runo-grid($primary-stylename : v-grid) {
   
-  // TODO: check/set these values
-  $scrollbar-size: 15px;
-  $header-height: 38px;
-  
   $grid-border-main: 1px solid #b6bbbc;
+  $grid-border-active: 1px solid #57a7ed;
   
   .#{$primary-stylename} {
     outline: none;
@@ -15,6 +12,12 @@
     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 {
     
@@ -29,9 +32,9 @@
       text-shadow: #ffffff 0 1px 0;
       
       &:first-child {
-      	&:before, &:after {
-      	  content: none;
-      	}
+        &:before, &:after {
+          content: none;
+        }
       }
       
       &:before {
@@ -44,20 +47,44 @@
         position: absolute;
       }
     }
+    
+    .#{$primary-stylename}-cell-active {
+        border: $grid-border-active;
+    }
   }
   
-  .#{$primary-stylename}-header .#{$primary-stylename}-cell {
-    border-bottom: $grid-border-main;
+  .#{$primary-stylename}-header {
+    .#{$primary-stylename}-cell {
+      border-bottom: $grid-border-main;
+    }
+
+    .#{$primary-stylename}-cell-active {
+        padding: 8px 1px 9px 5px;
+    }
   }
   
-  .#{$primary-stylename}-footer .#{$primary-stylename}-cell {
-    border-top: $grid-border-main;
+  .#{$primary-stylename}-footer {
+    .#{$primary-stylename}-cell {
+      border-top: $grid-border-main;
+    }
+    
+    .#{$primary-stylename}-cell-active {
+        padding: 9px 1px 8px 5px;
+    }
+  }
+  
+  .#{$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: "";
+    content: attr(sort-order);
     height: 36px;
     position: absolute;
     right: 0;
@@ -65,6 +92,12 @@
     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%;
   }
@@ -76,7 +109,7 @@
   // Grid body
   .#{$primary-stylename}-body {
     
-    .#{$primary-stylename}-row-stripe(odd) > .#{$primary-stylename}-cell {
+    .#{$primary-stylename}-row-stripe > .#{$primary-stylename}-cell {
       background-color: #f6f7f7;
     }
     
@@ -91,11 +124,11 @@
     .#{$primary-stylename}-row-active {
       
       .#{$primary-stylename}-cell {
-        background: none;
+        background: #edeeee;
       }
       
       .#{$primary-stylename}-cell-active {
-        border: 1px solid #57a7ed;
+        border: $grid-border-active;
       
         // Adjust padding for 'active' border.
         padding: 2px 5px 0 5px;
@@ -111,9 +144,14 @@
       }
       
       .#{$primary-stylename}-cell-active {
-        border-color: #c5e0f7;
+        border-color: #489ade;
       }
     }
+    
+    .#{$primary-stylename}-row-active.#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell {
+        background: #3a90d3;
+    }
+    
   }
   
   // Scrollbars
@@ -133,28 +171,30 @@
   }
   
   // Fillers
-  .#{$primary-stylename}-filler-x {
+  .#{$primary-stylename}-horizontalscrollbarbackground,
+  .#{$primary-stylename}-footercorner,
+  .#{$primary-stylename}-headercorner {
     @include box-sizing(border-box);
-    background: #e7e9ea url(img/header-bg.png) repeat-x;
     border: $grid-border-main;
-    border-top: none;
-    bottom: 0px;
-    height: $scrollbar-size;
-    left: 0;
-    position: absolute;
-    width: 100%;
   }
-  
-  .#{$primary-stylename}-filler-y {
-    @include box-sizing(border-box);
+
+  .#{$primary-stylename}-footercorner,
+  .#{$primary-stylename}-headercorner {
     background: #e7e9ea url(img/header-bg.png) repeat-x;
-    border: $grid-border-main;
-    border-left: none;
-    height: $header-height;
-    position: absolute;
-    right: 0;
-    top: 0px;
-    width: $scrollbar-size;
+    border-left: 0;
+  }
+
+  .#{$primary-stylename}-footercorner {
+    border-top: 0;
+  }
+  
+  .#{$primary-stylename}-headercorner {
+    border-bottom: 0;
+  }
+      
+  .#{$primary-stylename}-horizontalscrollbarbackground {
+    background-color: #edeeee;
+    border-top: 0;
   }
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index ee973921b9..dbf25273a4 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -19,10 +19,6 @@ $grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2);
 
   @include base-escalator($primary-stylename);
   
-  // TODO: check/set these values
-  $scrollbar-size: 15px;
-  $header-height: 39px;
-  
   .#{$primary-stylename} {
     outline: none;
   }
@@ -196,28 +192,29 @@ $grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2);
   }
   
   // Fillers
-  .#{$primary-stylename}-filler-x {
+  .#{$primary-stylename}-horizontalscrollbarbackground,
+  .#{$primary-stylename}-headercorner,
+  .#{$primary-stylename}-footercorner {
     @include box-sizing(border-box);
     @include valo-gradient($v-background-color);
     border: $grid-border;
-    border-top: none;
-    bottom: 0px;
-    height: $scrollbar-size;
-    left: 0;
-    position: absolute;
-    width: 100%;
   }
   
-  .#{$primary-stylename}-filler-y {
-    @include box-sizing(border-box);
-    @include valo-gradient($v-background-color);
-    border: $grid-border;
-    border-left: none;
-    height: $header-height;
-    position: absolute;
-    right: 0;
-    top: 0px;
-    width: $scrollbar-size;
+  .#{$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;
   }
 }
 
@@ -232,6 +229,21 @@ $grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2);
     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;
+    }
+
 }
 
 @mixin valo-grid-footer-style {
@@ -245,4 +257,19 @@ $grid-cell-padding-vertical: round(($v-table-row-height - $v-font-size)/2);
     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;
+    }
+  
 }