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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
}

.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: "\e673"; }
  &.icon-about:before { content: "\e674"; }
  &.icon-blockcode:before { content: "\e675"; }
  &.icon-bold:before { content: "\e679"; }
  &.icon-through:before { content: "\e67a"; }
  &.icon-fullscreen:before { content: "\e67b"; }
  &.icon-italic:before { content: "\e67c"; }
  &.icon-h2:before { content: "\e67d"; }
  &.icon-h1:before { content: "\e67e"; }
  &.icon-h4:before { content: "\e67f"; }
  &.icon-h5:before { content: "\e680"; }
  &.icon-h3:before { content: "\e681"; }
  &.icon-help:before { content: "\e682"; }
  &.icon-h6:before { content: "\e683"; }
  &.icon-inlinecode:before { content: "\e684"; }
  &.icon-hr:before { content: "\e685"; }
  &.icon-link:before { content: "\e686"; }
  &.icon-unordered:before { content: "\e687"; }
  &.icon-ordered:before { content: "\e688"; }
  &.icon-image:before { content: "\e689"; }
  &.icon-pipe:before { content: "\e68a"; }
  &.icon-preview:before { content: "\e68c"; }
  &.icon-quote:before { content: "\e68d"; }
  &.icon-table:before { content: "\e690"; }
  &.icon-time:before { content: "\e691"; }
  &.icon-face:before { content: "\e677"; }
}



.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-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;

    .txt {width:100%;height:40px;padding:0 10px;border:0;border-radius:5px;background:nth($cp, 1);color:nth($cd, 2);font-size:14px;}
    .label {float: left;width:50%;}
    .submit {float:right;width:30%;}
  }
}

.do-meditor-codeblock {width:780px;height:auto;
  section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
  
    .label {float: left;width:80px;}
    select {float:left;width:200px;height:35px;padding:0 30px 0 10px;border:0;border-radius:0;border-bottom:1px solid nth($cp, 3);background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 12px;color:nth($cd, 2);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
        
      &::-ms-expand {display:none;}

      &:focus {box-shadow:0 0 5px nth($ct, 1)}
    }
    textarea {width:100%;height:300px;padding:5px 10px;border:0;border-radius:5px;background:nth($cp, 1);font-size:14px;resize:none;outline:none;color:nth($cd, 2);
      
      &:focus {box-shadow:0 0 5px nth($ct, 1)}
    }
    .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;}
  }
}