From 95ba80f388095acc383c817d7f546c18955a639f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=AE=87=E5=A4=A9?= <yutent@doui.cc>
Date: Sat, 28 Jul 2018 17:44:55 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E5=9F=BA=E7=A1=80=E5=85=83?=
 =?UTF-8?q?=E7=B4=A0UI;=E4=BC=98=E5=8C=96marked=E4=B8=BB=E9=A2=98=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F;=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E5=90=8C=E6=AD=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/css/basic-elem.scss       | 198 ----------------------------------
 src/css/elem-ui.scss          | 127 ++++++++++++++++++++++
 src/css/reset-basic.scss      |   2 +-
 src/js/marked/theme.scss      |   1 +
 src/js/meditor/index.js       |   8 +-
 src/js/meditor/skin/main.scss |   4 +-
 6 files changed, 136 insertions(+), 204 deletions(-)
 delete mode 100644 src/css/basic-elem.scss
 create mode 100644 src/css/elem-ui.scss

diff --git a/src/css/basic-elem.scss b/src/css/basic-elem.scss
deleted file mode 100644
index 165f240..0000000
--- a/src/css/basic-elem.scss
+++ /dev/null
@@ -1,198 +0,0 @@
-@charset "UTF-8";
-/**
- * 
- * @authors yutent (yutent@doui.cc)
- * @date    2017-05-20 21:35:30
- * @version $Id$
- */
-
-@import "var.scss";
-
-
-/*--------各种按钮---------*/
-.do-ui-button {display:inline-block;padding:2px 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;@include ts;
-
-  &.medium {min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}
-  &.large {min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px;}
-  &.radius-3 {border-radius:3px;
-    [class^="do-icon-"], [class*=" do-icon-"] {border-radius:3px}
-  }
-  &.radius-5 {border-radius:5px;
-    [class^="do-icon-"], [class*=" do-icon-"] {border-radius:3px}
-  }
-  
-  &.teal {border:0;background:nth($ct, 1);color:#fff;}
-  &.teal:hover {background:nth($ct, 2);}
-  &.teal:active {background:nth($ct, 3);}
-  &.green {border:0;background:nth($cg, 1);color:#fff;}
-  &.green:hover {background:nth($cg, 2);}
-  &.green:active {background:nth($cg, 3);}
-  &.blue {border:0;background:nth($cb, 1);color:#fff;}
-  &.blue:hover {background:nth($cb, 2);}
-  &.blue:active {background:nth($cb, 3);}
-  &.purple {border:0;background:nth($cpp, 1);color:#fff;}
-  &.purple:hover {background:nth($cpp, 2);}
-  &.purple:active {background:nth($cpp, 3);}
-  &.red {border:0;background:nth($cr, 1);color:#fff;}
-  &.red:hover {background:nth($cr, 2);}
-  &.red:active {background:nth($cr, 3);}
-  &.orange {border:0;background:nth($co, 1);color:#fff;}
-  &.orange:hover {background:nth($co, 2);}
-  &.orange:active {background:nth($co, 3);}
-  &.plain {border:0;background:nth($cp, 1);color:nth($cgr, 1);}
-  &.plain:hover {background:nth($cp, 2);}
-  &.plain:active {background:nth($cp, 3);}
-  &.grey {border:0;background:nth($cgr, 1);color:#fff;}
-  &.grey:hover {background:nth($cgr, 2);}
-  &.grey:active {background:nth($cgr, 3);}
-
-  &.disabled {border-color:nth($cp, 1);color:nth($cp, 3);cursor:not-allowed;}
-    
-  
-  
-  /* 额外样式 */
-  &.medium.with-icon,
-  &.large.with-icon {position:relative;padding-left:43px;
-    [class^="do-icon-"], [class*=" do-icon-"] {
-      position:absolute;left:0;top:0;width:35px;font-size:25px;background:rgba(0,0,0,.1);
-    }
-  }
-  &.large.with-icon {padding-left:58px;
-    [class^="do-icon-"], [class*=" do-icon-"] {
-      width:50px;font-size:35px;
-    }
-  }
-}
-
-
-
-
-/*--------各种input---------*/
-
-
-.do-ui-input {position:relative;min-height:30px;padding:0 5px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 1);outline:none;@include ts;
-    
-  &::-webkit-input-placeholder {color:nth($cp, 3);}
-  
-  &.area {padding:5px;}
-
-  &.radius-3 {border-radius:3px;}
-  &.radius-5 {border-radius:5px;}
-  
-  &:focus,&:hover {border-color:nth($ct, 1);}
-  &.alert {border-color:nth($cr, 1);color:nth($cr, 1);
-    input {color:nth($cr, 1);}
-  }
-  &.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
-  
-  &.with-icon {display:inline-block;padding:0;
-
-    input {width:100%;height:100%;min-height:30px;padding:0 30px 0 5px;border: 0;background:transparent;}
-
-    [class^="do-icon-"], [class*=" do-icon-"] {
-      position:absolute;right:0;top:0;width:30px;line-height:30px;font-size:22px;
-    }
-  }
-}
-
-
-/* select框 */
-.do-ui-select {display:inline-block;min-height:30px;padding:0 30px 0 10px;border:0;border-bottom:1px solid #e7e7e7;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAMAAABV0m3JAAAADFBMVEUAAAD///+Pj4+JiYkxcGihAAAABHRSTlMAABBwqVQF9wAAADNJREFUeNqlzjEOACAMw8DQ/v/PSE5FFhaEx5usdekBuzRVH0RtCqJYELUFrVjQigX/5jdvzgDh9izlMQAAAABJRU5ErkJggg==) no-repeat right 8px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
-
-    &::-ms-expand {display:none;}
-
-    &:focus {border-color:nth($ct, 1);}
-    &.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
-    &.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
-}
-
-/* 单选和复选框 */
-.do-ui-radio,
-.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;color:nth($cgr, 1);
-}
-.do-ui-radio {padding-left:50px;
-
-  >input {position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:nth($cp, 3);-webkit-appearance:none;-moz-appearance:none;
-    
-    &:checked {background:nth($cp, 3);}
-    &:disabled {background:nth($cp, 2);}
-    &:disabled:checked {background:nth($cp, 3);}
-
-    &::after {position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:nth($cp, 2);box-shadow:0 1px 2px rgba(0,0,0,.2);}
-    &:checked::after {left:auto;right:-2px;background:nth($cgr, 2);}
-    &:checked:disabled::after {background:nth($cp, 3);}
-  }
-  &.green >input:checked {background:nth($cg, 2);
-    &::after {background:nth($cg, 3);}
-  }
-  &.teal >input:checked {background:nth($cg, 2);
-    &::after {background:nth($ct, 3);}
-  }
-  &.blue >input:checked {background:nth($cb, 2);
-    &::after {background:nth($cb, 3);}
-  }
-  &.purple >input:checked {background:nth($cb, 2);
-    &::after {background:nth($cpp, 3);}
-  }
-  &.red >input:checked {background:nth($cr, 2);
-    &::after {background:nth($cr, 3);}
-  }
-  &.orange >input:checked {background:nth($co, 2);
-    &::after {background:nth($co, 3);}
-  }
-  &.grey >input:checked {background:nth($cgr, 2);
-    &::after {background:nth($cgr, 3);}
-  }
-  &.disabled {color:nth($cp, 3);}
-}
-.do-ui-checkbox {
-    >input {position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid nth($cp, 3);border-radius:3px;text-align:center;font-size:18px;font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-appearance:none;-moz-appearance:none;
-
-        &:checked::after {content:"\e60f";}
-        &:disabled {border-color:nth($cp, 3);color:nth($cp, 3);}
-    }
-    &.green >input {color:nth($cg, 1)!important;border-color:nth($cg, 1)}
-    &.teal >input {color:nth($ct, 1)!important;border-color:nth($ct, 1)}
-    &.purple >input {color:nth($cpp, 1)!important;border-color:nth($cpp, 1)}
-    &.blue >input {color:nth($cb, 1)!important;border-color:nth($cb, 1)}
-    &.red >input {color:nth($cr, 1)!important;border-color:nth($cr, 1)}
-    &.orange >input {color:nth($co, 1)!important;border-color:nth($co, 1)}
-    &.grey >input {color:nth($cgr, 1)!important;border-color:nth($cgr, 1)}
-
-    &.disabled {color:nth($cp, 3);}
-}
-.do-ui-checkbox {
-    &.with-style {padding-left:5px;padding-right:35px;line-height:26px;border:2px solid nth($cp, 1);background:nth($cp, 1);text-align:center;
-
-        >input {left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:nth($cgr, 2);
-            &:disabled {color:nth($cp, 3)!important;}
-        }
-        
-        &.green {border-color:nth($cg, 1);background:nth($cg, 1);color:#fff;}
-        &.teal {border-color:nth($ct, 1);background:nth($ct, 1);color:#fff;}
-        &.purple {border-color:nth($cpp, 1);background:nth($cpp, 1);color:#fff;}
-        &.blue {border-color:nth($cb, 1);background:nth($cb, 1);color:#fff;}
-        &.red {border-color:nth($cr, 1);background:nth($cr, 1);color:#fff;}
-        &.orange {border-color:nth($co, 1);background:nth($co, 1);color:#fff;}
-        &.grey {border-color:nth($cgr, 1);background:nth($cgr, 1);color:#fff;}
-
-        &.disabled {border-color:nth($cp, 1);background:nth($cp, 1);color:nth($cp, 3);}
-    }
-}
-
-/* 引用文本 */
-.do-ui-quote {display:block;position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7;word-break: break-all;
-
-    &::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cp, 3);content:"\e61b";}
-}
-
-/* 提醒文本 */
-.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 50px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);word-break: break-all;
-    
-    p {margin:0!important;}
-    &::before {position:absolute;left:15px;top:5px;font:20px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
-}
-.do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;
-
-    &::before {color:nth($ct, 3);content:"\e657";}
-}
\ No newline at end of file
diff --git a/src/css/elem-ui.scss b/src/css/elem-ui.scss
new file mode 100644
index 0000000..d5b7efe
--- /dev/null
+++ b/src/css/elem-ui.scss
@@ -0,0 +1,127 @@
+@charset "UTF-8";
+/**
+ * 
+ * @authors yutent (yutent@doui.cc)
+ * @date    2017-05-20 21:35:30
+ * @version $Id$
+ */
+
+@import "var.scss";
+
+
+/*--------各种按钮---------*/
+.do-ui-button {display:inline-block;padding:2px 5px;border:1px solid #ddd;border-radius:3px;text-align:center;font-size:12px;background:none;cursor:pointer;@include ts;
+
+  &.medium {min-width:100px;height:35px;padding:0 8px;line-height:35px;border-radius:5px;font-size:15px}
+  &.large {min-width:150px;height:50px;padding:0 13px;line-height:50px;border-radius:5px;font-size:18px;}
+
+  
+  &.teal {border:0;background:nth($ct, 1);color:#fff;}
+  &.teal:hover {background:nth($ct, 2);}
+  &.teal:active {background:nth($ct, 3);}
+  &.green {border:0;background:nth($cg, 1);color:#fff;}
+  &.green:hover {background:nth($cg, 2);}
+  &.green:active {background:nth($cg, 3);}
+  &.blue {border:0;background:nth($cb, 1);color:#fff;}
+  &.blue:hover {background:nth($cb, 2);}
+  &.blue:active {background:nth($cb, 3);}
+  &.purple {border:0;background:nth($cpp, 1);color:#fff;}
+  &.purple:hover {background:nth($cpp, 2);}
+  &.purple:active {background:nth($cpp, 3);}
+  &.red {border:0;background:nth($cr, 1);color:#fff;}
+  &.red:hover {background:nth($cr, 2);}
+  &.red:active {background:nth($cr, 3);}
+  &.orange {border:0;background:nth($co, 1);color:#fff;}
+  &.orange:hover {background:nth($co, 2);}
+  &.orange:active {background:nth($co, 3);}
+  &.plain {border:0;background:nth($cp, 1);color:nth($cgr, 1);}
+  &.plain:hover {background:nth($cp, 2);}
+  &.plain:active {background:nth($cp, 3);}
+  &.grey {border:0;background:nth($cgr, 1);color:#fff;}
+  &.grey:hover {background:nth($cgr, 2);}
+  &.grey:active {background:nth($cgr, 3);}
+
+  &.disabled {border-color:nth($cp, 1);color:nth($cp, 3);cursor:not-allowed;}
+  
+}
+
+
+
+
+/*--------各种input---------*/
+
+
+.do-ui-input {width:auto;height:35px;padding:0 5px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:14px;@include ts();color: nth($cd, 2);
+
+  &:focus {background:#fff;border-color:nth($cd, 2);}
+    
+  &::-webkit-input-placeholder {color:nth($cp, 3);}
+  &:disabled {border-color:transparent;background:#fff8ed;color:nth($cgr, 1);cursor:not-allowed;}
+
+}
+
+.do-ui-textarea {width:auto;height:120px;padding:5px 8px;background:nth($cp, 1);border:2px solid transparent;border-radius:5px;font-size:14px;@include ts();color: nth($cd, 2);
+
+  &:focus {background:#fff;border-color:nth($cd, 2);}
+    
+  &:disabled {border-color:transparent;background:#fff8ed;color:nth($cgr, 1);cursor:not-allowed;}
+}
+
+
+/* select框 */
+.do-ui-select  {position:relative;width:auto;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:14px;
+
+    &: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:10px;top:0;width:15px;height:35px;padding:8px 0;
+    i {position:absolute;width:15px;;height:12px;line-height:12px;}
+    i:nth-child(2) {top:15px;}
+  }
+}
+
+/* 单选和复选框 */
+.do-ui-radio,
+.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;padding:0 5px 0 35px;line-height:35px;color:nth($cd, 1);font-size:14px;
+
+  >input {position:absolute;left:7px;top:7px;width:21px;height:21px;border-radius:50%;border:1px solid nth($cp, 3);appearance:none;
+
+    &:checked {box-shadow:0 0 5px nth($cb, 1);}
+    &:checked::after {display:block;width:13px;height:13px;margin:3px;border-radius:50%;background:nth($cgr, 1);content:""}
+
+    &:disabled {background:#fff8ed;box-shadow:none;cursor:not-allowed;}
+    &:disabled:checked::after {background:nth($cp, 3);}
+  }
+
+  &.disabled {color:nth($cp, 3);cursor:not-allowed;}
+}
+
+.do-ui-checkbox {
+
+  >input {border-radius:3px;
+
+    &:checked::after {width:100%;height:100%;margin:0;line-height:19px;font-size:18px;text-align:center;color:nth($cgr, 1);background:none;content:"✓"}
+
+    &:disabled:checked::after {color:nth($cp, 3);background:none;}
+  }
+
+}
+
+
+
+/* 引用文本 */
+.do-ui-quote {display:inline-block;position:relative;min-height:60px;margin:10px 0;padding:15px 10px 5px 50px;border:1px solid nth($cp, 3);border-radius:10px;background:nth($cp, 1);color:nth($cgr, 1);font-size:14px;word-break: break-all;
+
+  i {position:absolute;left:8px;top:0;font-size:30px;line-height:1.5;color:nth($cp, 3);}
+}
+
+/* 提醒文本 */
+.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:40px;margin:5px 0;padding:5px 8px 5px 30px;border:1px solid nth($co, 1);border-radius:5px;background:#fffbed;color:nth($co, 3);font-size:14px;word-break: break-all;
+    
+  p {margin:0!important;}
+  i {position:absolute;left:5px;top:2px;font-size:20px;line-height:1.5;}
+}
+.do-ui-mark {border-color:nth($ct, 2);color:nth($ct, 3);background:#edfbf8;}
\ No newline at end of file
diff --git a/src/css/reset-basic.scss b/src/css/reset-basic.scss
index 3ab3d27..0d1770f 100644
--- a/src/css/reset-basic.scss
+++ b/src/css/reset-basic.scss
@@ -36,7 +36,7 @@ blockquote, q {quotes: none;}
 blockquote::before, blockquote::after,
 q::before, q::after {content: '';content: none;}
 table {border-collapse: collapse;border-spacing: 0;}
-a:focus,input,button:focus,input:focus {outline:none;}
+a:focus,input,textarea,button:focus,input:focus,textarea:focus {outline:none;}
 ::-moz-focus-inner {
     border:none;outline:none;
 }
diff --git a/src/js/marked/theme.scss b/src/js/marked/theme.scss
index eba0f52..271ff18 100644
--- a/src/js/marked/theme.scss
+++ b/src/js/marked/theme.scss
@@ -30,6 +30,7 @@
   a {text-decoration:underline;}
   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);
 
diff --git a/src/js/meditor/index.js b/src/js/meditor/index.js
index 00f4ff0..95223c9 100644
--- a/src/js/meditor/index.js
+++ b/src/js/meditor/index.js
@@ -357,9 +357,11 @@ Anot.component('meditor', {
     })
 
     $editor.bind('scroll', ev => {
-      let syncTop =
-        ev.target.scrollTop / ev.target.scrollHeight * preview.scrollHeight
-
+      let st = ev.target.scrollTop
+      let sh = ev.target.scrollHeight
+      let ch = ev.target.clientHeight
+      let psh = preview.scrollHeight
+      let syncTop = st / (sh - ch) * (psh - ch)
       preview.scrollTop = syncTop
     })
     //编辑器成功加载的回调
diff --git a/src/js/meditor/skin/main.scss b/src/js/meditor/skin/main.scss
index 7dd87c9..a791c1f 100644
--- a/src/js/meditor/skin/main.scss
+++ b/src/js/meditor/skin/main.scss
@@ -34,9 +34,9 @@
     }
   }
 
-  .editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;line-height:2;border:0;outline:none;resize:none;color:#666;background:#fff;font-size:14px;}
+  .editor-body{overflow:hidden;overflow-y:auto;float:left;width:100%;height:100%;padding:5px 5px 50px;line-height:1.5;border:0;outline:none;resize:none;color:nth($cgr, 1);background:#fff;font-size:13px;font-family:"Courier New", "Courier";}
   
-  .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:2;border-left:1px solid #ddd;color:#666;font-size:14px;background:#fff;}
+  .md-preview {float:right;overflow:hidden;overflow-y:auto;display:block;width:50%;height:100%;padding:10px 10px 50px;line-height:1.5;border-left:1px solid nth($cp, 2);color:nth($cd, 1);font-size:14px;background:#fff;}