From 1a12a17b7a5a647fffd85ce657b7239cf30c488c Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Fri, 17 Jan 2014 14:55:06 -0700
Subject: [PATCH] Use actual markup for fold icon so we can determine when it's
 clicked

---
 src/gutter.coffee  |  2 +-
 static/editor.less | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/gutter.coffee b/src/gutter.coffee
index a47036365..e97a4a12a 100644
--- a/src/gutter.coffee
+++ b/src/gutter.coffee
@@ -213,7 +213,7 @@ class Gutter extends View
 
       rowValuePadding = _.multiplyString('&nbsp;', maxDigits - rowValue.length)
 
-      html += """<div class="#{classes}">#{rowValuePadding}#{rowValue}</div>"""
+      html += """<div class="#{classes}" data-buffer-row=#{row}>#{rowValuePadding}#{rowValue}<div class="fold-icon"></div></div>"""
 
       lastRow = row
 
diff --git a/static/editor.less b/static/editor.less
index 2e497766d..99086c000 100644
--- a/static/editor.less
+++ b/static/editor.less
@@ -26,7 +26,6 @@
 }
 
 .editor .gutter .line-number {
-  padding-right: .5em;
   padding-left: .5em;
   opacity: 0.6;
   position: relative;
@@ -40,21 +39,21 @@
   opacity: 1;
 }
 
-.editor .gutter .line-number:after {
-  .icon(0.8em);
-  content: @chevron-down;
-  opacity: .8;
+.editor .gutter .line-number .fold-icon {
+  .octicon(chevron-down, 0.8em);
+  display: inline-block;
   visibility: hidden;
-  position: relative;
-  top: -0.1em;
+  padding-left: .1em;
+  padding-right: .5em;
+  opacity: .8;
 }
 
-.editor .gutter .line-number.fold:after {
+.editor .gutter:hover .line-number.foldable .fold-icon {
   visibility: visible;
-  content: @chevron-right;
 }
 
-.editor .gutter:hover .line-number.foldable:not(.fold):after {
+.editor .gutter .line-number.fold .fold-icon {
+  .octicon(chevron-right, 0.8em);
   visibility: visible;
 }