Fix date field button regression (#14572)

Regression was caused by patch https://dev.vaadin.com/review/#/c/4480

Fixed the same issue for ComboBox as well.

Change-Id: Id43912f0803b5e056d4ca6585746e53226282d85

2 files changed, 23 insertions, 15 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index f84faef603..ace3dbb4bb 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -266,17 +266,21 @@
  * @group combobox
  */
 @mixin valo-combobox-button-style ($unit-size: $v-unit-size, $bevel: $v-bevel, $background-color: $v-textfield-background-color, $border-radius: $v-border-radius, $border: $v-textfield-border) {
-  $border-width: first-number($v-textfield-border) or 0;
+  $border-width: first-number($border) or 0;
   @include valo-tappable;
   position: absolute;
-  top: $border-width;
-  right: $border-width;
-  bottom: $border-width;
   width: $unit-size;
-  cursor: pointer;
+
+  @if $border and $border != none {
+    top: $border-width;
+    right: $border-width;
+    bottom: $border-width;
+  }
 
   @if type-of($background-color) == color {
-    border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    @if $border {
+      border-left: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    }
     color: mix($background-color, valo-font-color($background-color));
 
     .v-ie8 & {
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index 6d36ade43a..52a4acf821 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -202,26 +202,30 @@
   @include valo-tappable;
   -webkit-appearance: none;
   background: transparent;
-  @if $border {
-    // Only override border if we are actually setting some border
-    border: none;
-  }
   padding: 0;
   position: absolute;
   z-index: 10;
-  top: $border-width;
-  bottom: $border-width;
-  left: $border-width;
   width: $unit-size;
   line-height: $unit-size - ($border-width*2);
   text-align: center;
-  cursor: pointer;
   font: inherit;
   outline: none;
   margin: 0;
 
+  @if $border and $border != none {
+    top: $border-width;
+    bottom: $border-width;
+    left: $border-width;
+  }
+
+  @if $border {
+    border: none;
+  }
+
   @if type-of($background-color) == color {
-    border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    @if $border {
+      border-right: valo-border($color: $background-color, $border: $v-textfield-border, $strength: 0.5);
+    }
     color: mix($background-color, valo-font-color($background-color));
 
     &:hover {