Adds Valo support for Grid (#13334)

Change-Id: Ied1e823142efc8e5abd2e2c203eedeef0248d68b

3 files changed, 172 insertions, 129 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..cf2f027cd5 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -1,12 +1,171 @@
-@import "escalator";
-
-/**
- *
- *
- * @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
+@import "../../base/escalator/escalator";
+
+@mixin valo-grid {
+	
+	@include base-escalator(v-grid);
+	
+	/* BASE GRID */
+	.v-grid {
+		th {
+			position: relative;
+		}
+		
+		th.sort-asc:after {
+			content: "\25B2" attr(sort-order);
+			/*
+			position: absolute;
+			right: 5px;
+			*/
+			
+			font-size: 9px;
+			float: right;
+			line-height: 14px;
+		}
+
+		th.sort-desc:after {
+			content: "\25BC" attr(sort-order);
+			/*
+			position: absolute;
+			right: 5px;
+			*/
+			
+			font-size: 9px;
+			float: right;
+			line-height: 14px;
+		}
+
+		/*.v-grid-cell-active {
+			border-color: blue;
+		}
+
+		.v-grid-header-active {
+			background: lightgray;
+		}
+
+		.v-grid-row-active > td {
+			background: rgb(244,244,244);
+		}*/
+	}
+	
+	.v-grid-row-selected > td {
+		background: lightblue;
+	}
+
+
+
+
+
+	/* CUSTOM STYLES */
+	
+	/* Common styles; empty area before horizontal scroll */
+	.v-grid:after {
+		@include header-style;
+		content: "";
+		width: 100%;
+		height: 15px;
+		position: absolute;
+		bottom: 0;
+		border-left: 1px solid #d4d4d4;
+		border-bottom: 1px solid #d4d4d4;
+		border-right: 1px solid #d4d4d4;
+		box-sizing: border-box;
+	}
+	
+	/* Common styles; all but first column cells have left border */
+	.v-grid-row {
+		th, td {
+			background: none;
+			border-left: none;
+			border-right: 1px solid #d4d4d4;
+			border-top: none;
+			border-bottom: none;
+		}
+		
+		th:last-child, td:last-child {
+			border-right: none;
+		}
+	}
+
+	/* Common styles; clear the float and change display value for all cells */
+	.v-grid-cell {
+		float: none;
+		display: inline-block;
+		
+		&.frozen {
+			box-shadow: 2px 0 2px rgba(0,0,0,0.1);
+		}
+		&.v-grid-cell-active {
+			box-shadow: inset 2px 2px 0px #77aeee, inset -2px -2px 0px #77aeee;
+		}
+	}
+	
+	/* Common styles: main border, moved from .v-grid due to scroll div widths */
+	.v-grid-tablewrapper {
+		border: 1px solid #d4d4d4;
+		box-sizing: border-box;
+	}
+	
+	/* Grid header */
+	.v-grid-header {
+		.v-grid-cell {
+			@include header-style;
+			border-bottom: 1px solid #d4d4d4;
+		}
+		
+		th {
+			@include header-text;
+		}
+	}
+	
+	/* Grid footer */
+	.v-grid-footer {
+		.v-grid-cell {
+			@include header-style;
+			border-top: 1px solid #d4d4d4;
+		}
+		
+		td {
+			@include header-text;
+		}
+	}
+	
+	/* Grid body */
+	.v-grid-body {
+		
+		.v-grid-cell {
+			padding: 11px 12px 12px 12px;
+			line-height: 1;
+		}
+		
+		.v-grid-row {
+			border-bottom: 1px solid #d4d4d4;
+			
+			&:nth-child(odd) td {
+				background: white;
+			}
+		
+			&:nth-child(even) td {
+				background: #f5f5f5;
+			}
+			
+			&.v-grid-row-active td {
+				background: #166ed5;
+				color: white;
+				border-color: #1d69b4;
+			}
+		}
+	}
+}
+
+@mixin header-style {
+	background-color: #fafafa;
+	background-image: -webkit-linear-gradient(top, #fafafa 2%, #efefef 98%);
+	background-image: linear-gradient(to bottom,#fafafa 2%, #efefef 98%);
+}
+
+@mixin header-text {
+	font-weight: 300;
+	font-size: 14px;
+	line-height: 1;
+	padding: 12px 12px 11px 12px;
+}