Adwaita: restrict button transition

we use to animate "all" in the transition, this seems to trigger
some weird gtk sizing issue, restricting the transition to just
the needed properties fixes.

3 files changed, 17 insertions, 8 deletions

diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index bee9621344..6e771d4a97 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -390,8 +390,17 @@ $_dot_color: if($variant=='light', $selected_bg_color,
 }
 
 button {
-  @at-root %button_basic, &{
-    $_button_transition: all 200ms $ease-out-quad;
+  @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;
+    }
 
     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 80df69eba3..567813c4bc 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -349,7 +349,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   padding: 4px 8px;
   border: 1px solid;
   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), 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);
   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: 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), 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-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: 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), 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); }
   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 4123518994..6f7dea9f26 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -349,7 +349,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
   padding: 4px 8px;
   border: 1px solid;
   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), 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);
   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: 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), 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-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: 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), 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); }
   notebook > header > tabs > arrow:hover, headerbar button.titlebutton:hover,
   .titlebar button.titlebutton:hover, button:hover {
     color: #2e3436;