AuroraMiddleware/gtk
1
0
Fork 1
mirror of https://gitlab.gnome.org/GNOME/gtk.git synced 2024-11-18 17:30:10 +00:00
Code Issues Projects Releases Wiki Activity

Adwaita: needs-attention on sidebar-item

Browse Source 
Unfortunatelly it doesn't animate (not my fault) and it just work
on GtkLabel (my fault).
This commit is contained in:
Lapo Calamandrei 2014-10-02 21:16:30 +02:00
parent d2838a2408
commit 64fea1be04
3 changed files with 70 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -539,30 +539,7 @@ $_dot_color: if($variant=='light', $selected_bg_color,
padding: 5px 2px;
}
&.needs-attention > GtkLabel,
&.needs-attention > GtkImage {
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));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
@if $variant == 'light' { background-position: right 3px, right 4px; }
@else { background-position: right 3px, right 2px; }
&:backdrop { background-size: 6px 6px, 0 0;}
&:dir(rtl) {
@if $variant == 'light' { background-position: left 3px, left 4px; }
@else { background-position: left 3px, left 2px; }
}
}
&.needs-attention > GtkImage { @extend %needs_attention; }
&.needs-attention:active > GtkLabel,
&.needs-attention:active > GtkImage,
&.needs-attention:checked > GtkLabel,
@ -594,6 +571,32 @@ $_dot_color: if($variant=='light', $selected_bg_color,
.linked.vertical &:backdrop { @extend %linked_vertical; }
}
%needs_attention {
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));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
@if $variant == 'light' { background-position: right 3px, right 4px; }
@else { background-position: right 3px, right 2px; }
&:backdrop { background-size: 6px 6px, 0 0;}
&:dir(rtl) {
@if $variant == 'light' { background-position: left 3px, left 4px; }
@else { background-position: left 3px, left 2px; }
}
}
// all the following is for the +|- buttons on inline toolbars, that way
// should really be deprecated...
.inline-toolbar GtkToolButton > .button { // redefining the button look is
@ -2556,7 +2559,15 @@ GtkFileChooserDialog {
}
.sidebar-item {
padding: 10px;
padding: 10px 4px;
> GtkLabel {
padding-left: 6px;
padding-right: 6px;
}
&.needs-attention > GtkLabel {
@extend %needs_attention;
background-size: 6px 6px, 0 0;
}
}
GtkPaned {

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

@ -850,16 +850,6 @@ GtkCalendar.header .button.titlebutton {
.titlebar .stack-switcher > .titlebutton.button,
GtkCalendar.header .stack-switcher > .titlebutton.button {
padding: 5px 2px; }
.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(#3583d5), to(transparent)), -gtk-gradient(radial, center center, 0, center center, 0.45, to(rgba(0, 0, 0, 0.81176)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 2px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
background-position: left 3px, left 2px; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
animation: none;
background-image: none; }
@ -877,6 +867,17 @@ GtkCalendar.header .button.titlebutton {
GtkCalendar.header .primary-toolbar .button.titlebutton {
icon-shadow: none; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > GtkLabel {
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.81176)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 2px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop, .sidebar-item.needs-attention > GtkLabel:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > GtkLabel:dir(rtl) {
background-position: left 3px, left 2px; }
.inline-toolbar GtkToolButton > .button, .inline-toolbar .header-bar GtkToolButton > .button.titlebutton, .header-bar .inline-toolbar GtkToolButton > .button.titlebutton,
.inline-toolbar .titlebar GtkToolButton > .button.titlebutton,
.titlebar .inline-toolbar GtkToolButton > .button.titlebutton,
@ -3882,7 +3883,12 @@ GtkFileChooserDialog .dialog-action-box {
background-color: #215d9c; }
.sidebar-item {
padding: 10px; }
padding: 10px 4px; }
.sidebar-item > GtkLabel {
padding-left: 6px;
padding-right: 6px; }
.sidebar-item.needs-attention > GtkLabel {
background-size: 6px 6px, 0 0; }
GtkPaned {
margin: 0 8px 8px 0; }

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

@ -842,16 +842,6 @@ GtkCalendar.header .button.titlebutton {
.titlebar .stack-switcher > .titlebutton.button,
GtkCalendar.header .stack-switcher > .titlebutton.button {
padding: 5px 2px; }
.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(rgba(255, 255, 255, 0.76923)), to(transparent));
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl) {
background-position: left 3px, left 4px; }
.stack-switcher > .button.needs-attention:active > GtkLabel, .stack-switcher > .button.needs-attention:active > GtkImage, .stack-switcher > .button.needs-attention:checked > GtkLabel, .stack-switcher > .button.needs-attention:checked > GtkImage {
animation: none;
background-image: none; }
@ -869,6 +859,17 @@ GtkCalendar.header .button.titlebutton {
GtkCalendar.header .primary-toolbar .button.titlebutton {
icon-shadow: none; }
.stack-switcher > .button.needs-attention > GtkLabel, .stack-switcher > .button.needs-attention > GtkImage, .sidebar-item.needs-attention > GtkLabel {
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-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
background-position: right 3px, right 4px; }
.stack-switcher > .button.needs-attention > GtkLabel:backdrop, .stack-switcher > .button.needs-attention > GtkImage:backdrop, .sidebar-item.needs-attention > GtkLabel:backdrop {
background-size: 6px 6px, 0 0; }
.stack-switcher > .button.needs-attention > GtkLabel:dir(rtl), .stack-switcher > .button.needs-attention > GtkImage:dir(rtl), .sidebar-item.needs-attention > GtkLabel:dir(rtl) {
background-position: left 3px, left 4px; }
.inline-toolbar GtkToolButton > .button, .inline-toolbar .header-bar GtkToolButton > .button.titlebutton, .header-bar .inline-toolbar GtkToolButton > .button.titlebutton,
.inline-toolbar .titlebar GtkToolButton > .button.titlebutton,
.titlebar .inline-toolbar GtkToolButton > .button.titlebutton,
@ -4043,7 +4044,12 @@ GtkFileChooserDialog .dialog-action-box {
background-color: #4a90d9; }
.sidebar-item {
padding: 10px; }
padding: 10px 4px; }
.sidebar-item > GtkLabel {
padding-left: 6px;
padding-right: 6px; }
.sidebar-item.needs-attention > GtkLabel {
background-size: 6px 6px, 0 0; }
GtkPaned {
margin: 0 8px 8px 0; }