box-shadow should have -webkit prefix (#14093)

Mass find-and-replace, tested to work as before in Chrome, and that the
output now includes box -webkit-box-shadow as well as box-shadow.

Bourbon needed to be imported before the css3 utils, so that the
box-shadow mixin can be overridden (Bourbon prints a warning as it has
already deprecated box-shadow prefixes).

Change-Id: I6b4f2047a6d8bfb74f2dbf999d10f7e00005e794

WebContent/VAADIN/themes/valo/_valo.scss

@@ -3,9 +3,9 @@
 
 
 // Import all utility mixins and functions
+@import "util/bourbon/bourbon";
 @import "util/lists";
 @import "util/css3";
-@import "util/bourbon/bourbon";
 @import "util/color";
 @import "util/anim";
 @import "util/gradient";

WebContent/VAADIN/themes/valo/components/_accordion.scss

@@ -102,7 +102,7 @@
   width: 100%;
   bottom: 0;
   right: 0;
-  box-shadow: valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2);
+  @include box-shadow(valo-bevel-and-shadow($shadow: join(inset, $v-shadow), $shadow-opacity: $v-shadow-opacity/2));
   background-color: $v-panel-background-color;
   @include box-sizing(border-box);
   @include valo-panel-adjust-content-margins;

WebContent/VAADIN/themes/valo/components/_button.scss

@@ -112,7 +112,7 @@
     @if type-of($background-color) == color {
       @include valo-border-with-gradient($border: $border, $color: darkest-color($background-color, $v-background-color), $gradient: $gradient);
       @include valo-gradient($background-color, $gradient);
-      box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+      @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient));
     }
 
     @if $bevel and type-of($_font-color) == color and type-of($background-color) == color {
@@ -120,7 +120,7 @@
     }
 
     @if $bevel == none and $shadow == none {
-      box-shadow: none;
+      @include box-shadow(none);
     }
   }
 
@@ -206,7 +206,7 @@
 
 @mixin valo-button-borderless-style ($font-color: inherit) {
   border: none;
-  box-shadow: none;
+  @include box-shadow(none);
   background: transparent;
   color: $font-color;
 

WebContent/VAADIN/themes/valo/components/_checkbox.scss

@@ -44,7 +44,7 @@
 
     &:focus ~ label:before {
       @include valo-button-focus-style($background-color: $background-color, $border-fallback: null, $include-box-shadow: false);
-      box-shadow: valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true);
+      @include box-shadow(valo-bevel-and-shadow($background-color: $background-color, $bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient, $include-focus: true));
     }
 
     & ~ label:before,

WebContent/VAADIN/themes/valo/components/_colorpicker.scss

@@ -31,7 +31,7 @@
       height: 11px;
       border-radius: 7px;
       border: 1px solid #fff;
-      box-shadow: 0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3);
+      @include box-shadow(0 0 0 1px rgba(0,0,0,.3), inset 0 0 0 1px rgba(0,0,0,.3));
       position: absolute;
       bottom: -6px;
       left: -6px;
@@ -123,19 +123,19 @@
     .v-slider-red .v-slider-base:after {
       background: red;
       border: none;
-      box-shadow: none;
+      @include box-shadow(none);
     }
 
     .v-slider-green .v-slider-base:after {
       background: green;
       border: none;
-      box-shadow: none;
+      @include box-shadow(none);
     }
 
     .v-slider-blue .v-slider-base:after {
       background: blue;
       border: none;
-      box-shadow: none;
+      @include box-shadow(none);
     }
 
     .v-margin-bottom {

WebContent/VAADIN/themes/valo/components/_combobox.scss

@@ -39,7 +39,7 @@
       @include user-select(none);
       @include valo-gradient;
       cursor: inherit;
-      box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient);
+      @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $shadow: $v-shadow, $gradient: $v-gradient));
       @include valo-border-with-gradient($border: $v-border, $color: $v-background-color, $gradient: $v-gradient);
       text-shadow: inherit;
       text-overflow: ellipsis;

WebContent/VAADIN/themes/valo/components/_menubar.scss

@@ -13,7 +13,7 @@
       @if type-of($v-focus-style) == list {
         $box-shadow: $box-shadow, $v-focus-style;
       }
