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, 73 insertions, 240 deletions

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