重构基础元素UI;优化marked主题样式;优化编辑器滚动同步
宇天
parent
0f20fc7c78
commit
95ba80f388
|
|
@ -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";}
|
||||
}
|
||||
|
|
@ -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;}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
})
|
||||
//编辑器成功加载的回调
|
||||
|
|
|
|||
|
|
@ -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;}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Reference in New Issue