Skip to content
Snippets Groups Projects
SimpleEditor.scss 1.96 KiB
Newer Older
// Font Awesome
$fa-font-path: './font-awesome/fonts';
@import './font-awesome/scss/font-awesome';

@import './substance';
@import './elements/elements';
@import './panes/panes';

$border: #ccc;
$dark-gray: #999;
$light-gray: #ddd;
$primary: #eee;
$ultra-light-gray: #fafafa;
$white: #fff;
$teal: #46b9ba;

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

  .view-mode {
    background-color: $primary;
    border-bottom: 1px solid $border;
    border-top: 1px solid $border;
    height: 44px;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 9999;

    span {
      font-size: 14px;
      position: relative;
      top: 10px;
    }
  }
}

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

  .sc-prose-editor-toolbar {
    background-color: $primary;
    border: 1px solid $border;
    border-right: 0;
    padding: 1px;
  }

  .sc-switch-text-type {
    border-right: 1px solid $border;
    width: 150px !important;

    .se-toggle {
      background: transparent;
    }
  }

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


  .se-content {
    font-family: 'Fira Sans';

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

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

    &:first-child {
      background-color: $white;
      box-shadow: 0 0 8px $dark-gray;
      margin: 1.5% 15% 7%;
      min-height: 100vh;
      padding: 3% 4% 1%;
      transition: .3s;
    }

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


  .sc-has-comments {
    .se-content {
      &:first-child {
        margin: 1.5% 29% 7% 1%;
        transition: .3s;
      }
    }
  }

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

  .sc-comments-pane {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-left: 8%;
  }
}