diff options
author | Lapo Calamandrei <calamandrei@gmail.com> | 2016-02-18 13:24:42 +0100 |
---|---|---|
committer | Lapo Calamandrei <calamandrei@gmail.com> | 2016-02-18 13:24:42 +0100 |
commit | 79ca3f03a8de0fa0f7a846ea72d479066a15dbd7 (patch) | |
tree | fc2a77c91150f03ddcebd18dc5c093b37eb7132b | |
parent | a93fdd8201ff94c5ee155809640b2061d27ee29e (diff) | |
download | gtk+-79ca3f03a8de0fa0f7a846ea72d479066a15dbd7.tar.gz |
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.
-rw-r--r-- | gtk/theme/Adwaita/_common.scss | 13 | ||||
-rw-r--r-- | gtk/theme/Adwaita/gtk-contained-dark.css | 6 | ||||
-rw-r--r-- | gtk/theme/Adwaita/gtk-contained.css | 6 |
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; |