From 97ba8b0756b8f8ba02b2eda6857f9fda0f9b2cb2 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 5 Jun 2014 17:23:01 +0300 Subject: Implement Notification animation with CSS (#13660) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .../VAADIN/themes/base/notification/notification.scss | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'WebContent/VAADIN/themes/base/notification/notification.scss') 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; + } +} -- cgit v1.2.3