Fix combo box and date field small & large styles box-shadow on focus (Valo)

Don’t override any other state than the “normal” for large & small
styles (box-shadow in particular)

Change-Id: I295b5e2300a4b2137171fb0aa55d5bbf3feb8cf6

2 files changed, 16 insertions, 10 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss
index e514dc8e20..4e5cd5bbac 100644
--- a/WebContent/VAADIN/themes/valo/components/_combobox.scss
+++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss
@@ -79,12 +79,12 @@
     }
 
     .#{$primary-stylename}-small {
-      @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
+      @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
     }
 
     .#{$primary-stylename}-large {
-      @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null);
+      @include valo-combobox-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
   }
@@ -110,7 +110,8 @@
     $bevel: $v-textfield-bevel,
     $shadow: $v-textfield-shadow,
 
-    $primary-stylename: v-filterselect
+    $primary-stylename: v-filterselect,
+    $states: normal focus disabled
   ) {
 
     height: $unit-size;
@@ -127,7 +128,8 @@
           $background-color: $background-color,
           $font-color: $font-color,
           $font-size: $font-size,
-          $font-weight: $font-weight);
+          $font-weight: $font-weight,
+          $states: $states);
   }
 
   .v-icon + .#{$primary-stylename}-input {
@@ -201,7 +203,9 @@
 
     $gradient: none,
     $bevel: $v-bevel,
-    $shadow: $v-shadow
+    $shadow: $v-shadow,
+
+    $states: normal focus disabled
 ) {
   @include box-sizing(border-box);
   @include valo-textfield-style($unit-size: $unit-size,
@@ -214,7 +218,8 @@
                                 $border-radius: $border-radius,
                                 $gradient: $gradient,
                                 $bevel: $bevel,
-                                $shadow: $shadow);
+                                $shadow: $shadow,
+                                $states: $states);
   width: 100% !important; // Need to override calculated inline style which is sometimes added
   height: 100%;
   padding-right: round($unit-size * 1.2);
diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss
index a2b67b3f8c..1538681740 100644
--- a/WebContent/VAADIN/themes/valo/components/_datefield.scss
+++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss
@@ -60,12 +60,12 @@
     }
 
     .#{$primary-stylename}-small {
-      @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null);
+      @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--small;
     }
 
     .#{$primary-stylename}-large {
-      @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null);
+      @include valo-datefield-style($unit-size: $v-unit-size--large, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal);
       font-size: $v-font-size--large;
     }
   }
@@ -94,7 +94,8 @@
     $border            : $v-textfield-border,
     $border-radius     : $v-textfield-border-radius,
     $background-color  : $v-textfield-background-color,
-    $primary-stylename : v-datefield
+    $primary-stylename : v-datefield,
+    $states            : normal focus disabled
   ) {
 
   height: $unit-size;
@@ -102,7 +103,7 @@
 
   .#{$primary-stylename}-textfield {
     @include box-sizing(border-box);
-    @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color) ;
+    @include valo-textfield-style($bevel: $bevel, $shadow: $shadow, $unit-size: $unit-size, $border: $border, $border-radius: $border-radius, $background-color: $background-color, $states: $states) ;
     padding-left: $unit-size * 1.2;
     width: 100%;
     height: 100%;