.rich-text-editor{
  @include vertical-flex;
  border: 2px solid $border-color;
  .toolbar{
    padding:5px 10px;
    border-bottom: $border-width solid rgba(0,0,0,0.05);
    .toolbar-item{
      display:inline-block;
      vertical-align: middle;
      margin-right:3px;
      .actived-command{
        background-color:$background-color;
        color:#fff;
      }
      .text-button{
        border-radius:0.4rem;
        min-width:34px;
      }
    }
    .icon-button{
      text-align: center;
    }
  }
  .dropdown-wripper{
    .text-button{
      background:transparent;
    }
  }
  .content{
    display:block;
    @include flex-adapter;
    background: #fff;
    outline: none;
    padding:$content-padding;
    overflow-y:scroll;
    min-height: 300px;
    pre{
      background: $background-color;
      padding:$content-padding;
    }
  }
  .previewer{
    display:block;
    @include flex-adapter;
    background: #fff;
    outline: none;
    padding:$content-padding;
    overflow-y:scroll;
  }
  textarea.code{
    display:block;
    @include flex-adapter;
    background: #fff;
    outline: none;
    padding:$content-padding;
    overflow-y:scroll;
  }
}
.image-setting-bar{
  position:absolute;
  left:0;
  top:0;
  background:rgba(255, 255, 255, 0.7);
  padding: 3px;
  &>*{
    margin-right:6px;
    @include user-select-none;
  }
}

.color-picker{
  width:256px;
  .color-picker-martix{
    .color-cell{
      float: left;
      width:32px;
      height:32px;
      border:none;
      outline:none;
      cursor:pointer;
    }
  }
}