From dfcd080cb72a8051712095655303defb8f4941fb Mon Sep 17 00:00:00 2001
From: Cassie Tarakajian <ctarakajian@gmail.com>
Date: Wed, 11 Oct 2017 17:31:23 -0400
Subject: [PATCH] change fold icons and dots

---
 client/styles/components/_editor.scss         | 36 +++++++++++++++++--
 .../_p5-contrast-codemirror-theme.scss        |  5 +++
 .../components/_p5-dark-codemirror-theme.scss |  5 +++
 .../_p5-light-codemirror-theme.scss           |  5 +++
 4 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/client/styles/components/_editor.scss b/client/styles/components/_editor.scss
index 194264d0..4aaabfe8 100644
--- a/client/styles/components/_editor.scss
+++ b/client/styles/components/_editor.scss
@@ -13,17 +13,17 @@
 
 .CodeMirror-linenumber {
 	width: #{32 / $base-font-size}rem;
-  left: 0 !important;
+  left: #{-3 / $base-font-size}rem !important;
   @include themify() {
     color: getThemifyVariable('inactive-text-color');
   }
 }
 
 .CodeMirror-lines {
-	padding-top: #{25 / $base-font-size}rem;
+  padding-top: #{25 / $base-font-size}rem;
 }
 
-.CodeMirror-line {
+pre.CodeMirror-line {
 	padding-left: #{5 / $base-font-size}rem;
 }
 
@@ -243,6 +243,36 @@
   background: transparent url(../images/exit.svg) no-repeat;
 }
 
+.CodeMirror-foldgutter-open:after {
+  background-image: url(../images/down-arrow.svg);
+}
+
+.CodeMirror-foldgutter-folded:after {
+  background-image: url(../images/right-arrow.svg);
+}
+
+.CodeMirror-foldgutter-folded:after,
+.CodeMirror-foldgutter-open:after {
+  background-size: 10px 10px;
+  content: "";
+  padding-left: 15px;
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+
+.CodeMirror-foldmarker {
+  text-shadow: none;
+  border-radius: 5px;
+  opacity: 1;
+  font-weight: normal;
+  display: inline-block;
+  vertical-align: middle;
+  height: 0.85em;
+  line-height: 0.7;
+  padding: 0 #{5 / $base-font-size}rem;
+  font-family: serif;
+}
+
 .editor-holder {
   height: calc(100% - #{29 / $base-font-size}rem);
   width: 100%;
diff --git a/client/styles/components/_p5-contrast-codemirror-theme.scss b/client/styles/components/_p5-contrast-codemirror-theme.scss
index d5a2a997..6ddef26a 100644
--- a/client/styles/components/_p5-contrast-codemirror-theme.scss
+++ b/client/styles/components/_p5-contrast-codemirror-theme.scss
@@ -125,3 +125,8 @@ $p5-contrast-activeline: #999999;
   color: $p5-contrast-pink;
   font-weight: bold;
 }
+
+.cm-s-p5-contrast .CodeMirror-foldmarker {
+  background-color: white;
+  color: #333;
+}
diff --git a/client/styles/components/_p5-dark-codemirror-theme.scss b/client/styles/components/_p5-dark-codemirror-theme.scss
index e727b03f..275d57ff 100644
--- a/client/styles/components/_p5-dark-codemirror-theme.scss
+++ b/client/styles/components/_p5-dark-codemirror-theme.scss
@@ -128,3 +128,8 @@ $p5-dark-activeline: rgb(207, 207, 207);
   color: $p5-dark-pink;
   font-weight: bold;
 }
+
+.cm-s-p5-dark .CodeMirror-foldmarker {
+  background-color: white;
+  color: #333;
+}
diff --git a/client/styles/components/_p5-light-codemirror-theme.scss b/client/styles/components/_p5-light-codemirror-theme.scss
index 0a5fcd78..dbb72dbd 100644
--- a/client/styles/components/_p5-light-codemirror-theme.scss
+++ b/client/styles/components/_p5-light-codemirror-theme.scss
@@ -126,3 +126,8 @@ $p5-light-activeline: rgb(207, 207, 207);
 .cm-s-p5-light .cm-p5-variable {
   color: $p5-light-pink;
 }
+
+.cm-s-p5-light .CodeMirror-foldmarker {
+  background-color: #333;
+  color: white;
+}