[gtk+] Adwaita: stack switcher needs-attention class style

[Lapo Calamandrei <lapo src gnome org>]

commit 0d1b036e587c35f7b89aba942979e3d53abf4b47
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Jul 16 19:42:17 2014 +0200

    Adwaita: stack switcher needs-attention class style

 gtk/resources/theme/Adwaita/_common.scss           |   56 ++++++++++++++++++++
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   24 ++++++++
 gtk/resources/theme/Adwaita/gtk-contained.css      |   24 ++++++++
 3 files changed, 104 insertions(+), 0 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index d053428..318b16c 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -248,6 +248,25 @@ GtkLabel {
  * Buttons *
  ***********/
 
+ keyframes needs_attention {
+  from {
+    //background-size: 0 0, 0 0;
+    background-image: -gtk-gradient(radial,
+                                    center center, 0,
+                                    center center, 0.01,
+                                    to($selected_bg_color),
+                                    to(transparent));
+  }
+  to {
+    //background-size: 6px 6px, 6px 6px;
+    background-image: -gtk-gradient(radial,
+                                    center center, 0,
+                                    center center, 0.5,
+                                    to($selected_bg_color),
+                                    to(transparent));
+  }
+}
+
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -338,6 +357,43 @@ GtkLabel {
     }
   }
 
+  // stack switcher buttons
+  .action-bar .stack-switcher &.image-button,
+  .header-bar .stack-switcher &.image-button {
+    // override the padding since we need to add some padding on the
+    // GtkImage itself to fit the circle
+    padding: 5px 2px;
+  }
+  .stack-switcher > & {
+    padding-left: 0;  // subtract the padding which will be added to the
+    padding-right: 0; // GtkLabel
+    > GtkLabel {
+      padding-left: 6px;  // label padding
+      padding-right: 6px; //
+    }
+    > GtkImage {
+      padding: 3px 6px; // image padding
+    }
+    &.needs-attention > GtkLabel,
+    &.needs-attention > GtkImage {
+      animation: needs_attention 150ms ease-in;
+      background-image: -gtk-gradient(radial,
+                                      center center, 0,
+                                      center center, 0.5,
+                                      to($selected_bg_color),
+                                      to(transparent)),
+                        -gtk-gradient(radial,
+                                      center center, 0,
+                                      center center, 0.5,
+                                      to(white),
+                                      to(transparent));
+      background-size: 6px 6px, 6px 6px;
+      background-repeat: no-repeat;
+      background-position: right 2px, right 3px;
+      &:backdrop { background-size: 6px 6px, 0 0;}
+    }
+  }
+
   // buttons in header bars and action bars
   .header-bar &.image-button,
   .action-bar &.image-button { padding: 8px; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index ae98f1b..75c4bab 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -254,6 +254,12 @@
 /***********
  * Buttons *
  ***********/
+ keyframes needs_attention {
+  from {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#215d9c), 
to(transparent)); }
+
+  to {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), 
to(transparent)); } }
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -472,6 +478,24 @@
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); }
+  .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button {
+    padding: 5px 2px; }
+  .stack-switcher > .button {
+    padding-left: 0;
+    padding-right: 0; }
+    .stack-switcher > .button > GtkLabel {
+      padding-left: 6px;
+      padding-right: 6px; }
+    .stack-switcher > .button > GtkImage {
+      padding: 3px 6px; }
+    .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > 
GtkImage {
+      animation: needs_attention 150ms ease-in;
+      background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#215d9c), 
to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.5, to(white), to(transparent));
+      background-size: 6px 6px, 6px 6px;
+      background-repeat: no-repeat;
+      background-position: right 2px, right 3px; }
+      .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > 
.button.needs-attention > GtkImage:backdrop {
+        background-size: 6px 6px, 0 0; }
   .header-bar .button.image-button, .action-bar .button.image-button {
     padding: 8px; }
   .header-bar .button.text-button, .action-bar .button.text-button {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 03645ae..1a5348e 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -246,6 +246,12 @@
 /***********
  * Buttons *
  ***********/
+ keyframes needs_attention {
+  from {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.01, to(#4a90d9), 
to(transparent)); }
+
+  to {
+    background-image: -gtk-gradient(radial, center center, 0, center center, 0.5, to(#4a90d9), 
to(transparent)); } }
 .button {
   border-radius: 3px;
   transition: all 200ms ease-out;
@@ -464,6 +470,24 @@
       text-shadow: none;
       icon-shadow: none;
       box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; }
+  .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button {
+    padding: 5px 2px; }
+  .stack-switcher > .button {
+    padding-left: 0;
+    padding-right: 0; }
+    .stack-switcher > .button > GtkLabel {
+      padding-left: 6px;
+      padding-right: 6px; }
+    .stack-switcher > .button > GtkImage {
+      padding: 3px 6px; }
+    .stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > 
GtkImage {
+      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(white), to(transparent));
+      background-size: 6px 6px, 6px 6px;
+      background-repeat: no-repeat;
+      background-position: right 2px, right 3px; }
+      .stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > 
.button.needs-attention > GtkImage:backdrop {
+        background-size: 6px 6px, 0 0; }
   .header-bar .button.image-button, .action-bar .button.image-button {
     padding: 8px; }
   .header-bar .button.text-button, .action-bar .button.text-button {