[gtk+] Adwaita: needs-attention on sidebar-item

From: Lapo Calamandrei <lapo src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk+] Adwaita: needs-attention on sidebar-item
Date: Thu, 2 Oct 2014 19:19:26 +0000 (UTC)

commit 64fea1be044ac78fcc31db282882d9234da26ade
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Oct 2 21:16:30 2014 +0200

    Adwaita: needs-attention on sidebar-item
    
    Unfortunatelly it doesn't animate (not my fault) and it just work
    on GtkLabel (my fault).

 gtk/resources/theme/Adwaita/_common.scss           |   61 ++++++++++++--------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   28 ++++++----
 gtk/resources/theme/Adwaita/gtk-contained.css      |   28 ++++++----
 3 files changed, 70 insertions(+), 47 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 6b48985..0704773 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -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 {
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 7fe4c86..8160a3f 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -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; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index e57ebb4..49f5d12 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -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; }

[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]