added codemirror and playground
This commit is contained in:
avim
parent
c7c10d0bfa
commit
04e0f957ed
|
|
@ -0,0 +1,309 @@
|
|||
/* BASICS */
|
||||
|
||||
.CodeMirror {
|
||||
/* Set height, width, borders, and global font properties here */
|
||||
font-family: monospace;
|
||||
height: 300px;
|
||||
}
|
||||
.CodeMirror-scroll {
|
||||
/* Set scrolling behaviour here */
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* PADDING */
|
||||
|
||||
.CodeMirror-lines {
|
||||
padding: 4px 0; /* Vertical padding around content */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
padding: 0 4px; /* Horizontal padding of content */
|
||||
}
|
||||
|
||||
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
background-color: white; /* The little square between H and V scrollbars */
|
||||
}
|
||||
|
||||
/* GUTTER */
|
||||
|
||||
.CodeMirror-gutters {
|
||||
border-right: 1px solid #ddd;
|
||||
background-color: #f7f7f7;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.CodeMirror-linenumbers {}
|
||||
.CodeMirror-linenumber {
|
||||
padding: 0 3px 0 5px;
|
||||
min-width: 20px;
|
||||
text-align: right;
|
||||
color: #999;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.CodeMirror-guttermarker { color: black; }
|
||||
.CodeMirror-guttermarker-subtle { color: #999; }
|
||||
|
||||
/* CURSOR */
|
||||
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
border-left: 1px solid black;
|
||||
}
|
||||
/* Shown when moving in bi-directional text */
|
||||
.CodeMirror div.CodeMirror-secondarycursor {
|
||||
border-left: 1px solid silver;
|
||||
}
|
||||
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
background: #7e7;
|
||||
}
|
||||
.CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursors {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cm-animate-fat-cursor {
|
||||
width: auto;
|
||||
border: 0;
|
||||
-webkit-animation: blink 1.06s steps(1) infinite;
|
||||
-moz-animation: blink 1.06s steps(1) infinite;
|
||||
animation: blink 1.06s steps(1) infinite;
|
||||
}
|
||||
@-moz-keyframes blink {
|
||||
0% { background: #7e7; }
|
||||
50% { background: none; }
|
||||
100% { background: #7e7; }
|
||||
}
|
||||
@-webkit-keyframes blink {
|
||||
0% { background: #7e7; }
|
||||
50% { background: none; }
|
||||
100% { background: #7e7; }
|
||||
}
|
||||
@keyframes blink {
|
||||
0% { background: #7e7; }
|
||||
50% { background: none; }
|
||||
100% { background: #7e7; }
|
||||
}
|
||||
|
||||
/* Can style cursor different in overwrite (non-insert) mode */
|
||||
div.CodeMirror-overwrite div.CodeMirror-cursor {}
|
||||
|
||||
.cm-tab { display: inline-block; text-decoration: inherit; }
|
||||
|
||||
.CodeMirror-ruler {
|
||||
border-left: 1px solid #ccc;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* DEFAULT THEME */
|
||||
|
||||
.cm-s-default .cm-keyword {color: #708;}
|
||||
.cm-s-default .cm-atom {color: #219;}
|
||||
.cm-s-default .cm-number {color: #164;}
|
||||
.cm-s-default .cm-def {color: #00f;}
|
||||
.cm-s-default .cm-variable,
|
||||
.cm-s-default .cm-punctuation,
|
||||
.cm-s-default .cm-property,
|
||||
.cm-s-default .cm-operator {}
|
||||
.cm-s-default .cm-variable-2 {color: #05a;}
|
||||
.cm-s-default .cm-variable-3 {color: #085;}
|
||||
.cm-s-default .cm-comment {color: #a50;}
|
||||
.cm-s-default .cm-string {color: #a11;}
|
||||
.cm-s-default .cm-string-2 {color: #f50;}
|
||||
.cm-s-default .cm-meta {color: #555;}
|
||||
.cm-s-default .cm-qualifier {color: #555;}
|
||||
.cm-s-default .cm-builtin {color: #30a;}
|
||||
.cm-s-default .cm-bracket {color: #997;}
|
||||
.cm-s-default .cm-tag {color: #170;}
|
||||
.cm-s-default .cm-attribute {color: #00c;}
|
||||
.cm-s-default .cm-header {color: blue;}
|
||||
.cm-s-default .cm-quote {color: #090;}
|
||||
.cm-s-default .cm-hr {color: #999;}
|
||||
.cm-s-default .cm-link {color: #00c;}
|
||||
|
||||
.cm-negative {color: #d44;}
|
||||
.cm-positive {color: #292;}
|
||||
.cm-header, .cm-strong {font-weight: bold;}
|
||||
.cm-em {font-style: italic;}
|
||||
.cm-link {text-decoration: underline;}
|
||||
|
||||
.cm-s-default .cm-error {color: #f00;}
|
||||
.cm-invalidchar {color: #f00;}
|
||||
|
||||
/* Default styles for common addons */
|
||||
|
||||
div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
|
||||
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
|
||||
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
|
||||
.CodeMirror-activeline-background {background: #e8f2ff;}
|
||||
|
||||
/* STOP */
|
||||
|
||||
/* The rest of this file contains styles related to the mechanics of
|
||||
the editor. You probably shouldn't touch them. */
|
||||
|
||||
.CodeMirror {
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.CodeMirror-scroll {
|
||||
/* 30px is the magic margin used to hide the element's real scrollbars */
|
||||
/* See overflow: hidden in .CodeMirror */
|
||||
margin-bottom: -30px; margin-right: -30px;
|
||||
padding-bottom: 30px;
|
||||
height: 100%;
|
||||
outline: none; /* Prevent dragging from highlighting the element */
|
||||
position: relative;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
.CodeMirror-sizer {
|
||||
position: relative;
|
||||
border-right: 30px solid transparent;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* The fake, visible scrollbars. Used to force redraw during scrolling
|
||||
before actuall scrolling happens, thus preventing shaking and
|
||||
flickering artifacts. */
|
||||
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
|
||||
position: absolute;
|
||||
z-index: 6;
|
||||
display: none;
|
||||
}
|
||||
.CodeMirror-vscrollbar {
|
||||
right: 0; top: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.CodeMirror-hscrollbar {
|
||||
bottom: 0; left: 0;
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
.CodeMirror-scrollbar-filler {
|
||||
right: 0; bottom: 0;
|
||||
}
|
||||
.CodeMirror-gutter-filler {
|
||||
left: 0; bottom: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-gutters {
|
||||
position: absolute; left: 0; top: 0;
|
||||
padding-bottom: 30px;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-gutter {
|
||||
white-space: normal;
|
||||
height: 100%;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
padding-bottom: 30px;
|
||||
margin-bottom: -32px;
|
||||
display: inline-block;
|
||||
/* Hack to make IE7 behave */
|
||||
*zoom:1;
|
||||
*display:inline;
|
||||
}
|
||||
.CodeMirror-gutter-elt {
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
.CodeMirror-lines {
|
||||
cursor: text;
|
||||
min-height: 1px; /* prevents collapsing before first draw */
|
||||
}
|
||||
.CodeMirror pre {
|
||||
/* Reset some styles that the rest of the page might have set */
|
||||
-moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
margin: 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
line-height: inherit;
|
||||
color: inherit;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
}
|
||||
.CodeMirror-wrap pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.CodeMirror-linebackground {
|
||||
position: absolute;
|
||||
left: 0; right: 0; top: 0; bottom: 0;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.CodeMirror-linewidget {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.CodeMirror-widget {}
|
||||
|
||||
.CodeMirror-wrap .CodeMirror-scroll {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.CodeMirror-measure {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
}
|
||||
.CodeMirror-measure pre { position: static; }
|
||||
|
||||
.CodeMirror div.CodeMirror-cursor {
|
||||
position: absolute;
|
||||
border-right: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.CodeMirror-focused div.CodeMirror-cursors {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.CodeMirror-selected { background: #d9d9d9; }
|
||||
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
|
||||
.CodeMirror-crosshair { cursor: crosshair; }
|
||||
|
||||
.cm-searching {
|
||||
background: #ffa;
|
||||
background: rgba(255, 255, 0, .4);
|
||||
}
|
||||
|
||||
/* IE7 hack to prevent it from returning funny offsetTops on the spans */
|
||||
.CodeMirror span { *vertical-align: text-bottom; }
|
||||
|
||||
/* Used to force a border model for a node */
|
||||
.cm-force-border { padding-right: .1px; }
|
||||
|
||||
@media print {
|
||||
/* Hide the cursor when printing */
|
||||
.CodeMirror div.CodeMirror-cursors {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/* Help users use markselection to safely style text background */
|
||||
span.CodeMirror-selectedtext { background: none; }
|
||||
|
|
@ -4,9 +4,10 @@
|
|||
<meta charset="utf-8">
|
||||
<title>React templates - Image Search Sample</title>
|
||||
<link rel="stylesheet" href="playground.css"/>
|
||||
<link rel="stylesheet" href="codemirror.css">
|
||||
<link rel="stylesheet" href="solarized.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="preloader" style="text-align: center;">Loading...</div>
|
||||
<div id="playground">
|
||||
</div>
|
||||
<script src="main.browser.js"></script>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,6 +1,13 @@
|
|||
var reactTemplates = require('../src/reactTemplates');
|
||||
var playgroundTemplate = require('./playground.rt.js');
|
||||
var htmlMode = require('codemirror/mode/htmlmixed/htmlmixed');
|
||||
var javascriptMode = require('codemirror/mode/javascript/javascript');
|
||||
var xmlMode = require('codemirror/mode/xml/xml');
|
||||
var cssMode = require('codemirror/mode/css/css');
|
||||
var vbScriptMode = require('codemirror/mode/vbscript/vbscript');
|
||||
|
||||
var React = require('react/addons');
|
||||
|
||||
var _ = require('lodash');
|
||||
|
||||
|
||||
|
|
@ -35,10 +42,10 @@ function generateRenderFunc(renderFunc) {
|
|||
try {
|
||||
res = renderFunc.apply(this)
|
||||
} catch (e) {
|
||||
|
||||
res = React.DOM.div.apply(this,[{style:{color:"red"}},"Exception:"+e.message]);
|
||||
}
|
||||
return React.DOM.div.apply(this, _.flatten([
|
||||
{},
|
||||
{key:"result"},
|
||||
res
|
||||
]));
|
||||
}
|
||||
|
|
@ -55,20 +62,23 @@ var Playground = React.createClass({
|
|||
updateSample: function (state) {
|
||||
|
||||
this.sampleFunc = generateTemplateFunction(state.templateHTML);
|
||||
this.validHTML = this.sampleFunc !== emptyFunc;
|
||||
this.sampleRender = generateRenderFunc(this.sampleFunc);
|
||||
var classBase = {};
|
||||
try {
|
||||
this.validProps = true;
|
||||
console.log(state.templateProps);
|
||||
classBase = eval("("+state.templateProps+")");
|
||||
/*if (typeof classBase !== 'Object') {
|
||||
if (!_.isObject(classBase)) {
|
||||
throw "failed to eval";
|
||||
}*/
|
||||
}
|
||||
} catch (e) {
|
||||
classBase = {};
|
||||
this.validProps = false;
|
||||
}
|
||||
classBase.render = this.sampleRender;
|
||||
console.log(classBase);
|
||||
this.sample = React.createClass(classBase);
|
||||
this.sample = React.createFactory(React.createClass(classBase));
|
||||
},
|
||||
|
||||
getInitialState: function () {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,18 @@
|
|||
}
|
||||
|
||||
.large-text-area {
|
||||
width:800px;
|
||||
width:600px;
|
||||
height:300px;
|
||||
}
|
||||
}
|
||||
|
||||
.code-area {
|
||||
width:620px;
|
||||
height:620px;
|
||||
float:left;
|
||||
}
|
||||
|
||||
.result-area {
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
float:left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,30 @@
|
|||
<!DOCTYPE rt PlaygroundSample="./playgroundSample">
|
||||
<!DOCTYPE rt CodeEditor="react-code-mirror">
|
||||
<div>
|
||||
<div class="code-area">
|
||||
<form>
|
||||
<textarea valueLink="{this.linkState('templateHTML')}" class="large-text-area"></textarea>
|
||||
<br/>
|
||||
<textarea valueLink="{this.linkState('templateProps')}" class="large-text-area"></textarea>
|
||||
</form>
|
||||
<this.sample>
|
||||
<CodeEditor class="large-text-area" style="border: {this.validHTML? '1px solid black':'2px solid red'};"
|
||||
|
||||
value="{this.state.templateHTML}"
|
||||
mode="htmlmixed"
|
||||
smartIndent="{true}"
|
||||
lineNumbers="{true}"
|
||||
onChange="(evt) => this.setState({'templateHTML':evt.target.value})"
|
||||
/>
|
||||
<br/>
|
||||
<CodeEditor class="large-text-area" style="border: {this.validProps? '1px solid black':'2px solid red'};"
|
||||
value="{this.state.templateProps}"
|
||||
mode="javascript"
|
||||
theme="solarized"
|
||||
smartIndent="{true}"
|
||||
lineNumbers="{true}"
|
||||
onChange="(evt) => this.setState({'templateProps':evt.target.value})"
|
||||
/>
|
||||
</form>
|
||||
</div>
|
||||
<div class="result-area">
|
||||
<this.sample>
|
||||
|
||||
</this.sample>
|
||||
</div>
|
||||
|
||||
</this.sample>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,30 @@
|
|||
var React = require('react');
|
||||
var _ = require('lodash');
|
||||
var PlaygroundSample = require('./playgroundSample');
|
||||
var CodeEditor = require('react-code-mirror');
|
||||
'use strict';
|
||||
function onChange1(evt) {
|
||||
this.setState({ 'templateHTML': evt.target.value });
|
||||
}
|
||||
function onChange2(evt) {
|
||||
this.setState({ 'templateProps': evt.target.value });
|
||||
}
|
||||
module.exports = function () {
|
||||
return React.DOM.div({}, React.DOM.form({}, React.DOM.textarea({
|
||||
'valueLink': this.linkState('templateHTML'),
|
||||
'className': 'large-text-area'
|
||||
}), React.DOM.br({}), React.DOM.textarea({
|
||||
'valueLink': this.linkState('templateProps'),
|
||||
'className': 'large-text-area'
|
||||
})), this.sample({}));
|
||||
return React.DOM.div({}, React.DOM.div({ 'className': 'code-area' }, React.DOM.form({}, CodeEditor({
|
||||
'className': 'large-text-area',
|
||||
'style': { border: this.validHTML ? '1px solid black' : '2px solid red' },
|
||||
'value': this.state.templateHTML,
|
||||
'mode': 'htmlmixed',
|
||||
'smartIndent': true,
|
||||
'lineNumbers': true,
|
||||
'onChange': onChange1.bind(this)
|
||||
}), React.DOM.br({}), CodeEditor({
|
||||
'className': 'large-text-area',
|
||||
'style': { border: this.validProps ? '1px solid black' : '2px solid red' },
|
||||
'value': this.state.templateProps,
|
||||
'mode': 'javascript',
|
||||
'theme': 'solarized',
|
||||
'smartIndent': true,
|
||||
'lineNumbers': true,
|
||||
'onChange': onChange2.bind(this)
|
||||
}))), React.DOM.div({ 'className': 'result-area' }, this.sample({})));
|
||||
};
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
var React = require('react/addons');
|
||||
var _ = require('lodash');
|
||||
var playgroundSample = React.createClass({
|
||||
componentWillReceiveProps: function (nextProps) {
|
||||
if (nextProps.stateString) {
|
||||
try {
|
||||
this.setState(JSON.parse(nextProps.stateString));
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
render: function () {
|
||||
var res = null;
|
||||
try {
|
||||
res = this.props.renderFunc.apply(this)
|
||||
} catch (e) {
|
||||
|
||||
}
|
||||
return React.DOM.div.apply(this, _.flatten([
|
||||
{},
|
||||
res
|
||||
]));
|
||||
}
|
||||
});
|
||||
|
||||
module.exports = playgroundSample;
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
/*
|
||||
Solarized theme for code-mirror
|
||||
http://ethanschoonover.com/solarized
|
||||
*/
|
||||
|
||||
/*
|
||||
Solarized color pallet
|
||||
http://ethanschoonover.com/solarized/img/solarized-palette.png
|
||||
*/
|
||||
|
||||
.solarized.base03 { color: #002b36; }
|
||||
.solarized.base02 { color: #073642; }
|
||||
.solarized.base01 { color: #586e75; }
|
||||
.solarized.base00 { color: #657b83; }
|
||||
.solarized.base0 { color: #839496; }
|
||||
.solarized.base1 { color: #93a1a1; }
|
||||
.solarized.base2 { color: #eee8d5; }
|
||||
.solarized.base3 { color: #fdf6e3; }
|
||||
.solarized.solar-yellow { color: #b58900; }
|
||||
.solarized.solar-orange { color: #cb4b16; }
|
||||
.solarized.solar-red { color: #dc322f; }
|
||||
.solarized.solar-magenta { color: #d33682; }
|
||||
.solarized.solar-violet { color: #6c71c4; }
|
||||
.solarized.solar-blue { color: #268bd2; }
|
||||
.solarized.solar-cyan { color: #2aa198; }
|
||||
.solarized.solar-green { color: #859900; }
|
||||
|
||||
/* Color scheme for code-mirror */
|
||||
|
||||
.cm-s-solarized {
|
||||
line-height: 1.45em;
|
||||
color-profile: sRGB;
|
||||
rendering-intent: auto;
|
||||
}
|
||||
.cm-s-solarized.cm-s-dark {
|
||||
color: #839496;
|
||||
background-color: #002b36;
|
||||
text-shadow: #002b36 0 1px;
|
||||
}
|
||||
.cm-s-solarized.cm-s-light {
|
||||
background-color: #fdf6e3;
|
||||
color: #657b83;
|
||||
text-shadow: #eee8d5 0 1px;
|
||||
}
|
||||
|
||||
.cm-s-solarized .CodeMirror-widget {
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
|
||||
.cm-s-solarized .cm-keyword { color: #cb4b16 }
|
||||
.cm-s-solarized .cm-atom { color: #d33682; }
|
||||
.cm-s-solarized .cm-number { color: #d33682; }
|
||||
.cm-s-solarized .cm-def { color: #2aa198; }
|
||||
|
||||
.cm-s-solarized .cm-variable { color: #268bd2; }
|
||||
.cm-s-solarized .cm-variable-2 { color: #b58900; }
|
||||
.cm-s-solarized .cm-variable-3 { color: #6c71c4; }
|
||||
|
||||
.cm-s-solarized .cm-property { color: #2aa198; }
|
||||
.cm-s-solarized .cm-operator {color: #6c71c4;}
|
||||
|
||||
.cm-s-solarized .cm-comment { color: #586e75; font-style:italic; }
|
||||
|
||||
.cm-s-solarized .cm-string { color: #859900; }
|
||||
.cm-s-solarized .cm-string-2 { color: #b58900; }
|
||||
|
||||
.cm-s-solarized .cm-meta { color: #859900; }
|
||||
.cm-s-solarized .cm-qualifier { color: #b58900; }
|
||||
.cm-s-solarized .cm-builtin { color: #d33682; }
|
||||
.cm-s-solarized .cm-bracket { color: #cb4b16; }
|
||||
.cm-s-solarized .CodeMirror-matchingbracket { color: #859900; }
|
||||
.cm-s-solarized .CodeMirror-nonmatchingbracket { color: #dc322f; }
|
||||
.cm-s-solarized .cm-tag { color: #93a1a1 }
|
||||
.cm-s-solarized .cm-attribute { color: #2aa198; }
|
||||
.cm-s-solarized .cm-header { color: #586e75; }
|
||||
.cm-s-solarized .cm-quote { color: #93a1a1; }
|
||||
.cm-s-solarized .cm-hr {
|
||||
color: transparent;
|
||||
border-top: 1px solid #586e75;
|
||||
display: block;
|
||||
}
|
||||
.cm-s-solarized .cm-link { color: #93a1a1; cursor: pointer; }
|
||||
.cm-s-solarized .cm-special { color: #6c71c4; }
|
||||
.cm-s-solarized .cm-em {
|
||||
color: #999;
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
.cm-s-solarized .cm-strong { color: #eee; }
|
||||
.cm-s-solarized .cm-tab:before {
|
||||
content: "➤"; /*visualize tab character*/
|
||||
color: #586e75;
|
||||
position:absolute;
|
||||
}
|
||||
.cm-s-solarized .cm-error,
|
||||
.cm-s-solarized .cm-invalidchar {
|
||||
color: #586e75;
|
||||
border-bottom: 1px dotted #dc322f;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-selected {
|
||||
background: #073642;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-selected {
|
||||
background: #eee8d5;
|
||||
}
|
||||
|
||||
/* Editor styling */
|
||||
|
||||
|
||||
|
||||
/* Little shadow on the view-port of the buffer view */
|
||||
.cm-s-solarized.CodeMirror {
|
||||
-moz-box-shadow: inset 7px 0 12px -6px #000;
|
||||
-webkit-box-shadow: inset 7px 0 12px -6px #000;
|
||||
box-shadow: inset 7px 0 12px -6px #000;
|
||||
}
|
||||
|
||||
/* Gutter border and some shadow from it */
|
||||
.cm-s-solarized .CodeMirror-gutters {
|
||||
border-right: 1px solid;
|
||||
}
|
||||
|
||||
/* Gutter colors and line number styling based of color scheme (dark / light) */
|
||||
|
||||
/* Dark */
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-gutters {
|
||||
background-color: #002b36;
|
||||
border-color: #00232c;
|
||||
}
|
||||
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
|
||||
text-shadow: #021014 0 -1px;
|
||||
}
|
||||
|
||||
/* Light */
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-gutters {
|
||||
background-color: #fdf6e3;
|
||||
border-color: #eee8d5;
|
||||
}
|
||||
|
||||
/* Common */
|
||||
.cm-s-solarized .CodeMirror-linenumber {
|
||||
color: #586e75;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.cm-s-solarized .CodeMirror-guttermarker-subtle { color: #586e75; }
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-guttermarker { color: #ddd; }
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-guttermarker { color: #cb4b16; }
|
||||
|
||||
.cm-s-solarized .CodeMirror-gutter .CodeMirror-gutter-text {
|
||||
color: #586e75;
|
||||
}
|
||||
|
||||
.cm-s-solarized .CodeMirror-lines .CodeMirror-cursor {
|
||||
border-left: 1px solid #819090;
|
||||
}
|
||||
|
||||
/*
|
||||
Active line. Negative margin compensates left padding of the text in the
|
||||
view-port
|
||||
*/
|
||||
.cm-s-solarized.cm-s-dark .CodeMirror-activeline-background {
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
}
|
||||
.cm-s-solarized.cm-s-light .CodeMirror-activeline-background {
|
||||
background: rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
|
@ -130,7 +130,7 @@ function generateProps(node, context) {
|
|||
}
|
||||
var res = str.split(':');
|
||||
res[0] = res[0].trim();
|
||||
res[1] = res[1].trim();
|
||||
res[1] = res.slice(1).join(':').trim();
|
||||
return res;
|
||||
}));
|
||||
var styleArray = [];
|
||||
|
|
|
|||
Loading…
Reference in New Issue