重新规划目录结构;统一图标字体;重写基础UI样式
parent
aca7d5f8ce
commit
a0cd9be4ba
File diff suppressed because one or more lines are too long
|
@ -16,32 +16,61 @@ $cgr: #34495e #5d6d7e #2c3e50;
|
|||
@mixin ts($c: all, $t: .1s, $m: ease-in-out){
|
||||
transition:$c $t $m;
|
||||
}
|
||||
/*--------各种按钮---------*/
|
||||
.do-ui-button {display:inline-block;padding:0 5px;text-align:center;font-size:12px;@include ts;
|
||||
|
||||
&.medium {min-width:100px;height:35px;line-height:35px;font-size:15px}
|
||||
&.large {min-width:150px;height:50px;line-height:50px;font-size:18px;}
|
||||
|
||||
/*--------各种按钮---------*/
|
||||
.do-ui-button {display:inline-block;padding:0 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;}
|
||||
&.radius-5 {border-radius:5px;}
|
||||
|
||||
&.green {background:nth($cg, 1);color:#fff;}
|
||||
&.green {border:0;background:nth($cg, 1);color:#fff;}
|
||||
&.green:hover {background:nth($cg, 2);}
|
||||
&.green:active {background:nth($cg, 3);}
|
||||
&.blue {background:nth($cb, 1);color:#fff;}
|
||||
&.blue {border:0;background:nth($cb, 1);color:#fff;}
|
||||
&.blue:hover {background:nth($cb, 2);}
|
||||
&.blue:active {background:nth($cb, 3);}
|
||||
&.red {background:nth($cr, 1);color:#fff;}
|
||||
&.red {border:0;background:nth($cr, 1);color:#fff;}
|
||||
&.red:hover {background:nth($cr, 2);}
|
||||
&.red:active {background:nth($cr, 3);}
|
||||
&.orange {background:nth($co, 1);color:#fff;}
|
||||
&.orange {border:0;background:nth($co, 1);color:#fff;}
|
||||
&.orange:hover {background:nth($co, 2);}
|
||||
&.orange:active {background:nth($co, 3);}
|
||||
&.plain {background:nth($cp, 1);color:nth($cgr, 1);}
|
||||
&.plain {border:0;background:nth($cp, 1);color:nth($cgr, 1);}
|
||||
&.plain:hover {background:nth($cp, 2);}
|
||||
&.plain:active {background:nth($cp, 3);}
|
||||
&.grey {background:nth($cgr, 1);color:#fff;}
|
||||
&.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-style,
|
||||
&.large.with-style {position:relative;padding-right:43px;
|
||||
|
||||
&::after {position:absolute;right:0;top:0;width:35px;;text-align:center;background:rgba(0,0,0,.2);font-family:"ui font" !important;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
||||
}
|
||||
&.large.with-style {padding-right:58px;
|
||||
&::after {width:50px;}
|
||||
}
|
||||
|
||||
&.icon-del::after {content:"\e6f0"}
|
||||
&.icon-add::after {content:"\e64c"}
|
||||
&.icon-send::after {content:"\e64b"}
|
||||
&.icon-bad::after {content:"\e8ee"}
|
||||
&.icon-good::after {content:"\e62d"}
|
||||
&.icon-download::after {content:"\e611"}
|
||||
&.icon-upload::after {content:"\e6f7"}
|
||||
&.icon-mac::after {content:"\e60a"}
|
||||
&.icon-ios::after {content:"\e609"}
|
||||
&.icon-windows::after {content:"\e601"}
|
||||
&.icon-linux::after {content:"\e602"}
|
||||
&.icon-android::after {content:"\e600"}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
@ -61,11 +90,12 @@ $cgr: #34495e #5d6d7e #2c3e50;
|
|||
&.alert {border-color:nth($cr, 1);color:nth($cr, 1)}
|
||||
&.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
|
||||
|
||||
&.area {padding:5px;}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.do-ui-select {display:inline-block;min-height:30px;padding:0 5px;border:1px solid nth($cp, 3);background:#fff;color:nth($cgr, 1);outline:none;-moz-appearance: none;@include ts;
|
||||
/* select框 */
|
||||
.do-ui-select {display:inline-block;min-height:30px;padding:0 25px 0 5px;border:1px solid nth($cp, 3);background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAQCAMAAADOBMQXAAAAFVBMVEUAAAD///8wMDAwMDAyMjIzMzMyMjLeZPLMAAAAB3RSTlMAABAwkLDARx1RgwAAAD9JREFUeAGlz0UChFAAgFB+3v/GMwZ2K8u3g7DXI40s6zWnuaXaK7IYVVlElUV14lQik8opw6SyiCqLXB9/0D/ZNQE+FhzMpgAAAABJRU5ErkJggg==) no-repeat right 6px;color:nth($cgr, 1);outline:none;-webkit-appearance:none;-moz-appearance: none;@include ts;
|
||||
|
||||
&::-ms-expand {display:none;}
|
||||
&.radius-3 {border-radius:3px;}
|
||||
|
@ -76,23 +106,49 @@ $cgr: #34495e #5d6d7e #2c3e50;
|
|||
&.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:50px;background:#fff;
|
||||
.do-ui-checkbox {display:inline-block;position:relative;width:auto;height:auto;min-height:30px;padding-left:35px;line-height:30px;border-radius:3px;text-align:center;
|
||||
}
|
||||
.do-ui-radio {padding-left:50px;
|
||||
|
||||
>input {position:absolute;left:25px;top:5px;width:20px;height:20px;outline:none;-webkit-appearance:none;background:#fff;border:2px solid nth($cg, 1);border-radius:3px;
|
||||
>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($cg, 1);}
|
||||
&:checked {background:nth($cg, 2);}
|
||||
&:disabled {background:#fff;}
|
||||
|
||||
&::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($cg, 3);}
|
||||
}
|
||||
}
|
||||
.do-ui-checkbox {
|
||||
>input:checked {box-shadow:inset 0 0 0 2px #fff;}
|
||||
}
|
||||
.do-ui-radio {
|
||||
>input {left:10px;width:35px;border-radius:10px;border-color:nth($cp, 3);background:nth($cp, 3);
|
||||
>input {position:absolute;left:2px;top:2px;width:26px;height:26px;line-height:22px;border:2px solid nth($cp, 3);color:nth($cgr, 2);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;
|
||||
|
||||
&::after {float:left;display:block;width:16px;height:16px;border-radius:50%;content:"";background:#fff;}
|
||||
&:checked {border-color:nth($cg, 1);}
|
||||
&:checked::after {float: right;}
|
||||
&: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)}
|
||||
&.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);color:nth($cgr, 1);
|
||||
|
||||
>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;}
|
||||
&.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);}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
*{margin:0;padding:0;vertical-align:baseline;box-sizing:border-box}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,content{display:block}img{border:0;display:inline-block}ol,ul{list-style:none}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}::-moz-focus-inner{border:none;outline:none}@font-face{font-family:"ui font";src:url("../font/ui-font.eot");src:url("../font/ui-font.ttf") format("truetype")}.do-ui-font{display:inline-block;font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-fn-cl{*zoom:1}.do-fn-cl:after{content:".";display:block;height:0;clear:both;visibility:hidden;overflow:hidden}.do-fn-clear{clear:both;display:inline}.do-fn-show{display:block}.do-fn-hide{display:none}.do-fn-fl{float:left}.do-fn-fr{float:right}.do-fn-noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.do-fn-noselect img,.do-fn-noselect a{-webkit-user-drag:none}.do-fn-ell{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.do-st-thin{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.do-st-hand{cursor:pointer}
|
|
@ -28,10 +28,19 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
|
|||
img {border:0;display:inline-block;}
|
||||
ol, ul {list-style: none;}
|
||||
blockquote, q {quotes: none;}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {content: '';content: 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;}
|
||||
::-moz-focus-inner {
|
||||
border:none;outline:none;
|
||||
}
|
||||
@font-face {font-family: "ui font";
|
||||
src: url('../font/ui-font.eot'); /* IE9*/
|
||||
src: url('../font/ui-font.ttf') format('truetype');
|
||||
}
|
||||
|
||||
.do-ui-font {display:inline-block;font-family:"ui font" !important;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
|
||||
.do-fn-cl { *zoom: 1; }
|
||||
.do-fn-cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow:hidden;}
|
||||
.do-fn-clear {clear:both;display:inline;}
|
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
|
@ -8,7 +8,7 @@
|
|||
"use strict";
|
||||
|
||||
|
||||
define(['yua', 'lib/drag', 'css!./skin/def'], function(yua){
|
||||
define(['yua', 'lib/drag/main', 'css!./skin/def'], function(yua){
|
||||
|
||||
if(window.layer){
|
||||
return window.layer
|
||||
|
|
|
@ -0,0 +1 @@
|
|||
.do-ui-blockcode{position:relative;border:1px solid #ddd;margin:15px 0;padding:8px 0;line-height:1.5;background:#fafafa}.do-ui-blockcode .lang{position:relative;display:block;padding:0 8px;color:#383a42;word-wrap:break-word;white-space:pre-wrap;font-family:Courier}.do-ui-blockcode .lang .c-comment{color:#8e908c;font-style:italic}.do-ui-blockcode .lang .c-smartyx{color:#607d8b}.do-ui-blockcode .lang .c-important{color:#f5871f;font-style:italic}.do-ui-blockcode .lang .c-punctuation{color:#986756}.do-ui-blockcode .lang .c-regex{color:#c82829}.do-ui-blockcode .lang .c-boolean,.do-ui-blockcode .lang .c-number{color:#f5871f}.do-ui-blockcode .lang .c-function{color:#009688}.do-ui-blockcode .lang .c-class-name,.do-ui-blockcode .lang .c-build-in{color:#3aa9f3}.do-ui-blockcode .lang .c-class-name,.do-ui-blockcode .lang .c-build-in{font-style:italic;font-weight:bold}.do-ui-blockcode .lang .c-attr-name,.do-ui-blockcode .lang .c-property{color:#c79f0f;font-weight:bold}.do-ui-blockcode .lang .c-property{font-style:italic}.do-ui-blockcode .lang .c-string,.do-ui-blockcode .lang .c-attr-value{color:#5ab302}.do-ui-blockcode .lang .c-tag,.do-ui-blockcode .lang .c-keyword,.do-ui-blockcode .lang .c-selector,.do-ui-blockcode .lang .c-operator{color:#d81406}.do-ui-blockcode .lang .c-keyword{font-style:italic}.do-ui-inlinecode{margin:0 2px;padding:0 5px;color:#d14;border:1px solid #ddd;border-radius:3px}
|
Reference in New Issue