Adwaita: restyle entry-tag
authorLapo Calamandrei <calamandrei@gmail.com>
Thu, 11 May 2017 12:36:57 +0000 (14:36 +0200)
committerLapo Calamandrei <calamandrei@gmail.com>
Thu, 11 May 2017 13:19:49 +0000 (15:19 +0200)
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

index d5b90e34536aec38ead463dd5fe295c5f0672488..ad93e78e4b79d85ae36b3457a1f3e1a14ce6f6fa 100644 (file)
@@ -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);
+    }
   }
 }