@import "../../less/config/main";
@prex: cui;


//button样式设置
.button-set(@padding,@height,@fontSize:14px,@bold:normal){
    display: inline-block;
    zoom: 1;
    line-height: normal;
    white-space: nowrap;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: @padding;
    height: @height;
    font-size: @fontSize;
    line-height: @height;
    border-radius: 2px;
    //display: table;
    font-weight: @bold;
    box-sizing: content-box;
    &:active,
    &:hover,
    &:visited,
    &:focus {
        text-decoration: none;
        outline: none;
    }
    >span,>i{
        // display: table-cell;
        // vertical-align: middle;
    }
    >i{
        padding-right: 4px;
    }
}
.color-set(@bc,@c,@bdc){
    background-color: @bc;
    color:@c;
    border:1px solid @bdc;
    &:active,
    &:hover,
    &:visited,
    &:focus {
        color:@c;
    }
    &:hover{
        //背景色混合不透明度黑色的10%
        background-color:multiply(@bc,fade(@c-common-black, 5%));
    }
    &:active{
        //背景色混合不透明度黑色的10%
        background-color:multiply(@bc,fade(@c-common-black, 20%));
    }
    &.locked{
        border-color: multiply(@bdc,fade(@c-common-black, 50%));
        background-color:multiply(@bc,fade(@c-common-black, 50%));
        color:multiply(@c,fade(@c-common-black, 50%));
        cursor:no-drop;
    }
}

.@{prex}-button {
    .button-set(0 25px,32px);
    .color-set(@c-common-white,@c-important-a,@c-important-a);

    &.preset-larger{
        .button-set(0 35px,42px);
        font-size: 16px;
    }

    //color-preset
    &.preset-blue{
        .color-set(@c-important-a,@c-common-white,@c-important-a);
    }
    &.preset-green{
        .color-set(@c-important-c,@c-common-white,@c-important-c);
    }
    &.preset-red{
        .color-set(@c-important-d,@c-common-white,@c-important-d);
    }
}