Increase grid column resize handle width (#16838)

Change-Id: Ic7768d9023d48b04458376765596059d3a81d8c6

5 files changed, 42 insertions, 10 deletions

diff --git a/WebContent/VAADIN/themes/base/grid/grid.scss b/WebContent/VAADIN/themes/base/grid/grid.scss
index 5ef9075e8d..2786ca1d27 100644
--- a/WebContent/VAADIN/themes/base/grid/grid.scss
+++ b/WebContent/VAADIN/themes/base/grid/grid.scss
@@ -21,7 +21,7 @@ $v-grid-footer-row-height: $v-grid-header-row-height !default;
 $v-grid-footer-font-size: $v-grid-header-font-size !default;
 $v-grid-footer-background-color: $v-grid-header-background-color !default;
 
-$v-grid-cell-padding-horizontal: 5px !default;
+$v-grid-cell-padding-horizontal: 10px !default;
 
 $v-grid-editor-background-color: $v-grid-row-background-color !default;
 
@@ -266,10 +266,9 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
 
   .#{$primaryStyleName}-column-resize-handle {
     position: absolute;
-    width: 12px;
+    width: 2 * $v-grid-cell-padding-horizontal;
     top: 0px;
     bottom: 0px;
-    right: -6px;
     cursor: col-resize;
     z-index: 10;
 
@@ -280,6 +279,13 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
     -ms-user-select: none;
     user-select: none;
   }
+  
+  .sort-asc,
+  .sort-desc {
+  	> .#{$primaryStyleName}-column-resize-handle {
+      right: -$v-grid-cell-padding-horizontal;
+  	}
+  }
 
   // Footer
 
@@ -420,7 +426,25 @@ $v-grid-details-border-bottom-stripe: 1px solid darken($v-grid-row-background-co
         vertical-align: middle;
         display: inline-block;
       }
-
+      
+      .v-filterselect {
+      	padding-left: 0;
+      }
+      
+      input[type="text"],
+      input[type="password"] {
+      	padding-left: $v-grid-cell-padding-horizontal;
+      }
+      
+      input[type="text"]:not(.v-filterselect-input),
+      input[type="password"] {
+      	padding-right: $v-grid-cell-padding-horizontal / 2;
+      }
+      
+      input[type="checkbox"] {
+      	margin-left: $v-grid-cell-padding-horizontal;
+      }
+      
       .v-textfield,
       .v-datefield,
       .v-filterselect {
diff --git a/WebContent/VAADIN/themes/reindeer/reindeer.scss b/WebContent/VAADIN/themes/reindeer/reindeer.scss
index fece9f1043..c5d88f4a02 100644
--- a/WebContent/VAADIN/themes/reindeer/reindeer.scss
+++ b/WebContent/VAADIN/themes/reindeer/reindeer.scss
@@ -12,7 +12,7 @@ $v-grid-row-stripe-background-color: #eff0f1 !default;
 $v-grid-row-selected-background-color: #4d749f !default;
 $v-grid-header-font-size: 10px !default;
 $v-grid-header-background-color: rgb(217,219,221) !default;
-$v-grid-cell-padding-horizontal: 6px !default;
+$v-grid-cell-padding-horizontal: 10px !default;
 
 
 @import "../base/base.scss";
diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index 606a948dfb..d240be56b8 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -249,7 +249,7 @@
                                 $states: $states);
   width: 100% !important; // Need to override calculated inline style which is sometimes added
   height: 100%;
-  padding-right: round($unit-size * 1.2);
+  padding-right: round($unit-size * 1) + 1;
   border-radius: inherit;
 }
 
diff --git a/WebContent/VAADIN/themes/valo/components/_grid.scss b/WebContent/VAADIN/themes/valo/components/_grid.scss
index dd2f0f0761..4a0715b2d2 100644
--- a/WebContent/VAADIN/themes/valo/components/_grid.scss
+++ b/WebContent/VAADIN/themes/valo/components/_grid.scss
@@ -13,7 +13,7 @@ $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;
+$v-grid-cell-padding-horizontal: 1.5 * $v-table-cell-padding-horizontal !default;
 
 $v-grid-animations-enabled: $v-animations-enabled !default;
 
@@ -160,6 +160,10 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
       }
     }
     
+    input[type="text"].v-datefield-textfield {
+    	padding-left: $v-unit-size * 1.2;
+    }
+    
     .v-datefield-button {
       .v-ie8 & {
         margin-left: 0px;
@@ -184,9 +188,13 @@ $v-grid-details-border-bottom-stripe: $v-grid-cell-horizontal-border !default;
     }
 
     .v-checkbox {
-      margin: 0 round($v-grid-cell-padding-horizontal / 2);
+      margin: 0 round($v-grid-cell-padding-horizontal / 2) 0 $v-grid-cell-padding-horizontal;
 
-      label {
+	  > input[type="checkbox"] {
+      	margin-left: 0;
+      }
+      
+      > label {
         white-space: nowrap;
       }
     }
diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss
index 510506805f..3430263d90 100644
--- a/WebContent/VAADIN/themes/valo/util/_util.scss
+++ b/WebContent/VAADIN/themes/valo/util/_util.scss
@@ -35,7 +35,7 @@
   -webkit-tap-highlight-color: rgba(0,0,0,0);
   -webkit-touch-callout: none;
   cursor: pointer;
-}
+ }
 
 
 /**