Calculate Grid sidebar button height when closed #17412

+ contains Valo theming fixes for all browsers.
+ includes screenshot test for sidebar in Valo

Change-Id: Ic6401057efff7e4d4ab65c46885dda2d995bce5d

3 files changed, 22 insertions, 21 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 0e1dee2b99..d6509c1216 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -85,9 +85,9 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       }
     }
   }
-  
+
   // Sidebar
-  
+
   .#{$primaryStyleName}-sidebar.v-contextmenu {
     @include box-shadow(none);
     position: absolute;
@@ -103,32 +103,44 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
       background: transparent;
       border: none;
       cursor: pointer;
-      height: $v-grid-header-row-height;
       outline: none;
       padding: 0 4px;
       text-align: right;
 
+      &::-moz-focus-inner {
+        border: 0;
+      }
+
       &:after {
         content: "\f0c9";
+        display: block;
         font-family: FontAwesome, sans-serif;
         font-size: $v-grid-header-font-size;
-        line-height: $v-grid-header-row-height;
       }
     }
 
     &.closed {
       border-radius: 0;
     }
-    
+
     &.opened {
       .#{$primaryStyleName}-sidebar-button {
         width: 100%;
-      
+ 
         &:after {
           content: "\00d7";
           font-size: 16px;
+          line-height: 1;
         }
       }
+    }      
+
+    .v-ie &.opened .#{$primaryStyleName}-sidebar-button {
+      vertical-align: middle;
+    }
+
+    .v-ie8 &.opened .#{$primaryStyleName}-sidebar-button:after {
+      display: inline;
     }
 
     .#{$primaryStyleName}-sidebar-content {
diff --git a/WebContent/VAADIN/themes/reindeer/grid/grid.scss b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
index f9b966096a..7ae0f402aa 100644
--- a/WebContent/VAADIN/themes/reindeer/grid/grid.scss
+++ b/WebContent/VAADIN/themes/reindeer/grid/grid.scss
@@ -34,15 +34,9 @@
       border-color: #b1cde4;
     }
   }
-  
+
   // Sidebar
   .#{$primaryStyleName}-sidebar.v-contextmenu {
-    &.closed {
-      .#{$primaryStyleName}-sidebar-button:after {
-        line-height: 20px;
-      }
-    }
-    
     .#{$primaryStyleName}-sidebar-content {
       background-color: #f8f8f9;
     }
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index c1862c8209..c07d330410 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -193,24 +193,19 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
     &.opened {
       .#{$primary-stylename}-sidebar-button:after {
         font-size: 20px;
-        line-height: 20px;
       }
-      
+
       .#{$primary-stylename}-sidebar-content {
         margin: 0 0 2px;
         padding: 4px 4px 2px;
       }
     }
-    
+
     &.closed {
       @include valo-gradient($v-grid-header-background-color);
-      
-      .#{$primary-stylename}-sidebar-button {
-        line-height: 36px;
-      }
     }
   }
-  
+
   // Customize scrollbars
   .#{$primary-stylename}-scroller {
     &::-webkit-scrollbar {