mirror of
https://gitlab.gnome.org/GNOME/gtk.git
synced 2024-09-30 19:17:34 +00:00
Adwaita: needs-attention on sidebar-item
Unfortunatelly it doesn't animate (not my fault) and it just work on GtkLabel (my fault).
This commit is contained in:
Lapo Calamandrei
parent
d2838a2408
commit
64fea1be04
@ -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 {
|
||||
|
||||
@ -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; }
|
||||
|
||||
@ -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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user