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

重构基础元素UI;优化marked主题样式;优化编辑器滚动同步

old
宇天 2018-07-28 17:44:55 +08:00
parent 0f20fc7c78
commit 95ba80f388
6 changed files with 136 additions and 204 deletions

View File

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

127
src/css/elem-ui.scss Normal file
View File

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

View File

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

View File

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

View File

@ -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
})
//编辑器成功加载的回调

View File

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