[gtk+] Adwaita: no more -gtk-gradient()

[Lapo Calamandrei <lapo src gnome org>]

commit f4c6994e57af9ea3dc8ecc03a474a4c6d50e8992
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Nov 5 16:16:37 2016 +0100

    Adwaita: no more -gtk-gradient()
    
    the only place where it was used was the `needs attention` dot
    which is now drawn using radial-gradient().

 gtk/theme/Adwaita/_common.scss           |   37 ++++++++---------------------
 gtk/theme/Adwaita/gtk-contained-dark.css |    6 ++--
 gtk/theme/Adwaita/gtk-contained.css      |    6 ++--
 3 files changed, 16 insertions(+), 33 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index e3d02a0..a00def2 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -419,21 +419,8 @@ treeview entry {
 $_dot_color: if($variant=='light', $selected_bg_color,
                                    lighten($selected_bg_color,15%));
 @keyframes needs_attention {
-  from {
-    background-image: -gtk-gradient(radial,
-                                    center center, 0,
-                                    center center, 0.01,
-                                    to($_dot_color),
-                                    to(transparent));
-  }
-
-  to {
-    background-image: -gtk-gradient(radial,
-                                    center center, 0,
-                                    center center, 0.5,
-                                    to($selected_bg_color),
-                                    to(transparent));
-  }
+  from { background-image: radial-gradient($_dot_color 0%, transparentize($_dot_color, 1) 0%); }
+  to { background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color, 1) 70%); }
 }
 
 %button,
@@ -796,19 +783,15 @@ button {
 }
 
 %needs_attention {
+  // the dot is drawn by using two radial gradient, the first one is the actuall dot, the other
+  // simulates the shadow labels and icons normally have in buttons.
   animation: needs_attention 150ms ease-in;
-  $_dot_shadow: _text_shadow_color();
-  $_dot_shadow_r: if($variant=='light',0.5,0.45);
-  background-image: -gtk-gradient(radial,
-                                  center center, 0,
-                                  center center, 0.5,
-                                  to($_dot_color),
-                                  to(transparent)),
-                    -gtk-gradient(radial,
-                                  center center, 0,
-                                  center center, $_dot_shadow_r,
-                                  to($_dot_shadow),
-                                  to(transparent));
+  $_dot_shadow: _text_shadow_color(); // shadow color
+  $_dot_shadow_r: if($variant == 'light', 70%, 69%); // the radii of the shadow is different in
+                                                     // dark variant to dim the intensity a bit
+
+  background-image: radial-gradient($_dot_color 68%, transparentize($_dot_color,1 ) 70%),
+                    radial-gradient($_dot_shadow 68%, transparentize($_dot_shadow, 1) $_dot_shadow_r);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 400d6be..4ecb17d 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#3583d5), 
to(transparent)); }
+    background-image: radial-gradient(#3583d5 0%, rgba(53, 131, 213, 0) 0%); }
   to {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), 
to(transparent)); } }
+    background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%); } }
 notebook > header > tabs > arrow, button.titlebutton,
 button {
   min-height: 24px;
@@ -1188,7 +1188,7 @@ button.needs-attention > label,
 .stack-switcher >
 button.needs-attention > image, stacksidebar row.needs-attention > label {
   animation: needs_attention 150ms ease-in;
-  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#3583d5), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.82745)), 
to(transparent));
+  background-image: radial-gradient(#3583d5 68%, rgba(53, 131, 213, 0) 70%), radial-gradient(rgba(0, 0, 0, 
0.82745) 68%, transparent 69%);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   background-position: right 3px, right 2px; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 879163f..5c81487 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -396,9 +396,9 @@ treeview entry.flat, treeview entry {
  ***********/
 @keyframes needs_attention {
   from {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#4a90d9), 
to(transparent)); }
+    background-image: radial-gradient(#4a90d9 0%, rgba(74, 144, 217, 0) 0%); }
   to {
-    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), 
to(transparent)); } }
+    background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%); } }
 notebook > header > tabs > arrow, button.titlebutton,
 button {
   min-height: 24px;
@@ -1191,7 +1191,7 @@ button.needs-attention > label,
 .stack-switcher >
 button.needs-attention > image, stacksidebar row.needs-attention > label {
   animation: needs_attention 150ms ease-in;
-  background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(rgba(255, 255, 255, 
0.76923)), to(transparent));
+  background-image: radial-gradient(#4a90d9 68%, rgba(74, 144, 217, 0) 70%), radial-gradient(rgba(255, 255, 
255, 0.76923) 68%, rgba(255, 255, 255, 0) 70%);
   background-size: 6px 6px, 6px 6px;
   background-repeat: no-repeat;
   background-position: right 3px, right 4px; }