-      box-shadow: $box-shadow;
+      @include box-shadow($box-shadow);
     }
 
     &.v-disabled {
@@ -229,7 +229,7 @@
 
 @mixin valo-menubar-menuitem-checked-style ($background-color: if(color-luminance($v-background-color) < 10, scale-color($v-background-color, $lightness: 10%, $saturation: -5%), scale-color($v-background-color, $lightness: -5%, $saturation: -5%))) {
   $grad: valo-gradient-style($v-gradient) valo-gradient-opacity($v-gradient)/4;
-  box-shadow: none;
+  @include box-shadow(none);
   @include valo-gradient($color: $background-color, $gradient: $grad, $direction: to top);
   color: valo-font-color($background-color, 0.9);
 }
@@ -259,17 +259,17 @@
   border: none;
   border-radius: 0;
   padding: first-number($v-border);
-  box-shadow: none;
+  @include box-shadow(none);
   background: transparent;
   color: inherit;
 
   &:not(.v-disabled):focus {
     border: none;
-    box-shadow: none;
+    @include box-shadow(none);
   }
 
   .#{$primary-stylename}-menuitem {
-    box-shadow: none;
+    @include box-shadow(none);
     border: none;
     margin-right: max(1px, first-number($v-border));
     border-radius: $v-border-radius;

WebContent/VAADIN/themes/valo/components/_panel.scss

@@ -34,7 +34,7 @@ $v-panel-border: $v-border !default;
   color: valo-font-color($background-color);
   border-radius: $border-radius;
   border: valo-border($border: $border, $color: darkest-color($background-color, $v-app-background-color), $strength: 0.7);
-  box-shadow: valo-bevel-and-shadow($shadow: $shadow);
+  @include box-shadow(valo-bevel-and-shadow($shadow: $shadow));
 }
 
 
@@ -54,7 +54,7 @@ $v-panel-border: $v-border !default;
   color: valo-font-color($bg);
   font-weight: $v-caption-font-weight;
   font-size: $v-caption-font-size;
-  box-shadow: valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient);
+  @include box-shadow(valo-bevel-and-shadow($background-color: $bg, $bevel: $bevel, $gradient: $gradient));
   text-shadow: valo-text-shadow(valo-font-color($bg), $bg, $v-bevel);
 }
 
@@ -64,13 +64,13 @@ $v-panel-border: $v-border !default;
   $bg: scale-color(adjust-color($v-background-color, $lightness: -2%), $saturation: -1.5%);
   background: $bg;
   color: valo-font-color($bg);
-  box-shadow: valo-bevel-and-shadow($shadow: $shadow);
+  @include box-shadow(valo-bevel-and-shadow($shadow: $shadow));
   border-radius: $v-border-radius;
   border: valo-border();
 
   > div > .v-panel-caption {
     background: transparent;
-    box-shadow: none;
+    @include box-shadow(none);
   }
 }
 
@@ -81,11 +81,11 @@ $v-panel-border: $v-border !default;
   color: inherit;
   border: none;
   border-radius: 0;
-  box-shadow: none;
+  @include box-shadow(none);
 
   > div > .v-panel-caption {
     background: transparent;
-    box-shadow: none;
+    @include box-shadow(none);
     color: inherit;
     padding: 0;
     margin: 0 round($v-unit-size/3);

WebContent/VAADIN/themes/valo/components/_progressbar.scss

@@ -18,7 +18,7 @@ $v-progressbar-border-radius: $v-border-radius !default;
   .#{$primary-stylename}-point {
     .#{$primary-stylename}-indicator {
       background: transparent;
-      box-shadow: none;
+      @include box-shadow(none);
       border: none;
       text-align: right;
       overflow: hidden;
@@ -57,7 +57,7 @@ $v-progressbar-border-radius: $v-border-radius !default;
   border-radius: $v-progressbar-border-radius;
   height: inherit;
   @include valo-gradient($color: $background-color);
-  box-shadow: valo-bevel-and-shadow($background-color: $background-color);
+  @include box-shadow(valo-bevel-and-shadow($background-color: $background-color));
   @if $border {
     border: valo-border($border: $border, $color: $background-color, $context: $v-app-background-color);
   } @else {

WebContent/VAADIN/themes/valo/components/_richtextarea.scss

@@ -9,7 +9,7 @@ $valo-richtextarea-use-font-awesome: true !default;
 
   .#{$primary-stylename} .gwt-RichTextToolbar {
     @include valo-gradient($color: $v-background-color);
-    box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient);
+    @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-background-color, $gradient: $v-gradient));
     border-bottom: valo-border();
     color: valo-font-color($v-background-color);
   }

