SimpleEditor.scss

// Font Awesome
$fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome';

@import '~substance/substance.css';
@import './elements/elements';
@import './panes/panes';
@import './notesEditor/notesEditor';

@import './css/toolBar';
@import './css/sideNav';
@import './css/scrollBar';
// grays
$light-gray: #ddd;
$ultra-light-gray: #fafafa;

$black: #000;
$shadow: rgba(0, 0, 0, .05);

$transparent-black: rgba(0, 0, 0, .75);
$white: #fff;


.editor-wrapper {
  height: 90vh;
  position: relative;

  // move to a new file toolbar.scss ??
  .view-mode {
    font-size: 14px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 10px;
    width: 20%;
    z-index: 9999;
  }
}

.sc-prose-editor {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;

  .sc-container-editor {
    max-width: 50%;
  }

  .se-scrollable {
    background-color: $white;
    border-right: 1px solid $light-gray;
    margin-top: 1px;
  }

  div.se-content {
    background-color: $white;
    color: $transparent-black;
    font-family: 'Fira Sans';
    line-height: 38px;
    margin: 0% 0% 0% 20%;
    min-height: 100vh;
    padding: 1% 0%;
    transition: .3s;
    word-wrap: break-word;

    ::selection {
      background: $light-gray;
    }

    ::-moz-selection {
      background: $light-gray;
    }

    .se-selection-fragment {
      background: none;
    }

    .sc-split-pane {
      position: relative;
    }

    .sc-surface {
      outline: none;
    }

    .sc-overlay {
      .se-active-tools {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
      }
    }

    .sc-overlay.sm-theme-dark::before {
      border-style: none;
      border-width: 0;
    }

    .sc-list-ul {
      list-style-type: disc;
      padding-left: 19px;
    }

    .sc-list-ol {
      list-style-type: decimal;
      padding-left: 19px;
    }
} // end sc-content

  .se-context-section {
    background-color: $ultra-light-gray;
    border-left: 1px solid $light-gray;
    box-shadow: inset 0 0 10px $shadow;
  }
}