zx-editor/src/css/zx-editor.styl

ZxEditor is a HTML5 rich text editor

@import "./config.styl";

.zxeditor-container
  .border-bottom
    &:after
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      content: '';
      border-top: 1px solid $borderColor;
      transform: scaleY(.5);


.zxeditor-container
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  *
    margin: 0;
    padding: 0;
    color: $black;
    box-sizing: border-box;
  .zxeditor-content-wrapper
    position: relative;
    padding-bottom: 10px;
    width: 100%;
    min-height: 200px;
    overflow-y: scroll;
    outline: none;
    //transition all .2s
    box-sizing: border-box;
    &.is-empty
      &:before
        position absolute
        z-index: 0
        top: 10px;
        left: 15px;
        padding: 0;
        content: '输入正文';
        color: #ccc;
    p, h1, h2, h3, h4, li
      line-height: 1.5em;
      padding: 10px 0 0;
    h2
      font-size: 1.2em;
      font-weight: 800 !important;
    h4
      font-weight: 800 !important;
    blockquote
      display: inline-block;
      padding-left: 1em;
      border-left: 3px solid $gray;
    ul
      padding-left: 20px;
      list-style: disc;
    li, p
      color: inherit;
    hr
      margin: 0 20%;
      border: 0;
      border-top: 1px dashed $gray;
    // 子节点为a标签
    .child-node-is-a
      a
        position relative
        display: block;
        padding: 0 21px 0 35px;
        height: 40px;
        background: #ddd;
        border-radius: 6px;
        overflow: hidden;
        text-overflow ellipsis;
        white-space nowrap
        line-height: 40px;
        color: #555;
        text-decoration: none;
        bgImage('../img/link-small');
        background-repeat: no-repeat;
        background-position: 11px center;
        -webkit-background-size: 14px 14px;
        background-size: 14px 14px;
        //box-shadow 0 2px 5px rgba(0, 0, 0, .2);
        i
          position absolute;
          z-index: 1;
          right: 0;
          top: 0;
          width: 18px;
          height: 18px;
          bgImage('../img/link-remove');
          background-size: cover;


//fixed
.zxeditor-container
  &.fixed
    .zxeditor-content-wrapper
      position: fixed;
      left: 0;
      &.is-empty
        &:before
          top: 10px;
          left: 15px;

//zxeditor-emoji-wrapper
.zxeditor-container
  .zxeditor-emoji-wrapper
    display: flex
    flex-wrap wrap
    padding: 10px 0;
    i
      flex: 0 0 12.5%
      padding: 5px 0;
      text-align: center;
      font-size: 24px;
      font-style normal