From 66f14ab0b8aec5adadfb4c4bcb56a08fa74d475a Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Thu, 4 Aug 2016 10:24:14 +0800
Subject: [PATCH] Draw grippie with CSS.

---
 app/assets/images/grippie.png                 | Bin 90 -> 0 bytes
 app/assets/stylesheets/desktop/discourse.scss |  23 +++++++++++++-----
 2 files changed, 17 insertions(+), 6 deletions(-)
 delete mode 100644 app/assets/images/grippie.png

diff --git a/app/assets/images/grippie.png b/app/assets/images/grippie.png
deleted file mode 100644
index d01faf5a3c8c6bf849743ca5a78012dcca8ebbdd..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 90
zcmeAS@N?(olHy`uVBq!ia0vp^(m>400VEhECZ9+GQcNX5e!&d?qbDkD1@eSFT^vIy
mZYAI7l{WZuoL3@a0YAf2pMq~+tCnvAY4UXSb6Mw<&;$UE=@~r$

diff --git a/app/assets/stylesheets/desktop/discourse.scss b/app/assets/stylesheets/desktop/discourse.scss
index 0c8fb255c4..9f100fe5bf 100644
--- a/app/assets/stylesheets/desktop/discourse.scss
+++ b/app/assets/stylesheets/desktop/discourse.scss
@@ -69,14 +69,25 @@ body {
     }
   }
 
+  $grippie-border-color: dark-light-choose(scale-color($primary, $lightness: 70%), scale-color($secondary, $lightness: 50%));
+
   .grippie {
-    width: 100%;
+    position: relative;
     cursor: row-resize;
-    height: 11px;
-    overflow: hidden;
-    display:block;
-    border-top: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
-    background: image-url("grippie.png") dark-light-diff($primary, $secondary, 90%, -60%) no-repeat center 3px;
+    margin: auto;
+    height: 4.5px;
+    width: 27px;
+    border-top: 1px solid $grippie-border-color;
+    border-bottom: 1px solid $grippie-border-color;
+    top: 4px;
+    box-sizing: border-box;
+  }
+
+  .grippie:before {
+    content: '';
+    display: block;
+    border-top: 1px solid $grippie-border-color;
+    margin-top: 0.5px;
   }
 }