[gtk+] Adwaita: added a transition to the backdrop state to most widgets

[Lapo Calamandrei <lapo src gnome org>]

commit 01748031496f57d031ffcc279c4017fe45e37600
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Sat Mar 19 19:56:15 2016 +0100

    Adwaita: added a transition to the backdrop state to most widgets

 gtk/theme/Adwaita/_common.scss           |   37 ++++++++++++++++++++---
 gtk/theme/Adwaita/gtk-contained-dark.css |   47 +++++++++++++++++++++---------
 gtk/theme/Adwaita/gtk-contained.css      |   47 +++++++++++++++++++++---------
 3 files changed, 98 insertions(+), 33 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index d7c0485..293df94 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4,7 +4,7 @@
 
 $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 $asset_suffix: if($variant=='dark', '-dark', '');
-$backdrop_transition: 400ms linear;
+$backdrop_transition: 200ms ease-out;
 
 * {
   padding: 0;
@@ -279,7 +279,11 @@ entry {
 
     &:disabled { @include entry(insensitive); }
 
-    &:backdrop { @include entry(backdrop); }
+    &:backdrop {
+      @include entry(backdrop);
+
+      transition: $backdrop_transition;
+    }
 
     &:backdrop:disabled { @include entry(backdrop-insensitive); }
 
@@ -466,6 +470,7 @@ button {
       &.flat, & {
         @include button(backdrop);
 
+        transition: $backdrop_transition;
         -gtk-icon-effect: none;
 
         &:active,
@@ -1037,6 +1042,7 @@ spinbutton {
         color: mix($backdrop_fg_color, $backdrop_base_color, 90%);
         background-color: transparent;
         border-color: transparentize($backdrop_borders_color, 0.7);
+        transition: $backdrop_transition;
       }
 
       &:backdrop:disabled {
@@ -1288,6 +1294,7 @@ searchbar,
     border-color: $backdrop_borders_color;
     background-color: $backdrop_dark_fill;
     box-shadow: none;
+    transition: $backdrop_transition;
   }
 }
 
@@ -1311,6 +1318,8 @@ headerbar {
     background-color: $bg_color;
     background-image: none;
     box-shadow: inset 0 1px $top_hilight;
+
+    transition: $backdrop_transition;
   }
 
   .title {
@@ -2221,6 +2230,7 @@ scrollbar {
   &:backdrop {
     background-color: $backdrop_scrollbar_bg_color;
     border-color: $backdrop_borders_color;
+    transition: $backdrop_transition;
   }
 
   // slider
@@ -2415,6 +2425,7 @@ switch {
     background-image: linear-gradient(to bottom, $backdrop_dark_fill);
     box-shadow: none;
     text-shadow: none;
+    transition: $backdrop_transition;
 
     &:active {
       @if $variant == 'light' { color: $backdrop_bg_color; }
@@ -2525,6 +2536,8 @@ radio {
   &:backdrop {
     @include button(backdrop);
 
+    transition: $backdrop_transition;
+
     &:disabled { @include button(backdrop-insensitive); }
   }
 
@@ -2652,6 +2665,7 @@ treeview.view radio:selected { &:focus, & { @extend %radio; }} // This is a work
     background-color: $backdrop_dark_fill;
     border-color: $backdrop_borders_color;
     box-shadow: none;
+    transition: $backdrop_transition;
 
     &:disabled { background-color: $insensitive_bg_color; }
   }
@@ -3110,7 +3124,10 @@ progressbar {
   font-size: smaller;
   color: transparentize($fg_color, 0.6);
 
-  &:backdrop { box-shadow: none; }
+  &:backdrop {
+    box-shadow: none;
+    transition: $backdrop_transition;
+  }
 
   trough { @extend %scale_trough; }
 
@@ -3178,6 +3195,8 @@ levelbar {
     min-height: 32px;
   }
 
+  &:backdrop { transition: $backdrop_transition; }
+
   trough {
     border: 1px solid;
     padding: 2px;
@@ -3339,6 +3358,7 @@ scrolledwindow {
     &:backdrop {
       border-image-source: linear-gradient(to bottom, $backdrop_borders_color 1px, transparent 1px);
       background-color: $backdrop_scrollbar_bg_color;
+      transition: $backdrop_transition;
     }
   }
 }
@@ -3372,6 +3392,8 @@ row {
 
   &:hover { transition: none; }
 
+  &:backdrop { transition: $backdrop_transition; }
+
   &.activatable {
     &.has-open-popup, // this is for indicathing which row generated a popover see 
https://bugzilla.gnome.org/show_bug.cgi?id=754411
 
@@ -3409,7 +3431,10 @@ row {
                                                transparent 2px);
   background-clip: padding-box;
 
-  &:backdrop { background-image: none; }
+  &:backdrop {
+    background-image: none;
+    transition: $backdrop_transition;
+  }
 
   button { @extend %osd_button; }
 
@@ -3578,6 +3603,7 @@ filechooserbutton:drop(active) {
   &:backdrop {
     background-color: $backdrop_sidebar_bg_color;
     border-color: $backdrop_borders_color;
+    transition: $backdrop_transition;
   }
 
   :selected { // FIXME: what this is supposed to select
@@ -3987,7 +4013,6 @@ colorchooser .popover.osd { border-radius: 5px; }
 }
 
 .scale-popup {
-
   .osd & { @extend %osd; }
 
   .osd & button.flat {  //FIXME: quick hack, redo properly
@@ -4036,6 +4061,7 @@ decoration {
     box-shadow: 0 3px 9px 1px transparent,
                 0 2px 6px 2px transparentize(black, 0.8),
                 0 0 0 1px $_wm_border_backdrop;
+    transition: $backdrop_transition;
   }
 
   .fullscreen &,
@@ -4176,6 +4202,7 @@ button.circular { // FIXME: aggregate to buttons
   &:backdrop {
     background-color: $backdrop_base_color;
     color: $backdrop_fg_color;
+    transition: $backdrop_transition;
   }
 }
 
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index eeee146..9bb93a5 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -222,7 +222,8 @@ entry {
     color: #d5d5d5;
     border-color: #1f2222;
     background-image: linear-gradient(to bottom, #2c2c2c);
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
   spinbutton:backdrop:disabled:not(.vertical),
   entry:backdrop:disabled {
     color: #5d6767;
@@ -454,6 +455,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
     text-shadow: none;
     -gtk-icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+    transition: 200ms ease-out;
     -gtk-icon-effect: none; }
     notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, headerbar 
button.titlebutton:backdrop label,
     .titlebar button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, 
button.sidebar-button:backdrop, headerbar button.titlebutton:backdrop,
@@ -1277,7 +1279,8 @@ spinbutton:not(.vertical) {
     spinbutton:not(.vertical) button:backdrop {
       color: #8a8c8b;
       background-color: transparent;
-      border-color: rgba(31, 34, 34, 0.3); }
+      border-color: rgba(31, 34, 34, 0.3);
+      transition: 200ms ease-out; }
     spinbutton:not(.vertical) button:backdrop:disabled {
       color: rgba(93, 103, 103, 0.3);
       background-image: none;
@@ -1471,7 +1474,8 @@ searchbar,
   .location-bar:backdrop {
     border-color: #1f2222;
     background-color: #303535;
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
 
 /***************
  * Header bars *
@@ -1492,7 +1496,8 @@ headerbar {
     border-color: #1f2222;
     background-color: #393f3f;
     background-image: none;
-    box-shadow: inset 0 1px rgba(238, 238, 236, 0.07); }
+    box-shadow: inset 0 1px rgba(238, 238, 236, 0.07);
+    transition: 200ms ease-out; }
   .titlebar:not(headerbar) .title,
   headerbar .title {
     font-weight: bold;
@@ -2255,7 +2260,8 @@ scrollbar {
     border-left: 1px solid #1c1f1f; }
   scrollbar:backdrop {
     background-color: #323737;
-    border-color: #1f2222; }
+    border-color: #1f2222;
+    transition: 200ms ease-out; }
   scrollbar slider {
     min-width: 6px;
     min-height: 6px;
@@ -2414,7 +2420,8 @@ switch {
     border-color: #1f2222;
     background-image: linear-gradient(to bottom, #303535);
     box-shadow: none;
-    text-shadow: none; }
+    text-shadow: none;
+    transition: 200ms ease-out; }
     switch:backdrop:active {
       border-color: #0f2b48;
       background-image: linear-gradient(to bottom, #215d9c);
@@ -2573,7 +2580,8 @@ radio {
     background-image: linear-gradient(to bottom, #393f3f);
     text-shadow: none;
     -gtk-icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+    transition: 200ms ease-out; }
     check:backdrop label, check:backdrop,
     radio:backdrop label,
     radio:backdrop {
@@ -2730,7 +2738,8 @@ scale trough, scale fill, progressbar trough {
   scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
     background-color: #303535;
     border-color: #1f2222;
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
     scale trough:backdrop:disabled, scale fill:backdrop:disabled, progressbar trough:backdrop:disabled, 
progressbar:backdrop trough:disabled {
       background-color: #333636; }
   row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected progressbar trough, progressbar row:selected trough {
@@ -3363,7 +3372,8 @@ progressbar {
   progressbar.vertical progress {
     margin: -1px 0; }
   progressbar:backdrop {
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
   progressbar progress {
     border-radius: 1.5px; }
     progressbar progress.left {
@@ -3400,6 +3410,8 @@ levelbar block {
 levelbar.vertical block {
   min-width: 1px;
   min-height: 32px; }
+levelbar:backdrop {
+  transition: 200ms ease-out; }
 levelbar trough {
   border: 1px solid;
   padding: 2px;
@@ -3600,7 +3612,8 @@ scrolledwindow junction {
     border-image-slice: 0 1 0 0; }
   scrolledwindow junction:backdrop {
     border-image-source: linear-gradient(to bottom, #1f2222 1px, transparent 1px);
-    background-color: #323737; }
+    background-color: #323737;
+    transition: 200ms ease-out; }
 
 separator {
   background: rgba(0, 0, 0, 0.1);
@@ -3624,6 +3637,8 @@ row {
   transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   row:hover {
     transition: none; }
+  row:backdrop {
+    transition: 200ms ease-out; }
   row.activatable.has-open-popup, row.activatable:hover {
     background-color: rgba(238, 238, 236, 0.05); }
   row.activatable:active {
@@ -3649,7 +3664,8 @@ row {
   background-clip: padding-box; }
   .app-notification:backdrop,
   .app-notification.frame:backdrop {
-    background-image: none; }
+    background-image: none;
+    transition: 200ms ease-out; }
   .app-notification border,
   .app-notification.frame border {
     border: none; }
@@ -3752,7 +3768,8 @@ filechooserbutton:drop(active) {
     border-right-style: none; }
   .sidebar:backdrop {
     background-color: #333636;
-    border-color: #1f2222; }
+    border-color: #1f2222;
+    transition: 200ms ease-out; }
   .sidebar list {
     background-color: transparent; }
   paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned 
.sidebar:dir(ltr), paned .sidebar {
@@ -4124,7 +4141,8 @@ decoration {
   box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(28, 31, 31, 0.9);
   margin: 10px; }
   decoration:backdrop {
-    box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(28, 31, 31, 
0.9); }
+    box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(28, 31, 31, 0.9);
+    transition: 200ms ease-out; }
   .fullscreen decoration, .tiled decoration {
     border-radius: 0; }
   .popup decoration {
@@ -4271,7 +4289,8 @@ button.circular {
   font-size: smaller; }
   .keycap:backdrop {
     background-color: #2c2c2c;
-    color: #949796; }
+    color: #949796;
+    transition: 200ms ease-out; }
 
 *:drop(active):focus,
 *:drop(active) {
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 91e4d76..3586f0c 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -222,7 +222,8 @@ entry {
     color: #323232;
     border-color: #a5a5a1;
     background-image: linear-gradient(to bottom, #fcfcfc);
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
   spinbutton:backdrop:disabled:not(.vertical),
   entry:backdrop:disabled {
     color: #c3c3c0;
@@ -454,6 +455,7 @@ notebook > header > tabs > arrow, headerbar button.titlebutton,
     text-shadow: none;
     -gtk-icon-shadow: none;
     box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+    transition: 200ms ease-out;
     -gtk-icon-effect: none; }
     notebook > header > tabs > arrow:backdrop label, button.sidebar-button:backdrop label, headerbar 
button.titlebutton:backdrop label,
     .titlebar button.titlebutton:backdrop label, notebook > header > tabs > arrow:backdrop, 
button.sidebar-button:backdrop, headerbar button.titlebutton:backdrop,
@@ -1283,7 +1285,8 @@ spinbutton:not(.vertical) {
     spinbutton:not(.vertical) button:backdrop {
       color: #96999a;
       background-color: transparent;
-      border-color: rgba(165, 165, 161, 0.3); }
+      border-color: rgba(165, 165, 161, 0.3);
+      transition: 200ms ease-out; }
     spinbutton:not(.vertical) button:backdrop:disabled {
       color: rgba(195, 195, 192, 0.3);
       background-image: none;
@@ -1477,7 +1480,8 @@ searchbar,
   .location-bar:backdrop {
     border-color: #a5a5a1;
     background-color: #d1d1cf;
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
 
 /***************
  * Header bars *
@@ -1498,7 +1502,8 @@ headerbar {
     border-color: #a5a5a1;
     background-color: #e8e8e7;
     background-image: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0.8);
+    transition: 200ms ease-out; }
   .titlebar:not(headerbar) .title,
   headerbar .title {
     font-weight: bold;
@@ -2267,7 +2272,8 @@ scrollbar {
     border-left: 1px solid #9d9d99; }
   scrollbar:backdrop {
     background-color: #e1e1df;
-    border-color: #a5a5a1; }
+    border-color: #a5a5a1;
+    transition: 200ms ease-out; }
   scrollbar slider {
     min-width: 6px;
     min-height: 6px;
@@ -2426,7 +2432,8 @@ switch {
     border-color: #a5a5a1;
     background-image: linear-gradient(to bottom, #d1d1cf);
     box-shadow: none;
-    text-shadow: none; }
+    text-shadow: none;
+    transition: 200ms ease-out; }
     switch:backdrop:active {
       color: #e8e8e7;
       border-color: #4a90d9;
@@ -2597,7 +2604,8 @@ radio {
     background-image: linear-gradient(to bottom, #e8e8e7);
     text-shadow: none;
     -gtk-icon-shadow: none;
-    box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+    box-shadow: inset 0 1px rgba(255, 255, 255, 0);
+    transition: 200ms ease-out; }
     check:backdrop label, check:backdrop,
     radio:backdrop label,
     radio:backdrop {
@@ -2758,7 +2766,8 @@ scale trough, scale fill, progressbar trough {
   scale trough:backdrop, scale fill:backdrop, progressbar trough:backdrop, progressbar:backdrop trough {
     background-color: #d1d1cf;
     border-color: #a5a5a1;
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
     scale trough:backdrop:disabled, scale fill:backdrop:disabled, progressbar trough:backdrop:disabled, 
progressbar:backdrop trough:disabled {
       background-color: #f1f1f1; }
   row:selected scale trough, scale row:selected trough, row:selected scale fill, scale row:selected fill, 
row:selected progressbar trough, progressbar row:selected trough {
@@ -3391,7 +3400,8 @@ progressbar {
   progressbar.vertical progress {
     margin: -1px 0; }
   progressbar:backdrop {
-    box-shadow: none; }
+    box-shadow: none;
+    transition: 200ms ease-out; }
   progressbar progress {
     border-radius: 1.5px; }
     progressbar progress.left {
@@ -3428,6 +3438,8 @@ levelbar block {
 levelbar.vertical block {
   min-width: 1px;
   min-height: 32px; }
+levelbar:backdrop {
+  transition: 200ms ease-out; }
 levelbar trough {
   border: 1px solid;
   padding: 2px;
@@ -3628,7 +3640,8 @@ scrolledwindow junction {
     border-image-slice: 0 1 0 0; }
   scrolledwindow junction:backdrop {
     border-image-source: linear-gradient(to bottom, #a5a5a1 1px, transparent 1px);
-    background-color: #e1e1df; }
+    background-color: #e1e1df;
+    transition: 200ms ease-out; }
 
 separator {
   background: rgba(0, 0, 0, 0.1);
@@ -3652,6 +3665,8 @@ row {
   transition: all 150ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
   row:hover {
     transition: none; }
+  row:backdrop {
+    transition: 200ms ease-out; }
   row.activatable.has-open-popup, row.activatable:hover {
     background-color: rgba(46, 52, 54, 0.05); }
   row.activatable:active {
@@ -3677,7 +3692,8 @@ row {
   background-clip: padding-box; }
   .app-notification:backdrop,
   .app-notification.frame:backdrop {
-    background-image: none; }
+    background-image: none;
+    transition: 200ms ease-out; }
   .app-notification border,
   .app-notification.frame border {
     border: none; }
@@ -3780,7 +3796,8 @@ filechooserbutton:drop(active) {
     border-right-style: none; }
   .sidebar:backdrop {
     background-color: #f2f2f2;
-    border-color: #a5a5a1; }
+    border-color: #a5a5a1;
+    transition: 200ms ease-out; }
   .sidebar list {
     background-color: transparent; }
   paned .sidebar.left, paned .sidebar.right, paned .sidebar.left:dir(rtl), paned .sidebar:dir(rtl), paned 
.sidebar:dir(ltr), paned .sidebar {
@@ -4152,7 +4169,8 @@ decoration {
   box-shadow: 0 3px 9px 1px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.23);
   margin: 10px; }
   decoration:backdrop {
-    box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18); }
+    box-shadow: 0 3px 9px 1px transparent, 0 2px 6px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.18);
+    transition: 200ms ease-out; }
   .fullscreen decoration, .tiled decoration {
     border-radius: 0; }
   .popup decoration {
@@ -4300,7 +4318,8 @@ button.circular {
   font-size: smaller; }
   .keycap:backdrop {
     background-color: #fcfcfc;
-    color: #8b8e8f; }
+    color: #8b8e8f;
+    transition: 200ms ease-out; }
 
 *:drop(active):focus,
 *:drop(active) {