WebContent/VAADIN/themes/valo/components/_table.scss

@@ -75,7 +75,7 @@ $v-table-background-color: null !default;
   .v-table-header table,
   .v-table-footer table,
   .v-table-table {
-    box-shadow: 0 0 0 $v-table-border-width $border-color;
+    @include box-shadow(0 0 0 $v-table-border-width $border-color);
 
     .v-ie8 & {
       outline: $v-table-border-width solid $border-color;
@@ -371,7 +371,7 @@ $v-table-background-color: null !default;
   tbody.v-drag-element {
     display: block;
     overflow: visible;
-    box-shadow: none;
+    @include box-shadow(none);
     background: transparent;
     @include opacity(1);
 
@@ -410,7 +410,7 @@ $v-table-background-color: null !default;
   // Drag'n'drop styles
 
   .#{$primary-stylename}-drag .#{$primary-stylename}-body {
-    box-shadow: 0 0 0 2px rgba($v-focus-color, .5);
+    @include box-shadow(0 0 0 2px rgba($v-focus-color, .5));
 
     @if color-luminance($v-focus-color) + 50 < color-luminance($background-color) {
       border-color: $v-focus-color;

WebContent/VAADIN/themes/valo/components/_textfield.scss

@@ -72,7 +72,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
     @if $background-color {
       color: valo-font-color($background-color);
-      box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient);
+      @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient));
     }
 
 
@@ -127,7 +127,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
     border-color: $focus-color;
   }
 
-  box-shadow: valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true);
+  @include box-shadow(valo-bevel-and-shadow($bevel: $bevel, $shadow: $shadow, $background-color: $background-color, $gradient: $gradient, $include-focus: true));
 
   @include valo-focus-style;
 }
@@ -135,7 +135,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
 
 @mixin valo-textfield-readonly-style {
   background: transparent;
-  box-shadow: none;
+  @include box-shadow(none);
   &:focus {
     @include valo-focus-style($include-box-shadow: true);
   }
@@ -165,7 +165,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   border: none;
   border-radius: 0;
   background: $background-color;
-  box-shadow: none;
+  @include box-shadow(none);
   @if $background-color == transparent {
     color: inherit;
   } @else if type-of($background-color) == color {
@@ -173,7 +173,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default;
   }
 
   &:focus {
-    box-shadow: none;
+    @include box-shadow(none);
   }
 }
 

WebContent/VAADIN/themes/valo/components/_tree.scss

@@ -230,7 +230,7 @@ $v-tree-expand-animation-enabled: false !default;
   }
 
   .#{$primary-stylename}-node-caption-drag-center {
-    box-shadow: 0 0 0 2px $v-focus-color;
+    @include box-shadow(0 0 0 2px $v-focus-color);
     position: relative;
     border-radius: $v-border-radius;
 

WebContent/VAADIN/themes/valo/components/_window.scss

@@ -28,9 +28,9 @@ $v-window-modality-curtain-background-color: #222 !default;
 
     @if $v-window-shadow {
       @if $v-window-shadow == none {
-        box-shadow: none;
+        @include box-shadow(none);
       } @else if $v-window-shadow != $v-overlay-shadow {
-        box-shadow: valo-bevel-and-shadow($shadow: $v-window-shadow);
+        @include box-shadow(valo-bevel-and-shadow($shadow: $v-window-shadow));
       }
     }
     @if $v-window-border-radius != $v-border-radius {

WebContent/VAADIN/themes/valo/optional/_common-stylenames.scss

@@ -424,7 +424,7 @@
   .v-accordion-borderless {
     border: none;
     border-radius: 0;
-    box-shadow: none;
+    @include box-shadow(none);
 
     > .v-accordion-item {
       border-radius: 0;

WebContent/VAADIN/themes/valo/optional/_valo-menu.scss

@@ -49,19 +49,19 @@ $valo-menu-background-color: null !default;
       padding: round($v-unit-size/3) round($v-unit-size/2);
       font-size: round($v-font-size * 0.9);
       border-bottom: valo-border($color: $v-selection-color);
-      box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
+      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
 
       .v-menubar {
         background: transparent;
         border-color: first-color(valo-border($color: $v-selection-color));
         color: inherit;
-        box-shadow: none;
+        @include box-shadow(none);
         text-shadow: inherit;
       }
 
       .v-menubar-menuitem {
         background: transparent;
-        box-shadow: valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient);
+        @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient));
         text-shadow: inherit;
         font-size: $v-font-size;
         border-color: inherit;
@@ -207,7 +207,7 @@ $valo-menu-background-color: null !default;
       font-size: round($v-unit-size/1.5);
       line-height: round($v-unit-size * 1.2);
       margin: round($v-unit-size/2) auto;
-      box-shadow: valo-bevel-and-shadow($shadow: $v-shadow);
+      @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow));
     }
   }
 

