Merge remote-tracking branch 'origin/master' into grid

Change-Id: I0babb7cb93e773a9aab82243c1112d45b15bec78

3 files changed, 92 insertions, 122 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_all.scss b/WebContent/VAADIN/themes/valo/components/_all.scss
index 0efc363a82..52f1d696aa 100644
--- a/WebContent/VAADIN/themes/valo/components/_all.scss
+++ b/WebContent/VAADIN/themes/valo/components/_all.scss
@@ -105,7 +105,7 @@
   }
 
   @if v-is-included(grid) {
-    @include valo-grid(v-escalator);
+    @include valo-grid;
   }
 
   @if v-is-included(textfield) {
diff --git a/WebContent/VAADIN/themes/valo/components/_escalator.scss b/WebContent/VAADIN/themes/valo/components/_escalator.scss
deleted file mode 100644
index 06ce2e6142..0000000000
--- a/WebContent/VAADIN/themes/valo/components/_escalator.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- *
- *
- * @param {string} $primaryStyleName (v-escalator) - 
- *
- * @group escalator
- */
-@mixin valo-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}-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 & {
-    /* IE8 doesn't let table rows be longer than body only with 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;
-}
-
-.#{$primaryStyleName}-cell.frozen {
-  position: relative;
-  z-index: 0;
-}
-
-}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index cf06167337..2e76434709 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -1,12 +1,98 @@
-@import "escalator";
+@import "table";
+
+$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;
+
+$v-grid-border: valo-border($color: $v-grid-row-background-color, $strength: 0.8) !default;
+$v-grid-cell-focused-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) - 
+ * @param {string} $primary-stylename (v-grid) -
  *
  * @group grid
  */
-@mixin valo-grid($primary-styleName : v-grid) {
-  @include valo-escalator($primary-styleName);
-}
\ No newline at end of file
+@mixin valo-grid ($primary-stylename: v-grid) {
+
+  @include base-grid($primary-stylename);
+
+  .#{$primary-stylename} {
+    @include user-select(text);
+    background-color: $v-background-color;
+  }
+
+  .#{$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}-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}-header-deco {
+    @include valo-gradient($v-grid-header-background-color);
+  }
+
+  .#{$primary-stylename}-footer-deco,
+  .#{$primary-stylename}-horizontal-scrollbar-deco {
+    @include valo-gradient($v-grid-footer-background-color);
+  }
+
+  // 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%);
+    }
+
+    > .#{$primary-stylename}-cell-focused:before {
+      border-color: adjust-color($v-selection-color, $lightness: 20%);
+    }
+  }
+
+  .#{$primary-stylename}-editor-save,
+  .#{$primary-stylename}-editor-cancel {
+    @include valo-button-static-style;
+    @include valo-button-style($unit-size: $v-unit-size--small, $font-size: $v-font-size--small);
+  }
+
+  // Customize scrollbars
+  .#{$primary-stylename}-scroller {
+    &::-webkit-scrollbar {
+      border: 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;
+    }
+  }
+
+  .#{$primary-stylename}-scroller-vertical::-webkit-scrollbar-thumb {
+    min-height: 30px;
+  }
+
+  .#{$primary-stylename}-scroller-horizontal::-webkit-scrollbar-thumb {
+    min-width: 30px;
+  }
+
+}