[gtk+/scrollable-indicator] adwaita: initial undershoot styling

[Lapo Calamandrei <lapo src gnome org>]

commit d013cdf9b5f2da34ab026117ef1e2b7f7ba30a87
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Wed Nov 12 13:52:12 2014 +0100

    adwaita: initial undershoot styling

 gtk/resources/theme/Adwaita/_common.scss           |   16 ++++++++++------
 gtk/resources/theme/Adwaita/gtk-contained-dark.css |   14 ++++++++------
 gtk/resources/theme/Adwaita/gtk-contained.css      |   14 ++++++++------
 3 files changed, 26 insertions(+), 18 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index 898c26b..45907d3 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -145,21 +145,25 @@ $ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 
 .undershoot {
   &.top {
-    background: linear-gradient(to top, transparentize(red,1), transparentize(red,0.5));
-    background-size: auto 100px;
-    background-position: center 100%;
+    background-image: linear-gradient(to bottom, transparentize(black, 0.75) 1px,
+                                                 transparentize(black, 0.9) 2px,
+                                                 transparent 7px);
+    background-size: 100%;
+    background-position: top;
   } 
   &.bottom {
-    background: linear-gradient(to bottom, transparentize(red,1), transparentize(red,0.5));
-    background-size: auto 100px;
-    background-position: center 0%;
+    background-image: linear-gradient(to top, $base_color 10%, transparentize($base_color, 1));
+    background-size: 100%;
+    background-position: bottom;
   } 
   &.left {
+    /* FIXME: styleme! */
     background: linear-gradient(to left, transparentize(red,1), transparentize(red,0.5));
     background-size: 100px auto;
     background-position: 100% center;
   } 
   &.right {
+    /* FIXME: styleme! */
     background: linear-gradient(to right, transparentize(red,1), transparentize(red,0.5));
     background-size: 100px auto;
     background-position: 0% center;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css 
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index 5014649..63da0cf 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -91,18 +91,20 @@
   background-position: 0% center; }
 
 .undershoot.top {
-  background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 100%; }
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.1) 2px, transparent 
7px);
+  background-size: 100%;
+  background-position: top; }
 .undershoot.bottom {
-  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 0%; }
+  background-image: linear-gradient(to top, #292929 10%, rgba(41, 41, 41, 0));
+  background-size: 100%;
+  background-position: bottom; }
 .undershoot.left {
+  /* FIXME: styleme! */
   background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 100% center; }
 .undershoot.right {
+  /* FIXME: styleme! */
   background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 0% center; }
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index 8126971..1ad0a83 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -91,18 +91,20 @@
   background-position: 0% center; }
 
 .undershoot.top {
-  background: linear-gradient(to top, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 100%; }
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 1px, rgba(0, 0, 0, 0.1) 2px, transparent 
7px);
+  background-size: 100%;
+  background-position: top; }
 .undershoot.bottom {
-  background: linear-gradient(to bottom, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
-  background-size: auto 100px;
-  background-position: center 0%; }
+  background-image: linear-gradient(to top, #ffffff 10%, rgba(255, 255, 255, 0));
+  background-size: 100%;
+  background-position: bottom; }
 .undershoot.left {
+  /* FIXME: styleme! */
   background: linear-gradient(to left, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 100% center; }
 .undershoot.right {
+  /* FIXME: styleme! */
   background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0.5));
   background-size: 100px auto;
   background-position: 0% center; }