Implement Notification animation with CSS (#13660)

Default opacity (90%), fade duration (400ms) and fade delay (1000ms) are
defined in the base theme.

“In” animations can be defined by using a dependent stylename
‘animate-in’ (prefixed with the widgets own primary stylename), e.g.
'v-Notification-animate-in'. That CSS class should then have a CSS
animation specified, and the CSS animation name should contain
'animate-in', e.g.

.v-Notification-animate-in {
animation: notification-animate-in 400ms;
}

@keyframes notification-animate-in {
...
}

“Out” animations are defined similarly, but with 'animate-out' as the
keyword.

The base theme contains mixins for declaring keyframes rules as well as
animation values, which include needed vendor prefixes.

Refactored deprecated GWT API’s to use newer API’s.

Change-Id: Iba929e8de8b6ce100852d472d65c9c9d0630c48f

1 files changed, 12 insertions, 2 deletions

diff --git a/WebContent/VAADIN/themes/base/notification/notification.scss b/WebContent/VAADIN/themes/base/notification/notification.scss
index 9751422fb7..aa70a167dc 100644
--- a/WebContent/VAADIN/themes/base/notification/notification.scss
+++ b/WebContent/VAADIN/themes/base/notification/notification.scss
@@ -7,7 +7,8 @@
 	overflow: hidden;
 	padding: 1em;
 	max-width:85%;
-	
+	opacity: .9;
+	filter: alpha(opacity=90);
 }
 .#{$primaryStyleName} h1,
 .#{$primaryStyleName} p,
@@ -39,5 +40,14 @@
 	display: block;
 	margin: 0;
 }
+.#{$primaryStyleName}-animate-out {
+	@include animation(animate-out 400ms 1s);
+}
+
+}
 
-}
\ No newline at end of file
+@include keyframes(animate-out) {
+  100% {
+   opacity: 0;
+  }
+}