feeles-ide/lib/js/codemirrorStyle.js

The hackable and serializable IDE to make learning material

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.fontSize = void 0;

var _blue = _interopRequireDefault(require("@material-ui/core/colors/blue"));

var _csx = require("csx");

var fontSize = 20;
exports.fontSize = fontSize;

var _default = function _default(_ref) {
  var palette = _ref.palette,
      shadows = _ref.shadows,
      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  transition: ".concat(transitions.create(), ";\n}\n.CodeMirror-gutters {\n  border-color: ").concat(palette.primary.main, " !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: ").concat(palette.primary.contrastText, ";\n  background-color: ").concat(palette.primary.main, ";\n  box-shadow: ").concat(shadows[2], ";\n}\n.Feeles-asset .Feeles-asset-button:hover {\n  background-color: ").concat(palette.primary.dark, ";\n}\n.Feeles-asset .Feeles-asset-blank {\n  display: inline-block;\n  visibility: hidden;\n}\n.Feeles-dropdown {\n  transform: translateY(").concat((0, _csx.px)(-fontSize), ");\n  height: 0;\n  white-space: pre;\n  z-index: 3;\n}\n.Feeles-dropdown .Feeles-dropdown-shadow {\n  transform: translateX(").concat((0, _csx.px)(-fontSize), ");\n  display: inline-block;\n  border-radius: 2px;\n  box-shadow: ").concat(shadows[1], ";\n  height: ").concat((0, _csx.px)(fontSize), "; /* TODO: Flexible font-size */\n}\n.Feeles-dropdown .Feeles-dropdown-button {\n  display: inline-block;\n  padding: 2px 10px 2px ").concat((0, _csx.px)(fontSize), ";\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: ").concat(palette.primary.contrastText, ";\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 ").concat(palette.primary.main, ";\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}\na.Feeles-link {\n  display: inline-block;\n  position: absolute;\n  white-space: pre;\n  z-index: 3;\n}\n.cm-s-default .cm-property {\n  color: ").concat(_blue.default['A700'], ";\n}\n\n.cm-tab {\n  background-color: ").concat((0, _csx.rgb)(0, 0, 0).fade(0.1), ";\n  opacity: 0.8;\n}\n.cm-tab + .cm-tab {\n  background-color: ").concat((0, _csx.rgb)(0, 0, 0).fade(0.2), ";\n}\n.cm-tab + .cm-tab + .cm-tab {\n  background-color: ").concat((0, _csx.rgb)(0, 0, 0).fade(0.3), ";\n}\n.cm-tab + .cm-tab + .cm-tab + .cm-tab {\n  background-color: ").concat((0, _csx.rgb)(0, 0, 0).fade(0.4), ";\n}\n.cm-tab + .cm-tab + .cm-tab + .cm-tab + .cm-tab {\n  background-color: ").concat((0, _csx.rgb)(0, 0, 0).fade(0.5), ";\n}\n.cm-tab + .cm-tab + .cm-tab + .cm-tab + .cm-tab + .cm-tab {\n  background-color: ").concat((0, _csx.rgb)(0, 0, 0).fade(0.6), ";\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: ").concat((0, _csx.px)(fontSize), ";\n}\n\ndiv.CodeMirror-cursor {\n  border-left-width: 2px;\n}\n");
};

exports.default = _default;