From ebe86ba3bcfe44cdc1d87a55cfd100ff0c489049 Mon Sep 17 00:00:00 2001
From: Teemu Suo-Anttila <teemusa@vaadin.com>
Date: Wed, 15 Apr 2015 13:33:55 +0300
Subject: Fix Grid editor area calculation without scrollbars (#17471)

Change-Id: I55791e0bf46b00ea90daaeb1af8b4ca2748ff9d1
---
 WebContent/VAADIN/themes/base/grid/grid.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'WebContent')

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index e4a4a1d920..8a1497dda8 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -228,6 +228,8 @@ $v-grid-editor-background-color: $v-grid-row-background-color !default;
     left: 0;
     right: 0;
     border: $v-grid-border;
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
     margin-top: nth($v-grid-border, 1) * -1;
     @include box-shadow(0 0 9px rgba(0,0,0,.2));
   }
-- 
cgit v1.2.3


From be8befcb2006683ea57be7f9479e4aef63cc19f2 Mon Sep 17 00:00:00 2001
From: Jouni Koivuviita <jouni@vaadin.com>
Date: Thu, 20 Nov 2014 12:08:13 +0200
Subject: Row focus bleeds out of Table area in Valo (#14761)

Redesigned the Table column selector button, now rendered completely
inside the Table header, which works regardless of the placement of the
Table, and with the fix for the main issue.

Change-Id: I63ba34a0afc2d7b0d6b4c2dfd006cb6d0aebf2db
---
 .../VAADIN/themes/valo/components/_table.scss      | 50 ++++++++++------------
 1 file changed, 23 insertions(+), 27 deletions(-)

(limited to 'WebContent')

diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss
index 019d8673ce..aa0465d860 100644
--- a/WebContent/VAADIN/themes/valo/components/_table.scss
+++ b/WebContent/VAADIN/themes/valo/components/_table.scss
@@ -137,6 +137,9 @@ $v-table-background-color: null !default;
     position: relative;
     background: $v-background-color;
     color: valo-font-color($v-background-color);
+
+    // Hide row focus outline
+    overflow: hidden;
   }
 
   .#{$primary-stylename}-header table,
@@ -381,7 +384,7 @@ $v-table-background-color: null !default;
   .#{$primary-stylename}-focus-slot-right {
     border-right: $v-table-border-width + 2px solid $v-focus-color;
     right: -$v-table-border-width - 1px;
-    margin-left: -$v-table-resizer-width - $v-table-border-width - 2px;
+    margin-left: -$v-table-resizer-width - $v-table-border-width - 2px !important;
   }
 
   .#{$primary-stylename}-focus-slot-left {
@@ -394,33 +397,34 @@ $v-table-background-color: null !default;
   }
 
   .#{$primary-stylename}-column-selector {
-    @include valo-button-style;
+    @include valo-button-style($shadow: null);
     position: absolute;
     z-index: 2;
-    top: round($v-unit-size/-4);
-    right: round($v-unit-size/-4);
+    top: 0;
+    right: 0;
+    width: round($v-unit-size/2);
     height: round($v-unit-size/2);
     line-height: round($v-unit-size/2);
-    width: round($v-unit-size/2);
     padding: 0;
-    border-radius: 50%;
+    border-top-width: 0;
+    border-right-width: 0;
+    border-radius: 0 0 0 $v-border-radius;
     cursor: pointer;
     text-align: center;
 
     @include opacity(0);
     @if $v-animations-enabled {
-      @include transition(opacity 200ms 1s);
+      @include transition(opacity 200ms 2s);
     }
 
     &:after {
       content: "";
       position: absolute;
-      $v-button-border-width: first-number($v-border);
-      top: -$v-button-border-width;
-      right: -$v-button-border-width;
-      bottom: -$v-button-border-width;
-      left: -$v-button-border-width;
-      border-radius: inherit;
+      border: none;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
     }
     &:active:after {
       @include valo-button-active-style;
@@ -430,22 +434,9 @@ $v-table-background-color: null !default;
     }
   }
 
-  .v-scrollable > .#{$primary-stylename} .#{$primary-stylename}-column-selector {
-    right: 0;
-    top: 0;
-    border-top: none;
-    border-right: none;
-    border-radius: 0 0 0 50%;
-
-    &:after {
-      top: 0;
-      right: 0;
-    }
-  }
-
   .#{$primary-stylename}-header-wrap:hover .#{$primary-stylename}-column-selector {
     @include opacity(1);
-    @include transition-delay(100ms);
+    @include transition-delay(200ms);
   }
 
   .v-on,
@@ -505,6 +496,11 @@ $v-table-background-color: null !default;
 
   // Drag'n'drop styles
 
+  .#{$primary-stylename}-drag {
+    // Show drag focus outline
+    overflow: visible;
+  }
+
   .#{$primary-stylename}-drag .#{$primary-stylename}-body {
     @include box-shadow(0 0 0 2px rgba($v-focus-color, .5));
 
-- 
cgit v1.2.3