1 files changed, 22 insertions, 19 deletions

diff --git a/WebContent/VAADIN/themes/valo/components/_notification.scss b/WebContent/VAADIN/themes/valo/components/_notification.scss
index 3cfa446f7d..ff5e2da8d6 100644
--- a/WebContent/VAADIN/themes/valo/components/_notification.scss
+++ b/WebContent/VAADIN/themes/valo/components/_notification.scss
@@ -33,23 +33,23 @@ $v-notification-title-color: $v-focus-color !default;
   @if $v-animations-enabled {
 
     .#{$primary-stylename}-animate-in {
-      @include animation(valo-placeholder-animate-in 100ms, valo-anim-fade-in 100ms);
+      @include animation(valo-animate-in-fade 180ms);
 
-      &.v-position-left {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-right 200ms);
+      &.v-position-top {
+        @include animation(valo-animate-in-slide-down 400ms);
       }
 
-      &.v-position-right {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-left 200ms);
+      &.v-position-bottom {
+        @include animation(valo-animate-in-slide-up 400ms);
       }
     }
 
     .#{$primary-stylename}-animate-out {
-      @include animation(valo-placeholder-animate-out 150ms, valo-anim-fade-out 150ms);
+      @include animation(valo-animate-out-fade 150ms);
 
-      &.v-position-left,
-      &.v-position-right {
-        @include animation(valo-placeholder-animate-out 120ms, valo-anim-drop-fade-out 120ms);
+      &.v-position-top,
+      &.v-position-bottom {
+        @include animation(valo-animate-out-slide-down-fade 200ms);
       }
     }
   }
@@ -216,11 +216,12 @@ $v-notification-title-color: $v-focus-color !default;
     height: round($v-unit-size/1.5);
     line-height: round($v-unit-size/1.5) - 1px;
     cursor: pointer;
-    color: #000;
+    $color: if(is-dark-color($v-overlay-background-color), #fff, #000);
+    color: $color;
     @include opacity(.5);
     text-align: center;
-    border: first-number($v-border) solid #000;
-    border-color: rgba(0,0,0,.3);
+    border: first-number($v-border) solid $color;
+    border-color: rgba($color, .3);
     border-radius: 50%;
     @include transition(opacity 200ms);
   }
@@ -230,8 +231,10 @@ $v-notification-title-color: $v-focus-color !default;
   }
 
   &:active:after {
-    background-color: #000;
-    color: #fff;
+    $color: if(is-dark-color($v-overlay-background-color), #000, #fff);
+    $bg: if(is-dark-color($v-overlay-background-color), #fff, #000);
+    background-color: $bg;
+    color: $color;
     @include opacity(.3);
     @include transition(none 200ms);
   }
@@ -242,7 +245,7 @@ $v-notification-title-color: $v-focus-color !default;
 
 
 @mixin valo-notification-style {
-  background: valo-overlay-background-color();
+  background: $v-overlay-background-color;
   @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);
 
@@ -274,11 +277,11 @@ $v-notification-title-color: $v-focus-color !default;
 
     @if $v-animations-enabled {
       &[class*="animate-in"] {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-down 200ms);
+        @include animation(valo-animate-in-slide-down 300ms);
       }
 
       &[class*="animate-out"] {
-        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-up 200ms);
+        @include animation(valo-animate-out-slide-up 200ms);
       }
     }
   }
@@ -288,11 +291,11 @@ $v-notification-title-color: $v-focus-color !default;
 
     @if $v-animations-enabled {
       &[class*="animate-in"] {
-        @include animation(valo-placeholder-animate-in 200ms, valo-anim-slide-in-up 200ms);
+        @include animation(valo-animate-in-slide-up 300ms);
       }
 
       &[class*="animate-out"] {
-        @include animation(valo-placeholder-animate-out 200ms, valo-anim-slide-out-down 200ms);
+        @include animation(valo-animate-out-slide-down 200ms);
       }
     }
   }