[gtk+] Adwaita: avoid border clash on transitioning adiacent flat buttons

[Lapo Calamandrei <lapo src gnome org>]

commit 1e961001afbf0dd46b10d85f74736c8b7e5ae9a3
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Oct 16 12:46:58 2014 +0200

    Adwaita: avoid border clash on transitioning adiacent flat buttons
    
    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.

 gtk/resources/theme/Adwaita/_common.scss           |   19 +++++++++++++++++--
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   20 +++++++++++++++-----
 gtk/resources/theme/Adwaita/gtk-contained.css      |   20 +++++++++++++++-----
 3 files changed, 47 insertions(+), 12 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 34b69a5..361f00a 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -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;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 707f8a0..53d1d47 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -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");
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 1d73d90..77defbe 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -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");