This repository has been archived on 2023-08-30. You can view files and clone it, but cannot push or open issues/pull-requests.
bytedo
/
wcui
Archived
1
0
Fork 0
Code Issues Pull Requests Wiki Activity

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

old
宇天 2018-08-08 20:23:37 +08:00
parent d95f1bc9fc
commit 5c5211e84f
4 changed files with 128 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/css/elem-ui.scss
View File

@ -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);}

147
src/css/marked.scss
View File

@ -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);}
}

6
src/css/meditor.scss
View File

@ -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)}
}

7
src/meditor/addon/base.js
View File

@ -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>