[gtk+] Adwaita: stack switcher needs-attention class style
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: stack switcher needs-attention class style
- Date: Wed, 16 Jul 2014 17:42:54 +0000 (UTC)
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 {
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]