wcui/src/css/meditor.scss

@charset "UTF-8";
/**
 * 
 * @authors yutent (yutent@doui.cc)
 * @date    2017-04-17 16:43:22
 * 
 */

@import "var.scss";

@font-face {font-family: "mefont";
  src: url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff');
}

.do-meditor {position:relative;display:block;width:100%;height:100%;padding-top:36px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 3);

  ::-webkit-scrollbar {width:5px;height:5px;background:nth($cp, 1);}
  ::-webkit-scrollbar:hover {background:nth($cp, 2);}
  ::-webkit-scrollbar-button {display:none;}
  ::-webkit-scrollbar-thumb {background:nth($cgr, 1);}
  ::-webkit-scrollbar-thumb:hover {background:nth($cgr, 2);}

  &.disabled{border-color:nth($co, 1);

    &::after {position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;content:"";background:rgba(255, 182, 24, 0.07);}
  }

  .tool-bar {overflow:hidden;position:absolute;top:0;left:0;z-index:99;width:100%;height:36px;line-height:35px;border-bottom:1px solid nth($cp, 2);background:#fff;color:nth($cd, 2);text-align:center;font-size:24px;

    span {float:left;width:35px;height:35px;

      &:hover,&.active {background:#f7f8fb;}
      &.icon-pipe {width:14px;background:#fff;color:nth($cp, 3);text-indent:-6px;}
    }
  }

  .editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 90px;line-height:1.5;border:0;outline:none;resize:none;color:nth($cgr, 1);background:#fff;font-size:13px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;}
  
  .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 90px;line-height:1.5;border-left:1px solid nth($cp, 2);color:nth($cd, 1);font-size:14px;background:#fff;}



  /*全屏模式*/
  &.fullscreen {position:fixed;left:0;top:0;z-index:999;}

  &.preview .editor-body {width:50%}

}

.do-meditor__icon {display:inline-block;font-family:"mefont" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  
  &.icon-attach:before { content: "\e6cd"; }
  &.icon-blockcode:before { content: "\e6ce"; }
  &.icon-face:before { content: "\e6d8"; }
  &.icon-through:before { content: "\e6de"; }
  &.icon-bold:before { content: "\e6df"; }
  &.icon-italic:before { content: "\e6e0"; }
  &.icon-fullscreen:before { content: "\e6e1"; }
  &.icon-h1:before { content: "\e6e4"; }
  &.icon-h2:before { content: "\e6e5"; }
  &.icon-h3:before { content: "\e6e6"; }
  &.icon-h4:before { content: "\e6e7"; }
  &.icon-h5:before { content: "\e6e8"; }
  &.icon-h6:before { content: "\e6e9"; }
  &.icon-about:before { content: "\e6eb"; }
  &.icon-inlinecode:before { content: "\e6ec"; }
  &.icon-hr:before { content: "\e6ee"; }
  &.icon-link:before { content: "\e6ef"; }
  &.icon-unordered:before { content: "\e6f0"; }
  &.icon-ordered:before { content: "\e6f8"; }
  &.icon-image:before { content: "\e6fa"; }
  &.icon-pipe:before { content: "\e6fb"; }
  &.icon-preview:before { content: "\e6fe"; }
  &.icon-quote:before { content: "\e6ff"; }
  &.icon-table:before { content: "\e706"; }
  &.icon-time:before { content: "\e708"; }
}



.do-meditor__button {overflow:hidden;position:relative;display:inline-block;width:auto;min-width:60px;height:40px;margin-left:5px;padding:0 10px;line-height:40px;color:nth($ct, 2);text-align:center;

  &::before {position:absolute;left:-50%;top:-50%;z-index:-1;display:block;width:200%;height:200%;border-radius:50%;background:nth($cp, 1); content:"";opacity:0;transform: scale(0, .0); transition:opacity 1.3s cubic-bezier(0.23, 1, 0.32, 1),transform 1.3s cubic-bezier(0.23, 1, 0.32, 1);}        
  &:hover {
    &::before {opacity:1;transform:scale(1, .8);}
  }
  &:active {background:nth($cp, 2)}
}
.do-meditor__input {width:100%;height:40px;padding:0 10px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:13px;@include ts();color: nth($cd, 2);

  &.area {height:120px;padding:5px 10px;resize:none;outline:none;}
  &:focus {background:#fff;border-color:nth($cd, 2);}
    
  &::-webkit-input-placeholder {color:nth($cp, 3);}

}


/* 关于编辑器模块*/
.do-meditor-about {width:400px;padding:10px 20px;
  pre {width:100%;padding-bottom:15px;line-height:1;font-size:14px;}
  a {color:nth($ct, 1)}
  p {margin:0 auto 5px;}
}

/*表格模块*/

.do-meditor-table {width:270px;height:270px;padding:0;
  li {width:100%;height:27px;
    span {float:left;width:27px;height:27px;border:2px solid #fff;background:#f2f2f2;}
    span.active {background:rgba(4,151,137,.2);}
  }
}

/*表情模块*/
.do-meditor-face {float:left;;width:241px;height:241px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;

  li {float:left;width:40px;height:40px;padding:5px;line-height:30px;border:1px solid #e2e2e2;border-top:0;border-left:0;text-align:center;}
  li span {display:block;width:100%;height:100%;background:#fff;@include ts();}
  li:hover span {box-shadow:0 1px 5px rgba(0,0,0,.2);transform:scale(3);}
}


/*段落模块*/
.do-meditor-h1 {width:150px;height:auto;

  li {width:100%;height:auto;padding:0 10px;line-height:1.5;font-size:18px;cursor:default;}
  li:hover {background:#f2f2f2;}
  li.h1 {font-size:25px;}
  li.h2 {font-size:23px;}
  li.h3 {font-size:21px;}
}

/*通用输入模块, 链接/图片插入/文件插入/代码块插入*/
.do-meditor-common {width:360px;height:auto;padding:0 20px;font-size:14px;color:nth($cd, 1);

  section {width:100%;height: 40px;margin:10px 0;line-height:40px;

    .label {float: left;width:50%;}
    .submit {float:right;width:30%;}
  }
}

.do-meditor-codeblock {width:480px;height:auto;
  section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
  
    .select  {position:relative;width:200px;height:35px;color:nth($cgr, 1);

      select {width:100%;height:100%;padding:5px 13px;line-height:1;background:nth($cp, 1);border-radius:5px;appearance:none;border:2px solid transparent;outline:none;color: nth($cd, 2);font-size:13px;

        &:focus {background:#fff;border-color:nth($cd, 2);}
        &::-ms-expand {display:none;}
        &:disabled {border-color:transparent;background:#fff8ed;color:nth($cp, 3)}
      }
      .trigon {position:absolute;right:7px;top:0;width:15px;height:35px;padding:7px 0;font-size:12px;text-align:center;
        i {float:left;width:15px;height:12px;line-height:12px;}
        i:nth-child(2) {margin-top:-6px;}
      }
    }
    .submit {float:right;width:80px;}
  }
}


@media screen and (max-width:768px) {
  .do-meditor {
    .tool-bar {
      span {display:none;

        &.icon-quote,&.icon-bold,&.icon-italic,&.icon-through,&.icon-preview {display:inline-block;}
      }
    }
    .md-preview {width:100%;border:0;background:#fafafa;}
    &.preview .editor-body {display:none;}
  }
}