99 lines
3.3 KiB
SCSS
99 lines
3.3 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;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;}
|
||
|
|
&.radius-3 {border-radius:3px;}
|
||
|
|
&.radius-5 {border-radius:5px;}
|
||
|
|
|
||
|
|
&.green {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:hover {background:nth($cb, 2);}
|
||
|
|
&.blue:active {background:nth($cb, 3);}
|
||
|
|
&.red {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:hover {background:nth($co, 2);}
|
||
|
|
&.orange:active {background:nth($co, 3);}
|
||
|
|
&.plain {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:hover {background:nth($cgr, 2);}
|
||
|
|
&.grey:active {background:nth($cgr, 3);}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*--------各种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)}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.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;
|
||
|
|
|
||
|
|
&::-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:50px;background:#fff;
|
||
|
|
|
||
|
|
>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;
|
||
|
|
|
||
|
|
&:checked {background:nth($cg, 1);}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.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);
|
||
|
|
|
||
|
|
&::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;}
|
||
|
|
}
|
||
|
|
}
|