WebContent/VAADIN/themes/valo/shared/_notification.scss

@@ -171,7 +171,7 @@ $v-notification-title-color: $v-focus-color !default;
 
 @mixin valo-notification-style {
   background: valo-overlay-background-color();
-  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.15);
+  @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15));
   padding: round($v-unit-size/2) round($v-unit-size/1.7);
 
   h1 {
@@ -190,7 +190,7 @@ $v-notification-title-color: $v-focus-color !default;
   max-width: 100%;
   margin: 0 !important;
   border-radius: 0;
-  box-shadow: 0 0 20px 0 rgba(0,0,0,0.25);
+  @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25));
   padding: round($v-unit-size/3) round($v-unit-size/2.5);
 
   p {
@@ -264,7 +264,7 @@ $v-notification-title-color: $v-focus-color !default;
 @mixin valo-notification-error-style {
   background: $v-error-indicator-color;
   font-weight: $v-font-weight + 100;
-  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.25);
+  @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25));
 
   h1 {
     color: valo-font-color($v-error-indicator-color, 1);

WebContent/VAADIN/themes/valo/shared/_overlay.scss

@@ -110,7 +110,7 @@ $v-selection-item-selection-color: $v-selection-color !default;
   background-color: $background-color;
   color: valo-font-color($background-color);
 
-  box-shadow:  valo-bevel-and-shadow($bevel: null, $shadow: $shadow);
+  @include box-shadow( valo-bevel-and-shadow($bevel: null, $shadow: $shadow));
 
   @if $v-animations-enabled {
     @if $animate-in {
@@ -200,7 +200,7 @@ $v-selection-item-selection-color: $v-selection-color !default;
 @mixin valo-drag-element-style ($background-color: $v-app-background-color) {
   background: $background-color;
   color: valo-font-color($background-color);
-  box-shadow: 0 2px 10px rgba(#000, .2);
+  @include box-shadow(0 2px 10px rgba(#000, .2));
   border-radius: $v-border-radius;
   overflow: hidden;
   @include opacity(.5);

WebContent/VAADIN/themes/valo/shared/_tooltip.scss

@@ -58,7 +58,7 @@ $v-tooltip-border-radius: $v-border-radius - 1px !default;
 @mixin valo-tooltip-style {
   background-color: opacify($v-tooltip-background-color, 1);  // For IE8
   background-color: $v-tooltip-background-color;
-  box-shadow: $v-tooltip-box-shadow;
+  @include box-shadow($v-tooltip-box-shadow);
   color: $v-tooltip-font-color;
   padding: $v-tooltip-padding-vertical $v-tooltip-padding-horizontal;
   border-radius: $v-tooltip-border-radius;

WebContent/VAADIN/themes/valo/util/_color.scss

@@ -88,7 +88,7 @@ $v-luminance-threshold: 150 !default;
 
 @mixin valo-focus-style($include-box-shadow: false) {
   @if $include-box-shadow and type-of($v-focus-style) == list {
-    box-shadow: $v-focus-style;
+    @include box-shadow($v-focus-style);
   } @else if type-of($v-focus-style) == color {
     border-color: $v-focus-style;
   }

WebContent/VAADIN/themes/valo/util/_css3.scss

@@ -8,3 +8,8 @@
     filter: none remove-nth($o, 1);
   }
 }
+
+// -webkit-box-shadow still needed for Android 2.3 and 3.0, as well as iOS 5
+@mixin box-shadow ($shadows...) {
+  @include prefixer(box-shadow, $shadows, webkit spec);
+}