[gtk+] Adwaita: only needed properties on entry transition

[Lapo Calamandrei <lapo src gnome org>]

commit d57f4a781cbcab7eb0912edf0ccbf811090067ce
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Feb 18 14:30:23 2016 +0100

    Adwaita: only needed properties on entry transition
    
    made things properly in the process creating a sass function to
    handle transition properties stacking.

 gtk/theme/Adwaita/_common.scss           |   35 ++++++++++++++++++-----------
 gtk/theme/Adwaita/gtk-contained-dark.css |    8 +++---
 gtk/theme/Adwaita/gtk-contained.css      |    8 +++---
 3 files changed, 30 insertions(+), 21 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 6e771d4..f8d646a 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -1,10 +1,21 @@
- function gtkalpha($c,$a) {
-  @return unquote("alpha(#{$c},#{$a})");
-}
-
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
 
+ function transite($properties, $duration, $timing_function) {
+  $transition: none;
+
+  @each $property in $properties {
+    @if $transition == none { $transition: $property $duration $timing_function; }
+    @else { $transition: $transition, $property, $duration, $timing_function; }
+  }
+
+  @return $transition;
+}
+
+// this is for using gtk alpha function directly, the function name
+// clashes with the sass function, so we need this trick
+ function gtkalpha($c, $a) { @return unquote("alpha(#{$c},#{$a})"); }
+
 * {
   padding: 0;
   -GtkToolButton-icon-spacing: 4;
@@ -242,7 +253,11 @@ entry {
   }
 
   border-radius: 3px;
-  transition: all 200ms $ease-out-quad;
+
+  // animate just what's needed
+  $_entry_transition_properties: color border-color background-color background-image box-shadow;
+  transition: transite($_entry_transition_properties, 200ms, $ease-out-quad);
+
   @include entry(normal);
 
   &.flat,
@@ -393,14 +408,8 @@ button {
   @at-root %button_basic, & {
     // animating "all" is not needed and also triggers some weird gtk sizing issue so, the transition is 
restricted
     // to just the needed properties (see $_button_transition_properties).
-
-    $_button_transition_details: 200ms $ease-out-quad;
-    $_button_transition_properties: background-color, background-image, border-color, box-shadow, 
text-shadow, -gtk-icon-shadow;
-    $_button_transition:  color $_button_transition_details;
-
-    @each $single_transition in $_button_transition_properties {
-      $_button_transition: $_button_transition, $single_transition $_button_transition_details;
-    }
+    $_button_transition_properties: color background-color background-image border-color box-shadow 
text-shadow -gtk-icon-shadow;
+    $_button_transition: transite($_button_transition_properties, 200ms, $ease-out-quad);
 
     min-height: 24px;
     min-width: 16px;
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 567813c..47fa41b 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -162,7 +162,7 @@ entry, spinbutton:not(.vertical) {
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 3px;
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: #292929;
   background-image: linear-gradient(to bottom, #1d2020, #242525 3px, #292929 90%);
   color: white;
@@ -349,7 +349,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   padding: 4px 8px;
   border: 1px solid;
   border-radius: 3px;
-  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 
0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 
200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: #eeeeec;
   outline-color: rgba(238, 238, 236, 0.3);
   border-color: #1c1f1f;
@@ -372,13 +372,13 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
     .titlebar notebook > header > tabs > arrow.titlebutton:hover,
     .titlebar button.titlebutton:hover, button.flat:hover, notebook > header > tabs > arrow:hover, 
button.sidebar-button:hover, headerbar button.titlebutton:hover,
     .titlebar button.titlebutton:hover {
-      transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 
0.94);
+      transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 
0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94);
       transition-duration: 500ms; }
       notebook > header > tabs > arrow.flat:hover:active, headerbar notebook > header > tabs > 
arrow.titlebutton:hover:active, headerbar button.titlebutton:hover:active,
       .titlebar notebook > header > tabs > arrow.titlebutton:hover:active,
       .titlebar button.titlebutton:hover:active, button.flat:hover:active, notebook > header > tabs > 
arrow:hover:active, button.sidebar-button:hover:active, headerbar button.titlebutton:hover:active,
       .titlebar button.titlebutton:hover:active {
-        transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 
0.94); }
+        transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 
0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94); }
   notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
   .titlebar button.titlebutton:hover, button:hover {
     color: #eeeeec;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 6f7dea9..9e0b2c8 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -162,7 +162,7 @@ entry, spinbutton:not(.vertical) {
   padding-left: 8px;
   padding-right: 8px;
   border-radius: 3px;
-  transition: all 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
   background-color: #ffffff;
   background-image: linear-gradient(to bottom, #d3d3d1, #fcfcfc 2px, #ffffff 90%);
   color: black;
@@ -349,7 +349,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   padding: 4px 8px;
   border: 1px solid;
   border-radius: 3px;
-  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms cubic-bezier(0.25, 
0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), border-color, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), text-shadow, 
200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94);
   color: #2e3436;
   outline-color: rgba(46, 52, 54, 0.3);
   border-color: #9d9d99;
@@ -372,13 +372,13 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
     .titlebar notebook > header > tabs > arrow.titlebutton:hover,
     .titlebar button.titlebutton:hover, button.flat:hover, notebook > header > tabs > arrow:hover, 
button.sidebar-button:hover, headerbar button.titlebutton:hover,
     .titlebar button.titlebutton:hover {
-      transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 
0.94);
+      transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 
0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94);
       transition-duration: 500ms; }
       notebook > header > tabs > arrow.flat:hover:active, headerbar notebook > header > tabs > 
arrow.titlebutton:hover:active, headerbar button.titlebutton:hover:active,
       .titlebar notebook > header > tabs > arrow.titlebutton:hover:active,
       .titlebar button.titlebutton:hover:active, button.flat:hover:active, notebook > header > tabs > 
arrow:hover:active, button.sidebar-button:hover:active, headerbar button.titlebutton:hover:active,
       .titlebar button.titlebutton:hover:active {
-        transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 200ms 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 200ms cubic-bezier(0.25, 0.46, 0.45, 
0.94); }
+        transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color, 200ms, 
cubic-bezier(0.25, 0.46, 0.45, 0.94), background-image, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), 
border-color, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 
0.94), text-shadow, 200ms, cubic-bezier(0.25, 0.46, 0.45, 0.94), -gtk-icon-shadow, 200ms, cubic-bezier(0.25, 
0.46, 0.45, 0.94); }
   notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
   .titlebar button.titlebutton:hover, button:hover {
     color: #2e3436;