refactor CSS

CursorLayer.js

@@ -1,7 +1,7 @@
 function CursorLayer(parentEl)
 {
   this.element = document.createElement("div");
-  this.element.className = "cursor-layer";
+  this.element.className = "layer cursor-layer";
   parentEl.appendChild(this.element); 
   
   this.cursor = document.createElement("div");

MarkerLayer.js

@@ -1,7 +1,7 @@
 function MarkerLayer(parentEl)
 {
   this.element = document.createElement("div");
-  this.element.className = "markers";
+  this.element.className = "layer marker-layer";
   parentEl.appendChild(this.element);
   
   this.markers = {};

TextLayer.js

@@ -1,7 +1,7 @@
 function TextLayer(parentEl)
 {
   this.element = document.createElement("div");
-  this.element.className = "canvas";
+  this.element.className = "layer text-layer";
   parentEl.appendChild(this.element);
   
   this._measureSizes();

editor.css

@@ -1,29 +1,61 @@
 .editor {
   position: absolute;
   border: 1px solid black;
-  overflow-x: scroll;
+  overflow: hidden;
-  overflow-y: hidden;	  
 }
 
 .editor.focus {
   border: 1px solid #327fbd;;
 }
 
-.editor .canvas {
+.scroller {
-  z-index: 2;
   position: absolute;
-  overflow: hidden;
+  left: 50px;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow-x: scroll;
+  overflow-y: hidden;	    
+}
+
+.gutter {
+  position: absolute;
+  width: 50px;
+  top: 0px;
+  bottom: 0px;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  
+  background: rgb(227, 227, 227);
+  border-right: 1px solid rgb(159, 159, 159);	 
+  color: rgb(136, 136, 136);
   font-family: Monaco, "Courier New";
-  font-size: 12px;
+  font-size: 12px;  
+  
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;  
+}
+
+.layer {
+  position: absolute;
+  overflow: hidden;  
   white-space: nowrap;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
-  cursor: text;
 }
-	
+
-.composition {
+.gutter-layer {
-  position: absolute;
+  right: 0;
-  text-decoration: underline;
+  text-align: right;
+  padding-right: 10px;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+.text-layer {
+  font-family: Monaco, "Courier New";
+  font-size: 12px;
+  cursor: text;
 }
 
 .cursor {
@@ -36,34 +68,20 @@
   white-space: nowrap;
 }
 
-.line.odd {
+.line .keyword {
-  /*background: #FAFAFA;*/
-}
-
-.keyword {
   color: blue;
 }
 
-.string {
+.line .string {
   color: rgb(3, 106, 7);
 }
 
-.comment {
+.line .comment {
   font-style: italic;
   color: rgb(0, 102, 255);
 }
 
-.editor .markers {
+.marker-layer .selection {
-  position: absolute;
-  z-index: 1;
-}
-
-.editor .cursor-layer {
-  position: absolute;
-  z-index: 3;
-}
-
-.selection {
   position: absolute;
   background: rgba(77, 151, 255, 0.33);
 }