Move details row decorators out of spacers td #17423

Change-Id: Ie6c0166ad307b9172acccaa781d6fea316ee6390

1 files changed, 13 insertions, 6 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 360f020822..0e1dee2b99 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -1,4 +1,5 @@
-$v-grid-border: 1px solid #ddd !default;
+$v-grid-border-size: 1px !default;
+$v-grid-border: $v-grid-border-size solid #ddd !default;
 $v-grid-cell-vertical-border: $v-grid-border !default;
 $v-grid-cell-horizontal-border: $v-grid-cell-vertical-border !default;
 $v-grid-cell-focused-border: 1px solid !default;
@@ -420,6 +421,10 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     margin-right: 4px;
   }
 
+  .#{$primaryStyleName}-spacer {
+    left: $v-grid-details-marker-width - $v-grid-border-size;
+  }
+  
   .#{$primaryStyleName}-spacer > td {
     display: block;
     padding: 0;
@@ -434,8 +439,14 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     border-top: $v-grid-details-border-top-stripe;
     border-bottom: $v-grid-details-border-bottom-stripe;
   }
+  
+  .#{$primaryStyleName}-spacer-deco-container {
+    position: relative;
+    top: $v-grid-border-size;
+    z-index: 5;
+  }
 
-  .#{$primaryStyleName}-spacer .deco {
+  .#{$primaryStyleName}-spacer-deco {
     top: 0; // this will be overridden by code, but it's a good default. 
     left: 0;
     width: $v-grid-details-marker-width;
@@ -456,10 +467,6 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     }
   }
 
-  .#{$primaryStyleName}-spacer .content {
-    padding-left: $v-grid-details-marker-width;
-  }
-
   // Renderers
 
   .#{$primaryStyleName}-cell > .v-progressbar {