统一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}
|
&.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);}
|
&:hover {background:nth($cp, 1);}
|
||||||
&:active {background:nth($cp, 3);}
|
&:active {background:nth($cp, 3);}
|
||||||
|
|
|
@ -7,36 +7,26 @@
|
||||||
*/
|
*/
|
||||||
@import "var.scss";
|
@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;}
|
p {margin:15px 0;}
|
||||||
img {max-width:100%;}
|
img {max-width:100%;}
|
||||||
|
|
||||||
blockquote {
|
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;}
|
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;
|
.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;}
|
.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;
|
table {width:100%;line-height:25px;
|
||||||
thead tr {height:45px;background:nth($cp, 1)}
|
thead tr {height:45px;background:nth($cp, 1)}
|
||||||
thead th {padding:10px 8px;border:0;}
|
thead th {padding:10px 8px;border:0;}
|
||||||
tbody tr {height:auto;@include ts(all, .3s);
|
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;
|
section {display:block;width:100%;height:auto;margin:10px 0;line-height:35px;
|
||||||
|
|
||||||
.label {float: left;width:80px;}
|
.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;}
|
&::-ms-expand {display:none;}
|
||||||
|
|
||||||
&:focus {box-shadow:0 0 5px nth($ct, 1)}
|
&: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)}
|
&:focus {box-shadow:0 0 5px nth($ct, 1)}
|
||||||
}
|
}
|
||||||
|
|
|
@ -384,10 +384,11 @@ const addon = {
|
||||||
},
|
},
|
||||||
blockcode: function(elem) {
|
blockcode: function(elem) {
|
||||||
let that = this
|
let that = this
|
||||||
|
let offset = Anot(elem).offset()
|
||||||
layer.open({
|
layer.open({
|
||||||
type: 7,
|
type: 7,
|
||||||
title: '添加代码块',
|
title: '添加代码块',
|
||||||
$lang: [
|
__lang__: [
|
||||||
{ id: 'asp' },
|
{ id: 'asp' },
|
||||||
{ id: 'actionscript', name: 'ActionScript(3.0)/Flash/Flex' },
|
{ id: 'actionscript', name: 'ActionScript(3.0)/Flash/Flex' },
|
||||||
{ id: 'bash', name: 'Bash/Shell/Bat' },
|
{ id: 'bash', name: 'Bash/Shell/Bat' },
|
||||||
|
@ -426,6 +427,8 @@ const addon = {
|
||||||
lang: 'javascript',
|
lang: 'javascript',
|
||||||
code: '',
|
code: '',
|
||||||
maskClose: true,
|
maskClose: true,
|
||||||
|
offset: [offset.top + 35 - $doc.scrollTop()],
|
||||||
|
shift: { top: offset.top - $doc.scrollTop() },
|
||||||
insert: function() {
|
insert: function() {
|
||||||
let val = `\n\`\`\`${this.lang}\n${this.code ||
|
let val = `\n\`\`\`${this.lang}\n${this.code ||
|
||||||
'// 在此输入代码'}\n\`\`\`\n`
|
'// 在此输入代码'}\n\`\`\`\n`
|
||||||
|
@ -437,7 +440,7 @@ const addon = {
|
||||||
<section class="do-fn-cl">
|
<section class="do-fn-cl">
|
||||||
<span class="label">语言类型</span>
|
<span class="label">语言类型</span>
|
||||||
<select :duplex="lang">
|
<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>
|
</select>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
|
|
Reference in New Issue