统一button,input,select等UI元素的尺寸;优化markdown样式,同时增加一套gfm主题和一套vue主题;meditor代码块插件样式调整
parent
d95f1bc9fc
commit
5c5211e84f
|
@ -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}
|
||||
&.large {min-width:130px;height:45px;padding:0 13px;line-height:45px;border-radius:5px;font-size:18px;}
|
||||
&.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:3px;font-size:18px;}
|
||||
|
||||
&:hover {background:nth($cp, 1);}
|
||||
&:active {background:nth($cp, 3);}
|
||||
|
|
|
@ -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;}
|
||||
h1.md-head {padding-left:0;}
|
||||
.md-head span {position:relative;display:inline-block;padding:0 8px;background:#fff;color:#454545}
|
||||
.md-head a {padding:0 3px;font-weight:bold;text-decoration:none;}
|
||||
.md-head a:hover {transform:scale(1.2)}
|
||||
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)}
|
||||
a {text-decoration:underline;color:nth($cb, 2)}
|
||||
a:hover {color:nth($cb, 1);text-decoration:none;}
|
||||
em {color:nth($cgr, 3);}
|
||||
strong {color:nth($cd, 3);}
|
||||
em,strong,del {padding:0 3px;}
|
||||
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;}
|
||||
li ul {margin-left:2em;list-style-type: circle;}
|
||||
li ol ul,
|
||||
li ul ul {list-style-type: square;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.do-marked-theme-gfm,
|
||||
.do-marked-theme-vue {
|
||||
|
||||
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);}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -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)}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Reference in New Issue