[gtk+] Adwaita: undershoot simplification and tweaks

[Lapo Calamandrei <lapo src gnome org>]

commit c6eb926e4ad9ee935885aa36c0e26290f6261e29
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Jan 29 10:49:59 2015 +0100

    Adwaita: undershoot simplification and tweaks

 gtk/theme/Adwaita/_common.scss           |    4 ----
 gtk/theme/Adwaita/_drawing.scss          |   20 +++++++-------------
 gtk/theme/Adwaita/gtk-contained-dark.css |   30 ++++++++++++------------------
 gtk/theme/Adwaita/gtk-contained.css      |   30 ++++++++++++------------------
 4 files changed, 31 insertions(+), 53 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 3e74a5b..0c68437 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3298,8 +3298,4 @@ GtkVolumeButton.button { padding: 8px; }
   &.right {
     @include undershoot(right);
   }
-
-  &.sidebar {
-    background-color: transparent; // otherwise it get inherited
-  }
 }
diff --git a/gtk/theme/Adwaita/_drawing.scss b/gtk/theme/Adwaita/_drawing.scss
index 0fe49af..2e4ab36 100644
--- a/gtk/theme/Adwaita/_drawing.scss
+++ b/gtk/theme/Adwaita/_drawing.scss
@@ -589,12 +589,11 @@
 // top, bottom, right, left
 //
 
-  $_undershoot_color: transparentize($fg_color, 0.6);
-  $_undershoot_base: transparentize($base_color, 0.5);
+  $_undershoot_color_dark: transparentize(black, 0.8);
+  $_undershoot_color_light: transparentize(white, 0.8);
 
   $_gradient_dir: left;
   $_dash_bg_size: 10px 1px;
-  $_base_bg_size: 10px 1px;
   $_gradient_repeat: repeat-x;
   $_bg_pos: center $p;
 
@@ -603,22 +602,17 @@
   @if ($p == left) or ($p == right) {
     $_gradient_dir: top;
     $_dash_bg_size: 1px 10px;
-    $_base_bg_size: 1px 10px;
     $_gradient_repeat: repeat-y;
     $_bg_pos: $p center;
   }
 
-  background-image: linear-gradient(to $_gradient_dir, // this is the dash
-                                    $_undershoot_color 50%,
-                                    transparentize($_undershoot_color, 1) 50%),
-                    linear-gradient(to $_gradient_dir, // this is the dash base
-                                    $_undershoot_base 50%,
-                                    transparentize($_undershoot_base, 1) 50%);
+  background-image: linear-gradient(to $_gradient_dir, // this is the dashed line
+                                    $_undershoot_color_light 50%,
+                                    $_undershoot_color_dark 50%);
 
-  border-#{$p}: 1px solid transparent;
   padding-#{$p}: 1px;
-  background-size: $_dash_bg_size, $_base_bg_size;
+  background-size: $_dash_bg_size;
   background-repeat: $_gradient_repeat;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: $_bg_pos;
 }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index b66656c..1a28776 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4415,42 +4415,36 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 
 .undershoot.top {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), 
linear-gradient(to left, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-top: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-top: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center top; }
 .undershoot.bottom {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), 
linear-gradient(to left, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-bottom: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-bottom: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center bottom; }
 .undershoot.left {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), 
linear-gradient(to top, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-left: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-left: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: left center; }
 .undershoot.right {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(238, 238, 236, 0.4) 50%, rgba(238, 238, 236, 0) 50%), 
linear-gradient(to top, rgba(41, 41, 41, 0.5) 50%, rgba(41, 41, 41, 0) 50%);
-  border-right: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-right: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: right center; }
-.undershoot.sidebar {
-  background-color: transparent; }
 
 /* GTK NAMED COLORS
    ----------------
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index f6c279a..6b3ce5c 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4588,42 +4588,36 @@ GtkVolumeButton.button, .header-bar GtkVolumeButton.button.titlebutton,
 
 .undershoot.top {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), 
linear-gradient(to left, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-top: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-top: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center top; }
 .undershoot.bottom {
   background-color: transparent;
-  background-image: linear-gradient(to left, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), 
linear-gradient(to left, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-bottom: 1px solid transparent;
+  background-image: linear-gradient(to left, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-bottom: 1px;
-  background-size: 10px 1px, 10px 1px;
+  background-size: 10px 1px;
   background-repeat: repeat-x;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: center bottom; }
 .undershoot.left {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), 
linear-gradient(to top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-left: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-left: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: left center; }
 .undershoot.right {
   background-color: transparent;
-  background-image: linear-gradient(to top, rgba(46, 52, 54, 0.4) 50%, rgba(46, 52, 54, 0) 50%), 
linear-gradient(to top, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 50%);
-  border-right: 1px solid transparent;
+  background-image: linear-gradient(to top, rgba(255, 255, 255, 0.2) 50%, rgba(0, 0, 0, 0.2) 50%);
   padding-right: 1px;
-  background-size: 1px 10px, 1px 10px;
+  background-size: 1px 10px;
   background-repeat: repeat-y;
-  background-origin: content-box, padding-box;
+  background-origin: content-box;
   background-position: right center; }
-.undershoot.sidebar {
-  background-color: transparent; }
 
 /* GTK NAMED COLORS
    ----------------