prefix all editor css classes
This commit is contained in:
Fabian Jakobs
parent
a9952b5609
commit
d4e253ad14
9 changed files with 64 additions and 64 deletions
|
|
@ -1,40 +1,40 @@
|
|||
.editor {
|
||||
.ace_editor {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scroller {
|
||||
.ace_scroller {
|
||||
position: absolute;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
.ace_gutter {
|
||||
position: absolute;
|
||||
overflow-x: scroll;
|
||||
overflow-y: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.editor .sb {
|
||||
.ace_editor .ace_sb {
|
||||
position: absolute;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.editor .sb div {
|
||||
.ace_editor .ace_sb div {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.editor .printMargin {
|
||||
.ace_editor .ace_printMargin {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layer {
|
||||
.ace_layer {
|
||||
z-index: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
|
|
@ -42,43 +42,43 @@
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
.text-layer {
|
||||
.ace_text-layer {
|
||||
font-family: Monaco, "Courier New", monospace;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.cursor-layer {
|
||||
.ace_cursor-layer {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
.ace_cursor {
|
||||
z-index: 3;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.line {
|
||||
.ace_line {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.marker-layer {
|
||||
.ace_marker-layer {
|
||||
}
|
||||
|
||||
.marker-layer .step {
|
||||
.ace_marker-layer .ace_step {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.marker-layer .selection {
|
||||
.ace_marker-layer .ace_selection {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.marker-layer .bracket {
|
||||
.ace_marker-layer .ace_bracket {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.marker-layer .active_line {
|
||||
.ace_marker-layer .ace_active_line {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
46
css/tm.css
46
css/tm.css
|
|
@ -1,12 +1,12 @@
|
|||
.editor {
|
||||
.ace_editor {
|
||||
border: 2px solid rgb(159, 159, 159);
|
||||
}
|
||||
|
||||
.editor.focus {
|
||||
.ace_editor.ace_focus {
|
||||
border: 2px solid #327fbd;;
|
||||
}
|
||||
|
||||
.gutter {
|
||||
.ace_gutter {
|
||||
width: 40px;
|
||||
background: rgb(227, 227, 227);
|
||||
border-right: 1px solid rgb(159, 159, 159);
|
||||
|
|
@ -15,89 +15,89 @@
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editor .printMargin {
|
||||
.ace_editor .ace_printMargin {
|
||||
width: 1px;
|
||||
background: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
.gutter-layer {
|
||||
.ace_gutter-layer {
|
||||
right: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-layer {
|
||||
.ace_text-layer {
|
||||
font-family: Monaco, "Courier New", monospace;
|
||||
font-size: 12px;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
.ace_cursor {
|
||||
border-left: 2px solid black;
|
||||
}
|
||||
|
||||
.cursor.overwrite {
|
||||
.ace_cursor.ace_overwrite {
|
||||
border-left: 0px;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.line .invisible {
|
||||
.ace_line .ace_invisible {
|
||||
color: rgb(191, 191, 191);
|
||||
}
|
||||
|
||||
.line .keyword {
|
||||
.ace_line .ace_keyword {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.line .buildin-constant {
|
||||
.ace_line .ace_buildin-constant {
|
||||
color: rgb(88, 72, 246);
|
||||
}
|
||||
|
||||
.line .library-constant {
|
||||
.ace_line .ace_library-constant {
|
||||
color: rgb(6, 150, 14);
|
||||
}
|
||||
|
||||
.line .buildin-function {
|
||||
.ace_line .ace_buildin-function {
|
||||
color: rgb(60, 76, 114);
|
||||
}
|
||||
|
||||
.line .string {
|
||||
.ace_line .ace_string {
|
||||
color: rgb(3, 106, 7);
|
||||
}
|
||||
|
||||
.line .comment {
|
||||
.ace_line .ace_comment {
|
||||
font-style: italic;
|
||||
color: rgb(76, 136, 107);
|
||||
}
|
||||
|
||||
.line .doc-comment {
|
||||
.ace_line .ace_doc-comment {
|
||||
color: rgb(0, 102, 255);
|
||||
}
|
||||
|
||||
.line .doc-comment-tag {
|
||||
.ace_line .ace_doc-comment-tag {
|
||||
color: rgb(128, 159, 191);
|
||||
}
|
||||
|
||||
.line .number {
|
||||
.ace_line .ace_number {
|
||||
color: rgb(0, 0, 205);
|
||||
}
|
||||
|
||||
.line .xml_pe {
|
||||
.ace_line .ace_xml_pe {
|
||||
color: rgb(104, 104, 91);
|
||||
}
|
||||
|
||||
.marker-layer .selection {
|
||||
.ace_marker-layer .ace_selection {
|
||||
background: rgb(181, 213, 255);
|
||||
}
|
||||
|
||||
.ce .marker-layer .step {
|
||||
.ace_marker-layer .ace_step {
|
||||
background: rgb(198, 219, 174);
|
||||
}
|
||||
|
||||
.marker-layer .bracket {
|
||||
.ace_marker-layer .ace_bracket {
|
||||
margin: -1px 0 0 -1px;
|
||||
border: 1px solid rgb(192, 192, 192);
|
||||
}
|
||||
|
||||
.marker-layer .active_line {
|
||||
.ace_marker-layer .ace_active_line {
|
||||
background: rgb(232, 242, 254);
|
||||
}
|
||||
|
|
@ -142,7 +142,7 @@ ace.Editor = function(renderer, doc) {
|
|||
var pos = self.doc.findMatchingBracket(self.getCursorPosition());
|
||||
if (pos) {
|
||||
var range = new ace.Range(pos.row, pos.column, pos.row, pos.column+1);
|
||||
self.$bracketHighlight = self.renderer.addMarker(range, "bracket");
|
||||
self.$bracketHighlight = self.renderer.addMarker(range, "ace_bracket");
|
||||
}
|
||||
}, 10);
|
||||
};
|
||||
|
|
@ -195,7 +195,7 @@ ace.Editor = function(renderer, doc) {
|
|||
if (this.getHighlightActiveLine() && !this.selection.isMultiLine()) {
|
||||
var cursor = this.getCursorPosition();
|
||||
var range = new ace.Range(cursor.row, 0, cursor.row+1, 0);
|
||||
this.$highlightLineMarker = this.renderer.addMarker(range, "active_line", "line");
|
||||
this.$highlightLineMarker = this.renderer.addMarker(range, "ace_active_line", "line");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -208,7 +208,7 @@ ace.Editor = function(renderer, doc) {
|
|||
if (!this.selection.isEmpty()) {
|
||||
var range = this.selection.getRange();
|
||||
var style = this.getSelectionStyle();
|
||||
this.$selectionMarker = this.renderer.addMarker(range, "selection", style);
|
||||
this.$selectionMarker = this.renderer.addMarker(range, "ace_selection", style);
|
||||
}
|
||||
|
||||
this.onCursorChange();
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ ace.provide("ace.ScrollBar");
|
|||
|
||||
ace.ScrollBar = function(parent) {
|
||||
this.element = document.createElement("div");
|
||||
this.element.className = "sb";
|
||||
this.element.className = "ace_sb";
|
||||
|
||||
this.inner = document.createElement("div");
|
||||
this.element.appendChild(this.inner);
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ ace.provide("ace.VirtualRenderer");
|
|||
|
||||
ace.VirtualRenderer = function(container) {
|
||||
this.container = container;
|
||||
ace.addCssClass(this.container, "editor");
|
||||
ace.addCssClass(this.container, "ace_editor");
|
||||
|
||||
this.scroller = document.createElement("div");
|
||||
this.scroller.className = "scroller";
|
||||
this.scroller.className = "ace_scroller";
|
||||
this.container.appendChild(this.scroller);
|
||||
|
||||
this.$gutter = document.createElement("div");
|
||||
this.$gutter.className = "gutter";
|
||||
this.$gutter.className = "ace_gutter";
|
||||
this.container.appendChild(this.$gutter);
|
||||
|
||||
this.content = document.createElement("div");
|
||||
|
|
@ -116,7 +116,7 @@ ace.VirtualRenderer = function(container) {
|
|||
|
||||
if (!this.$printMarginEl) {
|
||||
this.$printMarginEl = document.createElement("div");
|
||||
this.$printMarginEl.className = "printMargin";
|
||||
this.$printMarginEl.className = "ace_printMargin";
|
||||
this.content.insertBefore(this.$printMarginEl, this.$cursorLayer.element);
|
||||
}
|
||||
|
||||
|
|
@ -374,11 +374,11 @@ ace.VirtualRenderer = function(container) {
|
|||
};
|
||||
|
||||
this.visualizeFocus = function() {
|
||||
ace.addCssClass(this.container, "focus");
|
||||
ace.addCssClass(this.container, "ace_focus");
|
||||
};
|
||||
|
||||
this.visualizeBlur = function() {
|
||||
ace.removeCssClass(this.container, "focus");
|
||||
ace.removeCssClass(this.container, "ace_focus");
|
||||
};
|
||||
|
||||
this.showComposition = function(position) {
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ ace.provide("ace.layer.Cursor");
|
|||
|
||||
ace.layer.Cursor = function(parentEl) {
|
||||
this.element = document.createElement("div");
|
||||
this.element.className = "layer cursor-layer";
|
||||
this.element.className = "ace_layer ace_cursor-layer";
|
||||
parentEl.appendChild(this.element);
|
||||
|
||||
this.cursor = document.createElement("div");
|
||||
this.cursor.className = "cursor";
|
||||
this.cursor.className = "ace_cursor";
|
||||
|
||||
this.isVisible = false;
|
||||
};
|
||||
|
|
@ -19,9 +19,9 @@ ace.layer.Cursor = function(parentEl) {
|
|||
column : position.column
|
||||
};
|
||||
if (overwrite) {
|
||||
ace.addCssClass(this.cursor, "overwrite");
|
||||
ace.addCssClass(this.cursor, "ace_overwrite");
|
||||
} else {
|
||||
ace.removeCssClass(this.cursor, "overwrite");
|
||||
ace.removeCssClass(this.cursor, "ace_overwrite");
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ ace.provide("ace.layer.Gutter");
|
|||
|
||||
ace.layer.Gutter = function(parentEl) {
|
||||
this.element = document.createElement("div");
|
||||
this.element.className = "layer gutter-layer";
|
||||
this.element.className = "ace_layer ace_gutter-layer";
|
||||
parentEl.appendChild(this.element);
|
||||
|
||||
this.$breakpoints = [];
|
||||
|
|
@ -22,8 +22,8 @@ ace.layer.Gutter = function(parentEl) {
|
|||
|
||||
var html = [];
|
||||
for ( var i = config.firstRow; i <= config.lastRow; i++) {
|
||||
html.push("<div class='gutter-cell",
|
||||
this.$breakpoints[i] ? " breakpoint" : "",
|
||||
html.push("<div class='ace_gutter-cell",
|
||||
this.$breakpoints[i] ? " ace_breakpoint" : "",
|
||||
"' style='height:", config.lineHeight, "px;'>", (i+1), "</div>");
|
||||
html.push("</div>");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ ace.provide("ace.layer.Marker");
|
|||
|
||||
ace.layer.Marker = function(parentEl) {
|
||||
this.element = document.createElement("div");
|
||||
this.element.className = "layer marker-layer";
|
||||
this.element.className = "ace_layer ace_marker-layer";
|
||||
parentEl.appendChild(this.element);
|
||||
|
||||
this.markers = {};
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ ace.provide("ace.layer.Text");
|
|||
|
||||
ace.layer.Text = function(parentEl) {
|
||||
this.element = document.createElement("div");
|
||||
this.element.className = "layer text-layer";
|
||||
this.element.className = "ace_layer ace_text-layer";
|
||||
parentEl.appendChild(this.element);
|
||||
|
||||
this.$characterSize = this.$measureSizes();
|
||||
|
|
@ -92,7 +92,7 @@ ace.layer.Text = function(parentEl) {
|
|||
var tabSize = this.doc.getTabSize();
|
||||
if (this.$showInvisibles) {
|
||||
var halfTab = (tabSize) / 2;
|
||||
this.$tabString = "<span class='invisible'>"
|
||||
this.$tabString = "<span class='ace_invisible'>"
|
||||
+ new Array(Math.floor(halfTab)).join(" ")
|
||||
+ this.TAB_CHAR
|
||||
+ new Array(Math.ceil(halfTab)+1).join(" ")
|
||||
|
|
@ -124,7 +124,7 @@ ace.layer.Text = function(parentEl) {
|
|||
|
||||
var html = [];
|
||||
for ( var i = config.firstRow; i <= config.lastRow; i++) {
|
||||
html.push("<div class='line' style='height:" + this.$characterSize.height + "px;", "width:",
|
||||
html.push("<div class='ace_line' style='height:" + this.$characterSize.height + "px;", "width:",
|
||||
config.width, "px'>");
|
||||
this.renderLine(html, i), html.push("</div>");
|
||||
}
|
||||
|
|
@ -140,7 +140,7 @@ ace.layer.Text = function(parentEl) {
|
|||
var spaceRe = /[\v\f \u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u2028\u2029\u3000]+/g;
|
||||
var spaceReplace = function(space) {
|
||||
var space = new Array(space.length+1).join(self.SPACE_CHAR);
|
||||
return "<span class='invisible'>" + space + "</span>";
|
||||
return "<span class='ace_invisible'>" + space + "</span>";
|
||||
};
|
||||
}
|
||||
else {
|
||||
|
|
@ -158,7 +158,7 @@ ace.layer.Text = function(parentEl) {
|
|||
.replace(/\t/g, this.$tabString);
|
||||
|
||||
if (token.type !== "text") {
|
||||
stringBuilder.push("<span class='", token.type, "'>", output, "</span>");
|
||||
stringBuilder.push("<span class='ace_", token.type, "'>", output, "</span>");
|
||||
}
|
||||
else {
|
||||
stringBuilder.push(output);
|
||||
|
|
@ -167,9 +167,9 @@ ace.layer.Text = function(parentEl) {
|
|||
|
||||
if (this.$showInvisibles) {
|
||||
if (row !== this.doc.getLength() - 1) {
|
||||
stringBuilder.push("<span class='invisible'>" + this.EOL_CHAR + "</span>");
|
||||
stringBuilder.push("<span class='ace_invisible'>" + this.EOL_CHAR + "</span>");
|
||||
} else {
|
||||
stringBuilder.push("<span class='invisible'>" + this.EOF_CHAR + "</span>");
|
||||
stringBuilder.push("<span class='ace_invisible'>" + this.EOF_CHAR + "</span>");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue