AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: restrict button transition

Browse Source 
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.
This commit is contained in:
Lapo Calamandrei 2016-02-18 13:24:42 +01:00
parent a93fdd8201
commit 79ca3f03a8
3 changed files with 17 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
gtk/theme/Adwaita/_common.scss
View File

@ -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;

6
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -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;

6
gtk/theme/Adwaita/gtk-contained.css
View File

@ -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;