187 lines
7.7 KiB
SCSS
187 lines
7.7 KiB
SCSS
@charset "UTF-8";
|
|
/**
|
|
*
|
|
* @authors yutent (yutent@doui.cc)
|
|
* @date 2017-05-20 21:35:30
|
|
* @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;
|
|
}
|
|
|
|
|
|
/*--------各种按钮---------*/
|
|
.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 {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);}
|
|
&.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-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"}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/*--------各种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;
|
|
|
|
&::-webkit-input-placeholder {color:nth($cp, 3);}
|
|
|
|
&.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)}
|
|
&.disabled {border-color:transparent;background:nth($cp, 1);color:nth($cp, 3)}
|
|
|
|
&.area {padding:5px;}
|
|
}
|
|
|
|
|
|
/* 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;}
|
|
&.radius-5 {border-radius:5px;}
|
|
|
|
&:focus {border-color:nth($cg, 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;text-align:center;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);}
|
|
}
|
|
&.blue >input:checked {background:nth($cb, 2);
|
|
&::after {background:nth($cb, 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)}
|
|
&.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);
|
|
|
|
>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);}
|
|
}
|
|
}
|
|
|
|
/* 引用文本 */
|
|
.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;
|
|
|
|
&::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cp, 3);content:"\e61b";}
|
|
}
|
|
|
|
/* 提醒文本 */
|
|
.do-ui-warn,.do-ui-notice {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);
|
|
|
|
&::before {position:absolute;left:8px;top:0;font:30px/1.5 "ui font";color:nth($cr, 1);content:"\e6f6";}
|
|
}
|
|
.do-ui-notice {border-color:nth($cg, 2);color:nth($cg, 3);background:#edfbf8;
|
|
|
|
&::before {color:nth($cg, 3);content:"\e657";}
|
|
} |
JavaScript
95.2%
CSS
4.8%