sideNav.scss

$black: #000;
$heading: #979797;
$option: #4a4a4a;
$toolbar-bg: #fafafa;


.sidenav {
  height: 60%;
  left: 3%;
  margin-top: 197px;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  user-select: none;
  width: 9%;
  z-index: 100;

  .sc-toolbar {
    background-color: $toolbar-bg !important;
    border: 0;
    width: 100%;

    .sc-tool-group.sm-target-text.sm-layout-horizontal {
      width: 100%;
    }

    ul {
     margin: 0;
     padding: 0;

    li.se-option  {
        padding: 3px;
      }
    }

    .sc-switch-text-type {
      bottom: 0;
      font-size: 14px;
      margin: 0;
      padding: 0;
      width: 100%;
    }

    .sm-target-default {
      width: 71%;
//
      &:before {
        border-bottom: 1px solid $heading;
        color: $heading;
        content: 'List Types';
        display: block;
        font: 'FiraSans-Bold';
        font-family: 'FiraSans-Bold';
        font-size: 15px;
        font-weight: 900;
        letter-spacing: .6px;
        margin-top: -5px;
        text-align: left;
      }
    }

  }

  .sc-toolbar ul li.heading {
    border-bottom: 1px solid $heading;
    color: $heading;
    font-family: 'FiraSans-Bold';
    font-size: 15px;
    letter-spacing: .6px;
    text-align: left;
    width: 71%;
  }

  .sc-toolbar ul li.se-option {
    color: $option;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
  }

  .sc-toolbar ul li.se-option.active {
    color: $black;
    font-size: 14px;
    font-weight: 900;
  }

  .sc-insert-list-tool {
      left: -14px;
      .fa {
        color: $option;
        cursor: pointer;
        font: inherit;
        font-size: 14px;
        font-weight: normal;
      }
  }

  .fa-list-ul::before {
    content: 'Unordered list';
  }

  .fa-list-ol::before {
    content: 'Ordered list';
  }

  .fa-quora::before {
    content: 'Q & A';
  }

  .fa-bars::before {
    content: 'Unstyled list';
  }
}