From 263ff21cc18c94a242eb91d9c1e65ac80b3c1860 Mon Sep 17 00:00:00 2001
From: Nathan Sobo <nathan@github.com>
Date: Wed, 12 Nov 2014 14:35:33 -0700
Subject: [PATCH] Clean up shadow-DOM-specific text editor style sheet

---
 static/text-editor-shadow.less | 315 ++++++++++++++-------------------
 1 file changed, 135 insertions(+), 180 deletions(-)

diff --git a/static/text-editor-shadow.less b/static/text-editor-shadow.less
index e7b23163c..b71999099 100644
--- a/static/text-editor-shadow.less
+++ b/static/text-editor-shadow.less
@@ -2,26 +2,154 @@
 @import "octicon-utf-codes";
 @import "octicon-mixins";
 
-.editor-contents {
-  width: 100%;
-}
-
-.editor.shadow, .editor.shadow .editor-contents {
+.editor, .editor-contents {
   height: 100%;
   width: 100%;
 }
 
+.editor-contents {
+  width: 100%;
+  overflow: hidden;
+  cursor: text;
+  display: -webkit-flex;
+  -webkit-user-select: none;
+  position: relative;
+}
+
+.gutter {
+  overflow: hidden;
+  text-align: right;
+  cursor: default;
+  min-width: 1em;
+  box-sizing: border-box;
+}
+
+.line-numbers {
+  position: relative;
+}
+
+.line-number {
+  white-space: nowrap;
+  padding-left: .5em;
+  opacity: 0.6;
+
+  &.cursor-line {
+    opacity: 1;
+  }
+
+  .icon-right {
+    .octicon(chevron-down, 0.8em);
+    display: inline-block;
+    visibility: hidden;
+    opacity: .6;
+    padding: 0 .4em;
+
+    &:before {
+      text-align: center;
+    }
+  }
+}
+
+.gutter:hover {
+  .line-number.foldable .icon-right {
+    visibility: visible;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.gutter, .gutter:hover {
+  .line-number.folded .icon-right {
+    .octicon(chevron-right, 0.8em);
+
+    visibility: visible;
+
+    &:before {
+      position: relative;
+      left: -.1em;
+    }
+  }
+}
+
+.scroll-view {
+  position: relative;
+  z-index: 0;
+
+  overflow: hidden;
+  -webkit-flex: 1;
+  min-width: 0;
+}
+
 .underlayer {
   position: absolute;
+  z-index: -2;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: -2;
+}
+
+.highlight {
+  background: none;
+  padding: 0;
+}
+
+.highlight .region {
+  position: absolute;
+  pointer-events: none;
+  z-index: -1;
 }
 
 .lines {
   min-width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+.line {
+  white-space: pre;
+
+  &.cursor-line .fold-marker:after {
+    opacity: 1;
+  }
+}
+
+.fold-marker {
+  cursor: default;
+
+  &:after {
+    .icon(0.8em, inline);
+
+    content: @ellipsis;
+    padding-left: 0.2em;
+  }
+}
+
+.placeholder-text {
+  position: absolute;
+  color: @text-color-subtle;
+}
+
+.invisible-character {
+  font-weight: normal !important;
+  font-style: normal !important;
+}
+
+.indent-guide {
+  box-shadow: inset 1px 0;
+}
+
+.hidden-input {
+  padding: 0;
+  border: 0;
+  position: absolute;
+  z-index: -1;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 1px;
 }
 
 .cursor {
@@ -33,7 +161,7 @@
   opacity: 0;
 }
 
-.is-focused .cursor {
+&.is-focused .cursor {
   opacity: 1;
 }
 
@@ -77,176 +205,3 @@
   bottom: 0;
   right: 0;
 }
-
-.scroll-view {
-  overflow: hidden;
-  z-index: 0;
-  -webkit-flex: 1;
-  min-width: 0;
-  position: relative;
-}
-
-.gutter {
-  .line-number {
-    white-space: nowrap;
-    padding-left: .5em;
-
-    .icon-right {
-      padding: 0 .4em;
-      &:before {
-        text-align: center;
-      }
-    }
-  }
-}
-
-.placeholder-text {
-  position: absolute;
-  color: @text-color-subtle;
-}
-
-.editor {
-  z-index: 0;
-}
-
-.editor, .editor-contents {
-  overflow: hidden;
-  cursor: text;
-  display: -webkit-flex;
-  -webkit-user-select: none;
-  position: relative;
-}
-
-.gutter .line-number.cursor-line {
-  opacity: 1;
-}
-
-.gutter {
-  overflow: hidden;
-  text-align: right;
-  cursor: default;
-  min-width: 1em;
-  box-sizing: border-box;
-}
-
-.gutter .line-number {
-  padding-left: .5em;
-  opacity: 0.6;
-}
-
-.gutter .line-numbers {
-  position: relative;
-}
-
-.gutter .line-number.folded.cursor-line {
-  opacity: 1;
-}
-
-.gutter .line-number .icon-right {
-  .octicon(chevron-down, 0.8em);
-  display: inline-block;
-  visibility: hidden;
-  padding-left: .1em;
-  padding-right: .5em;
-  opacity: .6;
-}
-
-.gutter:hover .line-number.foldable .icon-right {
-  visibility: visible;
-
-  &:before {
-    content: @chevron-down;
-  }
-
-  &:hover {
-    opacity: 1;
-  }
-}
-
-.gutter, .gutter:hover {
-  .line-number.folded .icon-right {
-    .octicon(chevron-right, 0.8em);
-    visibility: visible;
-
-    &:before { // chevron-right renders too far right compared to chevron-down
-      position: relative;
-      left: -.1em;
-      content: @chevron-right;
-    }
-  }
-}
-
-.fold-marker {
-  cursor: default;
-}
-
-.fold-marker:after {
-  .icon(0.8em, inline);
-  content: @ellipsis;
-  padding-left: 0.2em;
-}
-
-.line.cursor-line .fold-marker:after {
-  opacity: 1;
-}
-
-.editor.is-blurred .line.cursor-line {
-  background: rgba(0, 0, 0, 0);
-}
-
-.invisible-character {
-  font-weight: normal !important;
-  font-style: normal !important;
-}
-
-.indent-guide {
-  display: inline-block;
-  box-shadow: inset 1px 0;
-}
-
-.editor.soft-wrap .scroll-view {
-  overflow-x: hidden;
-}
-
-.underlayer {
-  z-index: 0;
-  position: absolute;
-  min-height: 100%;
-}
-
-.lines {
-  position: relative;
-  z-index: 1;
-}
-
-.overlayer {
-  z-index: 2;
-  position: absolute;
-  width: 100%;
-}
-
-.line {
-  white-space: pre;
-}
-
-.line span {
-  vertical-align: top;
-}
-
-.hidden-input {
-  padding: 0;
-  border: 0;
-  position: absolute;
-  z-index: -1;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  width: 1px;
-}
-
-.highlight .region,
-.selection .region {
-  position: absolute;
-  pointer-events: none;
-  z-index: -1;
-}