[gtk+] Adwaita: restyle entry-tag

[Lapo Calamandrei <lapo src gnome org>]

commit 3a1946b0767b605a80e7a7d0c5a0baba70393ae8
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu May 11 14:36:57 2017 +0200

    Adwaita: restyle entry-tag
    
    Fix the sizing and spacing, blue tags for the bright variant,
    similar to what gnome-documents was shipping, and inverted gray
    tags for the dark variant, not vanishing on hover.

 gtk/theme/Adwaita/_common.scss |   55 ++++++++++++++++++++++++++++++++++-----
 1 files changed, 48 insertions(+), 7 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 904a02f..e8b6bb9 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -428,14 +428,55 @@ treeview entry {
 }
 
 .entry-tag {
-  @include button(undecorated);
-  background-color: darken($base_color,10%);
- 
-  &:hover { background-color: $base_color; }
-  
-  .button {
-    @include button(undecorated);
+  // sizing
+  padding: 5px;
+
+  margin-top: 2px;
+  margin-bottom: 2px;
+
+  // side margins: compensate the entry padding with a negative margin
+  // then the negative margin itself
+  :dir(ltr) & {
+    margin-left: 8px;
+    margin-right: -5px;
+  }
+  :dir(rtl) & {
+    margin-left: -5px;
+    margin-right: 8px;
+  }
+
+  border-style: none;
+
+  $_entry_tag_color: if($variant=='light', $selected_fg_color, $base_color);
+  color: $_entry_tag_color;
+
+  $_entry_tag_bg: if($variant=='light', $selected_bg_color, mix($fg_color, $base_color, 50%));
+  background-color: $_entry_tag_bg;
+
+  &:hover {
+    background-color: lighten($_entry_tag_bg, 10%);
+  }
+
+  :backdrop & {
+    color: $backdrop_base_color;
+    background-color: if($variant=='light', $selected_bg_color,
+                                            mix($backdrop_fg_color, $backdrop_base_color, 50%));
+  }
+
+  &.button {
     background-color: transparent;
+    color: transparentize($_entry_tag_color, 0.3);
+  }
+
+  :not(:backdrop) &.button {
+    &:hover {
+      border: 1px solid $_entry_tag_bg;
+      color: $_entry_tag_color;
+    }
+    &:active {
+      background-color: $_entry_tag_bg;
+      color: transparentize($_entry_tag_color, 0.3);
+    }
   }
 }