wcui/css/basic-elem.scss

@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: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-confirm::after {content:"\e60f"}
    &.icon-share::after {content:"\e631"}
    &.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 {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($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)}
    
    &.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"}
    }
}


/* 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;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);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;}
        &.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:50px;margin:10px 0;padding:8px 8px 8px 50px;border:1px solid nth($co, 1);border-radius:10px;background:#fffbed;color:nth($co, 3);word-break: break-all;
    
    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;

    &::before {color:nth($cg, 3);content:"\e657";}
}