1 files changed, 24 insertions, 33 deletions
diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
index 6f29b1efef..a5f6e36957 100644
--- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss
+++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss
@@ -9,13 +9,15 @@
 $v-overlay-background-color: valo-overlay-background-color() !default;
 $v-overlay-border-radius: $v-border-radius !default;
 $v-overlay-border-width: first-number($v-border) !default;
-$v-overlay-open-animation: valo-overlay-open 200ms !default;
+
+$v-overlay-animate-in: valo-overlay-animate-in 120ms !default;
+$v-overlay-animate-out: valo-placeholder-animate-out 120ms, valo-anim-fade-out 120ms !default;
 
 $v-overlay-padding: round($v-unit-size/9) !default;
 $v-overlay-padding-vertical: $v-overlay-padding !default;
 $v-overlay-padding-horizontal: $v-overlay-padding !default;
 
-$v-overlay-shadow: 0 2px 4px 0 v-shade, 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade 2-color-luminance($v-background-color)/255) !default;
+$v-overlay-shadow: 0 4px 10px 0 (v-shade 2), 0 3px 5px 0 v-shade, 0 0 0 $v-overlay-border-width (v-shade (2.5 - color-luminance($v-background-color)/255 + $v-bevel-depth/100%)) !default;
 
 $v-selection-overlay-background-color: $v-overlay-background-color !default;
 $v-selection-overlay-padding: $v-overlay-padding !default;
@@ -52,7 +54,7 @@ $v-selection-item-selection-color: $v-selection-color !default;
     bottom: -$shadow-offset-y + $shadow-blur - $shadow-spread;
     left: $shadow-offset-x - $shadow-blur - $shadow-spread;
     background: $shadow-color;
-    filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=true);
+    filter: alpha(opacity=#{$shadow-color-opacity}) progid:DXImageTransform.Microsoft.blur(pixelradius=#{strip-units($shadow-blur)}, makeShadow=false);
   }
 }
 
@@ -69,17 +71,6 @@ $v-selection-item-selection-color: $v-selection-color !default;
   .v-ie8 & {
     display: block;
 
-    // Border simulation
-    /*.center {
-      position: absolute;
-      top: -$v-overlay-border-width;
-      right: -$v-overlay-border-width;
-      bottom: -$v-overlay-border-width;
-      left: -$v-overlay-border-width;
-      background: darken(valo-overlay-background-color(), $v-bevel-depth);
-      filter: alpha(opacity=round($v-bevel-depth/1%));
-    }*/
-
     // Up to 8 shadows are supported
     $elements: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right;
     $shadows: valo-bevel-and-shadow($shadow: $v-overlay-shadow);
@@ -110,7 +101,8 @@ $v-selection-item-selection-color: $v-selection-color !default;
 @mixin valo-overlay-style (
     $background-color: $v-overlay-background-color,
     $shadow: $v-overlay-shadow,
-    $open-animation: $v-overlay-open-animation
+    $animate-in: $v-overlay-animate-in,
+    $animate-out: $v-overlay-animate-out
   ) {
   padding: $v-overlay-padding-vertical $v-overlay-padding-horizontal;
   border-radius: $v-overlay-border-radius;
@@ -118,10 +110,19 @@ $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 and $v-overlay-open-animation {
-    @include animation($open-animation);
+  @if $v-animations-enabled {
+    @if $animate-in {
+      &[class*="animate-in"] {
+        @include animation($animate-in);
+      }
+    }
+    @if $animate-out {
+      &[class*="animate-out"] {
+        @include animation($animate-out);
+      }
+    }
   }
 
   -webkit-backface-visibility: hidden;
@@ -132,22 +133,11 @@ $v-selection-item-selection-color: $v-selection-color !default;
 
 
 
-@if $v-animations-enabled {
-  @include keyframes(valo-overlay-open) {
-    0% {
-      @include transform(translatey(-3px));
-      opacity: 0;
-    }
-  }
-}
-
-
-
 
 
 
-@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $open-animation: $v-overlay-open-animation) {
-  @include valo-overlay-style($background-color: $background-color, $open-animation: $open-animation);
+@mixin valo-selection-overlay-style ($background-color: $v-selection-overlay-background-color, $animate-in: $v-overlay-animate-in, $animate-out: $v-overlay-animate-out) {
+  @include valo-overlay-style($background-color: $background-color, $animate-in: $animate-in, $animate-out: $animate-out);
   padding: $v-selection-overlay-padding-vertical $v-selection-overlay-padding-horizontal;
 }
 
@@ -172,7 +162,8 @@ $v-selection-item-selection-color: $v-selection-color !default;
     right: 0;
     bottom: 0;
     left: 0;
-    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: 50%);
+    $sat: if(saturation($v-selection-item-selection-color) > 0, 50%, 0%);
+    background: scale-color($v-selection-item-selection-color, $lightness: -30%, $saturation: $sat);
     @include opacity(.15);
     pointer-events: none;
     border-radius: inherit;
@@ -209,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);