AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: stack switcher needs-attention class style

Browse Source
This commit is contained in:
Lapo Calamandrei 2014-07-16 19:42:17 +02:00
parent 4053ee0cca
commit 0d1b036e58
3 changed files with 104 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
gtk/resources/theme/Adwaita/_common.scss
View File

@ -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; }

24
gtk/resources/theme/Adwaita/gtk-contained-dark.css
View File

@ -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 {

24
gtk/resources/theme/Adwaita/gtk-contained.css
View File

@ -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 {