Merge lp:~philip.scott/egtk/pulse-animations into lp:~elementary-design/egtk/trunk

[Felipe Escoto]

Pulse animations added

Adds pulsing animations for Success, error and warning.

Success will be used as feedback on Audience whenever something get's added to the playlist, and the error pulse could be used for the sound indicator when muted, and the power indicator when the battery is low.

[Danielle Foré (danrabbit)]

A few diff comments.

Instead of doing .pulse-foo it's better to do .pulse.foo

don't mix success and attention. There is already a success_color

review: Needs Fixing

[Danielle Foré (danrabbit)]

I think the animation duration is a bit too long. At 1s, it will only play once before the seekbar hides in Audience and it starts blue so it's really easy to miss. Maybe something shorter like 500 or 600ms

[lp:~philip.scott/egtk/pulse-animations]

682. By Felipe Escoto on 2016-08-01

Add pulse animations

=== added file 'gtk-3.0/animate.css'
--- gtk-3.0/animate.css	1970-01-01 00:00:00 +0000
+++ gtk-3.0/animate.css	2016-08-01 19:02:07 +0000
@@ -0,0 +1,44 @@
+/* Copyright 2016 elementary LLC.
+*
+* This file is part of the elementary GTK theme.
+*
+* The elementary GTK theme is free software: you can redistribute it
+* and/or modify it under the terms of the GNU General Public License as
+* published by the Free Software Foundation, either version 3 of the
+* License, or (at your option) any later version.
+*
+* The elementary GTK theme is distributed in the hope that it will be
+* useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
+* Public License for more details.
+*
+* You should have received a copy of the GNU General Public License along
+* with the elementary GTK theme. If not, see http://www.gnu.org/licenses/.
+*/
+
+.pulse {
+    animation: pulse 500ms infinite;
+    animation-direction: alternate;
+}
+
+.pulse.attention {
+    color: @attention_color;
+}
+
+.pulse.success {
+    color: @success_color;
+}
+
+.pulse.warning {
+    color: @warning_color;
+}
+
+.pulse.error {
+    color: @error_color;
+}
+
+@keyframes pulse {
+    0% {
+        color: inherit;
+    }  
+}

=== modified file 'gtk-3.0/gtk-dark.css'
--- gtk-3.0/gtk-dark.css	2016-04-17 15:28:06 +0000
+++ gtk-3.0/gtk-dark.css	2016-08-01 19:02:07 +0000
@@ -61,6 +61,7 @@
 @define-color theme_selected_bg_color @selected_bg_color;
 @define-color theme_selected_fg_color @selected_fg_color;
 
+@define-color attention_color #3d9bda;
 @define-color link_color #08C;
 @define-color frame_color #8a9580;
 @define-color inactive_frame_color #c7ccc1;
@@ -86,3 +87,4 @@
 @import url("gtk-widgets-dark.css");
 @import url("granite-widgets.css");
 @import url("apps.css");
+@import url("animate.css");

=== modified file 'gtk-3.0/gtk.css'
--- gtk-3.0/gtk.css	2016-04-17 15:28:06 +0000
+++ gtk-3.0/gtk.css	2016-08-01 19:02:07 +0000
@@ -78,3 +78,4 @@
 @import url("gtk-widgets.css");
 @import url("granite-widgets.css");
 @import url("apps.css");
+@import url("animate.css");