feeles-ide/lib/js/codemirrorStyle.js

The hackable and serializable IDE to make learning material

import { grey100, grey300, blueA700 } from 'material-ui/styles/colors';
import { fade } from 'material-ui/utils/colorManipulator';

export default (function (_ref) {
  var palette = _ref.palette,
      paper = _ref.paper,
      transitions = _ref.transitions;
  return '\ntextarea {\n  font-size: 16px !important; /* In smartphone, will not scale automatically */\n}\n.CodeMirror {\n  position: absolute;\n  font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;\n  width: 100%;\n  height: 100%;\n  background-color: ' + grey100 + ';\n  transition: ' + transitions.easeOut() + ';\n}\n.CodeMirror-gutters {\n  border-color: ' + palette.primary1Color + ' !important;\n}\n.CodeMirror-hints {\n  z-index: 1000;\n}\n.Feeles-asset {\n  transform: translateY(-22px);\n  height: 0;\n  white-space: pre;\n  z-index: 2;\n}\n.Feeles-asset .Feeles-asset-button {\n  display: inline-block;\n  padding: 4px 0;\n  border-radius: 2px;\n  cursor: pointer;\n  color: ' + palette.alternateTextColor + ';\n  background-color: ' + fade(palette.primary1Color, 1) + ';\n  box-shadow: ' + paper.zDepthShadows[1] + ';\n}\n.Feeles-asset .Feeles-asset-blank {\n  display: inline-block;\n  transform: scaleY(0);\n}\n.Feeles-dropdown {\n  transform: translateY(-20px);\n  height: 0;\n  white-space: pre;\n  z-index: 3;\n}\n.Feeles-dropdown .Feeles-dropdown-shadow {\n  transform: translateX(-20px);\n  display: inline-block;\n  border-radius: 2px;\n  box-shadow: ' + paper.zDepthShadows[1] + ';\n  height: 20px; /* TODO: Flexible font-size */\n}\n.Feeles-dropdown .Feeles-dropdown-button {\n  display: inline-block;\n  padding: 2px 10px 2px 20px;\n  border-radius: 2px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.Feeles-dropdown .Feeles-dropdown-blank {\n  display: inline-block;\n  transform: scaleY(0);\n}\n.Feeles-dropdown .Feeles-dropdown-label {\n  display: inline-block;\n  position: relative;\n  color: ' + palette.alternateTextColor + ';\n  z-index: 1;\n  pointer-events: none;\n}\n.Feeles-dropdown .Feeles-dropdown-value {\n  display: inline-block;\n  border-radius: 2px;\n  margin: -1px -2px -1px -4px;\n  padding: 0px 2px 0px 4px;\n  color: transparent;\n  /* CSS hacking */\n  box-shadow: 0 0 0 100em ' + palette.primary1Color + ';\n  filter: drop-shadow(0 0 30px transparent);\n}\ndiv.CodeMirror.CodeMirror-focused .Feeles-asset,\ndiv.CodeMirror.CodeMirror-focused .Feeles-dropdown-button {\n  opacity: 0.9;\n}\n.cm-s-default .cm-property {\n  color: ' + blueA700 + ';\n}\ndiv.CodeMirror:not(.CodeMirror-focused) pre>span {\n  background-color: ' + grey300 + ';\n}\ndiv.CodeMirror:not(.CodeMirror-focused) pre>span>span.cm-tab,\ndiv.CodeMirror:not(.CodeMirror-focused) pre>span>span.cm-comment {\n  background-color: ' + grey100 + ';\n}\ndiv.CodeMirror span.CodeMirror-matchingbracket {\n  text-shadow: 0 0 4px #000, 0 -8px 10px #000, 0 8px 10px #000;\n}\ndiv.CodeMirror.CodeMirror-focused pre>span>span.cm-comment {\n  opacity: 0.5;\n}\ndiv.CodeMirror pre {\n  line-height: 20px;\n}';
});