统一button,input,select等UI元素的尺寸;优化markdown样式,同时增加一套gfm主题和一套vue主题;meditor代码块插件样式调整

src/css/elem-ui.scss

@@ -10,10 +10,10 @@
 
 
 /*--------各种按钮---------*/
-.do-ui-button {display:inline-block;height:16px;padding:2px 5px;line-height:12px;border-radius:3px;text-align:center;font-size:12px;background:nth($cp, 2);color:nth($cgr, 1);cursor:pointer;@include ts;
+.do-ui-button {display:inline-block;height:16px;padding:2px 5px;line-height:12px;border-radius:2px;text-align:center;font-size:12px;background:nth($cp, 2);color:nth($cgr, 1);cursor:pointer;@include ts;
 
-  &.medium {min-width:80px;height:30px;padding:0 8px;line-height:30px;border-radius:5px;font-size:14px}
+  &.medium {min-width:80px;height:30px;padding:0 8px;line-height:30px;font-size:14px}
-  &.large {min-width:130px;height:45px;padding:0 13px;line-height:45px;border-radius:5px;font-size:18px;}
+  &.large {min-width:130px;height:45px;padding:0 13px;line-height:45px;border-radius:3px;font-size:18px;}
 
   &:hover {background:nth($cp, 1);}
   &:active {background:nth($cp, 3);}

src/css/marked.scss

@@ -7,36 +7,26 @@
  */
 @import "var.scss";
 
-.do-marked-theme {position:relative;
+.do-marked-theme, 
+.do-marked-theme-gfm,
+.do-marked-theme-vue {position:relative;line-height:1.5;font-size:13px;color:nth($cd, 1);
 
-  .md-head {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:17px;}
+  a {text-decoration:underline;color:nth($cb, 2)}
-  h1.md-head {padding-left:0;}
+  a:hover {color:nth($cb, 1);text-decoration:none;}
-  .md-head span {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
+  em {color:nth($cgr, 3);}
-  .md-head a {padding:0 3px;font-weight:bold;text-decoration:none;}
+  strong {color:nth($cd, 3);}
-  .md-head a:hover {transform:scale(1.2)}
+  em,strong,del {padding:0 3px;}
-  h1.md-head span {padding-left:0;color:#000;}
-  h2.md-head span {color:#000;}
-
-  h1.md-head {margin:0 0 30px;font-size:25px;}
-  h2.md-head {margin:20px 0;font-size:23px;}
-  h3.md-head {margin:20px 0 15px;font-size:20px;}
-  h1:after {display:block;width:100%;content:" ";border-bottom:1px solid #ddd;}
-  h2:before,
-  h3:before,
-  h4:before,
-  h5:before,
-  h6:before {display:block;position:absolute;left:0;top:50%;width:100%;content:" ";border-bottom:1px solid #ddd;}
-
-  a {text-decoration:underline;color:nth($cgr, 1)}
-  a:hover {color:nth($co, 2)}
   p {margin:15px 0;}
   img {max-width:100%;}
+
   blockquote {
-    &.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid nth($cp, 3);background:nth($cp, 1);
+    &.md-quote {margin:10px 0;padding:5px 10px;border-left:5px solid nth($cp, 3);background:nth($cp, 1);color:nth($cgr, 1);
 
       p {margin:0;}
     }
   }
+
+
   /* 提醒文本 */
   .md-warn,.md-mark {display:inline-block;position:relative;min-height:35px;margin:3px 0;padding:3px 8px 3px 35px;line-height:27px;border:1px solid nth($co, 2);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
 
@@ -54,20 +44,115 @@
       .md-task__text {color:nth($cgr, 1);text-decoration:line-through;}
     }
   }
+
+  hr {height:1px;margin:30px 0;line-height:1px;border:0;color:nth($cgr, 1);background-color:nth($cgr, 1);}
+  ol {margin-left:1em;list-style:decimal outside none;}
+  ul {margin-left:1em;list-style:disc outside none;}
+  li {margin:.5em 0;}
+  li ol {margin-left:1em;}
+  li ul {margin-left:1em;list-style-type: circle;}
+  li ol ul,
+  li ul ul {list-style-type: square;}
+
+}
+
+.do-marked-theme {
+
+  h1,h2,h3,h4,h5,h6 {position:relative;margin:15px 0;padding-left:30px;font-weight:normal;font-size:16px;
+    
+    span {position:relative;display:inline-block;padding:0 8px;background:#fff;color:nth($cd, 3);}
+    a {padding:0 3px;font-weight:bold;text-decoration:none;}
+    a:hover {transform:scale(1.2)}
+  }
+  h1 {margin:0 0 30px;padding-left:0;font-size:24px;
+
+    &:after {display:block;width:100%;content:"";border-bottom:1px solid nth($cp, 3);}
+    span {padding-left:0;}
+  }
+  h2,h3,h4,h5,h6 {
+    &:before {display:block;position:absolute;left:0;top:50%;width:100%;content:"";border-bottom:1px solid nth($cp, 3);}
+  }
+  h2 {margin:20px 0;font-size:22px;}
+  h3 {margin:20px 0 15px;font-size:20px;}
+  h4 {font-size:18px;}
+
+  
+  
   table {width:100%;line-height:25px;
     thead tr {height:45px;background:nth($cp, 1)}
     thead th {padding:10px 8px;border:0;}
     tbody tr {height:auto;@include ts(all, .3s);
-      &:hover {background:#ecf6fd}
+      &:hover {background:#fbfbfb;}
     }
-    tbody td {padding:9px 8px;border-bottom:1px solid nth($cp, 2)}
+    tbody td {padding:9px 8px;border-bottom:1px solid nth($cp, 1)}
   }
 
-  hr {margin:30px 0;border-bottom:0;}
+ 
-  ol {margin-left:2em;list-style:decimal outside none;}
+}
-  ul {margin-left:2em;list-style:disc outside none;}
+
-  li ol {margin-left:2em;}
+.do-marked-theme-gfm,
-  li ul {margin-left:2em;list-style-type: circle;}
+.do-marked-theme-vue {
-  li ol ul,
+
-  li ul ul {list-style-type: square;}
+  h1,h2,h3,h4,h5,h6 {position:relative;margin:15px 0;font-weight:normal;font-size:16px;
-}
+    
+    span {position:relative;display:inline-block;padding:0 5px;color:nth($cd, 3);}
+    a {visibility:hidden;position:absolute;left:-25px;width:25px;padding:0 3px;font-weight:bold;text-decoration:none;text-align:center;}
+    &:hover a {visibility:visible;}
+    &:after {display:block;width:100%;content:"";border-bottom:1px solid nth($cp, 3);}
+  }
+  h1 {margin:0 0 30px;font-size:24px;}
+  h2 {margin:20px 0;font-size:22px;}
+  h3 {margin:20px 0 15px;font-size:20px;}
+  h4 {font-size:18px;}
+
+  table {overflow:auto;width:100%;border-spacing:0;border-collapse:collapse;
+
+    tr {border-top:1px solid #ccc;background-color: #fff;}
+    th, td {padding:6px 13px;border:1px solid #ddd;}
+    th {font-weight:bold;}
+    tr:nth-child(2n) {background-color:#fbfbfb;}
+  }
+}
+
+.do-marked-theme-gfm {color:nth($cd, 3);
+
+  blockquote {
+    &.md-quote {background:none;
+
+    }
+  }
+
+
+  .do-ui-blockcode,.do-ui-inlinecode {border:1px solid nth($cp, 3)}
+  .do-ui-inlinecode {color:inherit;}
+
+}
+
+
+
+.do-marked-theme-vue {
+
+  a {color:nth($ct, 2)}
+  a:hover {color:nth($ct, 1);}
+
+  blockquote {
+    &.md-quote {border-color:nth($ct, 1);background:#f2faf7;
+
+    }
+  }
+
+  h1,h2,h3,h4,h5,h6 {font-weight:bold;
+    span {color:inherit;}
+    &:after {display:none;}
+  }
+
+
+  table {display:table;
+    thead tr {background:nth($cp, 1)}
+  }
+
+  .do-ui-blockcode,.do-ui-inlinecode {}
+  .do-ui-inlinecode {color:nth($co, 3);}
+
+}
+

src/css/meditor.scss

@@ -135,17 +135,17 @@
   }
 }
 
-.do-meditor-codeblock {width:780px;height:auto;
+.do-meditor-codeblock {width:480px;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;
+    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;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);
+    textarea {width:100%;height:120px;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)}
     }

src/meditor/addon/base.js

@@ -384,10 +384,11 @@ const addon = {
   },
   blockcode: function(elem) {
     let that = this
+    let offset = Anot(elem).offset()
     layer.open({
       type: 7,
       title: '添加代码块',
-      $lang: [
+      __lang__: [
         { id: 'asp' },
         { id: 'actionscript', name: 'ActionScript(3.0)/Flash/Flex' },
         { id: 'bash', name: 'Bash/Shell/Bat' },
@@ -426,6 +427,8 @@ const addon = {
       lang: 'javascript',
       code: '',
       maskClose: true,
+      offset: [offset.top + 35 - $doc.scrollTop()],
+      shift: { top: offset.top - $doc.scrollTop() },
       insert: function() {
         let val = `\n\`\`\`${this.lang}\n${this.code ||
           '// 在此输入代码'}\n\`\`\`\n`
@@ -437,7 +440,7 @@ const addon = {
         <section class="do-fn-cl">
           <span class="label">语言类型</span>
           <select :duplex="lang">
-            <option :for="$lang" :attr-value="el.id">{{el.name || el.id}}</option>
+            <option :for="__lang__" :attr-value="el.id">{{el.name || el.id}}</option>
           </select>
         </section>
         <section>