diff --git a/css/basic-elem.css b/css/basic-elem.css index 691503c..f018693 100644 --- a/css/basic-elem.css +++ b/css/basic-elem.css @@ -1 +1 @@ -.do-ui-button{display:inline-block;padding:0 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.green{border:0;background:#1abc9c;color:#fff}.do-ui-button.green:hover{background:#48c9b0}.do-ui-button.green:active{background:#16a085}.do-ui-button.blue{border:0;background:#3498db;color:#fff}.do-ui-button.blue:hover{background:#5dade2}.do-ui-button.blue:active{background:#2c81ba}.do-ui-button.red{border:0;background:#e74c3c;color:#fff}.do-ui-button.red:hover{background:#ec7063}.do-ui-button.red:active{background:#c54133}.do-ui-button.orange{border:0;background:#f39c12;color:#fff}.do-ui-button.orange:hover{background:#f1c40f}.do-ui-button.orange:active{background:#e67e22}.do-ui-button.plain{border:0;background:#e7e8eb;color:#34495e}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{border:0;background:#34495e;color:#fff}.do-ui-button.grey:hover{background:#5d6d7e}.do-ui-button.grey:active{background:#2c3e50}.do-ui-button.disabled{border-color:#e7e8eb;color:#bdc3c7;cursor:not-allowed}.do-ui-button.medium.with-style,.do-ui-button.large.with-style{position:relative;padding-right:43px}.do-ui-button.medium.with-style::after,.do-ui-button.large.with-style::after{position:absolute;right:0;top:0;width:35px;text-align:center;background:rgba(0,0,0,0.2);font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-button.large.with-style{padding-right:58px}.do-ui-button.large.with-style::after{width:50px}.do-ui-button.icon-del::after{content:"\e6f0"}.do-ui-button.icon-add::after{content:"\e64c"}.do-ui-button.icon-send::after{content:"\e64b"}.do-ui-button.icon-bad::after{content:"\e8ee"}.do-ui-button.icon-good::after{content:"\e62d"}.do-ui-button.icon-download::after{content:"\e611"}.do-ui-button.icon-upload::after{content:"\e6f7"}.do-ui-button.icon-mac::after{content:"\e60a"}.do-ui-button.icon-ios::after{content:"\e609"}.do-ui-button.icon-windows::after{content:"\e601"}.do-ui-button.icon-linux::after{content:"\e602"}.do-ui-button.icon-android::after{content:"\e600"}.do-ui-input{display:inline-block;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#34495e;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus{border-color:#1abc9c}.do-ui-input.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-input.area{padding:5px}.do-ui-select{display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid #bdc3c7;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:#34495e;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select.radius-3{border-radius:3px}.do-ui-select.radius-5{border-radius:5px}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.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;text-align:center;color:#34495e}.do-ui-radio{padding-left:50px}.do-ui-radio>input{position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:#bdc3c7;-webkit-appearance:none;-moz-appearance:none}.do-ui-radio>input:checked{background:#bdc3c7}.do-ui-radio>input:disabled{background:#ecf0f1}.do-ui-radio>input:disabled:checked{background:#bdc3c7}.do-ui-radio>input::after{position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:#ecf0f1;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.do-ui-radio>input:checked::after{left:auto;right:-2px;background:#5d6d7e}.do-ui-radio>input:checked:disabled::after{background:#bdc3c7}.do-ui-radio.green>input:checked{background:#48c9b0}.do-ui-radio.green>input:checked::after{background:#16a085}.do-ui-radio.blue>input:checked{background:#5dade2}.do-ui-radio.blue>input:checked::after{background:#2c81ba}.do-ui-radio.red>input:checked{background:#ec7063}.do-ui-radio.red>input:checked::after{background:#c54133}.do-ui-radio.orange>input:checked{background:#f1c40f}.do-ui-radio.orange>input:checked::after{background:#e67e22}.do-ui-radio.grey>input:checked{background:#5d6d7e}.do-ui-radio.grey>input:checked::after{background:#2c3e50}.do-ui-radio.disabled{color:#bdc3c7}.do-ui-checkbox>input{position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid #bdc3c7;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}.do-ui-checkbox>input:checked::after{content:"\e60f"}.do-ui-checkbox>input:disabled{border-color:#bdc3c7;color:#bdc3c7}.do-ui-checkbox.green>input{color:#1abc9c !important;border-color:#1abc9c}.do-ui-checkbox.blue>input{color:#3498db !important;border-color:#3498db}.do-ui-checkbox.red>input{color:#e74c3c !important;border-color:#e74c3c}.do-ui-checkbox.orange>input{color:#f39c12 !important;border-color:#f39c12}.do-ui-checkbox.grey>input{color:#34495e !important;border-color:#34495e}.do-ui-checkbox.disabled{color:#bdc3c7}.do-ui-checkbox.with-style{padding-left:5px;padding-right:35px;line-height:26px;border:2px solid #e7e8eb;background:#e7e8eb}.do-ui-checkbox.with-style>input{left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:#5d6d7e}.do-ui-checkbox.with-style>input:disabled{color:#bdc3c7 !important}.do-ui-checkbox.with-style.green{border-color:#1abc9c;background:#1abc9c;color:#fff}.do-ui-checkbox.with-style.blue{border-color:#3498db;background:#3498db;color:#fff}.do-ui-checkbox.with-style.red{border-color:#e74c3c;background:#e74c3c;color:#fff}.do-ui-checkbox.with-style.orange{border-color:#f39c12;background:#f39c12;color:#fff}.do-ui-checkbox.with-style.grey{border-color:#34495e;background:#34495e;color:#fff}.do-ui-checkbox.with-style.disabled{border-color:#e7e8eb;background:#e7e8eb;color:#bdc3c7}.do-ui-quote{position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7}.do-ui-quote::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#bdc3c7;content:"\e61b"}.do-ui-warn,.do-ui-notice{position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid #f39c12;border-radius:10px;background:#fffbed;color:#e67e22}.do-ui-warn::before,.do-ui-notice::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#e74c3c;content:"\e6f6"}.do-ui-notice{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-ui-notice::before{color:#16a085;content:"\e657"} +.do-ui-button{display:inline-block;padding:0 5px;border:1px solid #ddd;text-align:center;font-size:12px;background:none;cursor:pointer;transition:all .1s ease-in-out}.do-ui-button.medium{min-width:100px;height:35px;padding:0 8px;line-height:35px;font-size:15px}.do-ui-button.large{min-width:150px;height:50px;padding:0 13px;line-height:50px;font-size:18px}.do-ui-button.radius-3{border-radius:3px}.do-ui-button.radius-5{border-radius:5px}.do-ui-button.green{border:0;background:#1abc9c;color:#fff}.do-ui-button.green:hover{background:#48c9b0}.do-ui-button.green:active{background:#16a085}.do-ui-button.blue{border:0;background:#3498db;color:#fff}.do-ui-button.blue:hover{background:#5dade2}.do-ui-button.blue:active{background:#2c81ba}.do-ui-button.red{border:0;background:#e74c3c;color:#fff}.do-ui-button.red:hover{background:#ec7063}.do-ui-button.red:active{background:#c54133}.do-ui-button.orange{border:0;background:#f39c12;color:#fff}.do-ui-button.orange:hover{background:#f1c40f}.do-ui-button.orange:active{background:#e67e22}.do-ui-button.plain{border:0;background:#e7e8eb;color:#34495e}.do-ui-button.plain:hover{background:#ecf0f1}.do-ui-button.plain:active{background:#bdc3c7}.do-ui-button.grey{border:0;background:#34495e;color:#fff}.do-ui-button.grey:hover{background:#5d6d7e}.do-ui-button.grey:active{background:#2c3e50}.do-ui-button.disabled{border-color:#e7e8eb;color:#bdc3c7;cursor:not-allowed}.do-ui-button.medium.with-style,.do-ui-button.large.with-style{position:relative;padding-right:43px}.do-ui-button.medium.with-style::after,.do-ui-button.large.with-style::after{position:absolute;right:0;top:0;width:35px;text-align:center;background:rgba(0,0,0,0.2);font-family:"ui font" !important;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-ui-button.large.with-style{padding-right:58px}.do-ui-button.large.with-style::after{width:50px}.do-ui-button.icon-del::after{content:"\e6f0"}.do-ui-button.icon-add::after{content:"\e64c"}.do-ui-button.icon-send::after{content:"\e64b"}.do-ui-button.icon-bad::after{content:"\e8ee"}.do-ui-button.icon-good::after{content:"\e62d"}.do-ui-button.icon-download::after{content:"\e611"}.do-ui-button.icon-upload::after{content:"\e6f7"}.do-ui-button.icon-mac::after{content:"\e60a"}.do-ui-button.icon-ios::after{content:"\e609"}.do-ui-button.icon-windows::after{content:"\e601"}.do-ui-button.icon-linux::after{content:"\e602"}.do-ui-button.icon-android::after{content:"\e600"}.do-ui-input{display:inline-block;min-height:30px;padding:0 5px;border:1px solid #bdc3c7;background:#fff;color:#34495e;outline:none;transition:all .1s ease-in-out}.do-ui-input::-webkit-input-placeholder{color:#bdc3c7}.do-ui-input.radius-3{border-radius:3px}.do-ui-input.radius-5{border-radius:5px}.do-ui-input:focus{border-color:#1abc9c}.do-ui-input.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-input.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.do-ui-input.area{padding:5px}.do-ui-select{display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid #bdc3c7;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:#34495e;outline:none;-webkit-appearance:none;-moz-appearance:none;transition:all .1s ease-in-out}.do-ui-select::-ms-expand{display:none}.do-ui-select.radius-3{border-radius:3px}.do-ui-select.radius-5{border-radius:5px}.do-ui-select:focus{border-color:#1abc9c}.do-ui-select.alert{border-color:#e74c3c;color:#e74c3c}.do-ui-select.disabled{border-color:transparent;background:#e7e8eb;color:#bdc3c7}.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:#34495e}.do-ui-radio{padding-left:50px}.do-ui-radio>input{position:absolute;left:10px;top:10px;width:35px;height:10px;border-radius:10px;border:0;background:#bdc3c7;-webkit-appearance:none;-moz-appearance:none}.do-ui-radio>input:checked{background:#bdc3c7}.do-ui-radio>input:disabled{background:#ecf0f1}.do-ui-radio>input:disabled:checked{background:#bdc3c7}.do-ui-radio>input::after{position:absolute;display:block;left:-2px;top:-5px;width:20px;height:20px;border-radius:50%;content:"";background:#ecf0f1;box-shadow:0 1px 2px rgba(0,0,0,0.2)}.do-ui-radio>input:checked::after{left:auto;right:-2px;background:#5d6d7e}.do-ui-radio>input:checked:disabled::after{background:#bdc3c7}.do-ui-radio.green>input:checked{background:#48c9b0}.do-ui-radio.green>input:checked::after{background:#16a085}.do-ui-radio.blue>input:checked{background:#5dade2}.do-ui-radio.blue>input:checked::after{background:#2c81ba}.do-ui-radio.red>input:checked{background:#ec7063}.do-ui-radio.red>input:checked::after{background:#c54133}.do-ui-radio.orange>input:checked{background:#f1c40f}.do-ui-radio.orange>input:checked::after{background:#e67e22}.do-ui-radio.grey>input:checked{background:#5d6d7e}.do-ui-radio.grey>input:checked::after{background:#2c3e50}.do-ui-radio.disabled{color:#bdc3c7}.do-ui-checkbox>input{position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid #bdc3c7;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}.do-ui-checkbox>input:checked::after{content:"\e60f"}.do-ui-checkbox>input:disabled{border-color:#bdc3c7;color:#bdc3c7}.do-ui-checkbox.green>input{color:#1abc9c !important;border-color:#1abc9c}.do-ui-checkbox.blue>input{color:#3498db !important;border-color:#3498db}.do-ui-checkbox.red>input{color:#e74c3c !important;border-color:#e74c3c}.do-ui-checkbox.orange>input{color:#f39c12 !important;border-color:#f39c12}.do-ui-checkbox.grey>input{color:#34495e !important;border-color:#34495e}.do-ui-checkbox.disabled{color:#bdc3c7}.do-ui-checkbox.with-style{padding-left:5px;padding-right:35px;line-height:26px;border:2px solid #e7e8eb;background:#e7e8eb;text-align:center}.do-ui-checkbox.with-style>input{left:auto;right:0;top:0;line-height:26px;border:0;background:#fff;color:#5d6d7e}.do-ui-checkbox.with-style>input:disabled{color:#bdc3c7 !important}.do-ui-checkbox.with-style.green{border-color:#1abc9c;background:#1abc9c;color:#fff}.do-ui-checkbox.with-style.blue{border-color:#3498db;background:#3498db;color:#fff}.do-ui-checkbox.with-style.red{border-color:#e74c3c;background:#e74c3c;color:#fff}.do-ui-checkbox.with-style.orange{border-color:#f39c12;background:#f39c12;color:#fff}.do-ui-checkbox.with-style.grey{border-color:#34495e;background:#34495e;color:#fff}.do-ui-checkbox.with-style.disabled{border-color:#e7e8eb;background:#e7e8eb;color:#bdc3c7}.do-ui-quote{position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7}.do-ui-quote::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#bdc3c7;content:"\e61b"}.do-ui-warn,.do-ui-mark{display:inline-block;position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid #f39c12;border-radius:10px;background:#fffbed;color:#e67e22}.do-ui-warn::before,.do-ui-mark::before{position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:#e74c3c;content:"\e6f6"}.do-ui-mark{border-color:#48c9b0;color:#16a085;background:#edfbf8}.do-ui-mark::before{color:#16a085;content:"\e657"} diff --git a/css/basic-elem.scss b/css/basic-elem.scss index 97b2487..7eab763 100644 --- a/css/basic-elem.scss +++ b/css/basic-elem.scss @@ -108,7 +108,7 @@ $cgr: #34495e #5d6d7e #2c3e50; /* 单选和复选框 */ .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;text-align:center;color:nth($cgr, 1); +.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; @@ -154,7 +154,7 @@ $cgr: #34495e #5d6d7e #2c3e50; &.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); + &.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;} @@ -177,11 +177,11 @@ $cgr: #34495e #5d6d7e #2c3e50; } /* 提醒文本 */ -.do-ui-warn,.do-ui-notice {position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3); +.do-ui-warn,.do-ui-mark {display:inline-block;position:relative;min-height:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3); &::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";} } -.do-ui-notice {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8; +.do-ui-mark {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8; &::before {color:nth($cg, 3);content:"\e657";} } \ No newline at end of file diff --git a/js/lib/marked/main.js b/js/lib/marked/main.js index e2f2753..f3b701a 100644 --- a/js/lib/marked/main.js +++ b/js/lib/marked/main.js @@ -19,6 +19,8 @@ var block = { nptable: noop, lheading: /^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/, blockquote: /^( *>[^\n]+(\n(?!def)[^\n]+)*\n*)+/, + mark: /^( *;;;([\!]?)[^\n]+(\n(?!def)[^\n]+)*\n*)+/, + task: /^ *- *\[([ x]?)\] *([^\n]*)/, list: /^( *)(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/, html: /^ *(?:comment *(?:\n|\s*$)|closed *(?:\n{2,}|\s*$)|closing *(?:\n{2,}|\s*$))/, def: /^ *\[([^\]]+)\]: *]+)>?(?: +["(]([^\n]+)[")])? *(?:\n+|$)/, @@ -42,6 +44,9 @@ block.list = replace(block.list) block.blockquote = replace(block.blockquote) ('def', block.def) (); +block.mark = replace(block.mark) +('def', block.def) +(); block._tag = '(?!(?:' + 'a|em|strong|small|s|cite|q|dfn|abbr|data|time|code' @@ -279,6 +284,38 @@ Lexer.prototype.token = function(src, top, bq) { continue; } + // mark + if (cap = this.rules.mark.exec(src)) { + src = src.substring(cap[0].length); + + this.tokens.push({ + type: 'mark_start' + }); + var sign = cap[2] === '!' + cap = cap[0].replace(/^ *;;;[\!]? ?/gm, ''); + + this.token(cap, top, true); + + this.tokens.push({ + type: 'mark_end', + mark: sign + }); + + continue; + } + + if (cap = this.rules.task.exec(src)) { + src = src.substring(cap[0].length); + + this.tokens.push({ + type: 'task', + mark: cap[1] === 'x', + text: cap[2] + }); + + continue; + } + // list if (cap = this.rules.list.exec(src)) { src = src.substring(cap[0].length); @@ -799,15 +836,11 @@ Renderer.prototype.code = function(code, lang, escaped) { } } - output += /*'
' - + idx - + '.' - + */'' - + codes[idx - 1] - + '\n' //加\n为了避免空行时无法显示 - // + '
' + output += '' + + codes[idx - 1] + + '\n' //加\n为了避免空行时无法显示 } return '
'
@@ -818,6 +851,14 @@ Renderer.prototype.code = function(code, lang, escaped) {
 Renderer.prototype.blockquote = function(quote) {
     return '
\n' + quote + '
\n';
 };
+Renderer.prototype.mark = function(mark, t) {
+    return '\n' + mark + '\n';
+};
+
+Renderer.prototype.task = function(task, t) {
+    task = t ? ('' + task + '') : task
+    return '
\n';
+};
 
 Renderer.prototype.html = function(html) {
     return html;
@@ -1078,6 +1119,18 @@ Parser.prototype.tok = function() {
 
             return this.renderer.blockquote(body);
         }
+        case 'mark_start': {
+            var body = '';
+
+            while (this.next().type !== 'mark_end') {
+                body += this.tok();
+            }
+            return this.renderer.mark(body, this.token.mark);
+        }
+        case 'task': {
+            log(this.token)
+            return this.renderer.task(this.token.text, this.token.mark)
+        }
         case 'list_start': {
             var body = ''
                 , ordered = this.token.ordered;