@import "flexbox";

.editor {
  .flex-grow(@grow: 1);
  width: 70%;
  .flex-display(flex);
  .flex-direction(@direction: column);
}


.editorTitle {
  border: none;
  font-size: 24px;
  margin-bottom: 10px;
  min-height: 30px;
  display: block;
  padding: 0.1em 0.3em;
}

.editorBody {
  .flex-grow(@grow: 1);
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 0.5em;
  background: #f9f9f9;
  overflow: auto;
  position: relative;
  outline: none;
  &:focus {
    outline: none;
  }
}


.marking {
  border-bottom: 2px solid;
}

.editorBody {
  .misspelling {
    .marking();
    border-bottom-color: #faa;
    //&::selection {
    //  background: #faa;
    //}
  }

  .typographical,
  .grammar,
  .whitespace {
    .marking();
    border-bottom-color: #afa;
    //&::selection {
    //  background: #afa;
    //}
  }
}


@import "flexbox";

.editor {
  .flex-grow(@grow: 1);
  width: 70%;
  .flex-display(flex);
  .flex-direction(@direction: column);
}


.editorTitle {
  border: none;
  font-size: 24px;
  margin-bottom: 10px;
  min-height: 30px;
  display: block;
  padding: 0.1em 0.3em;
}

.editorBody {
  .flex-grow(@grow: 1);
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 0.5em;
  background: #f9f9f9;
  overflow: auto;
  position: relative;
  outline: none;
  &:focus {
    outline: none;
  }
}


.marking {
  border-bottom: 2px solid;
}

.editorBody {
  .misspelling {
    .marking();
    border-bottom-color: #faa;
    //&::selection {
    //  background: #faa;
    //}
  }

  .typographical,
  .grammar,
  .whitespace {
    .marking();
    border-bottom-color: #afa;
    //&::selection {
    //  background: #afa;
    //}
  }
  .style {
    .marking();
    border-bottom-color: #fa5;
    //&::selection {
    //  background: #afa;
    //}
  }
}


Add color to style flags
 Add color to style flags
