button.less

/*
 * name  : BUTTON
 * author: vincent.bian
 * date  : 2016-01-22
*/
.kuma-button {
    
    padding: 0 10px;
    height: 32px;
    border-width: 1px;
    border-style: solid;
    border-radius: 3px;
    font-size: 14px;
    line-height: 32px;
    
    // type
    &-primary {
        background-color: @brand-primary;
        border-color: @brand-primary;
        color: @basic-100;
        
        &:hover {
            background-color: lighten(@brand-primary, 7%);
            border-color: lighten(@brand-primary, 7%);
        }
        &:active {
            background-color: darken(@brand-primary, 2%);
            border-color: darken(@brand-primary, 2%);
        }
    }
    &-outline {
        background-color: lighten(@brand-primary, 50%);
        border-color: @brand-primary;
        color: @brand-primary;
        
        &:hover {
            background-color: lighten(@brand-primary, 42%);
            border-color: lighten(@brand-primary, 7%);
        }
        &:active {
            background-color: lighten(@brand-primary, 40%);
            border-color: darken(@brand-primary, 2%);
        }
    }
    &-secondary {
        background-color: @basic-400;
        border-color: @basic-700;
        color: @gray;
        
        &:hover {
            background-color: lighten(@basic-400, 50%);
        }
        &:active {
            background-color: darken(@basic-400, 2%);
        }
    }
    &-disabled {
        background-color: @basic-600;
        border-color:@basic-700;
        color: @gray-lighter;
        
        cursor: not-allowed;
    }
    
    // size
    &-lg {
        height: 36px;
        line-height: 36px;
    }
    &-sm {
        height: 26px;
        line-height: 26px;
    }
    
    a& {
        display: inline-block;
        text-decoration: none;
    }
}