基础样式优化;分页组件样式优化;增加4个图标字体;
宇天
parent
10f3dedd09
commit
eaa809513e
File diff suppressed because one or more lines are too long
|
|
@ -6,16 +6,7 @@
|
|||
* @version $Id$
|
||||
*/
|
||||
|
||||
$cg: #1abc9c #48c9b0 #16a085;
|
||||
$cb: #3498db #5dade2 #2c81ba;
|
||||
$cr: #e74c3c #ec7063 #c54133;
|
||||
$co: #f39c12 #f1c40f #e67e22;
|
||||
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
||||
$cgr: #34495e #5d6d7e #2c3e50;
|
||||
|
||||
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
|
||||
transition:$c $t $m;
|
||||
}
|
||||
@import "var.scss";
|
||||
|
||||
|
||||
/*--------各种按钮---------*/
|
||||
|
|
@ -60,6 +51,8 @@ $cgr: #34495e #5d6d7e #2c3e50;
|
|||
&.icon-del::after {content:"\e6f0"}
|
||||
&.icon-add::after {content:"\e64c"}
|
||||
&.icon-send::after {content:"\e64b"}
|
||||
&.icon-confirm::after {content:"\e60f"}
|
||||
&.icon-share::after {content:"\e631"}
|
||||
&.icon-bad::after {content:"\e8ee"}
|
||||
&.icon-good::after {content:"\e62d"}
|
||||
&.icon-download::after {content:"\e611"}
|
||||
|
|
@ -79,18 +72,33 @@ $cgr: #34495e #5d6d7e #2c3e50;
|
|||
/*--------各种input---------*/
|
||||
|
||||
|
||||
.do-ui-input {display:inline-block;min-height:30px;padding:0 5px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 1);outline:none;@include ts;
|
||||
|
||||
.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 {border-color:nth($cg, 1);}
|
||||
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
|
||||
&:focus,&:hover {border-color:nth($cg, 1);color:nth($cg, 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)}
|
||||
|
||||
&.area {padding:5px;}
|
||||
&.with-style {display:inline-block;padding:0;
|
||||
|
||||
input {width:100%;height:100%;min-height:30px;padding:0 30px 0 5px;border: 0;background:transparent;}
|
||||
|
||||
&::after {position:absolute;right:0;top:0;width:35px;height:30px;line-height:30px;text-align:center;font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
||||
|
||||
&.icon-user::after {content:"\e6f4"}
|
||||
&.icon-pwd::after {content:"\e655"}
|
||||
&.icon-mail::after {content:"\e66e"}
|
||||
&.icon-date::after {content:"\e650"}
|
||||
&.icon-phone::after {content:"\e651"}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -171,14 +179,15 @@ $cgr: #34495e #5d6d7e #2c3e50;
|
|||
}
|
||||
|
||||
/* 引用文本 */
|
||||
.do-ui-quote {position:relative;min-height:60px;margin:10px 0;padding:15px 5px 5px 50px;border:1px solid #ddd;border-radius:10px;background:#f7f7f7;
|
||||
.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;
|
||||
|
||||
&::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:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3);
|
||||
|
||||
|
||||
p {margin:0!important;}
|
||||
&::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
|
||||
}
|
||||
.do-ui-mark {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
$cg: #1abc9c #48c9b0 #16a085;
|
||||
$cb: #3498db #5dade2 #2c81ba;
|
||||
$cr: #e74c3c #ec7063 #c54133;
|
||||
$co: #f39c12 #fbbb56 #e67e22;
|
||||
$cp: #e7e8eb #ecf0f1 #bdc3c7;
|
||||
$cgr: #34495e #5d6d7e #2c3e50;
|
||||
|
||||
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
|
||||
transition:$c $t $m;
|
||||
}
|
||||
BIN
font/ui-font.eot
BIN
font/ui-font.eot
Binary file not shown.
File diff suppressed because one or more lines are too long
BIN
font/ui-font.ttf
BIN
font/ui-font.ttf
Binary file not shown.
|
|
@ -852,7 +852,7 @@ Renderer.prototype.blockquote = function(quote) {
|
|||
return '<blockquote>\n' + quote + '</blockquote>\n';
|
||||
};
|
||||
Renderer.prototype.mark = function(mark, t) {
|
||||
return '<mark class="' + (t ? 'do-ui-mark' : 'do-ui-warn') + '">\n' + mark + '</mark>\n';
|
||||
return '<mark class="' + (t ? 'do-ui-warn' : 'do-ui-mark') + '">\n' + mark + '</mark>\n';
|
||||
};
|
||||
|
||||
Renderer.prototype.task = function(task, t) {
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@
|
|||
var log = console.log;
|
||||
define([
|
||||
'yua',
|
||||
'lib/prism/main',
|
||||
'lib/marked',
|
||||
'lib/prism/base',
|
||||
'lib/marked/main',
|
||||
'css!./skin/main',
|
||||
], function(yua){
|
||||
|
||||
|
|
|
|||
|
|
@ -1,60 +1 @@
|
|||
.do-pages {height:auto;text-align:center;font-size:13px;}
|
||||
.do-pages a {color:#34495e;}
|
||||
.do-pages.skin-1 {width:100%;}
|
||||
.do-pages.skin-2 {float:right;width:auto;}
|
||||
.do-pages.skin-1 a.normal,
|
||||
.do-pages.skin-1 a.disabled,
|
||||
.do-pages.skin-1 a.curr {display:inline-block;width:auto;min-width:40px;height:40px;padding:0 10px;margin:0 3px;line-height:40px;text-decoration:none;cursor:pointer;}
|
||||
.do-pages.skin-2 a.normal,
|
||||
.do-pages.skin-2 a.disabled,
|
||||
.do-pages.skin-2 a.curr {float:left;width:auto;min-width:40px;height:40px;margin:0;padding:0 5px;line-height:40px;}
|
||||
|
||||
|
||||
.do-pages.green a.normal {background: #1abc9c;color: #fff; }
|
||||
.do-pages.green a.normal:hover {background: #48c9b0; }
|
||||
.do-pages.green.skin-2 a.curr,
|
||||
.do-pages.green a.normal:active {background: #16a085;color: #fff;}
|
||||
|
||||
.do-pages.blue a.normal {background: #3498db;color: #fff; }
|
||||
.do-pages.blue a.normal:hover {background: #5dade2; }
|
||||
.do-pages.blue.skin-2 a.curr,
|
||||
.do-pages.blue a.normal:active {background: #2c81ba;color: #fff;}
|
||||
|
||||
.do-pages.red a.normal {background: #e74c3c;color: #fff; }
|
||||
.do-pages.red a.normal:hover {background: #ec7063; }
|
||||
.do-pages.red.skin-2 a.curr,
|
||||
.do-pages.red a.normal:active {background: #c54133;color: #fff;}
|
||||
|
||||
.do-pages.orange a.normal {background: #f39c12;color: #fff; }
|
||||
.do-pages.orange a.normal:hover {background: #f1c40f; }
|
||||
.do-pages.orange.skin-2 a.curr,
|
||||
.do-pages.orange a.normal:active {background: #e67e22;color: #fff;}
|
||||
|
||||
.do-pages.plain a.normal {background: #e7e8eb;color: #34495e; }
|
||||
.do-pages.plain a.normal:hover {background: #ecf0f1; }
|
||||
.do-pages.plain.skin-2 a.curr,
|
||||
.do-pages.plain a.normal:active {background: #bdc3c7;color: #34495e; }
|
||||
|
||||
.do-pages.grey a.normal {background: #34495e;color: #fff; }
|
||||
|
||||
.do-pages.grey a.normal:hover {background: #5d6d7e; }
|
||||
.do-pages.grey.skin-2 a.curr,
|
||||
.do-pages.grey a.normal:active {background: #2c3e50; color: #fff;}
|
||||
|
||||
.do-pages.skin-1 a.disabled,
|
||||
.do-pages.skin-1 a.curr {background:none;color:#666;cursor:default}
|
||||
|
||||
.do-pages.skin-1 a.disabled {min-width:0;padding:0;}
|
||||
.do-pages.skin-1 a.curr {font-weight:bold;font-size:15px;}
|
||||
|
||||
.do-pages.skin-2 a.disabled {display:none;}
|
||||
|
||||
|
||||
.do-pages.skin-1 .input-box,
|
||||
.do-pages.skin-1 .input-box span,
|
||||
.do-pages.skin-1 .input-box input {display:inline-block}
|
||||
.do-pages.skin-1 .input-box input {width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}
|
||||
.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px;}
|
||||
|
||||
.do-pages.skin-2 .input-box {display:none;}
|
||||
|
||||
.do-pages{height:auto;text-align:center;font-size:13px}.do-pages a{display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color:#34495e;text-decoration:none;cursor:pointer}.do-pages a.curr,.do-pages a.disabled{cursor:default}.do-pages.skin-1{width:100%}.do-pages.skin-1 a.normal,.do-pages.skin-1 a.disabled,.do-pages.skin-1 a.curr{padding:0 10px;margin:0 3px}.do-pages.skin-1 a.curr{font-weight:bold;font-size:15px}.do-pages.skin-1 a.disabled{min-width:0;padding:0}.do-pages.skin-1 .input-box,.do-pages.skin-1 .input-box span,.do-pages.skin-1 .input-box input{display:inline-block}.do-pages.skin-1 .input-box input{width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}.do-pages.skin-1 .input-box a.normal{height:30px;line-height:30px}.do-pages.skin-2{float:right;width:auto}.do-pages.skin-2 a.normal,.do-pages.skin-2 a.disabled,.do-pages.skin-2 a.curr{float:left;margin:0;padding:0 5px;color:#fff}.do-pages.skin-2 a.disabled{display:none}.do-pages.skin-2 .input-box{display:none}.do-pages.plain a.normal{background:#e7e8eb}.do-pages.plain a.normal:hover{background:#ecf0f1}.do-pages.skin-2.plain a.curr,.do-pages.plain a.normal:active{background:#bdc3c7}.do-pages.grey a.normal{background:#34495e;color:#fff}.do-pages.grey a.normal:hover{background:#5d6d7e}.do-pages.skin-2.grey a.curr,.do-pages.grey a.normal:active{background:#2c3e50}.do-pages.red a.normal{background:#e74c3c;color:#fff}.do-pages.red a.normal:hover{background:#ec7063}.do-pages.skin-2.red a.curr,.do-pages.red a.normal:active{background:#c54133}.do-pages.orange a.normal{background:#f39c12;color:#fff}.do-pages.orange a.normal:hover{background:#fbbb56}.do-pages.skin-2.orange a.curr,.do-pages.orange a.normal:active{background:#e67e22}.do-pages.green a.normal{background:#1abc9c;color:#fff}.do-pages.green a.normal:hover{background:#48c9b0}.do-pages.skin-2.green a.curr,.do-pages.green a.normal:active{background:#16a085}.do-pages.blue a.normal{background:#3498db;color:#fff}.do-pages.blue a.normal:hover{background:#5dade2}.do-pages.skin-2.blue a.curr,.do-pages.blue a.normal:active{background:#2c81ba}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
"use strict";
|
||||
define(["yua","text!./main.htm", "css!./main"], function(yua, tpl) {
|
||||
|
||||
yua.ui.pages = '0.0.1'
|
||||
yua.ui.pages = '1.0.0'
|
||||
var colors = {plain: 1, green: 1, blue: 1, red: 1, orange: 1, grey: 1},
|
||||
themes = ['skin-1 ', 'skin-2 '];
|
||||
//计算页码列表
|
||||
|
|
|
|||
|
|
@ -0,0 +1,77 @@
|
|||
@charset "UTF-8";
|
||||
/**
|
||||
*
|
||||
* @authors yutent (yutent@doui.cc)
|
||||
* @date 2017-09-08 20:03:06
|
||||
* @version $Id$
|
||||
*/
|
||||
|
||||
@import "../../../css/var.scss";
|
||||
|
||||
|
||||
.do-pages {height:auto;text-align:center;font-size:13px;
|
||||
|
||||
a {display:inline-block;width:auto;min-width:40px;height:40px;line-height:40px;color: nth($cgr, 1);text-decoration:none;cursor:pointer;}
|
||||
a.curr, a.disabled {cursor:default;}
|
||||
|
||||
&.skin-1 {width:100%;
|
||||
|
||||
a.normal,
|
||||
a.disabled,
|
||||
a.curr {padding:0 10px;margin:0 3px;}
|
||||
|
||||
a.curr {font-weight:bold;font-size:15px;}
|
||||
a.disabled {min-width:0;padding:0}
|
||||
|
||||
.input-box,
|
||||
.input-box span,
|
||||
.input-box input {display:inline-block}
|
||||
.input-box input {width:25px;height:20px;padding:0 3px;background:#fff;border:1px solid #ddd}
|
||||
.input-box a.normal{height:30px;line-height:30px;}
|
||||
}
|
||||
|
||||
|
||||
&.skin-2 {float:right;width:auto;
|
||||
|
||||
a.normal,
|
||||
a.disabled,
|
||||
a.curr {float:left;margin:0;padding:0 5px;color:#fff;}
|
||||
|
||||
a.disabled {display:none;}
|
||||
|
||||
.input-box {display:none;}
|
||||
}
|
||||
|
||||
&.plain a.normal {background:nth($cp, 1)}
|
||||
&.plain a.normal:hover {background:nth($cp, 2)}
|
||||
&.skin-2.plain a.curr,
|
||||
&.plain a.normal:active {background:nth($cp, 3)}
|
||||
|
||||
&.grey a.normal {background:nth($cgr, 1);color: #fff;}
|
||||
&.grey a.normal:hover {background:nth($cgr, 2)}
|
||||
&.skin-2.grey a.curr,
|
||||
&.grey a.normal:active {background:nth($cgr, 3)}
|
||||
|
||||
&.red a.normal {background:nth($cr, 1);color: #fff;}
|
||||
&.red a.normal:hover {background:nth($cr, 2)}
|
||||
&.skin-2.red a.curr,
|
||||
&.red a.normal:active {background:nth($cr, 3)}
|
||||
|
||||
&.orange a.normal {background:nth($co, 1);color: #fff;}
|
||||
&.orange a.normal:hover {background:nth($co, 2)}
|
||||
&.skin-2.orange a.curr,
|
||||
&.orange a.normal:active {background:nth($co, 3)}
|
||||
|
||||
&.green a.normal {background:nth($cg, 1);color: #fff;}
|
||||
&.green a.normal:hover {background:nth($cg, 2)}
|
||||
&.skin-2.green a.curr,
|
||||
&.green a.normal:active {background:nth($cg, 3)}
|
||||
|
||||
&.blue a.normal {background:nth($cb, 1);color: #fff;}
|
||||
&.blue a.normal:hover {background:nth($cb, 2)}
|
||||
&.skin-2.blue a.curr,
|
||||
&.blue a.normal:active {background:nth($cb, 3)}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1 +0,0 @@
|
|||
define(["yua"],function(){function t(){this.table={get:[]},this.errorFn=null,this.history=null,this.hash="",this.started=!1,this.init={}}function e(t){return!t||t===window.name||"_self"===t||"top"===t&&window==window.top}var r={prefix:/^(#!|#)[\/]?/,historyOpen:!0,allowReload:!0},i=!0,a=/(:id)|(\{id\})|(\{id:([A-z\d\,\[\]\{\}\-\+\*\?\!:\^\$]*)\})/g;return t.prototype={error:function(t){this.errorFn=t},config:function(t){if(this.started)return console.error("Router config has been set");this.started=!0,t.allowReload||(t.historyOpen=!0),this.init=yua.mix({},r,t)},_getRegExp:function(t,e){var r=t.replace(a,function(t,e,r,i,a){var n="([\\w.-]";return e||r?n+"+)":(/^\{[\d\,]+\}$/.test(a)||(n="("),n+a+")")});return r=r.replace(/(([^\\])([\/]+))/g,"$2\\/").replace(/(([^\\])([\.]+))/g,"$2\\.").replace(/(([^\\])([\-]+))/g,"$2\\-").replace(/(\(.*)(\\[\-]+)(.*\))/g,"$1-$3"),r="^"+r+"$",e.regexp=new RegExp(r),e},_add:function(t,e,r){this.started||this.config({});var i=this.table[t.toLowerCase()];if("/"===e.charAt(0)){e=e.replace(/^[\/]+|[\/]+$|\s+/g,"");var a={};a.rule=e,a.callback=r,yua.Array.ensure(i,this._getRegExp(e,a))}else console.error('char "/" must be in front of router rule')},_route:function(t,e){var e=e.trim(),r=this.table[t],i=this.init;if(i.allowReload||e!==this.history){i.historyOpen&&(this.history=e,yua.ls&&yua.ls("lastHash",e));for(var a,n=0;a=r[n++];){var o=e.match(a.regexp);if(o)return o.shift(),a.callback.apply(a,o)}this.errorFn&&this.errorFn(e)}},on:function(t,e){var r=this;Array.isArray(t)?t.forEach(function(t){r._add("get",t,e)}):this._add("get",t,e)}},yua.bind(window,"load",function(){if(yua.router.started){var t=yua.router.init.prefix,e=location.hash;e=e.replace(t,"").trim(),yua.router._route("get",e)}}),"onhashchange"in window&&window.addEventListener("hashchange",function(t){if(i){var e=yua.router.init.prefix,r=location.hash.replace(e,"").trim();yua.router._route("get",r)}}),yua.bind(document,"mousedown",function(t){if(!(("defaultPrevented"in t?t.defaultPrevented:!1===t.returnValue)||t.ctrlKey||t.metaKey||2===t.which)){for(var r=t.target;"A"!==r.nodeName;)if(!(r=r.parentNode)||"BODY"===r.tagName)return;if(e(r.target)){if(!yua.router.started)return;var a=r.getAttribute("href")||r.getAttribute("xlink:href"),n=yua.router.init.prefix;if(null===a||!n.test(a))return;yua.router.hash=a.replace(n,"").trim(),t.preventDefault(),location.hash=a,i=!1}}}),yua.bind(document,"mouseup",function(){i||(yua.router._route("get",yua.router.hash),i=!0)}),yua.ui.router="0.0.1",yua.router=new t});
|
||||
Reference in New Issue