style textview border

7 files changed, 128 insertions, 0 deletions

diff --git a/common/gtk-3.0/3.20/gtk-dark.css b/common/gtk-3.0/3.20/gtk-dark.css
index af922a3..7ebd155 100644
--- a/common/gtk-3.0/3.20/gtk-dark.css
+++ b/common/gtk-3.0/3.20/gtk-dark.css
@@ -54,6 +54,23 @@ textview text {
   textview text:selected:focus {
     border-radius: 2px; }
 
+textview border {
+  background-color: #3c414e;
+  background-image: image(rgba(0, 0, 0, 0.2));
+  background-repeat: no-repeat; }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband,
 .rubberband {
   border: 1px solid #2679db;
diff --git a/common/gtk-3.0/3.20/gtk-darker.css b/common/gtk-3.0/3.20/gtk-darker.css
index 614736f..f702e8f 100644
--- a/common/gtk-3.0/3.20/gtk-darker.css
+++ b/common/gtk-3.0/3.20/gtk-darker.css
@@ -54,6 +54,23 @@ textview text {
   textview text:selected:focus {
     border-radius: 2px; }
 
+textview border {
+  background-color: #fafbfb;
+  background-image: image(rgba(0, 0, 0, 0.2));
+  background-repeat: no-repeat; }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband,
 .rubberband {
   border: 1px solid #2679db;
diff --git a/common/gtk-3.0/3.20/gtk-solid-dark.css b/common/gtk-3.0/3.20/gtk-solid-dark.css
index 35c5867..aa7d699 100644
--- a/common/gtk-3.0/3.20/gtk-solid-dark.css
+++ b/common/gtk-3.0/3.20/gtk-solid-dark.css
@@ -54,6 +54,23 @@ textview text {
   textview text:selected:focus {
     border-radius: 2px; }
 
+textview border {
+  background-color: #3c414e;
+  background-image: image(rgba(0, 0, 0, 0.2));
+  background-repeat: no-repeat; }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband,
 .rubberband {
   border: 1px solid #2679db;
diff --git a/common/gtk-3.0/3.20/gtk-solid-darker.css b/common/gtk-3.0/3.20/gtk-solid-darker.css
index e7e0bf7..677bc68 100644
--- a/common/gtk-3.0/3.20/gtk-solid-darker.css
+++ b/common/gtk-3.0/3.20/gtk-solid-darker.css
@@ -54,6 +54,23 @@ textview text {
   textview text:selected:focus {
     border-radius: 2px; }
 
+textview border {
+  background-color: #fafbfb;
+  background-image: image(rgba(0, 0, 0, 0.2));
+  background-repeat: no-repeat; }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband,
 .rubberband {
   border: 1px solid #2679db;
diff --git a/common/gtk-3.0/3.20/gtk-solid.css b/common/gtk-3.0/3.20/gtk-solid.css
index 2058160..eec4be8 100644
--- a/common/gtk-3.0/3.20/gtk-solid.css
+++ b/common/gtk-3.0/3.20/gtk-solid.css
@@ -54,6 +54,23 @@ textview text {
   textview text:selected:focus {
     border-radius: 2px; }
 
+textview border {
+  background-color: #fafbfb;
+  background-image: image(rgba(0, 0, 0, 0.2));
+  background-repeat: no-repeat; }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband,
 .rubberband {
   border: 1px solid #2679db;
diff --git a/common/gtk-3.0/3.20/gtk.css b/common/gtk-3.0/3.20/gtk.css
index e1b7872..03e7425 100644
--- a/common/gtk-3.0/3.20/gtk.css
+++ b/common/gtk-3.0/3.20/gtk.css
@@ -54,6 +54,23 @@ textview text {
   textview text:selected:focus {
     border-radius: 2px; }
 
+textview border {
+  background-color: #fafbfb;
+  background-image: image(rgba(0, 0, 0, 0.2));
+  background-repeat: no-repeat; }
+  textview border.bottom {
+    background-size: 100% 1px;
+    background-position: top; }
+  textview border.top {
+    background-size: 100% 1px;
+    background-position: bottom; }
+  textview border.left {
+    background-size: 1px 100%;
+    background-position: right; }
+  textview border.right {
+    background-size: 1px 100%;
+    background-position: left; }
+
 rubberband, flowbox rubberband, treeview.view rubberband, .content-view rubberband,
 .rubberband {
   border: 1px solid #2679db;
diff --git a/common/gtk-3.0/3.20/sass/_common.scss b/common/gtk-3.0/3.20/sass/_common.scss
index e57988c..2c8d750 100644
--- a/common/gtk-3.0/3.20/sass/_common.scss
+++ b/common/gtk-3.0/3.20/sass/_common.scss
@@ -87,6 +87,32 @@ textview {
   }
 }
 
+textview border {
+  background-color: mix($bg_color, $base_color, 50%);
+  background-image: image(transparentize(black, 0.8)); // HACK: the border node just draws background so,
+  background-repeat: no-repeat;                        // using a background-image to draw the border
+
+  &.bottom {
+    background-size: 100% 1px;
+    background-position: top;
+  }
+
+  &.top {
+    background-size: 100% 1px;
+    background-position: bottom;
+  }
+
+  &.left {
+    background-size: 1px 100%;
+    background-position: right;
+  }
+
+  &.right {
+    background-size: 1px 100%;
+    background-position: left;
+  }
+}
+
 iconview { @extend .view; }
 
 rubberband,