AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-12-30 15:31:34 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: avoid border clash on transitioning adiacent flat buttons

Browse Source 
Flat buttons gets the button decoration on hover, while transitioning
the decorations of adiacent flat buttons are both shown (one fading in
and the other fading out) so the borders clashes, since normally there's
no spacing between them, to avoid it the transition on the normal state
is set to none and added back to the hover state, so the decoration
won't fade out. To make the transition more evident the duration is
increased.
This commit is contained in:
Lapo Calamandrei 2014-10-16 12:46:58 +02:00
parent f3f0fc6bb2
commit 1e961001af
3 changed files with 47 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
gtk/resources/theme/Adwaita/_common.scss
View File

@ -428,12 +428,27 @@ $_dot_color: if($variant=='light', $selected_bg_color,
.button {
$_button_transition: all 200ms ease-out;
border: 1px solid;
border-radius: 3px;
transition: all 200ms ease-out;
padding: 5px 8px 6px;
transition: $_button_transition;
@include button(normal);
&.flat { @include button(undecorated); }
&.flat {
@include button(undecorated);
// to avoid adiacent buttons borders clashing when transitioning, the transition on the normal state is set
// to none, while it's added back in the hover state, so the button decoration will fade in on hover, but
// it won't fade out when the pointer leave the button allocation area. To make the transition more evident
// in this case the duration is increased.
transition: none;
&:hover {
transition: $_button_transition;
transition-duration: 500ms;
&:active { transition: $_button_transition; }
}
}
&:hover {
@include button(hover);
-gtk-image-effect: highlight;

20
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -390,8 +390,8 @@ GtkTextView {
GtkCalendar.header .button.titlebutton {
border: 1px solid;
border-radius: 3px;
transition: all 200ms ease-out;
padding: 5px 8px 6px;
transition: all 200ms ease-out;
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #1c1f1f;
@ -407,7 +407,17 @@ GtkCalendar.header .button.titlebutton {
background-image: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0);
text-shadow: none;
icon-shadow: none; }
icon-shadow: none;
transition: none; }
.button.flat:hover, .header-bar .titlebutton.button:hover,
.titlebar .titlebutton.button:hover,
GtkCalendar.header .titlebutton.button:hover {
transition: all 200ms ease-out;
transition-duration: 500ms; }
.button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
.titlebar .titlebutton.button:hover:active,
GtkCalendar.header .titlebutton.button:hover:active {
transition: all 200ms ease-out; }
.button:hover, .header-bar .button.titlebutton:hover,
.titlebar .button.titlebutton:hover,
GtkCalendar.header .button.titlebutton:hover {
@ -1892,13 +1902,13 @@ GtkTreeView.view {
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
-GtkTreeView-expander-size: 16;
border-left-color: rgba(238, 238, 236, 0.5);
border-left-color: #292929;
border-top-color: #393f3f; }
GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
border-left-color: rgba(255, 255, 255, 0.5);
border-left-color: #225d9c;
border-top-color: rgba(238, 238, 236, 0.1); }
GtkTreeView.view:backdrop {
border-left-color: rgba(201, 203, 201, 0.5);
border-left-color: #393f3f;
border-top: #393f3f; }
GtkTreeView.view.expander {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");

20
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -382,8 +382,8 @@ GtkTextView {
GtkCalendar.header .button.titlebutton {
border: 1px solid;
border-radius: 3px;
transition: all 200ms ease-out;
padding: 5px 8px 6px;
transition: all 200ms ease-out;
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #a1a1a1;
@ -399,7 +399,17 @@ GtkCalendar.header .button.titlebutton {
background-image: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0);
text-shadow: none;
icon-shadow: none; }
icon-shadow: none;
transition: none; }
.button.flat:hover, .header-bar .titlebutton.button:hover,
.titlebar .titlebutton.button:hover,
GtkCalendar.header .titlebutton.button:hover {
transition: all 200ms ease-out;
transition-duration: 500ms; }
.button.flat:hover:active, .header-bar .titlebutton.button:hover:active,
.titlebar .titlebutton.button:hover:active,
GtkCalendar.header .titlebutton.button:hover:active {
transition: all 200ms ease-out; }
.button:hover, .header-bar .button.titlebutton:hover,
.titlebar .button.titlebutton:hover,
GtkCalendar.header .button.titlebutton:hover {
@ -1884,13 +1894,13 @@ GtkTreeView.view {
-GtkTreeView-tree-line-width: 1;
-GtkTreeView-tree-line-pattern: '';
-GtkTreeView-expander-size: 16;
border-left-color: rgba(46, 52, 54, 0.5);
border-left-color: #fdfdfd;
border-top-color: #ededed; }
GtkTreeView.view:selected, GtkTreeView.view:backdrop:selected {
border-left-color: rgba(255, 255, 255, 0.5);
border-left-color: #4a90d9;
border-top-color: rgba(46, 52, 54, 0.1); }
GtkTreeView.view:backdrop {
border-left-color: rgba(84, 89, 90, 0.5);
border-left-color: #ececec;
border-top: #ededed; }
GtkTreeView.view.expander {
-gtk-icon-source: -gtk-icontheme("pan-end-symbolic");