_editor.scss

/*
 * Copyright (c) 2014 Jesse van den Kieboom. All rights reserved.
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *    * Redistributions of source code must retain the above copyright
 *      notice, this list of conditions and the following disclaimer.
 *    * Redistributions in binary form must reproduce the above
 *      copyright notice, this list of conditions and the following disclaimer
 *      in the documentation and/or other materials provided with the
 *      distribution.
 *    * Neither the name of Google Inc. nor the names of its
 *      contributors may be used to endorse or promote products derived from
 *      this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

.editor {
  width: 100%;
  height: 100%;
}

.editor-title {
  position: absolute;
  right: 0;
  top: 0;
  margin: 12px;
  padding: 6px 8px 6px 8px;
  background-color: $base2;
  border-radius: 6px;
  font-size: 0.8em;
  z-index: 90;
  pointer-events: none;

  transition: opacity ease 0.3s;
}

.editor-title.hidden {
  opacity: 0.2;
}

.CodeMirror {
  background-color: lighten($bg_color, 5%);

  pre {
    line-height: 1.2em;
  }
}

.CodeMirror-focused {
  background-color: white;
}

.cm-s-webgl-play {
  font-family: menlo, monaco, monospace;
  font-size: 12px;
  height: 100%;

  .CodeMirror-scroll {
    height: 100%;
  }

  .line-error {
    background-color: rgba(lighten($orange, 30%), 0.2);
  }

  .error-message-container {
    padding: 3px;
    z-index: 60;
    left: 6px;
    right: 6px;

    .error-message {
      margin: 0px;
      padding: 0px;
      list-style: none;
      margin: 0px;

      background-color: rgba(lighten($red, 10%), 0.9);
      border: 1px solid lighten($red, 5%);

      color: white;
      border-radius: 10px;

      li {
        padding: 3px 6px 3px 6px;
      }
    }
  }

  .cm-builtin {
    color: $blue;
  }

  .cm-keyword {
    color: $orange;
  }

  .cm-meta {
    color: $violet;
  }

  .cm-number {
    color: $cyan;
  }

  .cm-comment {
    color: $green;
  }

  .cm-qualifier {
    color: $magenta;
  }

  .cm-operator {
    color: lighten($fg_color, 30%);
  }

  .cm-def {
    color: $blue;
  }

  .error {
    color: $red;

    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAYAAABirU3bAAAARUlEQVQIW2NkAII7urrGKpcvnwWxGUEcBhamMwx//pmABBnvGOr/Z/z/v+E/I2MDSJDxroFevfKFS40gGiTICNIHAyBBAO6YHGQtR2KsAAAAAElFTkSuQmCC);
    background-repeat: repeat-x;
    background-position: bottom;
  }

  &.error {
    background-color: lighten($orange, 50%);
  }

  .CodeMirror-selected {
    background: lighten($blue, 30%);
  }

  .CodeMirror-ruler {
    border-left: 1px solid lighten($borders_color, 20%);
  }
}

.CodeMirror-hints {
  position: absolute;
  z-index: 100;
  overflow: hidden;
  list-style: none;

  margin: 0;
  padding: 6px;

  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: 3px;
  border: 1px solid silver;

  background-color: white;
  font-size: 90%;
  font-family: monospace;

  max-height: 20em;
  overflow-y: auto;
}

.CodeMirror-hint {
  margin: 0;
  padding: 2px 4px;
  max-width: 19em;
  overflow: hidden;
  white-space: pre;
  color: black;
  cursor: pointer;

  .match {
    color: darker($blue, 5%);
  }

  .icon {
    display: inline-block;
    padding: 0px 4px 0px 4px;
    margin-right: 3px;
    color: white;

    &.function {
      background-color: lighten($orange, 20%);
    }

    &.data {
      background-color: lighten($blue, 20%);
    }
  }
}

li.CodeMirror-hint-active {
  background: $blue;
  color: white;

  .match {
    color: lighten($blue, 40%);
  }
}

.CodeMirror-hints.showing-info {
  border-radius: 3px 0px 3px 3px;
}

.hints-info {
  border: 1px solid darken($base3, 30%);
  background-color: $base3;
  position: absolute;
  padding: 3px 6px 3px 6px;
  z-index: 200;
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-left: 0;
  font-size: 90%;

  .title {
    font-weight: bold;
  }

  .description {
    margin-top: 6px;
  }

  .params {
    margin: 12px;

    td {
      vertical-align: baseline;
    }

    td:first-child {
      color: $blue;
      padding-right: 6px;
    }
  }
}